/**
 * SmartTooltip - Viewport-aware tooltip
 */

.tt {
    position: relative;
    display: inline-flex;
}

/* Full width variant - use when tooltip wraps a block-level element */
.tt--block {
    display: flex;
    width: 100%;
}

.tt__tooltip {
    position: fixed;
    z-index: 9999;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ui-text) 18%, transparent);
    width: max-content;
    max-width: 260px;
    text-align: center;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.tt__tooltip--open {
    opacity: 1;
    transform: translateY(0);
}
/**
 * Organization Context Switcher Styles
 * 
 * Uses --ui-* CSS variables for theming.
 */

.org-context-switcher {
  position: relative;
}

.org-context-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
  color: var(--ui-text);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.org-context-trigger:hover {
  background: color-mix(in srgb, var(--ui-text) 10%, transparent);
  border-color: var(--ui-text-muted);
}

.org-context-trigger:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}

.org-context-label {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-context-chevron {
  transition: transform 0.15s ease;
  color: var(--ui-text-muted);
}

/* Role badges */
.org-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: capitalize;
}

.org-role-badge--small {
  padding: 0.0625rem 0.375rem;
  font-size: 0.6875rem;
}

.org-role-badge--admin {
  background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
  color: var(--ui-primary);
}

.org-role-badge--manager {
  background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
  color: var(--ui-accent);
}

.org-role-badge--host {
  background: color-mix(in srgb, var(--ui-success) 15%, transparent);
  color: var(--ui-success);
}

.org-role-badge--viewer {
  background: color-mix(in srgb, var(--ui-text-muted) 15%, transparent);
  color: var(--ui-text-muted);
}

/* Dropdown menu */
.org-context-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 220px;
  margin-top: 0.5rem;
  padding: 0.5rem 0;
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
  background: var(--ui-surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.org-context-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  color: var(--ui-text);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.org-context-menu-item:hover {
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.org-context-menu-item--active {
  color: var(--ui-primary);
}

.org-context-menu-item--action {
  color: var(--ui-primary);
  gap: 0.5rem;
  justify-content: flex-start;
}

.org-context-menu-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.org-context-menu-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-context-check {
  color: var(--ui-primary);
  flex-shrink: 0;
}

.org-context-plus {
  flex-shrink: 0;
}

.org-context-divider {
  height: 1px;
  margin: 0.5rem 0;
  background: var(--ui-border);
}
/**
 * Create Organization Modal Styles
 * 
 * Uses --ui-* CSS variables for theming.
 */

.create-org-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem;
}

.create-org-modal {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 0.75rem;
  background: var(--ui-surface);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.create-org-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--ui-border);
}

.create-org-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ui-text);
}

.create-org-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: none;
  border-radius: 0.25rem;
  background: none;
  color: var(--ui-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.create-org-modal-close:hover {
  background: color-mix(in srgb, var(--ui-text) 10%, transparent);
  color: var(--ui-text);
}

.create-org-modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.create-org-error {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
  color: var(--ui-error);
  font-size: 0.875rem;
}

.create-org-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.create-org-field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ui-text);
}

.create-org-field-hint {
  font-weight: 400;
  color: var(--ui-text-muted);
  font-size: 0.75rem;
}

.create-org-field input,
.create-org-field textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.375rem;
  background: var(--board-bg);
  color: var(--ui-text);
  font-size: 0.875rem;
  font-family: inherit;
  transition: all 0.15s ease;
}

.create-org-field input:focus,
.create-org-field textarea:focus {
  outline: none;
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}

.create-org-field input::placeholder,
.create-org-field textarea::placeholder {
  color: var(--ui-text-muted);
}

.create-org-field textarea {
  resize: vertical;
  min-height: 80px;
}

.create-org-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--ui-border);
}

.create-org-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.create-org-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.create-org-btn--secondary {
  background: color-mix(in srgb, var(--ui-text) 10%, transparent);
  color: var(--ui-text);
}

.create-org-btn--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-text) 15%, transparent);
}

.create-org-btn--primary {
  background: var(--ui-primary);
  color: var(--ui-on-primary);
}

.create-org-btn--primary:hover:not(:disabled) {
  background: var(--ui-primary-hover);
}
/**
 * CSS Motion Utilities
 *
 * CSS-based animations for use inside route pages where framer-motion
 * declarative variants conflict with AnimatedOutlet's variant propagation.
 *
 * Import in components: import '../../theme/motion.css';
 */

/* =============================================================================
   STAGGER - List item entrance animation
   ============================================================================= */

@keyframes stagger-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stagger-item {
    animation: stagger-fade-in 0.3s ease-out both;
}

/* =============================================================================
   HOVER LIFT - Card hover effect
   ============================================================================= */

.hover-lift {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.hover-lift:hover {
    transform: translateY(-2px) scale(1.01);
}

.hover-lift:active {
    transform: scale(0.99);
}

/* =============================================================================
   CONTENT REVEAL - Fade in on mount
   ============================================================================= */

@keyframes content-reveal {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-reveal {
    animation: content-reveal 0.3s ease-out both;
}

/* =============================================================================
   ACCESSIBILITY - Reduced motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .stagger-item {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .hover-lift {
        transition: none !important;
    }

    .hover-lift:hover {
        transform: none !important;
    }

    .content-reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
.whats-new-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.whats-new-container {
    width: 100%;
    max-width: 36rem;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 12px;
    padding: 1.5rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.whats-new-header {
    text-align: center;
    margin-bottom: 1.25rem;
}

.whats-new-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0;
}

.whats-new-caught-up {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-success) 10%, transparent);
    color: var(--ui-success);
    font-size: 0.875rem;
    font-weight: 500;
}

.whats-new-caught-up-sub {
    text-align: center;
    margin-top: 0.5rem;
    color: var(--ui-text-muted);
    font-size: 0.8125rem;
}

.whats-new-entries {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.whats-new-entry {
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface-muted);
    transition: background 150ms ease;
}

.whats-new-entry:hover {
    background: color-mix(in srgb, var(--ui-text) 5%, var(--ui-surface-muted));
}

.whats-new-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.whats-new-entry-date {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.whats-new-entry-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.whats-new-entry-badge--feature {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
}

.whats-new-entry-badge--improvement {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

.whats-new-entry-badge--fix {
    background: color-mix(in srgb, var(--ui-text-muted) 15%, transparent);
    color: var(--ui-text-muted);
}

.whats-new-entry-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0 0 0.5rem;
}

.whats-new-entry-highlights {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.whats-new-entry-highlights li {
    font-size: 0.8125rem;
    color: var(--ui-text-secondary);
    line-height: 1.5;
}

.whats-new-entry-highlights li + li {
    margin-top: 0.25rem;
}

.whats-new-footer {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}
/* ── Host Wizard Overlay ── */
.host-wizard-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

/* ── Container ── */
.host-wizard-container {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    margin: 1rem;
    overflow-y: auto;
    border-radius: 12px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    outline: none;
}

/* ── Language Selector ── */
.host-wizard-language {
    display: flex;
    justify-content: flex-end;
    padding: 0.25rem 2.5rem 0;
}

/* ── Progress Bar ── */
.host-wizard-progress {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2.5rem 0;
}

.host-wizard-progress-dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    border: 2px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text-muted);
    transition: all 0.2s ease;
}

.host-wizard-progress-dot--active {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    color: #fff;
}

.host-wizard-progress-dot--completed {
    border-color: var(--ui-accent);
    background: var(--ui-accent);
    color: #fff;
}

.host-wizard-progress-line {
    position: absolute;
    left: 2.5rem;
    right: 2.5rem;
    top: calc(1.5rem + 13px);
    height: 2px;
    background: var(--ui-border);
    z-index: 0;
}

.host-wizard-progress-fill {
    height: 100%;
    background: var(--ui-accent);
    transition: width 0.2s ease;
}

/* ── Content ── */
.host-wizard-content {
    padding: 1.5rem 2.5rem 1rem;
    overflow: hidden;
}

/* ── Step Counter ── */
.host-wizard-step-counter {
    padding: 0 2.5rem 1.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--ui-text-muted);
}

/* ── Step Shared Styles ── */
.onboarding-step {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.onboarding-step-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ui-text);
    text-align: center;
    margin: 0;
}

.onboarding-step-subtitle {
    font-size: 0.95rem;
    color: var(--ui-text-muted);
    text-align: center;
    margin: 0;
}

.onboarding-step-question {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
    text-align: center;
    margin: 0;
}

.onboarding-step-text {
    font-size: 0.9rem;
    color: var(--ui-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.onboarding-step-text-muted {
    font-size: 0.85rem;
    color: var(--ui-text-muted);
    margin: 0;
}

.onboarding-step-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0;
}

.onboarding-step-divider {
    height: 1px;
    background: var(--ui-border);
    margin: 0.25rem 0;
}

/* ── Path Choice Cards ── */
.onboarding-path-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.onboarding-path-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    border-radius: 10px;
    border: 2px solid var(--ui-border);
    background: var(--ui-surface);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.onboarding-path-card:hover {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--ui-text) 8%, transparent);
}

.onboarding-path-card[data-selected] {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 1px var(--ui-accent);
}

.onboarding-path-card[data-dimmed] {
    opacity: 0.6;
}

.onboarding-path-card-icon {
    font-size: 1.5rem;
}

.onboarding-path-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ui-text);
}

.onboarding-path-card-subtitle {
    font-size: 0.8rem;
    color: var(--ui-text-muted);
}

.onboarding-path-card-bullets {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0;
    font-size: 0.8rem;
    color: var(--ui-text-secondary);
    text-align: left;
}

.onboarding-path-card-bullets li::before {
    content: '• ';
    color: var(--ui-text-muted);
}

.onboarding-path-card-cta {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    padding: 0.35rem 1rem;
}

/* ── Email Box ── */
.onboarding-email-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

.onboarding-email-address {
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ui-primary);
}

/* ── Lists ── */
.onboarding-numbered-list {
    padding-left: 1.25rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--ui-text-secondary);
    line-height: 1.8;
}

.onboarding-bullet-list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--ui-text-secondary);
    line-height: 1.8;
}

/* ── Tip Box ── */
.onboarding-tip-box {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 20%, transparent);
    font-size: 0.85rem;
    color: var(--ui-text-secondary);
    line-height: 1.5;
}

/* ── Completion Block ── */
.onboarding-completion-block {
    text-align: center;
    padding: 0.5rem 0;
}

.onboarding-completion-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ui-accent);
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

/* ── Feedback Block ── */
.onboarding-feedback-block {
    text-align: center;
    font-size: 0.85rem;
    color: var(--ui-text-muted);
    padding: 0.5rem 0;
}

/* ── Actions ── */
.onboarding-step-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

/* ── Skip Link ── */
.onboarding-skip-link {
    display: block;
    margin: 0 auto;
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.15s;
}

.onboarding-skip-link:hover {
    text-decoration-color: var(--ui-text-muted);
}

/* ── Back to Start ── */
.onboarding-back-to-start {
    display: block;
    margin: 0.75rem auto 0;
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color 0.15s;
}

.onboarding-back-to-start:hover {
    color: var(--ui-text);
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .host-wizard-container {
        max-width: 100%;
        margin: 0.5rem;
        border-radius: 8px;
    }

    .host-wizard-content {
        padding: 1rem 1.25rem;
    }

    .host-wizard-progress {
        padding: 1rem 1.25rem 0;
    }

    .host-wizard-progress-line {
        left: 1.25rem;
        right: 1.25rem;
    }

    .host-wizard-progress-dot {
        width: 24px;
        height: 24px;
        font-size: 0.6875rem;
    }

    .onboarding-path-cards {
        grid-template-columns: 1fr;
    }

    .host-wizard-step-counter {
        padding: 0 1.25rem 1rem;
    }

    .onboarding-step-title {
        font-size: 1.2rem;
    }

    .onboarding-email-box {
        flex-wrap: wrap;
    }

    .onboarding-email-address {
        font-size: 0.8rem;
        word-break: break-all;
    }

    .onboarding-step-actions {
        flex-wrap: wrap;
    }

    .host-wizard-container input,
    .host-wizard-container select,
    .host-wizard-container textarea {
        font-size: 16px;
    }
}
/* Wrapper centers the menu below the breadcrumb bar */
.navigation-menu-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.navigation-menu {
    position: relative;
    margin-top: 0.5rem;
    transform-origin: top center;
    pointer-events: auto;
    z-index: 1000;
    min-width: 320px;
    max-width: 360px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    box-shadow:
        0 20px 25px -5px color-mix(in srgb, var(--ui-text) 15%, transparent),
        0 8px 10px -6px color-mix(in srgb, var(--ui-text) 10%, transparent);
    padding: 0.75rem;
    scroll-behavior: smooth;
}

/* Custom scrollbar */
.navigation-menu::-webkit-scrollbar {
    width: 6px;
}

.navigation-menu::-webkit-scrollbar-track {
    background: transparent;
}

.navigation-menu::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ui-text) 20%, transparent);
    border-radius: 3px;
}

.navigation-menu::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--ui-text) 30%, transparent);
}

/* Backdrop overlay */
.navigation-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: color-mix(in srgb, var(--board-bg) 60%, transparent);
    pointer-events: auto;
}

/* Sections */
.nav-section {
    padding: 0.25rem 0;
}

.nav-section:not(:last-child) {
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: 0.25rem;
    padding-bottom: 0.5rem;
}

.nav-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Menu Items */
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: 0.9375rem;
    cursor: pointer;
    transition:
        color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.2s ease;
}

.nav-item:hover {
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    outline: none;
}

.nav-item:focus {
    outline: none;
}

.nav-item:focus-visible {
    box-shadow: 0 0 0 2px var(--ui-primary);
    animation: focus-ring-pulse 0.3s ease-out;
}

@keyframes focus-ring-pulse {
    0% { box-shadow: 0 0 0 0 var(--ui-primary); }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-primary) 50%, transparent); }
    100% { box-shadow: 0 0 0 2px var(--ui-primary); }
}

.nav-item--nested {
    padding-left: 2rem;
}

.nav-item--nested-deep {
    padding-left: 3rem;
    font-size: 0.875rem;
    color: var(--ui-text-secondary);
}

/* Icon */
.nav-icon {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.nav-item:hover .nav-icon {
    animation: icon-wiggle 0.4s ease;
}

@keyframes icon-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.nav-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Star for current org */
.nav-star {
    font-size: 0.75rem;
    flex-shrink: 0;
    display: inline-block;
}

/* Badge with pulse animation */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    background: var(--ui-primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    flex-shrink: 0;
    animation: badge-pulse 2s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-primary) 40%, transparent); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-primary) 0%, transparent); }
}

/* Organization group */
.nav-org-group {
    margin-bottom: 0.25rem;
}

/* Mobile: bottom sheet */
@media (max-width: 640px) {
    .navigation-menu-backdrop {
        bottom: 60px; /* Don't cover the footer */
    }

    .navigation-menu-wrapper {
        position: fixed;
        inset: 0;
        top: 0;
        bottom: 60px; /* Account for footer height */
        align-items: flex-end;
        justify-content: stretch;
    }

    .navigation-menu {
        width: 100%;
        margin: 0;
        max-width: none;
        border-radius: 16px 16px 0 0;
        max-height: calc(100% - 1rem); /* Use available space minus small margin */
        padding-bottom: 1rem; /* Extra padding for scroll comfort */
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .navigation-menu,
    .navigation-menu-backdrop,
    .nav-item,
    .nav-icon,
    .nav-badge,
    .nav-star {
        animation: none !important;
        transition: none !important;
    }
}
.breadcrumb-container {
    padding: 0.5rem 1rem;
    background: var(--board-bg);
    position: relative;
}

/* Gradient fade — content scrolling under the breadcrumb fades out */
.breadcrumb-container::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -24px;
    height: 24px;
    background: linear-gradient(to bottom, var(--board-bg), transparent);
    pointer-events: none;
    z-index: 1;
}

.breadcrumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* Hamburger Button */
.breadcrumb__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.breadcrumb__hamburger:hover {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border-color: var(--ui-text-muted);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-primary) 15%, transparent);
}

.breadcrumb__hamburger:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
}

/* Hamburger Icon with animation to X */
.hamburger-icon {
    position: relative;
    width: 14px;
    height: 10px;
}

.hamburger-icon span {
    position: absolute;
    left: 0;
    display: block;
    width: 14px;
    height: 2px;
    background: var(--ui-text);
    border-radius: 1px;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease,
        top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger-icon span:nth-child(1) { top: 0; }
.hamburger-icon span:nth-child(2) { top: 4px; }
.hamburger-icon span:nth-child(3) { top: 8px; }

/* Morphing animation when menu is open */
.breadcrumb__hamburger[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
    top: 4px;
    transform: rotate(45deg);
}

.breadcrumb__hamburger[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.breadcrumb__hamburger[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
    top: 4px;
    transform: rotate(-45deg);
}

/* Breadcrumb List */
.breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    flex-wrap: wrap;
}

.breadcrumb__separator {
    color: var(--ui-text-muted);
    user-select: none;
}

.breadcrumb__link {
    color: var(--ui-text-secondary);
    text-decoration: none;
    position: relative;
    transition: color 0.15s ease;
}

.breadcrumb__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--ui-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.breadcrumb__link:hover {
    color: var(--ui-primary);
}

.breadcrumb__link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.breadcrumb__current {
    color: var(--ui-text);
    font-weight: 500;
}

/* Mobile: Truncate long breadcrumbs */
@media (max-width: 640px) {
    .breadcrumb__list {
        max-width: calc(100vw - 4rem);
        overflow: hidden;
        white-space: nowrap;
    }

    .breadcrumb__item:not(:last-child) {
        display: none;
    }

    .breadcrumb__separator:not(:last-of-type) {
        display: none;
    }
}
/* SessionTypePicker styles */

.stp {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stp--compact {
    gap: 0.5rem;
}

.stp-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--ui-text-muted);
    font-size: 0.875rem;
}

.stp-loading__spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--ui-border);
    border-top-color: var(--ui-primary);
    border-radius: 50%;
    animation: stp-spin 0.6s linear infinite;
}

@keyframes stp-spin {
    to { transform: rotate(360deg); }
}

.stp-empty {
    padding: 1rem;
    text-align: center;
    color: var(--ui-text-muted);
    font-size: 0.875rem;
}

.stp-search {
    margin-bottom: 0.25rem;
}

.stp-search__input {
    width: 100%;
}

.stp-groups {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stp-group__title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-muted);
    margin: 0 0 0.5rem;
}

.stp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}

.stp--compact .stp-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.375rem;
}

.stp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
    background: var(--ui-surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
    position: relative;
}

.stp-card:hover {
    border-color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary) 5%, transparent);
}

.stp-card--selected {
    border-color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
    box-shadow: 0 0 0 1px var(--ui-primary);
}

.stp-card__icon {
    font-size: 1.5rem;
    line-height: 1;
}

.stp--compact .stp-card__icon {
    font-size: 1.25rem;
}

.stp-card__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.3;
}

.stp--compact .stp-card__label {
    font-size: 0.75rem;
}

.stp-card__desc {
    font-size: 0.6875rem;
    color: var(--ui-text-muted);
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
}

.stp-card__badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    font-size: 0.5625rem;
    padding: 0.125rem 0.375rem;
    border-radius: 99px;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/**
 * ContextualHelp — always-available contextual help popover.
 * Uses --ui-* theme variables only.
 */

/* Wrapper — sits inline next to feature titles */
.contextual-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
}

/* Trigger — the ? circle */
.contextual-help__trigger {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease-out, background 120ms ease, color 120ms ease;
    flex-shrink: 0;
}

.contextual-help__trigger--visible {
    opacity: 1;
    pointer-events: auto;
}

.contextual-help__trigger:hover {
    background: color-mix(in srgb, var(--ui-primary) 12%, var(--ui-surface));
    color: var(--ui-primary);
    border-color: var(--ui-primary);
}

.contextual-help__trigger:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
    opacity: 1;
    pointer-events: auto;
}

/* Popover — portal-rendered */
.contextual-help__popover {
    position: fixed;
    z-index: 10000;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ui-text) 15%, transparent);
    padding: 1rem;
    max-width: 320px;
    width: max-content;
    min-width: 220px;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 150ms ease-out, transform 150ms ease-out;
    pointer-events: none;
}

.contextual-help__popover--open {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Header row: icon + title */
.contextual-help__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.contextual-help__icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.contextual-help__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0;
}

/* Description */
.contextual-help__description {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ui-text-muted);
    margin: 0 0 0.6rem;
}

/* Bullet list */
.contextual-help__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
}

.contextual-help__bullet {
    font-size: 12px;
    line-height: 1.7;
    color: var(--ui-text-muted);
    padding-left: 1rem;
    position: relative;
}

.contextual-help__bullet::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--ui-primary);
}

/* Close button */
.contextual-help__close {
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    background: var(--ui-surface);
    color: var(--ui-text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.contextual-help__close:hover {
    background: color-mix(in srgb, var(--ui-primary) 6%, var(--ui-surface));
    border-color: var(--ui-primary);
    color: var(--ui-text);
}

.contextual-help__close:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
}
/**
 * SessionQuotaCard styles
 */

.session-quota-card {
    display: grid;
    gap: 6px;
    padding: 10px 14px;
}

.session-quota-card.at-limit {
    border-color: var(--ui-warning);
}

/* Main row - everything inline */
.quota-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tier-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
    white-space: nowrap;
}

.quota-numbers {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ui-text);
    white-space: nowrap;
}

.quota-reset,
.quota-info {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    margin-left: auto;
    white-space: nowrap;
}

/* Progress bar */
.quota-progress-track {
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    overflow: hidden;
}

.quota-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--ui-accent);
    transition: width 0.3s ease;
}

.quota-progress-fill.near-limit {
    background: var(--ui-warning);
}

.quota-progress-fill.at-limit {
    background: var(--ui-error);
}

/* Remaining text */
.remaining-count {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.remaining-zero {
    font-size: 0.75rem;
    color: var(--ui-warning);
    font-weight: 500;
}

/* Footer (upgrade prompt) */
.quota-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid var(--ui-border);
}

.upgrade-prompt {
    font-size: 0.8rem;
    color: var(--ui-text-muted);
    margin: 0;
}

.quota-upgrade-btn-inline {
    padding: 3px 10px;
    font-size: 0.75rem;
    white-space: nowrap;
}

.quota-upgrade-link {
    background: none;
    border: none;
    padding: 2px 0;
    color: var(--ui-primary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s ease;
}

.quota-upgrade-link:hover {
    color: var(--ui-primary-hover);
    text-decoration: underline;
}

/* Compact variant */
.session-quota-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.session-quota-compact .quota-text {
    color: var(--ui-text-muted);
}

.session-quota-compact .quota-warning {
    color: var(--ui-warning);
    font-weight: 500;
}

.session-quota-compact .quota-upgrade-btn {
    padding: 4px 10px;
    font-size: 0.75rem;
}
/**
 * CooldownWarning styles
 */

.cooldown-warning {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: start;
    border-color: var(--ui-warning);
    background: color-mix(in srgb, var(--ui-warning) 5%, var(--ui-surface));
}

.cooldown-icon {
    color: var(--ui-warning);
    padding-top: 2px;
}

.cooldown-content {
    display: grid;
    gap: 4px;
}

.cooldown-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ui-text);
}

.cooldown-text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    line-height: 1.4;
}

.cooldown-next {
    margin: 0;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--ui-warning);
    font-weight: 500;
}

.cooldown-action {
    display: flex;
    align-items: center;
}
/**
 * UpgradeToHostBanner styles
 */

.upgrade-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: start;
    border-color: var(--ui-success);
    background: color-mix(in srgb, var(--ui-success) 5%, var(--ui-surface));
}

.upgrade-icon {
    color: var(--ui-success);
    padding-top: 2px;
}

.upgrade-content {
    display: grid;
    gap: 6px;
}

.upgrade-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}

.upgrade-subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
}

.upgrade-features {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
}

.upgrade-features li {
    display: flex;
    align-items: center;
    gap: 4px;
}

.feature-check {
    color: var(--ui-success);
    font-weight: 600;
}

.upgrade-error {
    margin: 4px 0 0 0;
    font-size: 0.8125rem;
    color: var(--ui-error);
}

.upgrade-action {
    display: flex;
    align-items: center;
}

/* Responsive: stack on mobile */
@media (max-width: 640px) {
    .upgrade-banner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .upgrade-icon {
        justify-self: center;
    }

    .upgrade-features {
        justify-content: center;
    }

    .upgrade-action {
        justify-content: center;
    }
}
/**
 * PricingCard styles - Compact version
 */

.pricing-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ui-text) 10%, transparent);
}

.pricing-card.highlighted {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 1px var(--ui-primary);
}

.pricing-card.current-plan {
    border-color: var(--ui-success);
}

/* Badge */
.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--ui-primary);
    color: white;
}

/* Header */
.pricing-header {
    text-align: center;
}

.pricing-tier-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ui-text);
}

.pricing-description {
    margin: 8px 0 0;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
}

/* Price Section */
.pricing-price-section {
    text-align: center;
    padding: 12px 0;
    border-top: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
}

.pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.price-amount {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--ui-text);
}

.price-period {
    font-size: 1rem;
    color: var(--ui-text-muted);
}

.pricing-savings {
    margin-top: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-success);
}

.pricing-billed-yearly {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

/* Limits */
.pricing-limits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.limit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

.limit-item.cooldown {
    grid-column: 1 / -1;
    background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
}

.limit-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ui-text);
}

.limit-label {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    text-align: center;
}

/* CTA */
.pricing-cta {
    margin-top: auto;
}

.pricing-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
}

.pricing-btn.current {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
    border-color: var(--ui-success);
    cursor: default;
}

/* Responsive */
@media (max-width: 480px) {
    .pricing-card {
        padding: 20px;
    }

    .price-amount {
        font-size: 1.75rem;
    }

    .pricing-limits {
        grid-template-columns: 1fr;
    }

    .limit-item.cooldown {
        grid-column: auto;
    }
}
/**
 * PricingGrid styles
 */

.pricing-grid-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Billing Toggle */
.billing-toggle {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    width: fit-content;
    margin: 0 auto;
}

.toggle-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ui-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-btn:hover {
    color: var(--ui-text);
}

.toggle-btn.active {
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ui-text) 10%, transparent);
}

.toggle-savings {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ui-success);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Pricing Grid */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* For 5 cards, prefer 5 columns on large screens */
@media (min-width: 1200px) {
    .pricing-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* 4 columns on medium-large screens */
@media (min-width: 992px) and (max-width: 1199px) {
    .pricing-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 3 columns on medium screens */
@media (min-width: 768px) and (max-width: 991px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2 columns on smaller screens */
@media (min-width: 600px) and (max-width: 899px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 1 column on mobile */
@media (max-width: 599px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* Early Access Notice */
.early-access-notice {
    text-align: center;
    color: var(--ui-text-muted);
    margin: 1rem 0 1.5rem;
}

/* Enterprise CTA */
.enterprise-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 32px;
    background: color-mix(in srgb, var(--ui-primary) 5%, var(--ui-surface));
    border-color: color-mix(in srgb, var(--ui-primary) 20%, var(--ui-border));
}

.enterprise-content {
    flex: 1;
    min-width: 200px;
}

.enterprise-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ui-text);
}

.enterprise-description {
    margin: 8px 0 0;
    color: var(--ui-text-muted);
    font-size: 0.875rem;
}

.enterprise-btn {
    white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .enterprise-cta {
        flex-direction: column;
        text-align: center;
    }

    .enterprise-btn {
        width: 100%;
    }
}
/**
 * FeatureComparisonTable styles
 */

.feature-comparison-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.comparison-title {
    margin: 0 0 24px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ui-text);
}

.comparison-table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

/* Header */
.comparison-table thead th {
    padding: 16px 12px;
    text-align: center;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border-bottom: 1px solid var(--ui-border);
}

.comparison-table thead th:first-child {
    text-align: left;
    padding-left: 20px;
    font-weight: 500;
    color: var(--ui-text-muted);
}

.tier-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.tier-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text);
}

.tier-price {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

/* Body */
.comparison-table tbody tr {
    border-bottom: 1px solid var(--ui-border);
}

.comparison-table tbody tr:last-child {
    border-bottom: none;
}

.comparison-table tbody td {
    padding: 12px;
    text-align: center;
}

/* Category Rows */
.category-row td {
    padding: 12px 20px !important;
    text-align: left !important;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-text-secondary);
    background: color-mix(in srgb, var(--ui-text) 2%, transparent);
}

/* Feature Names */
.feature-name {
    text-align: left !important;
    padding-left: 20px !important;
    font-size: 0.875rem;
    color: var(--ui-text);
}

/* Feature Values */
.feature-value {
    font-size: 0.875rem;
    color: var(--ui-text);
    text-align: center;
}

.no-cooldown {
    color: var(--ui-success);
    font-weight: 500;
}

/* Icons */
.check-icon {
    width: 20px;
    height: 20px;
    color: var(--ui-success);
    display: inline-block;
    vertical-align: middle;
}

.x-icon {
    width: 20px;
    height: 20px;
    color: var(--ui-text-muted);
    opacity: 0.4;
    display: inline-block;
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 768px) {
    .comparison-table thead th {
        padding: 12px 8px;
    }

    .tier-name {
        font-size: 0.75rem;
    }

    .tier-price {
        font-size: 0.7rem;
    }

    .feature-name {
        font-size: 0.8rem;
    }

    .feature-value {
        font-size: 0.8rem;
    }
}

/* Sticky first column for mobile */
@media (max-width: 600px) {
    .comparison-table th:first-child,
    .comparison-table td:first-child {
        position: sticky;
        left: 0;
        background: var(--ui-surface);
        z-index: 1;
    }

    .comparison-table thead th:first-child {
        background: color-mix(in srgb, var(--ui-text) 3%, var(--ui-surface));
    }

    .category-row td:first-child {
        background: color-mix(in srgb, var(--ui-text) 2%, var(--ui-surface)) !important;
    }
}
/**
 * CheckoutForm styles
 */

.checkout-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Order Summary */
.order-summary {
    padding: 20px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

.summary-title {
    margin: 0 0 16px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.875rem;
    color: var(--ui-text);
}

.summary-line.savings {
    color: var(--ui-success);
}

.summary-line.discount {
    color: var(--ui-accent);
}

.summary-divider {
    height: 1px;
    margin: 8px 0;
    background: var(--ui-border);
}

.summary-line.total {
    font-size: 1rem;
    font-weight: 600;
}

.summary-note {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

/* Payment Section */
.payment-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}

/* Form Fields */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ui-text-secondary);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.input-with-icon {
    position: relative;
}

.input-with-icon input {
    padding-right: 60px;
}

.card-brand {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--ui-surface-muted);
    color: var(--ui-text-muted);
}

.card-brand.visa {
    background: #1a1f71;
    color: white;
}

.card-brand.mastercard {
    background: #eb001b;
    color: white;
}

.card-brand.amex {
    background: #006fcf;
    color: white;
}

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

.field-error {
    font-size: 0.75rem;
    color: var(--ui-error);
}

/* Test Card Note */
.test-card-note {
    padding: 12px 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-warning) 30%, transparent);
}

.test-card-note strong {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ui-warning);
    margin-bottom: 4px;
}

.test-card-note p {
    margin: 0 0 8px;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.test-card-note code {
    display: block;
    font-family: monospace;
    font-size: 0.875rem;
    color: var(--ui-text);
}

/* Coupon Section */
.coupon-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.coupon-input {
    display: flex;
    gap: 8px;
}

.coupon-input input {
    flex: 1;
}

.applied-coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-success) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-success) 30%, transparent);
}

.coupon-badge {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-success);
}

.remove-coupon {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    cursor: pointer;
    text-decoration: underline;
}

.remove-coupon:hover {
    color: var(--ui-error);
}

/* Error */
.checkout-error {
    padding: 12px 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-error) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-error) 30%, transparent);
    font-size: 0.875rem;
    color: var(--ui-error);
}

/* Submit */
.checkout-submit {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 480px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}
/**
 * RetentionModal styles
 */

.retention-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--board-bg) 80%, transparent);
    backdrop-filter: blur(4px);
}

.retention-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modal-slide-up 0.3s ease;
}

@keyframes modal-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    color: var(--ui-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-btn:hover {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text);
}

/* Header */
.retention-header {
    text-align: center;
}

.retention-header h2 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ui-text);
}

.retention-header p {
    margin: 0;
    color: var(--ui-text-muted);
}

/* Loading */
.retention-loading {
    text-align: center;
    padding: 40px 0;
    color: var(--ui-text-muted);
}

/* Offer Card */
.offer-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--ui-primary) 10%, transparent),
        color-mix(in srgb, var(--ui-accent) 10%, transparent)
    );
    border: 1px solid color-mix(in srgb, var(--ui-primary) 20%, transparent);
}

.offer-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: 12px;
    background: var(--ui-surface);
}

.offer-content {
    flex: 1;
}

.offer-title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}

.offer-description {
    margin: 0 0 8px;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    line-height: 1.4;
}

.offer-value {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

/* Error */
.retention-error {
    padding: 12px 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-error) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-error) 30%, transparent);
    font-size: 0.875rem;
    color: var(--ui-error);
    text-align: center;
}

/* Actions */
.retention-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stay-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
}

.decline-btn {
    width: 100%;
}

/* Offers Remaining */
.offers-remaining {
    text-align: center;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    margin: 0;
}

/* Cancel Anyway Link */
.cancel-anyway-link {
    align-self: center;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.cancel-anyway-link:hover {
    color: var(--ui-error);
}

/* Responsive */
@media (max-width: 480px) {
    .retention-modal {
        padding: 24px;
    }

    .offer-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}
/**
 * CancelConfirmDialog styles
 */

.cancel-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--board-bg) 80%, transparent);
    backdrop-filter: blur(4px);
}

.cancel-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 32px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    animation: dialog-appear 0.2s ease;
}

@keyframes dialog-appear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.cancel-icon {
    font-size: 3rem;
    line-height: 1;
}

.cancel-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ui-text);
}

.cancel-message {
    margin: 0;
    font-size: 1rem;
    color: var(--ui-text-muted);
    line-height: 1.5;
}

/* Consequences */
.cancel-consequences {
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-error) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-error) 20%, transparent);
    text-align: left;
}

.cancel-consequences h3 {
    margin: 0 0 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-error);
}

.cancel-consequences ul {
    margin: 0;
    padding: 0 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cancel-consequences li {
    font-size: 0.875rem;
    color: var(--ui-text-muted);
}

/* Timing */
.cancel-timing {
    padding: 12px 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

.cancel-timing p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ui-text-secondary);
}

/* Actions */
.cancel-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.keep-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    background: var(--ui-primary);
    color: white;
    border-color: var(--ui-primary);
}

.keep-btn:hover {
    background: var(--ui-primary-hover);
}

.confirm-cancel-btn {
    width: 100%;
    color: var(--ui-error);
    border-color: var(--ui-error);
}

.confirm-cancel-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-error) 10%, transparent);
}

/* Responsive */
@media (max-width: 480px) {
    .cancel-dialog {
        padding: 24px;
    }
}
/**
 * TrialExhaustedBanner styles
 */

.trial-exhausted-banner,
.limit-reached-banner {
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--ui-border);
    border-radius: 0.75rem;
    background: var(--ui-surface);
}

.trial-exhausted-banner h3,
.limit-reached-banner h3 {
    margin: 0 0 0.5rem;
    color: var(--ui-text);
    font-size: 1.1rem;
}

.trial-exhausted-banner p,
.limit-reached-banner p {
    margin: 0 0 1rem;
    color: var(--ui-text-muted);
    font-size: 0.9rem;
}

.upgrade-options {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}
/* TemplatePicker Modal Styles */

.tpl-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.tpl-picker-modal {
    background: var(--ui-surface);
    border-radius: 12px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Header */
.tpl-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ui-border);
}

.tpl-picker-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0;
}

.tpl-picker-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--ui-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.tpl-picker-close:hover {
    color: var(--ui-text);
}

/* Content */
.tpl-picker-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Search */
.tpl-picker-search {
    margin-bottom: 1.5rem;
}

.tpl-picker-search input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    color: var(--ui-text);
    transition: border-color 0.15s;
}

.tpl-picker-search input:focus {
    outline: none;
    border-color: var(--ui-accent);
}

/* Error */
.tpl-picker-error {
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    color: var(--ui-error);
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

/* Sections */
.tpl-picker-section {
    margin-bottom: 2rem;
}

.tpl-picker-section:last-child {
    margin-bottom: 0;
}

.tpl-picker-section h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem;
}

/* Card grid */
.tpl-picker-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tpl-picker-card {
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.tpl-picker-card:hover {
    border-color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 5%, transparent);
}

.tpl-picker-card.selected {
    border-color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 8%, transparent);
}

.tpl-picker-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25rem;
}

.tpl-picker-card-name {
    font-weight: 600;
    color: var(--ui-text);
    font-size: 0.9rem;
}

.tpl-picker-card-meta {
    font-size: 0.8rem;
    color: var(--ui-text-muted);
    white-space: nowrap;
}

.tpl-picker-card-desc {
    font-size: 0.85rem;
    color: var(--ui-text-muted);
    margin-bottom: 0.375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tpl-picker-card-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--ui-text-muted);
}

/* Empty state */
.tpl-picker-empty {
    text-align: center;
    padding: 2rem;
    color: var(--ui-text-muted);
    font-size: 0.875rem;
    background: var(--ui-surface-muted);
    border-radius: 8px;
}

/* Create session sub-form */
.tpl-picker-create-form {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: var(--ui-surface-muted);
    border-radius: 8px;
    border: 1px solid var(--ui-border);
}

.tpl-picker-create-field {
    margin-bottom: 1rem;
}

.tpl-picker-create-field:last-of-type {
    margin-bottom: 1.25rem;
}

.tpl-picker-create-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ui-text);
    margin-bottom: 0.375rem;
}

.tpl-picker-create-field input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    color: var(--ui-text);
    transition: border-color 0.15s;
}

.tpl-picker-create-field input:focus {
    outline: none;
    border-color: var(--ui-accent);
}

.tpl-picker-create-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Footer */
.tpl-picker-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-muted);
}

/* Responsive */
@media (max-width: 600px) {
    .tpl-picker-create-actions {
        flex-direction: column;
    }

    .tpl-picker-footer {
        flex-direction: column;
    }
}
/* SessionTypeChooserModal — Pre-creation type selection */

.stc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
}

.stc-container {
    display: flex;
    flex-direction: column;
    width: 95vw;
    max-width: 1100px;
    height: 85vh;
    max-height: 780px;
    background: var(--ui-surface);
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* ---- Header ---- */
.stc-header {
    position: relative;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ui-border);
}

.stc-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0;
}

.stc-subtitle {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    margin: 0.25rem 0 0;
}

.stc-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--ui-text-muted);
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.stc-close:hover {
    color: var(--ui-text);
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

/* ---- Body (3-column) ---- */
.stc-body {
    display: grid;
    grid-template-columns: 180px 1fr 280px;
    flex: 1;
    overflow: hidden;
}

/* ---- Left: Categories ---- */
.stc-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem 0.5rem;
    background: var(--ui-surface-muted);
    border-right: 1px solid var(--ui-border);
    overflow-y: auto;
}

.stc-cat-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0.375rem;
    color: var(--ui-text);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s;
}
.stc-cat-btn:hover {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}
.stc-cat-btn--active {
    background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
    color: var(--ui-primary);
    font-weight: 500;
}

.stc-cat-count {
    font-size: 0.6875rem;
    color: var(--ui-text-muted);
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    min-width: 1.25rem;
    text-align: center;
}
.stc-cat-btn--active .stc-cat-count {
    background: color-mix(in srgb, var(--ui-primary) 20%, transparent);
    color: var(--ui-primary);
}

/* ---- Center: Cards ---- */
.stc-main {
    padding: 1rem;
    overflow-y: auto;
}

.stc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.stc-group + .stc-group {
    margin-top: 1.25rem;
}

.stc-group-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-muted);
    margin: 0 0 0.5rem;
    padding-left: 0.125rem;
}

.stc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
}

.stc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.875rem 0.625rem 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
    background: var(--ui-surface);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.stc-card:hover {
    border-color: var(--ui-primary);
    transform: translateY(-1px);
}
.stc-card--selected {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 2px var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary) 5%, transparent);
}

.stc-card-icon {
    font-size: 1.75rem;
    line-height: 1;
}

.stc-card-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.2;
}

.stc-card-desc {
    font-size: 0.6875rem;
    color: var(--ui-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stc-empty {
    text-align: center;
    color: var(--ui-text-muted);
    padding: 2rem;
    font-size: 0.875rem;
}

/* ---- Right: Preview ---- */
.stc-preview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    border-left: 1px solid var(--ui-border);
    background: var(--ui-surface);
    overflow-y: auto;
}

.stc-preview-header {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.stc-preview-icon {
    font-size: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.stc-preview-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0;
    line-height: 1.3;
}

.stc-preview-cat {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-primary);
}

.stc-preview-desc {
    font-size: 0.8125rem;
    color: var(--ui-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.stc-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--ui-text-muted);
    font-size: 0.875rem;
}

/* Feature phases */
.stc-phases {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid var(--ui-border);
    padding-top: 0.75rem;
}

.stc-phase-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-text-muted);
    margin: 0 0 0.375rem;
}

.stc-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}

.stc-feature-list li {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0;
}

.stc-feat--on {
    color: var(--ui-text);
}

.stc-feat--off {
    color: var(--ui-text-muted);
    opacity: 0.5;
}

.stc-feat-indicator {
    font-size: 0.6875rem;
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}
.stc-feat--on .stc-feat-indicator {
    color: var(--ui-success);
}

/* ---- Footer ---- */
.stc-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--ui-border);
}

/* ---- Responsive: stack on narrow screens ---- */
@media (max-width: 768px) {
    .stc-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }
    .stc-sidebar {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--ui-border);
        padding: 0.5rem;
        gap: 0.25rem;
    }
    .stc-cat-btn {
        white-space: nowrap;
        font-size: 0.75rem;
        padding: 0.375rem 0.625rem;
    }
    .stc-preview {
        border-left: none;
        border-top: 1px solid var(--ui-border);
        max-height: 200px;
    }
    .stc-container {
        width: 100vw;
        height: 100vh;
        max-height: none;
        max-width: none;
        border-radius: 0;
    }
}
/**
 * Shared Modal Styles
 * 
 * Common modal overlay and base styles used across the app.
 * Uses --ui-* CSS variables for theming.
 */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem;
}

.modal-content {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 0.75rem;
  background: var(--ui-surface);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--ui-border);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ui-text);
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: none;
  border-radius: 0.25rem;
  background: none;
  color: var(--ui-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.modal-close:hover {
  background: color-mix(in srgb, var(--ui-text) 10%, transparent);
  color: var(--ui-text);
}

.modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--ui-border);
}

.modal-description {
  color: var(--ui-text-muted);
  font-size: 0.875rem;
  margin: 0;
}

.modal-error {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
  color: var(--ui-error);
  font-size: 0.875rem;
}

/* Loading state */
.modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

.modal-loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--ui-border);
  border-top-color: var(--ui-primary);
  border-radius: 50%;
  animation: modal-spin 0.6s linear infinite;
}

@keyframes modal-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Button styles */
.modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.modal-btn-secondary {
  background: transparent;
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
}

.modal-btn-secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.modal-btn-primary {
  background: var(--ui-primary);
  border: 1px solid var(--ui-primary);
  color: white;
}

.modal-btn-primary:hover:not(:disabled) {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
}

.modal-btn-danger {
  background: var(--ui-error);
  border: 1px solid var(--ui-error);
  color: white;
}

.modal-btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-error) 85%, black);
  border-color: color-mix(in srgb, var(--ui-error) 85%, black);
}

.modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Empty state */
.modal-empty {
  text-align: center;
  padding: 2rem;
  color: var(--ui-text-muted);
}
/**
 * Activity Dashboard Styles
 * Uses --ui-* CSS variables for theming.
 */

.activity-dashboard {
    display: grid;
    gap: 1rem;
}

.activity-dashboard-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0;
}

.activity-dashboard-desc {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    margin: 0;
}

/* Stats Grid */
.activity-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.activity-stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.875rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
}

.activity-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.2;
}

.activity-stat-label {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

/* Recent Activity */
.activity-recent {
    display: grid;
    gap: 0.5rem;
}

.activity-recent-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.activity-recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.25rem;
}

.activity-recent-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
}

.activity-recent-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-recent-dot--session_hosted {
    background: var(--ui-primary);
}

.activity-recent-dot--session_participated {
    background: var(--ui-accent);
}

.activity-recent-dot--prep_completed {
    background: var(--ui-success);
}

.activity-recent-dot--quiz_answered {
    background: var(--ui-warning);
}

.activity-recent-text {
    color: var(--ui-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-recent-date {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    flex-shrink: 0;
}

.activity-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--ui-text-muted);
    font-size: 0.875rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
}

/* Loading skeleton */
.activity-skeleton {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.activity-skeleton-card {
    height: 72px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border-radius: 0.5rem;
    animation: activity-pulse 1.5s ease-in-out infinite;
}

@keyframes activity-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Responsive */
@media (max-width: 480px) {
    .activity-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .activity-stat-value {
        font-size: 1.25rem;
    }
}
/**
 * Preferences Page Styles
 *
 * Matches OrgSettingsPage section-card design.
 * Uses --ui-* CSS variables for theming.
 */

.prefs-page {
  padding: 1.5rem;
  max-width: 700px;
  margin: 0 auto;
}

/* Header */
.prefs-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ui-border);
}

.prefs-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.prefs-header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ui-text);
}

[data-theme="light"] .prefs-header h1 {
  color: var(--brand-teal);
}

.prefs-subtitle {
  margin: 0.5rem 0 0;
  color: var(--ui-text-muted);
  font-size: 0.9375rem;
}

/* Section cards */
.prefs-section {
  margin-bottom: 1.5rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .prefs-section {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
}

.prefs-section h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ui-text);
  margin: 16px 16px 0;
  background: #d1fae5;
  padding: 4px 8px;
  border-radius: 3px;
}

[data-theme="dark"] .prefs-section h2 {
  background: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-surface));
}

[data-theme="light"] .prefs-section h2 {
  color: var(--brand-teal);
}

/* Section content */
.prefs-section-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Form groups */
.prefs-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.prefs-form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ui-text);
}

.prefs-form-group input,
.prefs-form-group select,
.prefs-form-group textarea {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.375rem;
  background: var(--board-bg);
  color: var(--ui-text);
  font-size: 0.9375rem;
  font-family: inherit;
  transition: all 0.15s ease;
}

.prefs-form-group input:focus,
.prefs-form-group select:focus,
.prefs-form-group textarea:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 20%, transparent);
}

.prefs-form-group input::placeholder,
.prefs-form-group textarea::placeholder {
  color: var(--ui-text-muted);
}

.prefs-form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.prefs-form-hint {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--ui-text-muted);
}

/* Info rows */
.prefs-info-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.prefs-info-label {
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
}

.prefs-info-value {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ui-text);
}

/* Subscription badges */
.prefs-badge {
  display: inline-block;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Subscription row layout */
.prefs-subscription-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.prefs-subscription-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.prefs-subscription-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.prefs-subscription-actions .wp-button-small {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
}

/* Toggle button group */
.prefs-toggle-group {
  display: flex;
  gap: 0.5rem;
}

/* Notification item */
.prefs-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--ui-text) 3%, transparent);
  cursor: pointer;
}

.prefs-notif-item input[type="checkbox"] {
  margin-top: 0.125rem;
  accent-color: var(--ui-primary);
}

.prefs-notif-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ui-text);
}

.prefs-notif-desc {
  font-size: 0.75rem;
  color: var(--ui-text-muted);
}

/* Data export card */
.prefs-export-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prefs-export-card .prefs-export-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ui-text);
}

.prefs-export-card .prefs-export-desc {
  font-size: 0.875rem;
  color: var(--ui-text-muted);
}

/* Danger zone */
.prefs-section--danger {
  border: 2px solid var(--ui-error);
}

.prefs-section--danger h2 {
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
  color: var(--ui-error);
}

[data-theme="dark"] .prefs-section--danger h2 {
  background: color-mix(in srgb, var(--ui-error) 20%, var(--ui-surface));
}

.prefs-danger-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.prefs-danger-desc {
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
  line-height: 1.5;
}

/* Buttons - reuse org button patterns */
.prefs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.prefs-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.prefs-btn--primary {
  background: var(--ui-primary);
  color: white;
}

.prefs-btn--primary:hover:not(:disabled) {
  background: var(--ui-primary-hover);
}

.prefs-btn--secondary {
  background: transparent;
  border-color: var(--ui-border);
  color: var(--ui-text);
}

.prefs-btn--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
  border-color: var(--ui-text-muted);
}

.prefs-btn--danger {
  background: var(--ui-error);
  color: white;
}

.prefs-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-error) 80%, black);
}

/* Success / Error messages */
.prefs-msg-success {
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--ui-success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-success) 30%, transparent);
  border-radius: 0.375rem;
  color: var(--ui-success);
  font-size: 0.8125rem;
}

.prefs-msg-error {
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--ui-error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-error) 30%, transparent);
  border-radius: 0.375rem;
  color: var(--ui-error);
  font-size: 0.8125rem;
}

/* Footer nav */
.prefs-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

/* Responsive */
@media (max-width: 640px) {
  .prefs-page {
    padding: 0.75rem;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .prefs-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    max-width: 100%;
    overflow: hidden;
  }

  .prefs-header h1 {
    font-size: 1.25rem;
  }

  .prefs-section {
    margin-bottom: 1rem;
    max-width: 100%;
    overflow-x: hidden;
  }

  .prefs-section-content {
    padding: 12px;
    gap: 1rem;
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
  }

  /* Stack info rows vertically on mobile */
  .prefs-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    max-width: 100%;
  }

  .prefs-info-value {
    word-break: break-word;
    max-width: 100%;
  }

  /* Make badges wrap on mobile */
  .prefs-badge {
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
  }

  .prefs-form-group {
    max-width: 100%;
  }

  .prefs-form-group input,
  .prefs-form-group select,
  .prefs-form-group textarea {
    font-size: 16px; /* Prevent iOS zoom on focus */
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Back button: truncate long session titles */
  .prefs-header-row .prefs-btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
  }

  /* Subscription: hide parent "Tilaus" label on mobile (children have own labels) */
  .prefs-info-row--subscription > .prefs-info-label {
    display: none;
  }

  .prefs-subscription-row {
    flex-direction: column;
    gap: 0.5rem;
  }

  .prefs-subscription-item {
    max-width: 100%;
  }

  /* Prevent any nested content from overflowing section cards */
  .prefs-section-content .wp-input {
    box-sizing: border-box;
    max-width: 100%;
    font-size: 16px;
  }

  .prefs-section-content .grid,
  .prefs-section-content .flex {
    min-width: 0;
    max-width: 100%;
  }

  /* Toggle button groups wrap */
  .prefs-toggle-group {
    flex-wrap: wrap;
  }

  /* Buttons: full-width on mobile for better tap targets */
  .prefs-btn {
    width: 100%;
    justify-content: center;
  }

  .prefs-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  /* Footer on mobile */
  .prefs-footer {
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ui-border);
  }
}
/**
 * TextInputModal Styles
 * 
 * Uses only --ui-* CSS variables per project guidelines.
 */

.text-input-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.text-input-modal {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.text-input-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ui-border);
}

.text-input-modal__title {
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text);
}

.text-input-modal__close {
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.text-input-modal__close:hover {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text);
}

.text-input-modal__form {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.text-input-modal__input {
    width: 100%;
    padding: 10px 12px;
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text);
    font-family: inherit;
    font-size: 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.text-input-modal__input::placeholder {
    color: var(--ui-text-muted);
}

.text-input-modal__input:focus {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 25%, transparent);
}

.text-input-modal__input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.text-input-modal__input--multiline {
    resize: vertical;
    min-height: 80px;
}

.text-input-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.text-input-modal__btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.text-input-modal__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.text-input-modal__btn--cancel {
    background: transparent;
    border: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
}

.text-input-modal__btn--cancel:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    color: var(--ui-text);
}

.text-input-modal__btn--submit {
    background: var(--ui-accent);
    border: none;
    color: var(--ui-on-primary);
}

.text-input-modal__btn--submit:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-accent) 85%, black);
}
/**
 * PollModal Styles
 * 
 * Uses only --ui-* CSS variables per project guidelines.
 */

.poll-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.poll-modal {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.poll-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ui-border);
}

.poll-modal__title {
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text);
}

.poll-modal__close {
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.poll-modal__close:hover {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text);
}

.poll-modal__form {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.poll-modal__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.poll-modal__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.poll-modal__input {
    width: 100%;
    padding: 10px 12px;
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text);
    font-family: inherit;
    font-size: 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.poll-modal__input::placeholder {
    color: var(--ui-text-muted);
}

.poll-modal__input:focus {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 25%, transparent);
}

.poll-modal__input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.poll-modal__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.poll-modal__option-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.poll-modal__input--option {
    flex: 1;
}

.poll-modal__remove-option {
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.poll-modal__remove-option:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    color: var(--ui-error);
}

.poll-modal__remove-option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.poll-modal__add-option {
    background: transparent;
    border: 1px dashed var(--ui-border);
    color: var(--ui-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    margin-top: 4px;
}

.poll-modal__add-option:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    border-color: var(--ui-accent);
    color: var(--ui-accent);
}

.poll-modal__add-option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.poll-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}

.poll-modal__btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.poll-modal__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.poll-modal__btn--cancel {
    background: transparent;
    border: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
}

.poll-modal__btn--cancel:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    color: var(--ui-text);
}

.poll-modal__btn--submit {
    background: var(--ui-accent);
    border: none;
    color: var(--ui-on-primary);
}

.poll-modal__btn--submit:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-accent) 85%, black);
}
/* ============================================================
 * LiveRounds
 * ============================================================
 * Host-facing rounds panel for the live session dashboard.
 * Uses CollapsibleSection for consistent accordion behaviour.
 * ========================================================== */

.live-rounds__empty {
    padding: 1rem;
    text-align: center;
    color: var(--ui-text-muted);
    font-size: 0.875rem;
}

.live-rounds__init-btn {
    display: block;
    margin: 0.75rem auto;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    background: var(--ui-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.live-rounds__init-btn:hover {
    background: var(--ui-primary-hover);
}

/* ── Round card ─────────────────────────────────────────────── */

.live-rounds__card {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    margin-bottom: 0.5rem;
}

.live-rounds__card--active {
    border-left: 3px solid var(--ui-primary);
}

.live-rounds__card--completed {
    opacity: 0.7;
}

.live-rounds__card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.live-rounds__card-number {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ui-text-muted);
    min-width: 1.5rem;
}

.live-rounds__card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text);
    flex: 1;
}

.live-rounds__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.live-rounds__badge--pending {
    background: color-mix(in srgb, var(--ui-text-muted) 15%, transparent);
    color: var(--ui-text-muted);
}

.live-rounds__badge--active {
    background: color-mix(in srgb, var(--ui-primary) 20%, transparent);
    color: var(--ui-primary);
}

.live-rounds__badge--completed {
    background: color-mix(in srgb, var(--ui-success) 20%, transparent);
    color: var(--ui-success);
}

/* ── Timer / progress ───────────────────────────────────────── */

.live-rounds__timer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.375rem;
    font-size: 0.8rem;
    color: var(--ui-text-secondary);
}

.live-rounds__timer-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ui-text);
}

.live-rounds__timer-value--warning {
    color: var(--ui-warning);
}

.live-rounds__progress-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    overflow: hidden;
}

.live-rounds__progress-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--ui-primary);
    transition: width 1s linear;
}

/* ── Card meta (duration, submissions) ──────────────────────── */

.live-rounds__card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

/* ── Host actions ───────────────────────────────────────────── */

.live-rounds__actions {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.live-rounds__action-btn {
    padding: 0.3rem 0.75rem;
    border: none;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.live-rounds__action-btn--start {
    background: var(--ui-primary);
    color: #fff;
}

.live-rounds__action-btn--start:hover {
    background: var(--ui-primary-hover);
}

.live-rounds__action-btn--complete {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

.live-rounds__action-btn--complete:hover {
    background: color-mix(in srgb, var(--ui-success) 25%, transparent);
}

.live-rounds__action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Loading ────────────────────────────────────────────────── */

.live-rounds__loading {
    padding: 1rem;
    text-align: center;
    color: var(--ui-text-muted);
    font-size: 0.8rem;
}

/* ── Error banner ───────────────────────────────────────────── */

.live-rounds__error {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ui-error) 12%, transparent);
    color: var(--ui-error);
    font-size: 0.8rem;
}
/* ============================================================
 * RoundSubmissions
 * ============================================================
 * Submission list + input + voting for a single round.
 * Used in both host and participant views.
 * ========================================================== */

.round-submissions {
    padding: 0.5rem 0;
}

.round-submissions__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.round-submissions__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text);
}

.round-submissions__count {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

/* ── Input area ─────────────────────────────────────────────── */

.round-submissions__input-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.round-submissions__input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    resize: none;
    min-height: 2.25rem;
    font-family: inherit;
}

.round-submissions__input::placeholder {
    color: var(--ui-text-muted);
}

.round-submissions__input:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.round-submissions__anon-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    cursor: pointer;
    user-select: none;
}

.round-submissions__anon-toggle input[type="checkbox"] {
    accent-color: var(--ui-primary);
}

.round-submissions__submit-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    background: var(--ui-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.round-submissions__submit-btn:hover:not(:disabled) {
    background: var(--ui-primary-hover);
}

.round-submissions__submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Submission list ────────────────────────────────────────── */

.round-submissions__list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.round-submissions__item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
}

.round-submissions__item-content {
    flex: 1;
    font-size: 0.85rem;
    color: var(--ui-text);
    line-height: 1.4;
}

.round-submissions__item-author {
    display: block;
    font-size: 0.7rem;
    color: var(--ui-text-muted);
    margin-top: 0.125rem;
}

/* ── Vote button ────────────────────────────────────────────── */

.round-submissions__vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: transparent;
    color: var(--ui-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.round-submissions__vote-btn:hover:not(:disabled) {
    border-color: var(--ui-primary);
    color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary) 8%, transparent);
}

.round-submissions__vote-btn--voted {
    border-color: var(--ui-primary);
    color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
}

.round-submissions__vote-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.round-submissions__vote-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Empty state ────────────────────────────────────────────── */

.round-submissions__empty {
    text-align: center;
    padding: 1rem;
    color: var(--ui-text-muted);
    font-size: 0.8rem;
}

/* ── Closed state ───────────────────────────────────────────── */

.round-submissions__closed {
    text-align: center;
    padding: 0.5rem;
    color: var(--ui-text-muted);
    font-size: 0.8rem;
    font-style: italic;
}
/* ============================================================
 * SlotManager
 * ============================================================
 * Host-facing slot management panel for the live session dashboard.
 * Uses CollapsibleSection for consistent accordion behaviour.
 * ========================================================== */

.slot-manager__empty {
    padding: 1rem;
    text-align: center;
    color: var(--ui-text-muted);
    font-size: 0.875rem;
}

.slot-manager__new-btn {
    display: block;
    margin: 0.75rem auto;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    background: var(--ui-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.slot-manager__new-btn:hover {
    background: var(--ui-primary-hover);
}

.slot-manager__new-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Slot card ──────────────────────────────────────────────── */

.slot-manager__card {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    margin-bottom: 0.5rem;
}

.slot-manager__card--active {
    border-left: 3px solid var(--ui-primary);
}

.slot-manager__card--completed {
    opacity: 0.7;
}

.slot-manager__card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.slot-manager__card-number {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ui-text-muted);
    min-width: 1.5rem;
}

.slot-manager__card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text);
    flex: 1;
}

/* ── Status badge ───────────────────────────────────────────── */

.slot-manager__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.slot-manager__badge--scheduled {
    background: color-mix(in srgb, var(--ui-text-muted) 15%, transparent);
    color: var(--ui-text-muted);
}

.slot-manager__badge--active {
    background: color-mix(in srgb, var(--ui-primary) 20%, transparent);
    color: var(--ui-primary);
}

.slot-manager__badge--completed {
    background: color-mix(in srgb, var(--ui-success) 20%, transparent);
    color: var(--ui-success);
}

/* ── Participants list ──────────────────────────────────────── */

.slot-manager__participants {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.slot-manager__participant-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
    color: var(--ui-accent);
    font-size: 0.75rem;
    font-weight: 500;
}

.slot-manager__participant-remove {
    border: none;
    background: none;
    color: var(--ui-text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0;
    line-height: 1;
}

.slot-manager__participant-remove:hover {
    color: var(--ui-error);
}

.slot-manager__no-participants {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    margin-top: 0.375rem;
}

/* ── Assign dropdown ────────────────────────────────────────── */

.slot-manager__assign-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.slot-manager__assign-select {
    flex: 1;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--ui-border);
    border-radius: 5px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.75rem;
}

.slot-manager__assign-btn {
    padding: 0.3rem 0.65rem;
    border: none;
    border-radius: 5px;
    background: var(--ui-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.slot-manager__assign-btn:hover {
    opacity: 0.9;
}

.slot-manager__assign-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Host actions ───────────────────────────────────────────── */

.slot-manager__actions {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.slot-manager__action-btn {
    padding: 0.3rem 0.75rem;
    border: none;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.slot-manager__action-btn--activate {
    background: var(--ui-primary);
    color: #fff;
}

.slot-manager__action-btn--activate:hover {
    background: var(--ui-primary-hover);
}

.slot-manager__action-btn--complete {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

.slot-manager__action-btn--complete:hover {
    background: color-mix(in srgb, var(--ui-success) 25%, transparent);
}

.slot-manager__action-btn--delete {
    background: color-mix(in srgb, var(--ui-error) 12%, transparent);
    color: var(--ui-error);
}

.slot-manager__action-btn--delete:hover {
    background: color-mix(in srgb, var(--ui-error) 22%, transparent);
}

.slot-manager__action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Loading ────────────────────────────────────────────────── */

.slot-manager__loading {
    padding: 1rem;
    text-align: center;
    color: var(--ui-text-muted);
    font-size: 0.8rem;
}

/* ── Error banner ───────────────────────────────────────────── */

.slot-manager__error {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ui-error) 12%, transparent);
    color: var(--ui-error);
    font-size: 0.8rem;
}

/* ── Toolbar ────────────────────────────────────────────────── */

.slot-manager__toolbar {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.breakout-manager {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.breakout-manager__controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.breakout-manager__input {
    width: 4rem;
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    text-align: center;
}

.breakout-manager__input:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.breakout-manager__btn {
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.breakout-manager__btn:hover {
    background: var(--ui-surface-muted);
    border-color: var(--ui-primary);
}

.breakout-manager__btn--primary {
    background: var(--ui-primary);
    color: #fff;
    border-color: var(--ui-primary);
}

.breakout-manager__btn--primary:hover {
    background: var(--ui-primary-hover);
}

.breakout-manager__btn--accent {
    background: var(--ui-accent);
    color: #fff;
    border-color: var(--ui-accent);
}

.breakout-manager__btn--accent:hover {
    opacity: 0.9;
}

.breakout-manager__btn--success {
    background: var(--ui-success);
    color: #fff;
    border-color: var(--ui-success);
}

.breakout-manager__btn--success:hover {
    opacity: 0.9;
}

.breakout-manager__btn--warning {
    background: var(--ui-warning);
    color: #fff;
    border-color: var(--ui-warning);
}

.breakout-manager__btn--warning:hover {
    opacity: 0.9;
}

.breakout-manager__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.breakout-manager__bulk-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.breakout-manager__groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.breakout-manager__group-card {
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 0.75rem;
    background: var(--ui-surface);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.breakout-manager__group-card--active {
    border-color: var(--ui-success);
}

.breakout-manager__group-card--completed {
    border-color: var(--ui-accent);
    opacity: 0.85;
}

.breakout-manager__group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.breakout-manager__group-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ui-text);
}

.breakout-manager__group-badge {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-weight: 500;
}

.breakout-manager__group-badge--pending {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text-muted);
}

.breakout-manager__group-badge--active {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

.breakout-manager__group-badge--completed {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
}

.breakout-manager__group-participants {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.breakout-manager__participant-tag {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    color: var(--ui-text-secondary);
}

.breakout-manager__group-actions {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.breakout-manager__group-summary {
    font-size: 0.8125rem;
    color: var(--ui-text-secondary);
    padding: 0.375rem;
    background: color-mix(in srgb, var(--ui-accent) 5%, transparent);
    border-radius: 4px;
    border-left: 3px solid var(--ui-accent);
}

.breakout-manager__empty {
    color: var(--ui-text-muted);
    font-size: 0.8125rem;
    text-align: center;
    padding: 1rem;
}

.breakout-manager__error {
    color: var(--ui-error);
    font-size: 0.8125rem;
}
.breakout-report-back {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.breakout-report-back__summaries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

.breakout-report-back__summary-card {
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 0.75rem;
    background: var(--ui-surface);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.breakout-report-back__summary-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ui-text);
}

.breakout-report-back__summary-text {
    font-size: 0.8125rem;
    color: var(--ui-text-secondary);
    line-height: 1.4;
}

.breakout-report-back__summary-placeholder {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    font-style: italic;
}

.breakout-report-back__form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}

.breakout-report-back__form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ui-text);
}

.breakout-report-back__textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--ui-border);
    background: var(--board-bg);
    color: var(--ui-text);
    font-size: 0.8125rem;
    font-family: inherit;
    resize: vertical;
}

.breakout-report-back__textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.breakout-report-back__submit-btn {
    align-self: flex-end;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--ui-primary);
    background: var(--ui-primary);
    color: #fff;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s;
}

.breakout-report-back__submit-btn:hover {
    background: var(--ui-primary-hover);
}

.breakout-report-back__submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.breakout-report-back__empty {
    color: var(--ui-text-muted);
    font-size: 0.8125rem;
    text-align: center;
    padding: 1rem;
}
/* ============================================================
 * EmergingAgendaPanel
 * ============================================================
 * Brainstorm session emerging agenda suggestions.
 * ========================================================== */

.emerging-agenda {
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.emerging-agenda__suggest-btn {
    align-self: flex-start;
    padding: 0.5rem 1rem;
    border: 1px solid var(--ui-primary);
    border-radius: 6px;
    background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
    color: var(--ui-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.emerging-agenda__suggest-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-primary) 20%, transparent);
}

.emerging-agenda__suggest-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Suggestion list ────────────────────────────────────────── */

.emerging-agenda__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.emerging-agenda__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
}

.emerging-agenda__item-text {
    flex: 1;
    font-size: 0.875rem;
    color: var(--ui-text);
}

.emerging-agenda__item-actions {
    display: flex;
    gap: 0.375rem;
}

.emerging-agenda__accept-btn,
.emerging-agenda__reject-btn {
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.emerging-agenda__accept-btn {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

.emerging-agenda__accept-btn:hover {
    background: color-mix(in srgb, var(--ui-success) 25%, transparent);
}

.emerging-agenda__reject-btn {
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    color: var(--ui-error);
}

.emerging-agenda__reject-btn:hover {
    background: color-mix(in srgb, var(--ui-error) 25%, transparent);
}

/* ── Accepted items ─────────────────────────────────────────── */

.emerging-agenda__accepted {
    border-top: 1px solid var(--ui-border);
    padding-top: 0.75rem;
}

.emerging-agenda__accepted-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}

.emerging-agenda__accepted-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: var(--ui-text);
}

.emerging-agenda__check {
    color: var(--ui-success);
    font-weight: 700;
}

/* ── Empty state ────────────────────────────────────────────── */

.emerging-agenda__empty {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    text-align: center;
    padding: 1rem 0;
}
/* ============================================================
 * RetroCardItem
 * ============================================================
 * Individual card in the retro board.
 * ========================================================== */

.retro-card {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

.retro-card__body {
    flex: 1;
    min-width: 0;
}

.retro-card__content {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ui-text);
    line-height: 1.4;
    word-break: break-word;
}

.retro-card__anon-badge {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    color: var(--ui-text-muted);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.retro-card__vote-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.retro-card__vote-btn:hover:not(:disabled) {
    border-color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
}

.retro-card__vote-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.retro-card__vote-count {
    font-weight: 600;
}
/* ============================================================
 * RetroBoardView
 * ============================================================
 * 3-column retrospective board layout.
 * ========================================================== */

.retro-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0.5rem 0;
}

@media (max-width: 768px) {
    .retro-board {
        grid-template-columns: 1fr;
    }
}

/* ── Columns ────────────────────────────────────────────────── */

.retro-board__column {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    overflow: hidden;
}

.retro-board__column-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text);
}

.retro-board__column-header--success {
    background: color-mix(in srgb, var(--ui-success) 12%, transparent);
    border-bottom: 2px solid var(--ui-success);
}

.retro-board__column-header--warning {
    background: color-mix(in srgb, var(--ui-warning) 12%, transparent);
    border-bottom: 2px solid var(--ui-warning);
}

.retro-board__column-header--primary {
    background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
    border-bottom: 2px solid var(--ui-primary);
}

.retro-board__count {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

/* ── Cards ──────────────────────────────────────────────────── */

.retro-board__cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    min-height: 4rem;
}

/* ── Input area ─────────────────────────────────────────────── */

.retro-board__input-area {
    border-top: 1px solid var(--ui-border);
    padding: 0.75rem;
}

.retro-board__input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface-muted);
    color: var(--ui-text);
    font-size: 0.8125rem;
    font-family: inherit;
    resize: none;
    box-sizing: border-box;
}

.retro-board__input::placeholder {
    color: var(--ui-text-muted);
}

.retro-board__input:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.retro-board__input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.retro-board__anon-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    cursor: pointer;
}

.retro-board__submit-btn {
    padding: 0.375rem 0.875rem;
    border: none;
    border-radius: 6px;
    background: var(--ui-primary);
    color: var(--ui-surface);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.retro-board__submit-btn:hover:not(:disabled) {
    opacity: 0.85;
}

.retro-board__submit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* ============================================================
 * TopicBoard
 * ============================================================
 * Kanban-style board for Lean Coffee sessions.
 * ========================================================== */

.topic-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0.5rem 0;
}

@media (max-width: 768px) {
    .topic-board {
        grid-template-columns: 1fr;
    }
}

/* ── Columns ────────────────────────────────────────────────── */

.topic-board__column {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    overflow: hidden;
}

.topic-board__column-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text);
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border-bottom: 1px solid var(--ui-border);
}

.topic-board__count {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

/* ── Topic cards ────────────────────────────────────────────── */

.topic-board__items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    min-height: 4rem;
}

.topic-board__card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    transition: border-color 0.15s ease;
}

.topic-board__card--active {
    border-color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary) 8%, transparent);
}

.topic-board__card-text {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--ui-text);
    word-break: break-word;
}

.topic-board__card-votes {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.topic-board__start-btn,
.topic-board__done-btn {
    flex-shrink: 0;
    padding: 0.25rem 0.625rem;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.topic-board__start-btn {
    background: var(--ui-primary);
    color: var(--ui-surface);
}

.topic-board__done-btn {
    background: var(--ui-success);
    color: var(--ui-surface);
}

.topic-board__start-btn:hover,
.topic-board__done-btn:hover {
    opacity: 0.85;
}

/* ── Input area ─────────────────────────────────────────────── */

.topic-board__input-area {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--ui-border);
}

.topic-board__input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface-muted);
    color: var(--ui-text);
    font-size: 0.8125rem;
    font-family: inherit;
}

.topic-board__input::placeholder {
    color: var(--ui-text-muted);
}

.topic-board__input:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.topic-board__add-btn {
    padding: 0.375rem 0.875rem;
    border: none;
    border-radius: 6px;
    background: var(--ui-primary);
    color: var(--ui-surface);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.topic-board__add-btn:hover:not(:disabled) {
    opacity: 0.85;
}

.topic-board__add-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* ============================================================
 * DotVoting
 * ============================================================
 * Dot-voting component for item prioritization.
 * ========================================================== */

.dot-voting {
    padding: 0.5rem 0;
}

.dot-voting--closed {
    opacity: 0.7;
}

.dot-voting__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.dot-voting__dots-label {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
}

.dot-voting__dots-label strong {
    color: var(--ui-primary);
}

.dot-voting__closed-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
    color: var(--ui-warning);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* ── Item list ──────────────────────────────────────────────── */

.dot-voting__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dot-voting__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
}

.dot-voting__item-content {
    flex: 1;
    min-width: 0;
}

.dot-voting__item-text {
    display: block;
    font-size: 0.8125rem;
    color: var(--ui-text);
    word-break: break-word;
}

.dot-voting__dots {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.dot-voting__dot--filled {
    color: var(--ui-primary);
    font-size: 0.75rem;
}

/* ── Action buttons ─────────────────────────────────────────── */

.dot-voting__item-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.dot-voting__btn {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dot-voting__btn:hover:not(:disabled) {
    border-color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
}

.dot-voting__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
/* ============================================================
 * TimeboxContinueVote
 * ============================================================
 * Overlay for Lean Coffee timebox expiration vote.
 * ========================================================== */

.timebox-vote-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ui-text) 40%, transparent);
    z-index: 1000;
}

.timebox-vote {
    width: 100%;
    max-width: 24rem;
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    text-align: center;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--ui-text) 20%, transparent);
}

.timebox-vote__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.timebox-vote__icon {
    font-size: 1.5rem;
}

.timebox-vote__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ui-text);
}

.timebox-vote__topic {
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
    color: var(--ui-text-secondary);
    line-height: 1.4;
}

/* ── Vote buttons ───────────────────────────────────────────── */

.timebox-vote__buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.timebox-vote__btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.timebox-vote__btn--continue {
    background: var(--ui-success);
    color: var(--ui-surface);
}

.timebox-vote__btn--stop {
    background: var(--ui-warning);
    color: var(--ui-surface);
}

.timebox-vote__btn:hover:not(:disabled) {
    opacity: 0.85;
}

.timebox-vote__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.timebox-vote__voted-msg {
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
}
/* ============================================================
 * RoundRobinIndicator
 * ============================================================
 * Horizontal speaker-rotation indicator for standup sessions.
 * Shows avatar ring for each participant with states:
 *   - idle (waiting)
 *   - active (speaking, pulsing ring)
 *   - completed (dimmed + checkmark)
 * ========================================================== */

.round-robin {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
}

/* ── Header row ─────────────────────────────────────────────── */

.round-robin__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.round-robin__progress {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    font-weight: 500;
}

.round-robin__next-btn {
    padding: 0.375rem 1rem;
    border: none;
    border-radius: 6px;
    background: var(--ui-primary);
    color: var(--ui-on-primary, #fff);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.round-robin__next-btn:hover {
    background: var(--ui-primary-hover);
}

.round-robin__next-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Participant list ───────────────────────────────────────── */

.round-robin__list {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.25rem 0;
}

/* ── Individual participant ─────────────────────────────────── */

.round-robin__participant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 56px;
    position: relative;
}

.round-robin__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text);
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    border: 2px solid transparent;
    transition: border-color 0.2s ease, opacity 0.2s ease;
    position: relative;
    overflow: hidden;
}

.round-robin__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Active speaker – primary ring with pulse */
.round-robin__participant--active .round-robin__avatar {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 30%, transparent);
    animation: rr-pulse 1.5s ease-in-out infinite;
}

/* Completed speaker – dimmed with success checkmark */
.round-robin__participant--completed .round-robin__avatar {
    opacity: 0.5;
    border-color: var(--ui-success);
}

.round-robin__checkmark {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ui-success);
    color: var(--ui-on-success, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    line-height: 1;
}

.round-robin__name {
    font-size: 0.6875rem;
    color: var(--ui-text-muted);
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.round-robin__participant--active .round-robin__name {
    color: var(--ui-primary);
    font-weight: 600;
}

.round-robin__label {
    font-size: 0.625rem;
    color: var(--ui-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Pulse animation ────────────────────────────────────────── */

@keyframes rr-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 30%, transparent);
    }
    50% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--ui-primary) 10%, transparent);
    }
}
/* ============================================================
 * AudienceReactionBar
 * ============================================================
 * Floating emoji reaction bar for event / webinar sessions.
 * Fixed to the bottom of the viewport; reactions float upward.
 * ========================================================== */

.reaction-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--ui-surface) 90%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--ui-border);
    z-index: 100;
}

/* ── Emoji button ───────────────────────────────────────────── */

.reaction-bar__btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--ui-border);
    border-radius: 50%;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease;
}

.reaction-bar__btn:hover:not(:disabled) {
    transform: scale(1.15);
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
}

.reaction-bar__btn:active:not(:disabled) {
    transform: scale(0.95);
}

.reaction-bar__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Floating reactions container ───────────────────────────── */

.reaction-bar__floats {
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    pointer-events: none;
    overflow: hidden;
    height: 200px;
    z-index: 99;
}

.reaction-bar__float {
    position: absolute;
    bottom: 0;
    font-size: 1.5rem;
    animation: float-up 2s ease-out forwards;
}

/* ── Float-up animation ─────────────────────────────────────── */

@keyframes float-up {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    70% {
        opacity: 0.8;
        transform: translateY(-140px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translateY(-200px) scale(0.8);
    }
}
/* ============================================================
 * QAModerationPanel
 * ============================================================
 * Card-based Q&A panel for event / webinar hosts.
 * Supports filtering, upvoting, and moderation actions.
 * ========================================================== */

.qa-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
}

/* ── Filter tabs ────────────────────────────────────────────── */

.qa-panel__filters {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--ui-border);
    padding-bottom: 0.5rem;
}

.qa-panel__filter-btn {
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ui-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.qa-panel__filter-btn:hover {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    color: var(--ui-text);
}

.qa-panel__filter-btn--active {
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
    color: var(--ui-primary);
    font-weight: 600;
}

/* ── Question list ──────────────────────────────────────────── */

.qa-panel__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 420px;
    overflow-y: auto;
}

.qa-panel__empty {
    text-align: center;
    color: var(--ui-text-muted);
    font-size: 0.875rem;
    padding: 1.5rem 0;
}

/* ── Question card ──────────────────────────────────────────── */

.qa-card {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.qa-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.qa-card__text {
    font-size: 0.875rem;
    color: var(--ui-text);
    line-height: 1.4;
    flex: 1;
}

.qa-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.qa-card__author {
    font-weight: 500;
}

/* ── Status badge ───────────────────────────────────────────── */

.qa-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.qa-card__badge--pending {
    background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
    color: var(--ui-warning);
}

.qa-card__badge--promoted {
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
    color: var(--ui-primary);
}

.qa-card__badge--answered {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

.qa-card__badge--dismissed {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    color: var(--ui-text-muted);
}

/* ── Actions row ────────────────────────────────────────────── */

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

.qa-card__upvote {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: transparent;
    color: var(--ui-text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.qa-card__upvote:hover {
    background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
    color: var(--ui-primary);
    border-color: var(--ui-primary);
}

.qa-card__mod-btn {
    padding: 0.25rem 0.625rem;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.qa-card__mod-btn--promote {
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
    color: var(--ui-primary);
}

.qa-card__mod-btn--promote:hover {
    background: color-mix(in srgb, var(--ui-primary) 25%, transparent);
}

.qa-card__mod-btn--dismiss {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    color: var(--ui-text-muted);
}

.qa-card__mod-btn--dismiss:hover {
    background: color-mix(in srgb, var(--ui-text) 15%, transparent);
}

.qa-card__mod-btn--answer {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

.qa-card__mod-btn--answer:hover {
    background: color-mix(in srgb, var(--ui-success) 25%, transparent);
}
/* ============================================================
 * ModuleProgressTracker
 * ============================================================
 * Vertical timeline-style module/lesson progress tracker
 * for Training session types.
 * ========================================================== */

.module-progress {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Overall progress bar ───────────────────────────────────── */

.module-progress__overall {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.module-progress__overall-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text);
}

.module-progress__overall-pct {
    font-variant-numeric: tabular-nums;
    color: var(--ui-primary);
}

.module-progress__bar-track {
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    overflow: hidden;
}

.module-progress__bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--ui-primary);
    transition: width 0.4s ease;
}

/* ── Timeline ───────────────────────────────────────────────── */

.module-progress__timeline {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 1.75rem;
}

/* Vertical connecting line */
.module-progress__timeline::before {
    content: '';
    position: absolute;
    left: 0.6875rem;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 2px;
    background: color-mix(in srgb, var(--ui-text) 12%, transparent);
    border-radius: 1px;
}

/* ── Module card ────────────────────────────────────────────── */

.module-progress__module {
    position: relative;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    margin-bottom: 0.5rem;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent;
}

.module-progress__module--locked {
    opacity: 0.5;
}

.module-progress__module--current {
    border-color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 8%, transparent);
}

/* ── Status icon (positioned on the timeline line) ──────────── */

.module-progress__icon {
    position: absolute;
    left: -1.75rem;
    top: 0.75rem;
    width: 1.375rem;
    height: 1.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    border-radius: 50%;
    background: var(--ui-surface);
    border: 2px solid color-mix(in srgb, var(--ui-text) 12%, transparent);
    z-index: 1;
}

.module-progress__icon--locked {
    color: var(--ui-text-muted);
    border-color: color-mix(in srgb, var(--ui-text) 15%, transparent);
}

.module-progress__icon--available {
    color: var(--ui-primary);
    border-color: var(--ui-primary);
}

.module-progress__icon--in-progress {
    color: var(--ui-accent);
    border-color: var(--ui-accent);
}

.module-progress__icon--completed {
    color: var(--ui-success);
    border-color: var(--ui-success);
}

/* ── Module content ─────────────────────────────────────────── */

.module-progress__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text);
    margin-bottom: 0.25rem;
}

.module-progress__desc {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.module-progress__score {
    font-size: 0.75rem;
    color: var(--ui-success);
    font-weight: 600;
    margin-bottom: 0.375rem;
}

/* ── Actions ────────────────────────────────────────────────── */

.module-progress__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.375rem;
}

.module-progress__btn {
    padding: 0.35rem 0.875rem;
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.module-progress__btn--start {
    background: var(--ui-primary);
    color: var(--ui-on-primary, #fff);
}

.module-progress__btn--start:hover {
    background: var(--ui-primary-hover);
}

.module-progress__btn--complete {
    background: var(--ui-success);
    color: var(--ui-on-success, #fff);
}

.module-progress__btn--complete:hover {
    background: color-mix(in srgb, var(--ui-success) 85%, var(--ui-text));
}

.module-progress__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* ============================================================
 * CertificateView
 * ============================================================
 * Formal certificate card for Training session completion.
 * Decorative double border with accent/gold styling.
 * ========================================================== */

.certificate {
    max-width: 640px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    border: 3px double var(--ui-primary);
    border-radius: 12px;
    background: var(--ui-surface);
    text-align: center;
}

/* ── Decorative inner border ────────────────────────────────── */

.certificate__inner {
    padding: 2rem 1.5rem;
    border: 1px solid color-mix(in srgb, var(--ui-primary) 30%, transparent);
    border-radius: 8px;
}

/* ── Header ─────────────────────────────────────────────────── */

.certificate__header {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ui-primary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.375rem;
}

.certificate__divider {
    width: 4rem;
    height: 2px;
    margin: 0.75rem auto 1.25rem;
    background: var(--ui-accent);
    border: none;
    border-radius: 1px;
}

/* ── Body text ──────────────────────────────────────────────── */

.certificate__preamble {
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    margin-bottom: 0.25rem;
}

.certificate__name {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ui-text);
    margin-bottom: 0.25rem;
}

.certificate__completion-text {
    font-size: 0.9375rem;
    color: var(--ui-text-secondary);
    margin-bottom: 0.125rem;
    line-height: 1.5;
}

.certificate__session-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ui-accent);
    margin-bottom: 0.75rem;
}

/* ── Score ───────────────────────────────────────────────────── */

.certificate__score {
    display: inline-block;
    padding: 0.375rem 1rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ui-success) 12%, transparent);
    color: var(--ui-success);
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* ── Series ──────────────────────────────────────────────────── */

.certificate__series {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    margin-bottom: 0.75rem;
}

/* ── Footer ──────────────────────────────────────────────────── */

.certificate__footer {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ui-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.certificate__date {
    font-variant-numeric: tabular-nums;
}

.certificate__id {
    font-family: monospace;
    font-size: 0.6875rem;
    opacity: 0.7;
}

/* ── Action buttons ──────────────────────────────────────────── */

.certificate__actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.certificate__btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.certificate__btn--download {
    background: var(--ui-primary);
    color: var(--ui-on-primary, #fff);
}

.certificate__btn--download:hover {
    background: var(--ui-primary-hover);
}

.certificate__btn--share {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    color: var(--ui-text);
}

.certificate__btn--share:hover {
    background: color-mix(in srgb, var(--ui-text) 14%, transparent);
}
/* ============================================================
 * PractitionerChecklistView
 * ============================================================
 * Service session checklist for practitioners. Items grouped
 * by category, with expandable notes per item.
 * ========================================================== */

.practitioner-checklist {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Header / Info ──────────────────────────────────────────── */

.practitioner-checklist__header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.practitioner-checklist__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}

.practitioner-checklist__subtitle {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
}

/* ── Progress bar ───────────────────────────────────────────── */

.practitioner-checklist__progress {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.practitioner-checklist__progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--ui-text-secondary);
}

.practitioner-checklist__bar-track {
    height: 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    overflow: hidden;
}

.practitioner-checklist__bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--ui-success);
    transition: width 0.3s ease;
}

/* ── Category section ───────────────────────────────────────── */

.practitioner-checklist__category {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.practitioner-checklist__category-header {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-muted);
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--ui-border);
}

/* ── Item ────────────────────────────────────────────────────── */

.practitioner-checklist__item {
    border-radius: 6px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    overflow: hidden;
}

.practitioner-checklist__item-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: default;
}

.practitioner-checklist__checkbox {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--ui-success);
    cursor: pointer;
    flex-shrink: 0;
}

.practitioner-checklist__checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.practitioner-checklist__label {
    flex: 1;
    font-size: 0.875rem;
    color: var(--ui-text);
}

.practitioner-checklist__label--checked {
    text-decoration: line-through;
    color: var(--ui-text-muted);
}

.practitioner-checklist__required {
    color: var(--ui-error);
    font-weight: 700;
    margin-left: 0.125rem;
}

.practitioner-checklist__expand-btn {
    background: none;
    border: none;
    font-size: 0.8rem;
    color: var(--ui-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

.practitioner-checklist__expand-btn--open {
    transform: rotate(90deg);
}

/* ── Notes ───────────────────────────────────────────────────── */

.practitioner-checklist__notes {
    padding: 0 0.75rem 0.625rem;
}

.practitioner-checklist__notes-input {
    width: 100%;
    min-height: 3rem;
    padding: 0.5rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.8125rem;
    font-family: inherit;
    resize: vertical;
}

.practitioner-checklist__notes-input:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.practitioner-checklist__notes-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.practitioner-checklist__notes-display {
    font-size: 0.8125rem;
    color: var(--ui-text-secondary);
    padding: 0.25rem 0;
    line-height: 1.4;
    white-space: pre-wrap;
}
/* ============================================================
 * TreatmentReportGenerator
 * ============================================================
 * Service session report editor/generator. Sections displayed
 * as editable or read-only blocks with generate/export actions.
 * ========================================================== */

.treatment-report {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Report header ──────────────────────────────────────────── */

.treatment-report__header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.treatment-report__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ui-text);
}

.treatment-report__meta {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ── Top action bar ─────────────────────────────────────────── */

.treatment-report__actions-top {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.treatment-report__btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.treatment-report__btn--generate {
    background: var(--ui-accent);
    color: var(--ui-on-primary, #fff);
}

.treatment-report__btn--generate:hover {
    background: color-mix(in srgb, var(--ui-accent) 85%, var(--ui-text));
}

.treatment-report__btn--generate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.treatment-report__btn--export {
    background: var(--ui-primary);
    color: var(--ui-on-primary, #fff);
}

.treatment-report__btn--export:hover {
    background: var(--ui-primary-hover);
}

/* ── Loading spinner ─────────────────────────────────────────── */

.treatment-report__spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid color-mix(in srgb, var(--ui-text) 20%, transparent);
    border-top-color: var(--ui-accent);
    border-radius: 50%;
    animation: treatment-report-spin 0.6s linear infinite;
}

@keyframes treatment-report-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Sections list ───────────────────────────────────────────── */

.treatment-report__sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Section card ────────────────────────────────────────────── */

.treatment-report__section {
    padding: 0.875rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.treatment-report__section-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ui-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.treatment-report__section-content {
    font-size: 0.875rem;
    color: var(--ui-text-secondary);
    line-height: 1.55;
    white-space: pre-wrap;
}

.treatment-report__section-textarea {
    width: 100%;
    min-height: 5rem;
    padding: 0.625rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.55;
    resize: vertical;
}

.treatment-report__section-textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
}

/* ── Bottom actions ──────────────────────────────────────────── */

.treatment-report__actions-bottom {
    display: flex;
    justify-content: flex-end;
}
/* ============================================================
 * GoalTracker
 * ============================================================
 * Coaching session goal tracking with status badges, progress
 * bars, and expandable milestone checklists.
 * ========================================================== */

.goal-tracker {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Summary ────────────────────────────────────────────────── */

.goal-tracker__summary {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.goal-tracker__summary-sep {
    color: var(--ui-border);
}

/* ── Add goal area ──────────────────────────────────────────── */

.goal-tracker__add-area {
    display: flex;
    flex-direction: column;
}

.goal-tracker__add-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
}

.goal-tracker__input {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    font-family: inherit;
}

.goal-tracker__input:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.goal-tracker__textarea {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}

.goal-tracker__textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.goal-tracker__add-form-actions {
    display: flex;
    gap: 0.5rem;
}

/* ── Buttons ────────────────────────────────────────────────── */

.goal-tracker__btn {
    padding: 0.4375rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.goal-tracker__btn--primary {
    background: var(--ui-primary);
    color: var(--ui-on-primary, #fff);
}

.goal-tracker__btn--primary:hover {
    background: var(--ui-primary-hover);
}

.goal-tracker__btn--primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.goal-tracker__btn--muted {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text-muted);
}

.goal-tracker__btn--muted:hover {
    background: color-mix(in srgb, var(--ui-text) 15%, transparent);
}

/* ── Goal card list ─────────────────────────────────────────── */

.goal-tracker__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.goal-tracker__card {
    padding: 0.875rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Card header ────────────────────────────────────────────── */

.goal-tracker__card-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.goal-tracker__card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ui-text);
}

.goal-tracker__target-date {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    margin-left: auto;
}

.goal-tracker__card-desc {
    font-size: 0.8125rem;
    color: var(--ui-text-secondary);
    line-height: 1.5;
}

/* ── Status badges ──────────────────────────────────────────── */

.goal-tracker__status {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1875rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.goal-tracker__status--not-started {
    background: color-mix(in srgb, var(--ui-text-muted) 15%, transparent);
    color: var(--ui-text-muted);
}

.goal-tracker__status--in-progress {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
}

.goal-tracker__status--completed {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

.goal-tracker__status--blocked {
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    color: var(--ui-error);
}

/* ── Progress bar ───────────────────────────────────────────── */

.goal-tracker__progress {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.goal-tracker__progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.goal-tracker__progress-pct {
    font-variant-numeric: tabular-nums;
    color: var(--ui-primary);
    font-weight: 600;
}

.goal-tracker__bar-track {
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    overflow: hidden;
}

.goal-tracker__bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--ui-primary);
    transition: width 0.4s ease;
}

/* ── Host controls ──────────────────────────────────────────── */

.goal-tracker__controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.goal-tracker__select {
    padding: 0.3125rem 0.5rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
}

.goal-tracker__select:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.goal-tracker__slider {
    flex: 1;
    accent-color: var(--ui-primary);
}

/* ── Milestones ─────────────────────────────────────────────── */

.goal-tracker__expand-btn {
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    text-align: left;
    padding: 0;
    transition: color 0.15s ease;
}

.goal-tracker__expand-btn:hover {
    color: var(--ui-text);
}

.goal-tracker__milestones {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.goal-tracker__milestone {
    font-size: 0.8125rem;
}

.goal-tracker__milestone-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.goal-tracker__milestone-text {
    color: var(--ui-text);
}

.goal-tracker__milestone-text--done {
    text-decoration: line-through;
    color: var(--ui-text-muted);
}
/* ============================================================
 * CrossSessionProgressView
 * ============================================================
 * Cross-session coaching progress with stat cards and a
 * reverse-chronological timeline fading from recent to older.
 * ========================================================== */

.cross-progress {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Stats cards ────────────────────────────────────────────── */

.cross-progress__stats {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cross-progress__stat-card {
    flex: 1 1 10rem;
    padding: 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cross-progress__stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

.cross-progress__stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cross-progress__stat-bar-track {
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    overflow: hidden;
    margin-top: 0.375rem;
}

.cross-progress__stat-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--ui-success);
    transition: width 0.4s ease;
}

/* ── Empty state ────────────────────────────────────────────── */

.cross-progress__empty {
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    text-align: center;
    padding: 2rem 0;
}

/* ── Timeline ───────────────────────────────────────────────── */

.cross-progress__timeline {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 1.5rem;
}

/* Vertical connecting line */
.cross-progress__timeline::before {
    content: '';
    position: absolute;
    left: 0.4375rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: color-mix(in srgb, var(--ui-text) 12%, transparent);
    border-radius: 1px;
}

/* ── Session entry ──────────────────────────────────────────── */

.cross-progress__session {
    position: relative;
    display: flex;
    gap: 0;
    padding-bottom: 1rem;
    transition: opacity 0.3s ease;
}

.cross-progress__session-dot {
    position: absolute;
    left: -1.5rem;
    top: 0.5rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--ui-accent);
    border: 2px solid var(--ui-surface);
    box-sizing: content-box;
}

.cross-progress__session-body {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cross-progress__session-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cross-progress__session-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    white-space: nowrap;
}

.cross-progress__session-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ui-text);
}

/* ── Session progress bar ───────────────────────────────────── */

.cross-progress__session-progress {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cross-progress__session-progress-label {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.cross-progress__bar-track {
    height: 5px;
    border-radius: 2.5px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    overflow: hidden;
}

.cross-progress__bar-fill {
    height: 100%;
    border-radius: 2.5px;
    background: var(--ui-primary);
    transition: width 0.4s ease;
}

/* ── Key takeaways ──────────────────────────────────────────── */

.cross-progress__takeaways {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cross-progress__takeaway {
    font-size: 0.8125rem;
    color: var(--ui-text-secondary);
    padding-left: 1rem;
    position: relative;
}

.cross-progress__takeaway::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--ui-accent);
}

/* ── Session notes ──────────────────────────────────────────── */

.cross-progress__session-notes {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    font-style: italic;
    line-height: 1.5;
}
/* ============================================================
 * ConfidentialNotes
 * ============================================================
 * Private coaching notes area with lock header, category
 * badges, filter tabs, and inline editing.
 * ========================================================== */

.confidential-notes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-warning) 5%, transparent);
    border: 1px dashed color-mix(in srgb, var(--ui-warning) 30%, transparent);
}

/* ── Header ─────────────────────────────────────────────────── */

.confidential-notes__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.confidential-notes__lock {
    font-size: 1rem;
}

.confidential-notes__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ui-text);
}

/* ── Add note form ──────────────────────────────────────────── */

.confidential-notes__add-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.confidential-notes__textarea {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.8125rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}

.confidential-notes__textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.confidential-notes__add-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.confidential-notes__select {
    padding: 0.3125rem 0.5rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
}

.confidential-notes__select:focus {
    outline: none;
    border-color: var(--ui-primary);
}

/* ── Buttons ────────────────────────────────────────────────── */

.confidential-notes__btn {
    padding: 0.375rem 0.875rem;
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.confidential-notes__btn--save {
    background: var(--ui-primary);
    color: var(--ui-on-primary, #fff);
}

.confidential-notes__btn--save:hover {
    background: var(--ui-primary-hover);
}

.confidential-notes__btn--save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.confidential-notes__btn--muted {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text-muted);
}

.confidential-notes__btn--muted:hover {
    background: color-mix(in srgb, var(--ui-text) 15%, transparent);
}

/* ── Category filter tabs ───────────────────────────────────── */

.confidential-notes__tabs {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.confidential-notes__tab {
    padding: 0.3125rem 0.625rem;
    border: none;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    color: var(--ui-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.confidential-notes__tab:hover {
    background: color-mix(in srgb, var(--ui-text) 12%, transparent);
    color: var(--ui-text);
}

.confidential-notes__tab--active {
    background: var(--ui-primary);
    color: var(--ui-on-primary, #fff);
}

/* ── Notes list ─────────────────────────────────────────────── */

.confidential-notes__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.confidential-notes__empty {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    text-align: center;
    padding: 1rem 0;
}

/* ── Note card ──────────────────────────────────────────────── */

.confidential-notes__note {
    position: relative;
    padding: 0.75rem 0.875rem;
    border-radius: 6px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.confidential-notes__note-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.confidential-notes__note-date {
    font-size: 0.6875rem;
    color: var(--ui-text-muted);
    margin-left: auto;
}

.confidential-notes__note-content {
    font-size: 0.8125rem;
    color: var(--ui-text);
    line-height: 1.5;
    white-space: pre-wrap;
    cursor: pointer;
    border-radius: 4px;
    padding: 0.25rem;
    transition: background 0.15s ease;
}

.confidential-notes__note-content:hover {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

/* ── Category badges ────────────────────────────────────────── */

.confidential-notes__badge {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.125rem 0.4375rem;
    border-radius: 3px;
    white-space: nowrap;
}

.confidential-notes__badge--observation {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
}

.confidential-notes__badge--action-item {
    background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
    color: var(--ui-warning);
}

.confidential-notes__badge--follow-up {
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
    color: var(--ui-primary);
}

.confidential-notes__badge--general {
    background: color-mix(in srgb, var(--ui-text-muted) 15%, transparent);
    color: var(--ui-text-muted);
}

/* ── Edit area ──────────────────────────────────────────────── */

.confidential-notes__edit-area {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.confidential-notes__edit-actions {
    display: flex;
    gap: 0.375rem;
}

/* ── Delete button ──────────────────────────────────────────── */

.confidential-notes__delete-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    padding: 0.125rem 0.25rem;
    border-radius: 3px;
}

.confidential-notes__note:hover .confidential-notes__delete-btn {
    opacity: 1;
}

.confidential-notes__delete-btn:hover {
    color: var(--ui-error);
    background: color-mix(in srgb, var(--ui-error) 10%, transparent);
}
/* ============================================================
 * RecommendationReport
 * ============================================================
 * Consultation session recommendation cards with priority
 * badges, grouped list, and add/generate/export actions.
 * ========================================================== */

.rec-report {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Header ─────────────────────────────────────────────────── */

.rec-report__header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rec-report__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ui-text);
}

/* ── Actions ────────────────────────────────────────────────── */

.rec-report__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ── Buttons ────────────────────────────────────────────────── */

.rec-report__btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.rec-report__btn--generate {
    background: var(--ui-accent);
    color: var(--ui-on-primary, #fff);
}

.rec-report__btn--generate:hover {
    background: color-mix(in srgb, var(--ui-accent) 85%, var(--ui-text));
}

.rec-report__btn--generate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rec-report__btn--primary {
    background: var(--ui-primary);
    color: var(--ui-on-primary, #fff);
}

.rec-report__btn--primary:hover {
    background: var(--ui-primary-hover);
}

.rec-report__btn--primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rec-report__btn--muted {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text-muted);
}

.rec-report__btn--muted:hover {
    background: color-mix(in srgb, var(--ui-text) 15%, transparent);
}

.rec-report__btn--export {
    background: var(--ui-primary);
    color: var(--ui-on-primary, #fff);
}

.rec-report__btn--export:hover {
    background: var(--ui-primary-hover);
}

/* ── Loading spinner ────────────────────────────────────────── */

.rec-report__spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid color-mix(in srgb, var(--ui-text) 20%, transparent);
    border-top-color: var(--ui-accent);
    border-radius: 50%;
    animation: rec-report-spin 0.6s linear infinite;
}

@keyframes rec-report-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Session summary ────────────────────────────────────────── */

.rec-report__summary {
    padding: 0.875rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.rec-report__summary-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rec-report__summary-content {
    font-size: 0.875rem;
    color: var(--ui-text-secondary);
    line-height: 1.55;
    white-space: pre-wrap;
}

/* ── Empty state ────────────────────────────────────────────── */

.rec-report__empty {
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    text-align: center;
    padding: 2rem 0;
}

/* ── Recommendation cards ───────────────────────────────────── */

.rec-report__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rec-report__card {
    position: relative;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-left: 3px solid transparent;
}

.rec-report__card--high {
    border-left-color: var(--ui-error);
}

.rec-report__card--medium {
    border-left-color: var(--ui-warning);
}

.rec-report__card--low {
    border-left-color: var(--ui-text-muted);
}

.rec-report__card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rec-report__card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ui-text);
}

.rec-report__card-desc {
    font-size: 0.8125rem;
    color: var(--ui-text-secondary);
    line-height: 1.5;
}

/* ── Priority badges ────────────────────────────────────────── */

.rec-report__priority {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1875rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.rec-report__priority--high {
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    color: var(--ui-error);
}

.rec-report__priority--medium {
    background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
    color: var(--ui-warning);
}

.rec-report__priority--low {
    background: color-mix(in srgb, var(--ui-text-muted) 15%, transparent);
    color: var(--ui-text-muted);
}

/* ── Category tag ───────────────────────────────────────────── */

.rec-report__category {
    font-size: 0.6875rem;
    color: var(--ui-text-muted);
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    padding: 0.125rem 0.4375rem;
    border-radius: 3px;
}

/* ── Remove button ──────────────────────────────────────────── */

.rec-report__remove-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    padding: 0.125rem 0.25rem;
    border-radius: 3px;
}

.rec-report__card:hover .rec-report__remove-btn {
    opacity: 1;
}

.rec-report__remove-btn:hover {
    color: var(--ui-error);
    background: color-mix(in srgb, var(--ui-error) 10%, transparent);
}

/* ── Action items ───────────────────────────────────────────── */

.rec-report__action-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rec-report__action-item {
    font-size: 0.8125rem;
    color: var(--ui-text-secondary);
    padding-left: 1rem;
    position: relative;
}

.rec-report__action-item::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--ui-accent);
}

/* ── Add recommendation form ────────────────────────────────── */

.rec-report__add-area {
    display: flex;
    flex-direction: column;
}

.rec-report__add-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
}

.rec-report__input {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    font-family: inherit;
}

.rec-report__input:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.rec-report__textarea {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}

.rec-report__textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.rec-report__add-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rec-report__select {
    padding: 0.3125rem 0.5rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
}

.rec-report__select:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.rec-report__add-form-actions {
    display: flex;
    gap: 0.5rem;
}

/* ── Footer ─────────────────────────────────────────────────── */

.rec-report__footer {
    display: flex;
    justify-content: flex-end;
}
/* ============================================================
 * CandidateComparisonDashboard
 * ============================================================
 * Table/grid layout for comparing headhunter interview
 * candidates. Score cells coloured by value using ui variables.
 * ========================================================== */

.ccd {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Header ─────────────────────────────────────────────────── */

.ccd__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ccd__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ui-text);
    margin: 0;
}

.ccd__empty {
    color: var(--ui-text-muted);
    font-style: italic;
}

/* ── Button ─────────────────────────────────────────────────── */

.ccd__btn {
    padding: 0.4rem 1rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    color: var(--ui-text-muted);
    transition: background 0.15s ease;
}

.ccd__btn:hover {
    background: color-mix(in srgb, var(--ui-text) 12%, transparent);
}

/* ── Table ──────────────────────────────────────────────────── */

.ccd__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
}

.ccd__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ccd__th,
.ccd__td {
    padding: 0.625rem 0.875rem;
    text-align: center;
    border-bottom: 1px solid var(--ui-border);
}

.ccd__th--criterion,
.ccd__td--criterion {
    text-align: left;
    font-weight: 600;
    color: var(--ui-text);
    white-space: nowrap;
}

.ccd__th--candidate {
    color: var(--ui-text);
    font-weight: 700;
    min-width: 7rem;
}

.ccd__candidate-name {
    display: block;
}

/* ── Best-match badge ───────────────────────────────────────── */

.ccd__badge--best {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--ui-accent) 20%, transparent);
    color: var(--ui-accent);
}

/* ── Score colour coding ────────────────────────────────────── */

.ccd__td--score {
    cursor: default;
    transition: background 0.15s ease;
}

.ccd__td--excellent {
    background: color-mix(in srgb, var(--ui-success) 22%, transparent);
    color: var(--ui-success);
    font-weight: 700;
}

.ccd__td--good {
    background: color-mix(in srgb, var(--ui-success) 12%, transparent);
    color: var(--ui-text);
}

.ccd__td--average {
    background: color-mix(in srgb, var(--ui-warning) 12%, transparent);
    color: var(--ui-text);
}

.ccd__td--below {
    background: color-mix(in srgb, var(--ui-warning) 20%, transparent);
    color: var(--ui-warning);
}

.ccd__td--poor {
    background: color-mix(in srgb, var(--ui-error) 18%, transparent);
    color: var(--ui-error);
}

.ccd__score-value {
    display: inline-block;
    min-width: 1.5rem;
}

/* ── Inline select for editing ──────────────────────────────── */

.ccd__select {
    font-size: 0.875rem;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    background: var(--ui-surface);
    color: var(--ui-text);
}

/* ── Overall row ────────────────────────────────────────────── */

.ccd__row--overall {
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
}

.ccd__td--overall-label {
    font-weight: 700;
}

.ccd__overall-value {
    font-size: 1rem;
    font-weight: 800;
}

.ccd__td--overall {
    font-weight: 700;
}

/* ── Notes section ──────────────────────────────────────────── */

.ccd__notes-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ccd__notes-heading {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ui-text);
    margin: 0;
}

.ccd__notes-block {
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    overflow: hidden;
}

.ccd__notes-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    color: var(--ui-text);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.ccd__notes-toggle:hover {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
}

.ccd__notes-arrow {
    font-size: 0.75rem;
    width: 1rem;
    flex-shrink: 0;
}

.ccd__notes-date {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ui-text-muted);
}

.ccd__notes-body {
    padding: 0.75rem;
}

.ccd__notes-textarea {
    width: 100%;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.8125rem;
    font-family: inherit;
    background: var(--ui-surface);
    color: var(--ui-text);
    resize: vertical;
}

.ccd__notes-textarea:focus {
    outline: 2px solid var(--ui-primary);
    outline-offset: -1px;
}

.ccd__notes-text {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    margin: 0;
    white-space: pre-wrap;
}
/* ============================================================
 * CandidateCard
 * ============================================================
 * Individual candidate profile card with score ring,
 * recommendation badge, strengths and concerns lists.
 * ========================================================== */

.cc {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.cc--clickable {
    cursor: pointer;
}

.cc--clickable:hover {
    border-color: var(--ui-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ui-primary) 15%, transparent);
}

/* ── Top row ────────────────────────────────────────────────── */

.cc__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.cc__info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.cc__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ui-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc__position {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    margin: 0;
}

.cc__date {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    margin: 0;
}

/* ── Score ring ─────────────────────────────────────────────── */

.cc__score-ring {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
    flex-shrink: 0;
}

.cc__score-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.cc__score-bg {
    fill: none;
    stroke: color-mix(in srgb, var(--ui-text) 10%, transparent);
    stroke-width: 3.8;
}

.cc__score-fill {
    fill: none;
    stroke: var(--ui-primary);
    stroke-width: 3.8;
    stroke-linecap: round;
    transition: stroke-dasharray 0.4s ease;
}

.cc__score-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--ui-text);
}

/* ── Recommendation badge ───────────────────────────────────── */

.cc__rec {
    display: inline-block;
    align-self: flex-start;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.cc__rec--strong-yes {
    background: color-mix(in srgb, var(--ui-success) 20%, transparent);
    color: var(--ui-success);
}

.cc__rec--yes {
    background: color-mix(in srgb, var(--ui-accent) 18%, transparent);
    color: var(--ui-accent);
}

.cc__rec--maybe {
    background: color-mix(in srgb, var(--ui-warning) 18%, transparent);
    color: var(--ui-warning);
}

.cc__rec--no {
    background: color-mix(in srgb, var(--ui-error) 18%, transparent);
    color: var(--ui-error);
}

/* ── Strengths / Concerns lists ─────────────────────────────── */

.cc__list-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cc__list-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.cc__list-heading--strength {
    color: var(--ui-success);
}

.cc__list-heading--concern {
    color: var(--ui-warning);
}

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

.cc__list-item {
    font-size: 0.8125rem;
    color: var(--ui-text);
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}

.cc__list-icon {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1.4;
}

.cc__list-item--strength .cc__list-icon {
    color: var(--ui-success);
}

.cc__list-item--concern .cc__list-icon {
    color: var(--ui-warning);
}
/* ============================================================
 * AssessmentFormRenderer
 * ============================================================
 * 360° Review assessment form. Question groups, rating
 * buttons, text areas, multiple-choice radio, progress bar.
 * ========================================================== */

.afr {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Header ─────────────────────────────────────────────────── */

.afr__header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.afr__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ui-text);
    margin: 0;
}

.afr__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.afr__role {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
}

.afr__badge--anon {
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--ui-accent) 18%, transparent);
    color: var(--ui-accent);
}

/* ── Progress ───────────────────────────────────────────────── */

.afr__progress {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.afr__progress-text {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
}

.afr__progress-track {
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    overflow: hidden;
}

.afr__progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--ui-primary);
    transition: width 0.3s ease;
}

/* ── Category group ─────────────────────────────────────────── */

.afr__category {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 2%, transparent);
}

.afr__category-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ui-text);
    margin: 0;
}

/* ── Question ───────────────────────────────────────────────── */

.afr__question {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.afr__question-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text);
}

.afr__required {
    color: var(--ui-error);
    margin-left: 0.2rem;
}

/* ── Rating buttons ─────────────────────────────────────────── */

.afr__rating {
    display: flex;
    gap: 0.375rem;
}

.afr__rating-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.afr__rating-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
    border-color: var(--ui-primary);
}

.afr__rating-btn--active {
    background: var(--ui-primary);
    color: var(--ui-on-primary, #fff);
    border-color: var(--ui-primary);
}

.afr__rating-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Textarea ───────────────────────────────────────────────── */

.afr__textarea {
    width: 100%;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.8125rem;
    font-family: inherit;
    background: var(--ui-surface);
    color: var(--ui-text);
    resize: vertical;
}

.afr__textarea:focus {
    outline: 2px solid var(--ui-primary);
    outline-offset: -1px;
}

.afr__textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Multiple-choice radios ─────────────────────────────────── */

.afr__choices {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.afr__choice-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--ui-text);
    cursor: pointer;
}

.afr__choice-radio {
    accent-color: var(--ui-primary);
}

/* ── Actions ────────────────────────────────────────────────── */

.afr__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.afr__btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.afr__btn--submit {
    background: var(--ui-primary);
    color: var(--ui-on-primary, #fff);
}

.afr__btn--submit:hover:not(:disabled) {
    background: var(--ui-primary-hover);
}

.afr__btn--submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.afr__btn--confirm {
    background: var(--ui-warning);
    color: var(--ui-on-primary, #fff);
}

.afr__btn--cancel {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text-muted);
}

.afr__btn--cancel:hover {
    background: color-mix(in srgb, var(--ui-text) 15%, transparent);
}

/* ── Submitted banner ───────────────────────────────────────── */

.afr__submitted-banner {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}
/* ============================================================
 * SynthesisReportView
 * ============================================================
 * 360° Review synthesis report. Overall rating bar,
 * strengths/improvements lists, category drill-down with
 * distribution bars and anonymised quotes.
 * ========================================================== */

.srv {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Header ─────────────────────────────────────────────────── */

.srv__header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.srv__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ui-text);
    margin: 0;
}

.srv__reviewer-count {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
}

/* ── Overall rating ─────────────────────────────────────────── */

.srv__overall {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.srv__overall-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text);
}

.srv__overall-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ui-primary);
}

.srv__overall-max {
    font-size: 0.875rem;
    color: var(--ui-text-muted);
}

.srv__overall-bar-track {
    flex: 1;
    min-width: 6rem;
    height: 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    overflow: hidden;
}

.srv__overall-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--ui-primary);
    transition: width 0.3s ease;
}

/* ── AI Summary ─────────────────────────────────────────────── */

.srv__summary-block {
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-accent) 6%, transparent);
}

.srv__summary-heading {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ui-accent);
    margin: 0 0 0.375rem;
}

.srv__summary-text {
    font-size: 0.8125rem;
    color: var(--ui-text);
    margin: 0;
    line-height: 1.6;
}

/* ── Highlights (strengths / improvements) ──────────────────── */

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

.srv__highlight-section {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.srv__highlight-heading {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.srv__highlight-heading--strength {
    color: var(--ui-success);
}

.srv__highlight-heading--improve {
    color: var(--ui-warning);
}

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

.srv__highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--ui-text);
}

.srv__highlight-icon {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

.srv__highlight-item--strength .srv__highlight-icon {
    color: var(--ui-success);
}

.srv__highlight-item--improve .srv__highlight-icon {
    color: var(--ui-warning);
}

/* ── Category drill-down ────────────────────────────────────── */

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

.srv__cat {
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    overflow: hidden;
}

.srv__cat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: none;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    color: var(--ui-text);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.srv__cat-header:hover {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
}

.srv__cat-arrow {
    font-size: 0.75rem;
    width: 1rem;
    flex-shrink: 0;
}

.srv__cat-name {
    flex: 1;
    min-width: 0;
}

.srv__cat-rating {
    font-weight: 700;
    color: var(--ui-primary);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.srv__cat-bar-track {
    width: 5rem;
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    overflow: hidden;
    flex-shrink: 0;
}

.srv__cat-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--ui-primary);
    transition: width 0.3s ease;
}

/* ── Category body (question results) ───────────────────────── */

.srv__cat-body {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 0.875rem;
}

.srv__qr {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.srv__qr-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0;
}

.srv__qr-rating {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    font-weight: 600;
}

/* ── Distribution bars ──────────────────────────────────────── */

.srv__qr-dist {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.srv__qr-dist-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.srv__qr-dist-label {
    width: 2.5rem;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    text-align: right;
    flex-shrink: 0;
}

.srv__qr-dist-bar-track {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    overflow: hidden;
}

.srv__qr-dist-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--ui-accent);
    transition: width 0.3s ease;
}

.srv__qr-dist-count {
    width: 1.5rem;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    flex-shrink: 0;
}

/* ── Text response quotes ───────────────────────────────────── */

.srv__qr-texts {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.srv__qr-quote {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--ui-border);
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    font-style: italic;
    line-height: 1.5;
}

/* ── Actions ────────────────────────────────────────────────── */

.srv__actions {
    display: flex;
    gap: 0.75rem;
}

.srv__btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.srv__btn--export {
    background: var(--ui-primary);
    color: var(--ui-on-primary, #fff);
}

.srv__btn--export:hover {
    background: var(--ui-primary-hover);
}
/* ============================================================
 * TimedTestMode
 * ============================================================
 * Timed exam interface. Sticky timer bar with low-time
 * warning, question navigator circles, answer inputs.
 * ========================================================== */

.ttm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Timer bar ──────────────────────────────────────────────── */

.ttm__timer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    font-size: 0.875rem;
    color: var(--ui-text);
}

.ttm__timer--low {
    border-color: var(--ui-error);
    background: color-mix(in srgb, var(--ui-error) 8%, var(--ui-surface));
}

.ttm__timer-icon {
    font-size: 1rem;
}

.ttm__timer-value {
    font-size: 1.125rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ttm__timer--low .ttm__timer-value {
    color: var(--ui-error);
}

.ttm__timer-info {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
}

/* ── Question navigator ─────────────────────────────────────── */

.ttm__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.ttm__nav-dot {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: 50%;
    background: var(--ui-surface);
    color: var(--ui-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ttm__nav-dot:hover {
    border-color: var(--ui-primary);
}

.ttm__nav-dot--answered {
    background: color-mix(in srgb, var(--ui-success) 18%, transparent);
    border-color: var(--ui-success);
    color: var(--ui-success);
}

.ttm__nav-dot--current {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: var(--ui-on-primary, #fff);
}

/* ── Question display ───────────────────────────────────────── */

.ttm__question {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}

.ttm__question-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ttm__question-num {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ui-text);
}

.ttm__question-pts {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
}

.ttm__question-text {
    font-size: 0.9375rem;
    color: var(--ui-text);
    margin: 0;
    line-height: 1.6;
}

/* ── Radio options ──────────────────────────────────────────── */

.ttm__options {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ttm__option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--ui-text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ttm__option-label:hover {
    background: color-mix(in srgb, var(--ui-primary) 8%, transparent);
    border-color: var(--ui-primary);
}

.ttm__option-radio {
    accent-color: var(--ui-primary);
}

/* ── Short-answer textarea ──────────────────────────────────── */

.ttm__textarea {
    width: 100%;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.8125rem;
    font-family: inherit;
    background: var(--ui-surface);
    color: var(--ui-text);
    resize: vertical;
}

.ttm__textarea:focus {
    outline: 2px solid var(--ui-primary);
    outline-offset: -1px;
}

.ttm__textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Actions bar ────────────────────────────────────────────── */

.ttm__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ttm__btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ttm__btn--nav {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    color: var(--ui-text);
}

.ttm__btn--nav:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-text) 14%, transparent);
}

.ttm__btn--nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ttm__btn--submit {
    margin-left: auto;
    background: var(--ui-primary);
    color: var(--ui-on-primary, #fff);
}

.ttm__btn--submit:hover {
    background: var(--ui-primary-hover);
}

.ttm__btn--confirm {
    background: var(--ui-warning);
}

.ttm__submitted-badge {
    margin-left: auto;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}
/* ============================================================
 * ProctorView
 * ============================================================
 * Proctor/host dashboard. Timer, controls, summary stats,
 * and a grid of test-taker cards with progress bars.
 * ========================================================== */

.pv {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Timer ──────────────────────────────────────────────────── */

.pv__timer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
}

.pv__timer--low {
    border-color: var(--ui-error);
    background: color-mix(in srgb, var(--ui-error) 8%, var(--ui-surface));
}

.pv__timer-icon {
    font-size: 1.25rem;
}

.pv__timer-value {
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ui-text);
}

.pv__timer--low .pv__timer-value {
    color: var(--ui-error);
}

/* ── Controls ───────────────────────────────────────────────── */

.pv__controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pv__controls-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ui-text-muted);
}

.pv__btn {
    padding: 0.4rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pv__btn--extend {
    background: color-mix(in srgb, var(--ui-accent) 18%, transparent);
    color: var(--ui-accent);
}

.pv__btn--extend:hover {
    background: color-mix(in srgb, var(--ui-accent) 28%, transparent);
}

.pv__btn--force {
    background: var(--ui-error);
    color: var(--ui-on-primary, #fff);
    margin-left: auto;
}

.pv__btn--force:hover {
    background: color-mix(in srgb, var(--ui-error) 85%, var(--ui-text));
}

/* ── Summary ────────────────────────────────────────────────── */

.pv__summary {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.pv__summary-stat {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
}

.pv__summary-stat--done {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

.pv__summary-stat--active {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
}

.pv__summary-stat--idle {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    color: var(--ui-text-muted);
}

/* ── Test-taker grid ────────────────────────────────────────── */

.pv__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.75rem;
}

.pv__card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}

.pv__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.pv__card-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv__card-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.pv__card-badge--idle {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text-muted);
}

.pv__card-badge--active {
    background: color-mix(in srgb, var(--ui-accent) 18%, transparent);
    color: var(--ui-accent);
}

.pv__card-badge--done {
    background: color-mix(in srgb, var(--ui-success) 18%, transparent);
    color: var(--ui-success);
}

/* ── Card progress bar ──────────────────────────────────────── */

.pv__card-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pv__card-bar-track {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    overflow: hidden;
}

.pv__card-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.pv__card-bar-fill--idle {
    background: color-mix(in srgb, var(--ui-text) 20%, transparent);
}

.pv__card-bar-fill--active {
    background: var(--ui-accent);
}

.pv__card-bar-fill--done {
    background: var(--ui-success);
}

.pv__card-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    flex-shrink: 0;
}

.pv__card-time {
    font-size: 0.6875rem;
    color: var(--ui-text-muted);
}
/* ============================================================
 * AutoScoringDashboard
 * ============================================================
 * Auto-graded exam results. Summary cards, score distribution
 * histogram (CSS bars), sortable results table with per-
 * question dot breakdown.
 * ========================================================== */

.asd {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Summary cards ──────────────────────────────────────────── */

.asd__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.75rem;
}

.asd__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.875rem 0.5rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}

.asd__card-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.asd__card-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ui-text);
}

/* ── Histogram ──────────────────────────────────────────────── */

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

.asd__histogram-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ui-text);
    margin: 0;
}

.asd__histogram-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.375rem;
    height: 6rem;
    padding-top: 0.5rem;
}

.asd__histogram-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.asd__histogram-bar {
    width: 100%;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    background: var(--ui-primary);
    transition: height 0.3s ease;
}

.asd__histogram-label {
    font-size: 0.5625rem;
    color: var(--ui-text-muted);
    margin-top: 0.25rem;
    white-space: nowrap;
}

/* ── Results table ──────────────────────────────────────────── */

.asd__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
}

.asd__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.asd__th {
    padding: 0.625rem 0.875rem;
    text-align: left;
    font-weight: 700;
    color: var(--ui-text);
    border-bottom: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

.asd__th--num {
    text-align: right;
}

.asd__th--center {
    text-align: center;
}

.asd__td {
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text);
}

.asd__td--name {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.asd__td--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.asd__td--center {
    text-align: center;
}

.asd__row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.asd__row:hover {
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
}

.asd__expand-arrow {
    font-size: 0.75rem;
    width: 1rem;
    flex-shrink: 0;
    color: var(--ui-text-muted);
}

/* ── Pass/Fail badge ────────────────────────────────────────── */

.asd__badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.asd__badge--pass {
    background: color-mix(in srgb, var(--ui-success) 18%, transparent);
    color: var(--ui-success);
}

.asd__badge--fail {
    background: color-mix(in srgb, var(--ui-error) 18%, transparent);
    color: var(--ui-error);
}

/* ── Detail row (per-question breakdown) ────────────────────── */

.asd__detail-row {
    background: color-mix(in srgb, var(--ui-text) 2%, transparent);
}

.asd__detail-cell {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--ui-border);
}

.asd__detail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.asd__detail-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 700;
}

.asd__detail-dot--correct {
    background: color-mix(in srgb, var(--ui-success) 18%, transparent);
    color: var(--ui-success);
}

.asd__detail-dot--wrong {
    background: color-mix(in srgb, var(--ui-error) 18%, transparent);
    color: var(--ui-error);
}

/* ── Actions ────────────────────────────────────────────────── */

.asd__actions {
    display: flex;
    gap: 0.75rem;
}

.asd__btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.asd__btn--export {
    background: var(--ui-primary);
    color: var(--ui-on-primary, #fff);
}

.asd__btn--export:hover {
    background: var(--ui-primary-hover);
}
/* ============================================================
 * PlenarySynthesisView
 * ============================================================
 * Two-column layout: breakout summaries (left), synthesis (right).
 * ========================================================== */

.plenary-synthesis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 0.5rem 0;
}

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

.plenary-synthesis__section-title {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ui-text);
}

.plenary-synthesis__empty {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    margin: 0;
}

/* ── Summaries column ─────────────────────────────────────── */

.plenary-synthesis__summaries {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Accordion ────────────────────────────────────────────── */

.plenary-synthesis__accordion {
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    overflow: hidden;
}

.plenary-synthesis__accordion-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ui-text);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.plenary-synthesis__accordion-trigger:hover {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.plenary-synthesis__group-name {
    flex: 1;
}

.plenary-synthesis__participant-badge {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    padding: 0.125rem 0.5rem;
    border-radius: 99px;
}

.plenary-synthesis__chevron {
    font-size: 0.75rem;
    transition: transform 0.15s ease;
    color: var(--ui-text-muted);
}

.plenary-synthesis__chevron--open {
    transform: rotate(90deg);
}

.plenary-synthesis__accordion-body {
    padding: 0.75rem;
    border-top: 1px solid var(--ui-border);
    font-size: 0.8125rem;
    color: var(--ui-text-secondary);
    line-height: 1.5;
}

.plenary-synthesis__group-summary {
    margin: 0 0 0.75rem;
}

.plenary-synthesis__sub-heading {
    margin: 0 0 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ui-text);
}

.plenary-synthesis__list {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.plenary-synthesis__list li {
    margin-bottom: 0.25rem;
}

.plenary-synthesis__findings,
.plenary-synthesis__recommendations {
    margin-bottom: 0.25rem;
}

/* ── Synthesis column ─────────────────────────────────────── */

.plenary-synthesis__synthesis {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Themes ───────────────────────────────────────────────── */

.plenary-synthesis__themes-section {
    display: flex;
    flex-direction: column;
}

.plenary-synthesis__themes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.plenary-synthesis__themes-header .plenary-synthesis__section-title {
    margin: 0;
}

.plenary-synthesis__generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ui-on-primary);
    background: var(--ui-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.plenary-synthesis__generate-btn:hover:not(:disabled) {
    background: var(--ui-primary-hover);
}

.plenary-synthesis__generate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.plenary-synthesis__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--ui-on-primary) 30%, transparent);
    border-top-color: var(--ui-on-primary);
    border-radius: 50%;
    animation: plenary-spin 0.6s linear infinite;
}

@keyframes plenary-spin {
    to { transform: rotate(360deg); }
}

.plenary-synthesis__theme-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.plenary-synthesis__theme-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, transparent);
    border-radius: 99px;
}

/* ── Action items table ───────────────────────────────────── */

.plenary-synthesis__actions-section {
    display: flex;
    flex-direction: column;
}

.plenary-synthesis__actions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
}

.plenary-synthesis__actions-table th {
    text-align: left;
    padding: 0.5rem 0.5rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    border-bottom: 1px solid var(--ui-border);
}

.plenary-synthesis__actions-table td {
    padding: 0.5rem 0.5rem;
    color: var(--ui-text);
    border-bottom: 1px solid var(--ui-border);
}

.plenary-synthesis__priority {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
}

.plenary-synthesis__priority--high {
    color: var(--ui-error);
    background: color-mix(in srgb, var(--ui-error) 12%, transparent);
}

.plenary-synthesis__priority--medium {
    color: var(--ui-warning);
    background: color-mix(in srgb, var(--ui-warning) 12%, transparent);
}

.plenary-synthesis__priority--low {
    color: var(--ui-success);
    background: color-mix(in srgb, var(--ui-success) 12%, transparent);
}

/* ── Add action form ──────────────────────────────────────── */

.plenary-synthesis__add-action {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.plenary-synthesis__action-input {
    flex: 1;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    outline: none;
}

.plenary-synthesis__action-input:focus {
    border-color: var(--ui-primary);
}

.plenary-synthesis__priority-select {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
}

.plenary-synthesis__add-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ui-on-primary);
    background: var(--ui-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.plenary-synthesis__add-btn:hover:not(:disabled) {
    background: var(--ui-primary-hover);
}

.plenary-synthesis__add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* ============================================================
 * IdeaBoard
 * ============================================================
 * Masonry-inspired grid of idea cards with filtering & voting.
 * ========================================================== */

.idea-board {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
}

/* ── Toolbar ──────────────────────────────────────────────── */

.idea-board__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.idea-board__filters {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.idea-board__filter-btn {
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    border: 1px solid transparent;
    border-radius: 99px;
    cursor: pointer;
    white-space: nowrap;
}

.idea-board__filter-btn:hover {
    color: var(--ui-text);
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
}

.idea-board__filter-btn--active {
    color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--ui-accent) 30%, transparent);
}

.idea-board__sort {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.idea-board__sort-label {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
}

.idea-board__sort-select {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
}

/* ── Card grid ────────────────────────────────────────────── */

.idea-board__grid {
    column-count: 3;
    column-gap: 0.75rem;
}

@media (max-width: 900px) {
    .idea-board__grid {
        column-count: 2;
    }
}

@media (max-width: 560px) {
    .idea-board__grid {
        column-count: 1;
    }
}

.idea-board__empty {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    text-align: center;
    padding: 2rem 0;
    margin: 0;
}

/* ── Card ─────────────────────────────────────────────────── */

.idea-board__card {
    break-inside: avoid;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    transition: border-color 0.15s ease;
}

.idea-board__card:hover {
    border-color: var(--ui-accent);
}

.idea-board__card-title {
    margin: 0 0 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text);
}

.idea-board__card-desc {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--ui-text-secondary);
    line-height: 1.45;
}

.idea-board__card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.idea-board__card-author {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.idea-board__card-category {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 99px;
    color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
}

.idea-board__card-footer {
    display: flex;
    justify-content: flex-end;
}

.idea-board__vote-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    cursor: pointer;
}

.idea-board__vote-btn:hover:not(:disabled) {
    color: var(--ui-primary);
    border-color: var(--ui-primary);
}

.idea-board__vote-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Form overlay ─────────────────────────────────────────── */

.idea-board__form-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ui-text) 40%, transparent);
}

.idea-board__form {
    width: 100%;
    max-width: 440px;
    padding: 1.25rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.idea-board__form-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ui-text);
}

.idea-board__input,
.idea-board__textarea,
.idea-board__category-select {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--ui-text);
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    outline: none;
    font-family: inherit;
}

.idea-board__input:focus,
.idea-board__textarea:focus,
.idea-board__category-select:focus {
    border-color: var(--ui-primary);
}

.idea-board__textarea {
    resize: vertical;
    min-height: 5rem;
}

.idea-board__form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.idea-board__cancel-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    background: none;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    cursor: pointer;
}

.idea-board__cancel-btn:hover {
    color: var(--ui-text);
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.idea-board__submit-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ui-on-primary);
    background: var(--ui-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.idea-board__submit-btn:hover:not(:disabled) {
    background: var(--ui-primary-hover);
}

.idea-board__submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Floating action button ───────────────────────────────── */

.idea-board__fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--ui-on-primary);
    background: var(--ui-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ui-text) 20%, transparent);
    z-index: 50;
    transition: background 0.15s ease;
}

.idea-board__fab:hover {
    background: var(--ui-primary-hover);
}
/* ============================================================
 * IdeaClusteringUI
 * ============================================================
 * Cluster management for grouping related ideas.
 * ========================================================== */

.idea-clustering {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
}

/* ── Header ───────────────────────────────────────────────── */

.idea-clustering__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.idea-clustering__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ui-text);
}

.idea-clustering__auto-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ui-on-primary);
    background: var(--ui-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.idea-clustering__auto-btn:hover:not(:disabled) {
    background: var(--ui-primary-hover);
}

.idea-clustering__auto-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.idea-clustering__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--ui-on-primary) 30%, transparent);
    border-top-color: var(--ui-on-primary);
    border-radius: 50%;
    animation: cluster-spin 0.6s linear infinite;
}

@keyframes cluster-spin {
    to { transform: rotate(360deg); }
}

/* ── Section labels ───────────────────────────────────────── */

.idea-clustering__section-label {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.idea-clustering__empty,
.idea-clustering__all-clustered {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    margin: 0;
}

/* ── Unclustered ideas list ───────────────────────────────── */

.idea-clustering__unclustered {
    display: flex;
    flex-direction: column;
}

.idea-clustering__idea-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.idea-clustering__idea-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--ui-text);
}

.idea-clustering__idea-item:hover {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.idea-clustering__checkbox {
    accent-color: var(--ui-primary);
}

.idea-clustering__idea-title {
    flex: 1;
}

.idea-clustering__idea-votes {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    white-space: nowrap;
}

/* ── Create cluster form ──────────────────────────────────── */

.idea-clustering__create-cluster {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.idea-clustering__name-input {
    flex: 1;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    outline: none;
}

.idea-clustering__name-input:focus {
    border-color: var(--ui-primary);
}

.idea-clustering__create-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ui-on-primary);
    background: var(--ui-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.idea-clustering__create-btn:hover:not(:disabled) {
    background: var(--ui-primary-hover);
}

.idea-clustering__create-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Clusters ─────────────────────────────────────────────── */

.idea-clustering__clusters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.idea-clustering__cluster {
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    overflow: hidden;
}

.idea-clustering__cluster-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.idea-clustering__collapse-btn {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    line-height: 1;
}

.idea-clustering__chevron {
    display: inline-block;
    transition: transform 0.15s ease;
}

.idea-clustering__chevron--open {
    transform: rotate(90deg);
}

.idea-clustering__cluster-name {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ui-text);
    cursor: default;
}

.idea-clustering__rename-input {
    flex: 1;
    padding: 0.125rem 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ui-text);
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-primary);
    border-radius: 4px;
    outline: none;
}

.idea-clustering__cluster-count {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    padding: 0.125rem 0.5rem;
    border-radius: 99px;
}

.idea-clustering__cluster-ideas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem 0.75rem;
    border-top: 1px solid var(--ui-border);
}

.idea-clustering__idea-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--ui-text);
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 25%, transparent);
    border-radius: 99px;
}

.idea-clustering__remove-btn {
    padding: 0;
    margin-left: 0.125rem;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.idea-clustering__remove-btn:hover {
    color: var(--ui-error);
}
/* ============================================================
 * EvaluationMatrix
 * ============================================================
 * Scoring table with weighted totals and top-3 highlighting.
 * ========================================================== */

.evaluation-matrix {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.evaluation-matrix__wrapper {
    overflow-x: auto;
}

/* ── Table ────────────────────────────────────────────────── */

.evaluation-matrix__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.evaluation-matrix__th {
    padding: 0.5rem 0.625rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-align: left;
    border-bottom: 2px solid var(--ui-border);
    white-space: nowrap;
}

.evaluation-matrix__th--rank {
    width: 2.5rem;
    text-align: center;
}

.evaluation-matrix__th--idea {
    min-width: 10rem;
}

.evaluation-matrix__th--criterion {
    text-align: center;
}

.evaluation-matrix__th--total {
    text-align: right;
    min-width: 6rem;
}

.evaluation-matrix__criterion-name {
    display: block;
    font-size: 0.8125rem;
}

.evaluation-matrix__criterion-weight {
    display: block;
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--ui-text-muted);
}

/* ── Rows ─────────────────────────────────────────────────── */

.evaluation-matrix__row {
    border-bottom: 1px solid var(--ui-border);
}

.evaluation-matrix__row:hover {
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

/* Top-3 highlighting */
.evaluation-matrix__rank--gold {
    background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
}

.evaluation-matrix__rank--gold:hover {
    background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
}

.evaluation-matrix__rank--silver {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.evaluation-matrix__rank--silver:hover {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
}

.evaluation-matrix__rank--bronze {
    background: color-mix(in srgb, var(--ui-warning) 5%, transparent);
}

.evaluation-matrix__rank--bronze:hover {
    background: color-mix(in srgb, var(--ui-warning) 8%, transparent);
}

/* ── Cells ────────────────────────────────────────────────── */

.evaluation-matrix__td {
    padding: 0.5rem 0.625rem;
    color: var(--ui-text);
}

.evaluation-matrix__td--rank {
    text-align: center;
    font-weight: 600;
    color: var(--ui-text-muted);
}

.evaluation-matrix__td--idea {
    font-weight: 500;
}

.evaluation-matrix__td--score {
    text-align: center;
}

.evaluation-matrix__td--total {
    text-align: right;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--ui-primary);
}

.evaluation-matrix__empty {
    text-align: center;
    color: var(--ui-text-muted);
    padding: 2rem 0.625rem;
}

/* ── Score selector ───────────────────────────────────────── */

.evaluation-matrix__score-selector {
    display: inline-flex;
    gap: 0.125rem;
}

.evaluation-matrix__score-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ui-text-muted);
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.evaluation-matrix__score-btn:hover {
    color: var(--ui-primary);
    border-color: var(--ui-primary);
}

.evaluation-matrix__score-btn--active {
    color: var(--ui-on-primary);
    background: var(--ui-primary);
    border-color: var(--ui-primary);
}

.evaluation-matrix__score-value {
    font-weight: 500;
    color: var(--ui-text);
}

/* ── Closed label ─────────────────────────────────────────── */

.evaluation-matrix__closed-label {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    margin: 0;
    text-align: center;
}
/**
 * LiveMeetingInfo — sub-section styles for meeting info accordion.
 * Uses --ui-* theme variables only.
 */

.live-meeting-info__sub {
    border-bottom: 1px solid var(--ui-border);
}

.live-meeting-info__sub:last-child {
    border-bottom: none;
}

.live-meeting-info__sub-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.25rem;
    background: none;
    border: none;
    color: var(--ui-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.live-meeting-info__sub-header:hover {
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
}

.live-meeting-info__sub-icon {
    flex-shrink: 0;
    font-size: 0.9rem;
}

.live-meeting-info__sub-title {
    flex: 1;
    min-width: 0;
}

.live-meeting-info__sub-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 99px;
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
    color: var(--ui-primary);
}

.live-meeting-info__sub-chevron {
    flex-shrink: 0;
    font-size: 0.55rem;
    color: var(--ui-text-muted);
    transition: transform 0.2s ease;
}

.live-meeting-info__sub-body {
    padding: 0.25rem 0.25rem 0.75rem;
}

.live-meeting-info__text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--ui-text);
    white-space: pre-wrap;
    margin: 0;
}

.live-meeting-info__pre {
    font-family: inherit;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--ui-text);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    padding: 0.5rem;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border-radius: 6px;
}

.live-meeting-info__loading {
    font-size: 0.82rem;
    color: var(--ui-text-muted);
    font-style: italic;
    margin: 0;
}

.live-meeting-info__material {
    margin-bottom: 0.75rem;
}

.live-meeting-info__material:last-child {
    margin-bottom: 0;
}

.live-meeting-info__material-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    margin-bottom: 0.25rem;
}
/* LiveHostPage CSS - split into feature files */
/**
 * LiveHostPage Styles
 * 
 * Host facilitation dashboard for live sessions.
 * Desktop-optimized layout with three-column content area.
 * 
 * Uses only --ui-* CSS variables per project guidelines.
 */
.live-host {
    /* Slightly darker background for better section contrast */
    background: color-mix(in srgb, var(--board-bg) 85%, black);
    color: var(--ui-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    font-size: 14px;
    --live-progress: 48%;
}
/* ============================================================
   Header
   ============================================================ */
.live-host__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--ui-border);
    background: var(--board-bg);
    position: sticky;
    top: 0;
    z-index: 10;
}
.live-host__header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.live-host__header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.live-host__back {
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.live-host__back:hover {
    color: var(--ui-text);
}
.live-exit-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ui-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    padding: 0.5rem;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}
.live-exit-link:hover {
    color: var(--ui-text);
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}
.live-host__title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ui-primary);
}
.live-host__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ui-on-success);
    background: var(--ui-success);
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.live-host__badge--inactive {
    background: var(--ui-surface-muted);
    color: var(--ui-text-muted);
}
.live-host__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: live-host__pulse 2s infinite;
}
.live-host__dot--inactive {
    animation: none;
}
@keyframes live-host__pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.live-host__menu-btn {
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.live-host__menu-btn:hover {
    color: var(--ui-text);
}
.live-host__action {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    padding: 5px 10px;
    border-radius: 3px;
    border: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    color: var(--ui-text);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.live-host__action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.live-host__action--danger {
    background: var(--ui-error);
    border-color: var(--ui-error);
    color: white;
}
.live-host__action--primary {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: white;
}
/* ============================================================
   Main Content Area
   ============================================================ */
.live-host__main {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 160px;
}
.live-host__status {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--ui-text-muted);
    text-align: center;
    padding: 20px;
}
.live-host__status a {
    color: var(--ui-accent);
}
.live-host__empty {
    padding: 16px;
    color: var(--ui-text-muted);
    font-size: 12px;
    text-align: center;
}
/* ============================================================
   Current Agenda Item (NOW) - Large prominent display
   ============================================================ */
.live-host__now {
    padding: 24px;
    /* Almost white background to stand out from dark page */
    background: var(--ui-surface);
    border-radius: 16px;
    border: 1px solid var(--ui-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    margin-top: 16px;
    margin-bottom: 8px;
}
.live-host__now-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--ui-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: none; /* Hidden - title speaks for itself */
}
.live-host__now-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 16px;
    color: var(--ui-text);
}
.live-host__now-feedback {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.live-host__feedback-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
}
.live-host__feedback-chip--interest {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}
.live-host__feedback-chip--contribute {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
}
.live-host__feedback-chip--unfamiliar {
    background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
    color: var(--ui-warning);
}
.live-host__feedback-chip--confused {
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    color: var(--ui-error);
}
/* Progress Bar with time & participant count */
.live-host__now-time {
    display: flex;
    align-items: center;
    gap: 16px;
}
.live-host__time-bar {
    flex: 1;
    height: 6px;
    background: color-mix(in srgb, var(--ui-text) 12%, transparent);
    border-radius: 3px;
    overflow: hidden;
}
.live-host__time-fill {
    height: 100%;
    background: var(--ui-accent);
    width: var(--live-progress, 48%);
    transition: width 1s linear;
}
.live-host__time-fill--warning {
    background: var(--ui-error);
    animation: live-host__time-pulse 0.5s infinite;
}
@keyframes live-host__time-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.live-host__time-remaining {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text);
    min-width: 50px;
    text-align: right;
}
.live-host__time-remaining--warning {
    color: var(--ui-error);
}
.live-host__participant-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ui-text-muted);
}
.live-host__participant-count-icon {
    font-size: 14px;
}
/* ============================================================
   Time Warning Banner
   ============================================================ */
.live-host__time-warning {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 16px 0;
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    border: 1px solid var(--ui-error);
    border-radius: 8px;
    animation: live-host__warning-appear 0.3s ease;
}
@keyframes live-host__warning-appear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.live-host__time-warning-icon {
    font-size: 24px;
    animation: live-host__time-pulse 0.5s infinite;
}
.live-host__time-warning-content {
    flex: 1;
}
.live-host__time-warning-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-error);
}
.live-host__time-warning-hint {
    font-size: 12px;
    color: var(--ui-text-muted);
}
.live-host__time-warning-dismiss {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--ui-text-muted);
    cursor: pointer;
    padding: 4px;
}
.live-host__time-warning-dismiss:hover {
    color: var(--ui-text);
}
/* ============================================================
   Signal Cards - 4-column grid with large numbers
   ============================================================ */
.live-host__signals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 20px 0;
}
.live-host__signal {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}
/* Number and emoji wrapper - inline like "4 👍" */
.live-host__signal-main {
    display: flex;
    align-items: center;
    gap: 8px;
}
.live-host__signal-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}
.live-host__signal-icon {
    font-size: 40px;
    line-height: 1;
}
.live-host__signal-count--interest { color: var(--ui-warning); }
.live-host__signal-count--contribute { color: var(--ui-success); }
.live-host__signal-count--unfamiliar { color: var(--ui-accent); }
.live-host__signal-count--confused { color: var(--ui-error); }
.live-host__signal-label {
    font-size: 11px;
    color: var(--ui-text-muted);
    text-transform: capitalize;
    margin-top: 8px;
    text-align: center;
}
/* ============================================================
   Four-Section Content Layout (2x2 Grid) - Collapsible
   ============================================================ */
.live-host__content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}
.live-host__section {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 80px;
    max-height: 400px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    /* Match SessionPage card shadow */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .live-host__section {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
}
.live-host__section--collapsed {
    max-height: 56px;
}
.live-host__section--safety {
    border-color: var(--ui-warning);
}
/* Meeting info section: grows with content, no height cap */
.live-host__section--meeting-info {
    max-height: none;
    overflow: visible;
}
.live-host__section-header-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
    border-bottom: 1px solid var(--ui-border);
    flex-shrink: 0;
}
.live-host__section--collapsed .live-host__section-header-row {
    border-bottom: none;
}
.live-host__section-header-row .live-host__section-header {
    border-bottom: none;
}
.live-host__section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--ui-border);
    flex-shrink: 0;
    transition: background 0.15s;
}
.live-host__section-header:hover {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}
.live-host__section--collapsed .live-host__section-header {
    border-bottom: none;
}
.live-host__section-icon {
    display: none; /* Hidden - reduces visual clutter */
}
.live-host__section-title {
    /* Match SessionPage section title style - pill background */
    display: inline-flex;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ui-text);
    flex: 1;
    /* Green pill background like SessionPage */
    background: #d1fae5;
    padding: 2px 8px;
    border-radius: 3px;
    width: fit-content;
    flex: 0 0 auto;
    margin-right: auto;
}
[data-theme="dark"] .live-host__section-title {
    background: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-surface));
}
[data-theme="light"] .live-host__section-title {
    color: var(--brand-teal);
}
.live-host__section-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ui-text) 12%, transparent);
    color: var(--ui-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.live-host__section-badge--warning {
    background: color-mix(in srgb, var(--ui-warning) 20%, transparent);
    color: var(--ui-warning);
}
.live-host__section-chevron {
    font-size: 10px;
    color: var(--ui-text-muted);
    transition: transform 0.2s;
}
.live-host__section-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.live-host__section-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.live-host__section-empty {
    font-size: 12px;
    color: var(--ui-text-muted);
    text-align: center;
    padding: 20px;
}
.live-host__section-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ui-border);
}
.live-host__section-toggle-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid var(--ui-border);
    background: transparent;
    color: var(--ui-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.live-host__section-toggle-btn:hover {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    color: var(--ui-text);
}
.live-host__section-toggle-btn--active {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    border-color: var(--ui-accent);
    color: var(--ui-accent);
}
/* Keep old column classes for backwards compatibility but mark as deprecated */
.live-host__column {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    max-height: 450px;
}
.live-host__column-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ui-border);
    flex-shrink: 0;
}
.live-host__column-icon {
    font-size: 16px;
}
.live-host__column-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ui-text);
    flex: 1;
}
.live-host__column-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--ui-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.live-host__column-toggle {
    font-size: 11px;
    background: none;
    border: none;
    color: var(--ui-accent);
    cursor: pointer;
    padding: 4px 8px;
}
.live-host__column-toggle:hover {
    text-decoration: underline;
}
.live-host__column-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
/* ============================================================
   Safety Alerts (AI-mediated)
   ============================================================ */
.live-host__safety-alerts {
    background: color-mix(in srgb, var(--ui-error) 8%, var(--ui-surface));
    border-bottom: 1px solid var(--ui-border);
    padding: 12px;
}
.live-host__safety-alert {
    background: var(--ui-surface);
    border-radius: 8px;
    padding: 12px;
    margin-top: 10px;
    border-left: 4px solid var(--ui-warning);
}
.live-host__safety-alert--high {
    border-left-color: var(--ui-error);
    background: color-mix(in srgb, var(--ui-error) 5%, var(--ui-surface));
}
.live-host__safety-alert--medium {
    border-left-color: var(--ui-warning);
}
.live-host__safety-alert--low {
    border-left-color: var(--ui-accent);
}
.live-host__safety-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.live-host__safety-severity {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
}
.live-host__safety-severity--high {
    background: color-mix(in srgb, var(--ui-error) 20%, transparent);
    color: var(--ui-error);
}
.live-host__safety-severity--medium {
    background: color-mix(in srgb, var(--ui-warning) 20%, transparent);
    color: var(--ui-warning);
}
.live-host__safety-severity--low {
    background: color-mix(in srgb, var(--ui-accent) 20%, transparent);
    color: var(--ui-accent);
}
.live-host__safety-kind {
    font-weight: 500;
    color: var(--ui-text);
}
.live-host__safety-count {
    font-size: 12px;
    color: var(--ui-text-muted);
}
.live-host__safety-pattern {
    color: var(--ui-warning);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 6px;
    padding: 6px 8px;
    background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-warning) 25%, transparent);
    border-radius: 4px;
}
.live-host__safety-guidance {
    color: var(--ui-text-secondary);
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 10px;
    padding: 8px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border-radius: 4px;
}
.live-host__safety-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.live-host__safety-action {
    background: var(--ui-primary);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.live-host__safety-action:hover:not(:disabled) {
    background: var(--ui-primary-hover);
}
.live-host__safety-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.live-host__safety-dismiss {
    background: transparent;
    color: var(--ui-text-muted);
    border: 1px solid var(--ui-border);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.live-host__safety-dismiss:hover:not(:disabled) {
    color: var(--ui-text);
    border-color: var(--ui-text-muted);
}
.live-host__safety-dismiss:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.live-host__badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 6px;
}
.live-host__badge-count--danger {
    background: var(--ui-error);
    color: white;
}
.live-host__badge-count--accent {
    background: var(--ui-accent);
    color: white;
}
/* ============================================================
   Safety Facilitation (In Progress & Completed)
   ============================================================ */
.live-host__safety-facilitation {
    background: color-mix(in srgb, var(--ui-accent) 5%, var(--ui-surface));
    border-bottom: 1px solid var(--ui-border);
    padding: 12px;
}
.live-host__facilitation-card {
    background: var(--ui-surface);
    border-radius: 8px;
    padding: 12px;
    margin-top: 10px;
    border-left: 4px solid var(--ui-accent);
}
.live-host__facilitation-card--in-progress {
    border-left-color: var(--ui-warning);
}
.live-host__facilitation-card--in-progress.live-host__facilitation-card--high {
    border-left-color: var(--ui-error);
    background: color-mix(in srgb, var(--ui-error) 3%, var(--ui-surface));
}
.live-host__facilitation-card--in-progress.live-host__facilitation-card--medium {
    border-left-color: var(--ui-warning);
}
.live-host__facilitation-card--in-progress.live-host__facilitation-card--low {
    border-left-color: var(--ui-accent);
}
.live-host__facilitation-card--completed {
    border-left-color: var(--ui-success);
    opacity: 0.8;
}
.live-host__facilitation-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.live-host__facilitation-status {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ui-warning) 20%, transparent);
    color: var(--ui-warning);
}
.live-host__facilitation-status--completed {
    background: color-mix(in srgb, var(--ui-success) 20%, transparent);
    /* Make completed badge match size/weight of participant badges */
    color: var(--ui-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.live-host__facilitation-completed-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ui-success);
    color: white;
    font-size: 14px;
}
.live-host__safety-kind--completed {
    color: var(--ui-text-muted);
}
.live-host__facilitation-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
    border-radius: 4px;
    margin-bottom: 8px;
}
.live-host__facilitation-selected--completed {
    background: color-mix(in srgb, var(--ui-success) 8%, transparent);
}
.live-host__facilitation-selected-label {
    font-size: 12px;
    color: var(--ui-text-muted);
    font-weight: 500;
}
.live-host__facilitation-selected-action {
    font-size: 14px;
    font-weight: 500;
    color: var(--ui-text);
}
.live-host__facilitation-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.live-host__facilitation-complete {
    background: var(--ui-success);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.live-host__facilitation-complete:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-success) 80%, black);
}
.live-host__facilitation-complete:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* ============================================================
   Queue Summary (hidden - integrated into columns)
   ============================================================ */
.live-host__queued {
    display: none;
}
/* ============================================================
   AI Hints & Alerts (displayed above content)
   ============================================================ */
.live-host__hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    border: 1px solid var(--ui-accent);
}
.live-host__hint-text {
    flex: 1;
    font-size: 13px;
    color: var(--ui-text);
}
.live-host__hint-dismiss {
    color: var(--ui-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 2px 6px;
    line-height: 1;
}
.live-host__hint-dismiss:hover {
    color: var(--ui-text);
}
.live-host__alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-error) 10%, transparent);
    border: 1px solid var(--ui-error);
}
.live-host__alert-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-error);
    margin-bottom: 2px;
}
.live-host__alert-text {
    font-size: 12px;
    color: var(--ui-text-muted);
}
/* ============================================================
   Section Headers (for non-column sections)
   ============================================================ */
.live-host__section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    border-bottom: 1px solid var(--ui-border);
}
.live-host__section-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.live-host__section-icon {
    font-size: 14px;
}
.live-host__section-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    padding: 2px 8px;
    background: var(--ui-text-muted);
    color: var(--board-bg);
    border-radius: 10px;
    font-weight: 600;
}
.live-host__section-toggle {
    margin-left: auto;
    font-size: 11px;
    background: none;
    border: none;
    color: var(--ui-accent);
    cursor: pointer;
    padding: 4px 8px;
}
.live-host__section-toggle:hover {
    text-decoration: underline;
}
.live-host__section-toggle--active {
    color: var(--ui-success);
}
/* ============================================================
   Participants (in column)
   ============================================================ */
.live-host__participants {
    display: contents; /* Used as column content */
}
.live-host__participants-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.live-host__participants-summary {
    padding: 8px 12px;
    font-size: 11px;
    color: var(--ui-text-muted);
    border-bottom: 1px solid var(--ui-border);
}
.live-host__participant {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, transparent);
    border-radius: 8px;
}
.live-host__participant:hover {
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    border-color: color-mix(in srgb, var(--ui-accent) 50%, transparent);
}
.live-host__participant-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.live-host__participant-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.live-host__participant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border: 1px solid var(--ui-border);
}
.live-host__participant-avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
    color: var(--ui-primary);
    font-size: 13px;
    font-weight: 700;
}
.live-host__participant-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.live-host__participant-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-host__participant-email {
    font-size: 11px;
    color: var(--ui-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-host__participant-title {
    font-size: 10px;
    color: var(--ui-text-secondary);
    font-style: italic;
}
.live-host__participant-type {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ui-primary);
    padding: 2px 6px;
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    border-radius: 4px;
    flex-shrink: 0;
}
.live-host__participant-role {
    margin-top: 6px;
    font-size: 11px;
    color: var(--ui-text-secondary);
}
.live-host__participant-status {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.live-host__participant-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    color: var(--ui-primary);
}
.live-host__participant-badge--declined {
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    border-color: var(--ui-error);
    color: var(--ui-error);
}
.live-host__participant-absence {
    font-size: 11px;
    color: var(--ui-text-secondary);
}
/* ============================================================
   Captures (in column)
   ============================================================ */
.live-host__captures-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.live-host__capture {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, transparent);
    border-radius: 8px;
}
.live-host__capture:hover {
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    border-color: color-mix(in srgb, var(--ui-accent) 50%, transparent);
}
.live-host__capture-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.live-host__capture-icon--note {
    background: color-mix(in srgb, var(--ui-text-muted) 20%, transparent);
}
.live-host__capture-icon--decision {
    background: var(--ui-success);
    color: white;
}
.live-host__capture-icon--action {
    background: var(--ui-accent);
    color: white;
}
.live-host__capture-icon--parked {
    background: var(--ui-warning);
    color: white;
}
.live-host__capture-content {
    flex: 1;
    min-width: 0;
}
.live-host__capture-text {
    font-size: 13px;
    color: var(--ui-text);
    line-height: 1.4;
}
.live-host__capture-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.live-host__capture-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ui-text-muted);
}
.live-host__capture-author {
    font-size: 10px;
    color: var(--ui-text-secondary);
    font-style: italic;
}
.live-host__capture-edit-btn {
    font-size: 11px;
    padding: 0 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s ease;
    margin-left: auto;
}
.live-host__capture-edit-btn:hover {
    opacity: 1;
}
.live-host__capture-hide-btn {
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid var(--ui-border);
    border-radius: 3px;
    background: transparent;
    color: var(--ui-text-muted);
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.15s ease;
    margin-left: auto;
}
.live-host__capture-hide-btn:hover {
    opacity: 1;
    border-color: var(--ui-warning);
    color: var(--ui-warning);
}
/* ============================================================
   Messages (standalone section - safety/private messages)
   ============================================================ */
.live-host__message {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, transparent);
    border-radius: 8px;
    margin-bottom: 6px;
}
.live-host__message--unread {
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
    border-left: 3px solid var(--ui-accent);
}
.live-host__message-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.live-host__message-type {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
}
.live-host__message-type--question {
    /* Match participant badge styling (bluish text, success-tinted background) */
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-primary);
}
.live-host__message-type--private {
    background: color-mix(in srgb, var(--ui-warning) 20%, transparent);
    /* Slightly darker orange text for better contrast */
    color: color-mix(in srgb, var(--ui-warning) 85%, black);
}
.live-host__message-anon {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--ui-text-muted);
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    padding: 2px 5px;
    border-radius: 3px;
}
.live-host__message-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ui-text-muted);
    margin-left: auto;
}
.live-host__message-text {
    font-size: 13px;
    color: var(--ui-text);
    margin-bottom: 8px;
    line-height: 1.4;
}
.live-host__message-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.live-host__message-action {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.live-host__message-action:hover {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text);
}
.live-host__message-action--surface {
    border-color: var(--ui-accent);
    color: var(--ui-accent);
}
.live-host__message-action--surface:hover {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
}
.live-host__message-action--reply {
    border-color: var(--ui-primary);
    color: var(--ui-primary);
}
.live-host__message-action--reply:hover {
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
}
.live-host__message--actioned {
    opacity: 0.6;
}
.live-host__message-group {
    margin-bottom: 12px;
}
.live-host__message-group:last-child {
    margin-bottom: 0;
}
.live-host__message-group-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ui-text-muted);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ui-border);
}
.live-host__message-sender {
    font-size: 11px;
    color: var(--ui-text-secondary);
}
.live-host__message-status {
    /* Match participant badge styling for statuses like 'Pysäköity' / 'Kuitattu' */
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-primary);
}
.live-host__message-reply {
    margin-top: 8px;
    padding: 8px;
    background: color-mix(in srgb, var(--ui-primary) 8%, transparent);
    border-radius: 6px;
    border-left: 3px solid var(--ui-primary);
}
.live-host__message-reply-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ui-primary);
    display: block;
    margin-bottom: 4px;
}
.live-host__message-reply-text {
    font-size: 12px;
    color: var(--ui-text);
}
.live-host__badge-unread {
    color: var(--ui-warning);
    font-weight: 600;
}
/* ============================================================
   Control Bar (Fixed Footer) - Redesigned with 3-group layout
   ============================================================ */
.live-host__controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--board-bg);
    border-top: 1px solid var(--ui-border);
    padding: 12px 20px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.live-host__control-row {
    display: flex;
    gap: 8px;
}
/* Unified control button — matches LiveParticipantPage action-btn style */
.live-host__ctrl-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px;
    border-radius: 6px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    cursor: pointer;
    min-height: 44px;
    transition: all 0.15s;
}
.live-host__ctrl-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}
.live-host__ctrl-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Accent variant — "Next" button */
.live-host__ctrl-btn--accent {
    border-color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    color: var(--ui-accent);
}
.live-host__ctrl-btn--accent:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-accent) 20%, transparent);
}
/* Recording variant — Voice recording active */
.live-host__ctrl-btn--recording {
    border-color: var(--ui-error);
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    color: var(--ui-error);
    animation: live-host__recording-pulse 1s infinite;
}
@keyframes live-host__recording-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.live-host__ctrl-icon {
    font-size: 16px;
    line-height: 1;
}
.live-host__ctrl-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
/* ============================================================
   Pace Warning
   ============================================================ */
.live-host__pace-warning {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--ui-warning) 40%, var(--ui-surface));
    border: 2px solid var(--ui-warning);
    border-radius: 8px;
    margin: 16px 0;
}
.live-host__pace-icon {
    font-size: 20px;
}
.live-host__pace-text {
    font-size: 13px;
    color: var(--ui-text);
    font-weight: 600;
    background: color-mix(in srgb, var(--ui-warning) 30%, var(--ui-surface));
    padding: 2px 8px;
    border-radius: 4px;
}
/* ============================================================
   Polls Section (in column)
   ============================================================ */
.live-host__polls-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.live-host__poll-card {
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, transparent);
    border-radius: 8px;
    padding: 12px;
}
.live-host__poll-card:hover {
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    border-color: color-mix(in srgb, var(--ui-accent) 50%, transparent);
}
.live-host__poll-question {
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text);
    margin-bottom: 8px;
}
.live-host__poll-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}
.live-host__poll-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    padding: 2px 8px;
    background: var(--ui-text-muted);
    color: var(--board-bg);
    border-radius: 4px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.live-host__poll-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.live-host__poll-votes {
    font-size: 11px;
    color: var(--ui-text-muted);
    font-family: 'JetBrains Mono', monospace;
}
.live-host__poll-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.live-host__poll-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.live-host__poll-option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.live-host__poll-option-label {
    font-size: 12px;
    color: var(--ui-text);
}
.live-host__poll-option-count {
    font-size: 11px;
    color: var(--ui-text-muted);
    font-family: 'JetBrains Mono', monospace;
}
.live-host__poll-option-bar {
    height: 8px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    border-radius: 4px;
    overflow: hidden;
}
.live-host__poll-option-fill {
    height: 100%;
    background: var(--ui-success);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.live-host__poll-close {
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.live-host__poll-close:hover {
    background: var(--ui-surface-muted);
    border-color: var(--ui-text-muted);
    color: var(--ui-text);
}
.live-host__poll-card--closed {
    opacity: 0.7;
}
/* ============================================================
   Voice Recording
   ============================================================ */
/* Recording state handled by .live-host__ctrl-btn--recording */
.live-host__voice-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
    border-radius: 6px;
    margin: 8px 16px;
}
.live-host__voice-indicator {
    font-size: 14px;
    animation: live-host__recording-pulse 1s infinite;
}
.live-host__voice-text {
    font-size: 12px;
    color: var(--ui-text-muted);
    font-style: italic;
}
/* ============================================================
   Modals
   ============================================================ */
.live-host__modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 16px;
}
.live-host__modal {
    background: var(--ui-surface);
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.live-host__modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--ui-border);
}
.live-host__modal-icon {
    font-size: 20px;
}
.live-host__modal-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
}
.live-host__modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--ui-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.live-host__modal-close:hover {
    color: var(--ui-text);
}
.live-host__modal-body {
    padding: 16px;
}
.live-host__modal-info {
    font-size: 13px;
    color: var(--ui-text-muted);
    margin-bottom: 16px;
}
/* Extend Time Options */
.live-host__extend-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.live-host__extend-btn {
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    border: 1px solid var(--ui-accent);
    border-radius: 8px;
    color: var(--ui-accent);
    cursor: pointer;
    transition: all 0.15s ease;
}
.live-host__extend-btn:hover {
    background: color-mix(in srgb, var(--ui-accent) 25%, transparent);
}
/* Park Participant Options */
.live-host__park-participants {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}
.live-host__park-participant {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.live-host__park-participant:hover {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    border-color: var(--ui-primary);
}
.live-host__park-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
    color: var(--ui-primary);
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.live-host__park-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--ui-border);
}
.live-host__park-name {
    font-size: 14px;
    font-weight: 500;
}
/* Park Success State */
.live-host__modal-info--success {
    color: var(--ui-success);
    font-weight: 600;
}
.live-host__park-quote {
    margin: 16px 0;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border-left: 3px solid var(--ui-accent);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    font-size: 14px;
    color: var(--ui-text-secondary);
}
.live-host__modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
.live-host__modal-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.live-host__modal-btn--primary {
    background: var(--ui-accent);
    color: white;
}
.live-host__modal-btn--primary:hover {
    background: color-mix(in srgb, var(--ui-accent) 85%, black);
}
/* Active Polls in standalone section - uses same styles as column polls */
.live-host__polls {
    padding: 12px;
    border-bottom: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-primary) 5%, transparent);
}
/* ============================================================
   Facilitation AI Section
   ============================================================ */
/* Facilitation section needs more height and scrollable content */
.live-host__section--facilitation {
    max-height: 500px;
}
/* Ensure ExpandCollapse wrapper (second child after header) fills remaining space */
.live-host__section--facilitation > div:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.live-host__section--facilitation .live-host__section-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.live-facilitation__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.live-facilitation__refresh-modes {
    display: flex;
    gap: 2px;
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    border-radius: 4px;
    padding: 2px;
}
.live-facilitation__mode-btn {
    background: transparent;
    color: var(--ui-text-muted);
    border: none;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.live-facilitation__mode-btn:hover {
    color: var(--ui-text);
}
.live-facilitation__mode-btn--active {
    background: var(--ui-surface);
    color: var(--ui-text);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.live-facilitation__refresh-btn {
    background: var(--ui-surface);
    color: var(--ui-text);
    border: 1px solid var(--ui-border);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.live-facilitation__refresh-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}
.live-facilitation__refresh-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.live-facilitation__pre-guidance {
    background: color-mix(in srgb, var(--ui-accent) 8%, transparent);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    border-left: 3px solid var(--ui-accent);
}
.live-facilitation__pre-guidance-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.live-facilitation__pre-guidance-text {
    font-size: 14px;
    color: var(--ui-text);
    line-height: 1.5;
}
.live-facilitation__loading {
    text-align: center;
    padding: 24px;
    color: var(--ui-text-muted);
    font-size: 14px;
}
.live-facilitation__health {
    background: var(--ui-surface);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--ui-border);
}
.live-facilitation__health-overall {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.live-facilitation__health-icon {
    font-size: 20px;
}
.live-facilitation__health-label {
    font-size: 14px;
    font-weight: 600;
}
.live-facilitation__health-label--good {
    color: var(--ui-success);
}
.live-facilitation__health-label--moderate {
    color: var(--ui-warning);
}
.live-facilitation__health-label--needs_attention {
    color: var(--ui-error);
}
.live-facilitation__health-metrics {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.live-facilitation__metric {
    display: flex;
    align-items: center;
    gap: 8px;
}
.live-facilitation__metric-label {
    font-size: 12px;
    color: var(--ui-text-muted);
    width: 90px;
    flex-shrink: 0;
}
.live-facilitation__metric-bar {
    flex: 1;
    height: 6px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    border-radius: 3px;
    overflow: hidden;
}
.live-facilitation__metric-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.live-facilitation__metric-fill--engagement {
    background: var(--ui-primary);
}
.live-facilitation__metric-fill--clarity {
    background: var(--ui-accent);
}
.live-facilitation__metric-fill--safety {
    background: var(--ui-success);
}
.live-facilitation__metric-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-text);
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}
.live-facilitation__recommendations {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.live-facilitation__rec {
    background: var(--ui-surface);
    border-radius: 8px;
    padding: 12px;
    border-left: 4px solid var(--ui-accent);
    border: 1px solid var(--ui-border);
}
.live-facilitation__rec--high {
    border-left: 4px solid var(--ui-error);
    background: color-mix(in srgb, var(--ui-error) 4%, var(--ui-surface));
}
.live-facilitation__rec--medium {
    border-left: 4px solid var(--ui-warning);
}
.live-facilitation__rec--low {
    border-left: 4px solid var(--ui-accent);
}
.live-facilitation__rec-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.live-facilitation__rec-icon {
    font-size: 16px;
}
.live-facilitation__rec-category {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.live-facilitation__rec-priority {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}
.live-facilitation__rec-priority--high {
    background: color-mix(in srgb, var(--ui-error) 20%, transparent);
    color: var(--ui-error);
}
.live-facilitation__rec-priority--medium {
    background: color-mix(in srgb, var(--ui-warning) 20%, transparent);
    color: var(--ui-warning);
}
.live-facilitation__rec-priority--low {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
}
.live-facilitation__rec-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text);
    margin-bottom: 4px;
}
.live-facilitation__rec-desc {
    font-size: 13px;
    color: var(--ui-text-secondary);
    line-height: 1.4;
}
.live-facilitation__rec-action {
    margin-top: 8px;
    font-size: 13px;
    color: var(--ui-primary);
    padding: 6px 8px;
    background: color-mix(in srgb, var(--ui-primary) 8%, transparent);
    border-radius: 4px;
}
.live-facilitation__meta {
    font-size: 11px;
    color: var(--ui-text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid var(--ui-border);
}
.live-facilitation__meta-agenda {
    color: var(--ui-text-secondary);
}
.live-facilitation__updating {
    font-style: italic;
}
.live-facilitation__history-banner {
    padding: 4px 10px;
    background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    text-align: center;
    margin-bottom: 8px;
}
.live-facilitation__history-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}
.live-facilitation__history-btn {
    background: none;
    border: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    white-space: nowrap;
}
.live-facilitation__history-btn:hover:not(:disabled) {
    border-color: var(--ui-primary);
    color: var(--ui-primary);
}
.live-facilitation__history-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.live-facilitation__history-btn--live {
    color: var(--ui-success);
    border-color: var(--ui-success);
}
.live-facilitation__history-btn--live:hover {
    background: color-mix(in srgb, var(--ui-success) 10%, transparent);
}
.live-facilitation__history-position {
    font-size: 0.7rem;
    color: var(--ui-text-muted);
    min-width: 40px;
    text-align: center;
}
/* Content wrapper — dims slightly when refreshing to indicate update in progress */
.live-facilitation__content {
    position: relative;
    transition: opacity 0.2s ease;
}
.live-facilitation__content--refreshing {
    opacity: 0.6;
    pointer-events: none;
}
.live-facilitation__refreshing-overlay {
    text-align: center;
    padding: 8px;
    font-size: 12px;
    font-style: italic;
    color: var(--ui-text-muted);
    background: color-mix(in srgb, var(--ui-primary) 6%, transparent);
    border-radius: 4px;
    margin-top: 8px;
}
.live-facilitation__rec-poll-btn {
    margin-top: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--ui-primary);
    border-radius: 6px;
    background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
    color: var(--ui-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.live-facilitation__rec-poll-btn:hover {
    background: color-mix(in srgb, var(--ui-primary) 20%, transparent);
}
/* ============================================================
   Responsive Breakpoints
   ============================================================ */
/* Tablet Portrait (768px and below) */
@media (max-width: 768px) {
    .live-host__signals {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .live-host__content-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .live-host__section {
        max-height: 350px;
    }

    .live-host__section--collapsed {
        max-height: 52px;
    }

    .live-host__column {
        max-height: 350px;
    }

    .live-host__control-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .live-host__ctrl-btn {
        flex: 1 1 calc(20% - 6px);
    }
}
/* Mobile (640px and below) */
@media (max-width: 640px) {
    .live-host__header {
        padding: 10px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .live-host__signals {
        gap: 10px;
    }

    .live-host__signal {
        padding: 10px;
    }

    .live-host__content-grid {
        gap: 10px;
    }

    .live-host__section-header {
        padding: 8px 12px;
    }

    .live-host__section-content {
        padding: 8px 12px;
    }

    .live-host__ctrl-btn {
        padding: 8px 6px;
        font-size: 11px;
    }

    .live-host__now-card {
        padding: 12px;
    }

    .live-host__modal-content {
        padding: 16px;
        margin: 12px;
    }

    .live-host input,
    .live-host select,
    .live-host textarea {
        font-size: 16px;
    }
}
/* Mobile Portrait (480px and below) */
@media (max-width: 480px) {
    .live-host {
        padding: 12px;
        padding-bottom: 220px;
    }

    .live-host__signals {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Keep same layout as desktop - emoji top-left, number centered, label bottom */
    .live-host__signal {
        padding: 12px;
        min-height: 80px;
    }

    .live-host__signal-main {
        gap: 6px;
    }

    .live-host__signal-count {
        font-size: 32px;
    }

    .live-host__signal-icon {
        font-size: 28px;
    }

    .live-host__signal-label {
        font-size: 10px;
        margin-top: 6px;
    }

    .live-host__content-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .live-host__column {
        min-height: 200px;
        max-height: 300px;
    }

    .live-host__now-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .live-host__now-title {
        font-size: 20px;
    }

    .live-host__control-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .live-host__ctrl-btn {
        width: 100%;
    }
}
/* LiveParticipantPage CSS - split into feature files */
/**
 * LiveParticipantPage Styles
 * 
 * Participant contribution view for live sessions.
 * Matches LiveHostPage layout patterns with collapsible sections.
 * 
 * Uses only --ui-* CSS variables per project guidelines.
 */
.live-participant {
    /* Slightly darker background for better section contrast - matches LiveHostPage */
    background: color-mix(in srgb, var(--board-bg) 85%, black);
    color: var(--ui-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    font-size: 14px;
    --live-progress: 48%;
}
/* ============================================================
   Header - matches LiveHostPage
   ============================================================ */
.live-participant__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--ui-border);
    background: var(--board-bg);
    position: sticky;
    top: 0;
    z-index: 10;
}
.live-participant__header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.live-participant__header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.live-participant__back {
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.live-participant__back:hover {
    color: var(--ui-text);
}
.live-exit-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ui-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    padding: 0.5rem;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}
.live-exit-link:hover {
    color: var(--ui-text);
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}
.live-participant__title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ui-primary);
}
.live-participant__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ui-on-success);
    background: var(--ui-success);
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.live-participant__badge--inactive {
    background: var(--ui-surface-muted);
    color: var(--ui-text-muted);
}
.live-participant__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: live-participant__pulse 2s infinite;
}
.live-participant__dot--inactive {
    animation: none;
}
@keyframes live-participant__pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
/* ============================================================
   Main Content Area - matches LiveHostPage
   ============================================================ */
.live-participant__main {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 160px;
}
.live-participant__status {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--ui-text-muted);
    text-align: center;
    padding: 20px;
}
.live-participant__status a {
    color: var(--ui-accent);
}
.live-participant__empty {
    padding: 16px;
    color: var(--ui-text-muted);
    font-size: 12px;
    text-align: center;
}
/* ============================================================
   Current Agenda Item (NOW) - Large prominent display like LiveHostPage
   ============================================================ */
.live-participant__now {
    padding: 24px;
    /* Almost white background to stand out from dark page */
    background: var(--ui-surface);
    border-radius: 16px;
    border: 1px solid var(--ui-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    margin-top: 16px;
    margin-bottom: 8px;
}
.live-participant__now-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--ui-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: none; /* Hidden - title speaks for itself */
}
.live-participant__now-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 16px;
    color: var(--ui-text);
}
.live-participant__now-time {
    display: flex;
    align-items: center;
    gap: 16px;
}
.live-participant__time-bar {
    flex: 1;
    height: 6px;
    background: color-mix(in srgb, var(--ui-text) 12%, transparent);
    border-radius: 3px;
    overflow: hidden;
}
.live-participant__time-fill {
    height: 100%;
    background: var(--ui-accent);
    width: var(--live-progress, 48%);
    transition: width 1s linear;
}
.live-participant__time-fill--warning {
    background: var(--ui-error);
    animation: live-participant__time-pulse 0.5s infinite;
}
@keyframes live-participant__time-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.live-participant__time-remaining {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text);
    min-width: 50px;
    text-align: right;
}
.live-participant__time-remaining--warning {
    color: var(--ui-error);
}
/* ============================================================
   Signal Buttons - Card-style grid like LiveHostPage signals
   ============================================================ */
.live-participant__signals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 20px 0;
}
.live-participant__signal-btn {
    background: var(--ui-surface);
    border: 2px solid var(--ui-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Fixed size for consistent layout */
    width: 100%;
    min-height: 110px;
    max-height: 110px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}
.live-participant__signal-btn:hover:not(:disabled):not(.live-participant__signal-btn--active) {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border-color: var(--ui-text-muted);
}
.live-participant__signal-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* ACTIVE STATE - Very obvious with thick green border, green background, checkmark */
.live-participant__signal-btn--active {
    background: color-mix(in srgb, var(--ui-success) 25%, var(--ui-surface));
    border: 3px solid var(--ui-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-success) 30%, transparent);
}
/* Checkmark badge - rendered as actual HTML element to avoid conflict with wp-tooltip */
.live-participant__signal-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: var(--ui-success);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.live-participant__signal-emoji {
    font-size: 32px;
    margin-bottom: 8px;
}
.live-participant__signal-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ui-text);
    text-transform: capitalize;
    text-align: center;
}
.live-participant__signal-btn--active .live-participant__signal-label {
    color: var(--ui-success);
    font-weight: 700;
}
/* ============================================================
   Pace Signal - Warning style card
   ============================================================ */
.live-participant__pace {
    margin-bottom: 20px;
}
.live-participant__pace-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    cursor: pointer;
    transition: all 0.15s ease;
}
.live-participant__pace-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
    border-color: var(--ui-warning);
}
.live-participant__pace-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.live-participant__pace-btn--active {
    background: color-mix(in srgb, var(--ui-warning) 40%, var(--ui-surface));
    border-color: var(--ui-warning);
    border-width: 2px;
}
.live-participant__pace-btn--active .live-participant__pace-label {
    color: var(--ui-text);
    font-weight: 700;
}
.live-participant__pace-btn--active .live-participant__pace-hint {
    color: var(--ui-text-secondary);
    background: color-mix(in srgb, var(--ui-warning) 30%, var(--ui-surface));
    padding: 2px 8px;
    border-radius: 4px;
}
.live-participant__pace-emoji {
    font-size: 24px;
}
.live-participant__pace-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text);
}
.live-participant__pace-hint {
    font-size: 12px;
    color: var(--ui-text-muted);
}
/* ============================================================
   Safety Acknowledgment & Responses - Card-style
   ============================================================ */
.live-participant__safety-ack {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-success);
    border-radius: 12px;
    margin-bottom: 16px;
    animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.live-participant__safety-ack-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ui-success);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
}
.live-participant__safety-ack-text {
    flex: 1;
    font-size: 14px;
    color: var(--ui-text);
    line-height: 1.5;
}
.live-participant__safety-ack-dismiss {
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.live-participant__safety-ack-dismiss:hover {
    color: var(--ui-text);
}
.live-participant__safety-responses {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.live-participant__safety-response {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--ui-surface);
    border-radius: 12px;
    border: 1px solid var(--ui-border);
}
.live-participant__safety-response-icon {
    font-size: 24px;
    flex-shrink: 0;
}
.live-participant__safety-response-content {
    flex: 1;
    min-width: 0;
}
.live-participant__safety-response-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ui-text-muted);
    margin-bottom: 6px;
}
.live-participant__safety-response-message {
    font-size: 14px;
    color: var(--ui-text);
    line-height: 1.5;
}
.live-participant__safety-response-action {
    font-size: 12px;
    color: var(--ui-text-secondary);
    margin-top: 8px;
    font-style: italic;
}
.live-participant__safety-response-resource {
    font-size: 12px;
    color: var(--ui-text-muted);
    margin-top: 8px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--ui-primary) 6%, transparent);
    border-left: 3px solid var(--ui-primary);
    border-radius: 0 4px 4px 0;
    line-height: 1.5;
}
/* ============================================================
   Park Requests from Host - Card-style
   ============================================================ */
.live-participant__park-requests {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-warning);
    border-radius: 12px;
    margin-bottom: 16px;
    animation: live-participant__park-pulse 3s ease-in-out infinite;
}
@keyframes live-participant__park-pulse {
    0%, 100% {
        border-color: var(--ui-warning);
    }
    50% {
        border-color: color-mix(in srgb, var(--ui-warning) 60%, transparent);
    }
}
.live-participant__park-requests-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.live-participant__park-requests-icon {
    font-size: 24px;
}
.live-participant__park-requests-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ui-text);
}
.live-participant__park-requests-desc {
    font-size: 13px;
    color: var(--ui-text-muted);
    line-height: 1.5;
    margin: 0;
}
.live-participant__park-request-card {
    background: color-mix(in srgb, var(--ui-warning) 8%, transparent);
    border-radius: 8px;
    padding: 12px;
}
.live-participant__park-request-actions {
    display: flex;
    gap: 10px;
}
.live-participant__park-request-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.live-participant__park-request-btn:active {
    transform: scale(0.98);
}
.live-participant__park-request-btn--respond {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
}
.live-participant__park-request-btn--respond:hover {
    background: var(--ui-primary-hover);
}
.live-participant__park-request-btn--dismiss {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text-muted);
}
.live-participant__park-request-btn--dismiss:hover {
    background: color-mix(in srgb, var(--ui-text) 15%, transparent);
    color: var(--ui-text);
}
/* ============================================================
   Waiting Message - Styled like LiveHostPage hints
   ============================================================ */
.live-participant__waiting {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-warning);
    border-radius: 12px;
    margin-bottom: 16px;
}
.live-participant__waiting-icon {
    font-size: 24px;
}
.live-participant__waiting-text {
    font-size: 14px;
    color: var(--ui-text);
}
/* ============================================================
   Queue Info - Badge-style
   ============================================================ */
.live-participant__queue {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.live-participant__queue-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ui-text-muted);
    padding: 8px 14px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
}
.live-participant__queue-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 2px 8px;
    background: var(--ui-primary);
    color: white;
    border-radius: 10px;
    font-weight: 600;
}
/* ============================================================
   Content Grid - 2-column layout like LiveHostPage
   ============================================================ */
.live-participant__content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}
/* ============================================================
   Sections - Collapsible cards like LiveHostPage
   ============================================================ */
.live-participant__section {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 80px;
    max-height: 400px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .live-participant__section {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
}
.live-participant__section--collapsed {
    max-height: 56px;
}
.live-participant__section--meeting-info {
    max-height: none;
    overflow: visible;
}
.live-participant__section--full-width {
    grid-column: 1 / -1;
}
.live-participant__section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--ui-border);
    flex-shrink: 0;
    transition: background 0.15s;
}
.live-participant__section-header:hover {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}
.live-participant__section--collapsed .live-participant__section-header {
    border-bottom: none;
}
.live-participant__section-icon {
    display: none; /* Hidden - reduces visual clutter */
}
.live-participant__section-title {
    display: inline-flex;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ui-text);
    /* Green pill background like SessionPage */
    background: #d1fae5;
    padding: 2px 8px;
    border-radius: 3px;
    width: fit-content;
    flex: 0 0 auto;
    margin-right: auto;
}
[data-theme="dark"] .live-participant__section-title {
    background: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-surface));
}
[data-theme="light"] .live-participant__section-title {
    color: var(--brand-teal);
}
.live-participant__section-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ui-text) 12%, transparent);
    color: var(--ui-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.live-participant__section-chevron {
    font-size: 10px;
    color: var(--ui-text-muted);
    transition: transform 0.2s;
}
.live-participant__section-add {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid var(--ui-border);
    background: transparent;
    color: var(--ui-accent);
    cursor: pointer;
    transition: all 0.15s;
}
.live-participant__section-add:hover {
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    border-color: var(--ui-accent);
}
.live-participant__section-toggle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid var(--ui-border);
    background: transparent;
    color: var(--ui-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.live-participant__section-toggle:hover {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    color: var(--ui-text);
}
.live-participant__section-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.live-participant__section-empty {
    font-size: 12px;
    color: var(--ui-text-muted);
    text-align: center;
    padding: 20px;
}
/* ── Slot Indicator ─────────────────────────────────────────── */
.live-participant__slot-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    border-left: 3px solid var(--ui-accent);
    margin-bottom: 0.75rem;
}
.live-participant__slot-indicator-icon {
    font-size: 1rem;
}
.live-participant__slot-indicator-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ui-text);
    flex: 1;
}
.live-participant__slot-indicator-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ui-primary) 20%, transparent);
    color: var(--ui-primary);
}
/* ============================================================
   Participants - inside section
   ============================================================ */
.live-participant__participants {
    /* Removed padding - now inside section */
}
.live-participant__participants-list {
    display: grid;
    gap: 8px;
}
.live-participant__participant {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 40%, var(--ui-border));
    border-radius: 8px;
}
.live-participant__participant:hover {
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    border-color: var(--ui-accent);
}
.live-participant__participant-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.live-participant__participant-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.live-participant__participant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border: 1px solid var(--ui-border);
}
.live-participant__participant-avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
    color: var(--ui-primary);
    font-size: 13px;
    font-weight: 700;
}
.live-participant__participant-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.live-participant__participant-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-participant__participant-email {
    font-size: 11px;
    color: var(--ui-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-participant__participant-title {
    font-size: 10px;
    color: var(--ui-text-secondary);
    font-style: italic;
}
.live-participant__participant-type {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ui-text-muted);
    flex-shrink: 0;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    border-radius: 3px;
}
.live-participant__participant-role {
    margin-top: 6px;
    font-size: 11px;
    color: var(--ui-text-secondary);
}
/* ============================================================
   Poll Section - Card-style like LiveHostPage
   ============================================================ */
.live-participant__poll {
    padding: 16px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    margin-bottom: 16px;
}
.live-participant__poll-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.live-participant__poll-icon {
    font-size: 18px;
}
.live-participant__poll-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ui-text);
    background: #d1fae5;
    padding: 2px 8px;
    border-radius: 3px;
}
[data-theme="dark"] .live-participant__poll-title {
    background: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-surface));
}
.live-participant__poll-item {
    padding: 14px;
    background: color-mix(in srgb, var(--ui-primary) 5%, transparent);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    margin-bottom: 12px;
}
.live-participant__poll-item:last-child {
    margin-bottom: 0;
}
.live-participant__poll-question {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--ui-text);
}
.live-participant__poll-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.live-participant__poll-option {
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    background: var(--ui-surface);
    border: 2px solid var(--ui-border);
    border-radius: 8px;
    color: var(--ui-text);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}
.live-participant__poll-option:hover {
    border-color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-surface));
}
.live-participant__poll-option:active {
    transform: scale(0.98);
}
.live-participant__poll-option--selected {
    border-color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 15%, var(--ui-surface));
}
.live-participant__poll-option--selected::after {
    content: " ✓";
    color: var(--ui-accent);
}
/* ============================================================
   Section Headers
   ============================================================ */
.live-participant__section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    border-bottom: 1px solid var(--ui-border);
}
.live-participant__section-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.live-participant__section-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    padding: 1px 6px;
    background: var(--ui-text-muted);
    color: var(--board-bg);
    border-radius: 8px;
}
.live-participant__section-add {
    margin-left: auto;
    font-size: 10px;
    background: none;
    border: none;
    color: var(--ui-accent);
    cursor: pointer;
}
.live-participant__section-toggle {
    margin-left: auto;
    font-size: 10px;
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
    border-radius: 10px;
    padding: 2px 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.live-participant__section-toggle:hover {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
}
/* ============================================================
   Captures & Notes - Card-style items
   ============================================================ */
.live-participant__capture {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 40%, var(--ui-border));
    border-radius: 8px;
    margin-bottom: 8px;
}
.live-participant__capture:last-child {
    margin-bottom: 0;
}
.live-participant__capture:hover {
    border-color: var(--ui-accent);
}
.live-participant__capture-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    background: var(--ui-success);
    color: white;
}
.live-participant__capture-text {
    flex: 1;
    font-size: 13px;
    color: var(--ui-text);
    line-height: 1.5;
}
.live-participant__note {
    padding: 12px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 40%, var(--ui-border));
    border-radius: 8px;
    margin-bottom: 8px;
}
.live-participant__note:last-child {
    margin-bottom: 0;
}
.live-participant__note:hover {
    border-color: var(--ui-accent);
}
.live-participant__note--shared {
    border-color: color-mix(in srgb, var(--ui-primary) 50%, var(--ui-border));
    background: color-mix(in srgb, var(--ui-primary) 5%, transparent);
}
.live-participant__note-text {
    font-size: 13px;
    color: var(--ui-text);
    line-height: 1.5;
    flex: 1;
}
.live-participant__note-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.live-participant__note-visibility {
    font-size: 12px;
}
.live-participant__note-action-btn {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    color: var(--ui-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.live-participant__note-action-btn:hover {
    border-color: var(--ui-primary);
    color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
}
.live-participant__note-action-btn--delete:hover {
    border-color: var(--ui-error);
    color: var(--ui-error);
    background: color-mix(in srgb, var(--ui-error) 10%, transparent);
}
/* Note creation toggle */
.live-participant__note-toggle {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}
.live-participant__note-toggle-btn {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: transparent;
    color: var(--ui-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.live-participant__note-toggle-btn--active {
    border-color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
    color: var(--ui-primary);
    font-weight: 600;
}
.live-participant__note-toggle-hint {
    font-size: 11px;
    color: var(--ui-text-muted);
    margin-top: 4px;
    padding: 0 4px;
}
.live-participant__note-agenda-tag {
    font-size: 10px;
    font-weight: 600;
    color: var(--ui-text-muted);
    padding: 2px 6px;
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
    border-radius: 3px;
    margin-bottom: 4px;
    display: inline-block;
}
/* ============================================================
   Agenda List
   ============================================================ */
.live-participant__agenda-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.live-participant__agenda-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--ui-text);
    transition: background 0.15s;
}
.live-participant__agenda-item--current {
    background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
    font-weight: 600;
    border-left: 3px solid var(--ui-primary);
}
.live-participant__agenda-item--done {
    color: var(--ui-text-muted);
}
.live-participant__agenda-item-status {
    font-size: 12px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.live-participant__agenda-item-title {
    flex: 1;
    line-height: 1.3;
}
.live-participant__agenda-item-duration {
    font-size: 11px;
    color: var(--ui-text-muted);
    flex-shrink: 0;
}
/* ============================================================
   Sent Messages (Questions/Private to Host) - Card-style
   ============================================================ */
.live-participant__message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 40%, var(--ui-border));
    border-radius: 8px;
    margin-bottom: 8px;
}
.live-participant__message:last-child {
    margin-bottom: 0;
}
.live-participant__message:hover {
    border-color: var(--ui-accent);
}
.live-participant__message-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.live-participant__message-content {
    flex: 1;
    min-width: 0;
}
.live-participant__message-text {
    flex: 1;
    font-size: 13px;
    color: var(--ui-text);
    line-height: 1.5;
}
.live-participant__message-reply {
    margin-top: 10px;
    padding: 10px;
    background: color-mix(in srgb, var(--ui-success) 10%, transparent);
    border-radius: 6px;
    border-left: 3px solid var(--ui-success);
}
.live-participant__message-reply-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ui-success);
    display: block;
    margin-bottom: 4px;
}
.live-participant__message-reply-text {
    font-size: 13px;
    color: var(--ui-text);
    line-height: 1.5;
}
.live-participant__message-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--ui-text-muted);
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
.live-participant__message-status--surfaced,
.live-participant__message-status--replied {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}
.live-participant__message-status--acknowledged,
.live-participant__message-status--read {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
}
.live-participant__message--question {
    border-left: 3px solid var(--ui-accent);
}
.live-participant__message--private {
    border-left: 3px solid var(--ui-primary);
}
.live-participant__message--has-reply {
    border-left: 3px solid var(--ui-success);
}
/* ============================================================
   Action Bar (Fixed Footer) - Matches LiveHostPage control bar
   ============================================================ */
.live-participant__actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 12px;
    background: var(--board-bg);
    border-top: 1px solid var(--ui-border);
    padding: 12px 20px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 20;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}
.live-participant__action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: 8px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    cursor: pointer;
    min-height: 56px;
    transition: all 0.15s ease;
}
.live-participant__action-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border-color: var(--ui-text-muted);
}
.live-participant__action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.live-participant__action-btn--safety {
    border-color: var(--ui-warning);
    background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
}
.live-participant__action-btn--safety:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-warning) 20%, transparent);
}
.live-participant__action-icon {
    font-size: 20px;
}
.live-participant__action-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ui-text-muted);
}
/* ============================================================
   Safety Modal - Desktop-centered like LiveHostPage modals
   ============================================================ */
.live-participant__modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.live-participant__modal {
    width: 100%;
    max-width: 480px;
    background: var(--ui-surface);
    border-radius: 16px;
    padding: 20px;
    margin: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.live-participant__modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.live-participant__modal-icon {
    font-size: 24px;
}
.live-participant__modal-title {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: var(--ui-text);
}
.live-participant__modal-close {
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.live-participant__modal-close:hover {
    color: var(--ui-text);
}
.live-participant__modal-body {
}
.live-participant__modal-info {
    font-size: 13px;
    color: var(--ui-text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}
.live-participant__safety-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.live-participant__safety-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    border-radius: 12px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    cursor: pointer;
    min-height: 90px;
    transition: all 0.15s ease;
}
.live-participant__safety-btn:hover {
    background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
    border-color: var(--ui-warning);
}
.live-participant__safety-emoji {
    font-size: 28px;
}
.live-participant__safety-label {
    font-size: 12px;
    text-align: center;
    line-height: 1.3;
}
/* ============================================================
   Park Note Modal - Matches LiveHostPage modals
   ============================================================ */
.live-participant__park-input {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface-muted);
    color: var(--ui-text);
    resize: vertical;
    margin-bottom: 20px;
    line-height: 1.5;
}
.live-participant__park-input:focus {
    outline: none;
    border-color: var(--ui-accent);
}
.live-participant__park-input::placeholder {
    color: var(--ui-text-muted);
}
.live-participant__park-actions {
    display: flex;
    gap: 12px;
}
.live-participant__park-skip {
    flex: 1;
    padding: 14px;
    font-size: 14px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    color: var(--ui-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.live-participant__park-skip:hover {
    background: color-mix(in srgb, var(--ui-text) 15%, transparent);
    color: var(--ui-text);
}
.live-participant__park-submit {
    flex: 1;
    padding: 14px;
    font-size: 14px;
    font-weight: 600;
    background: var(--ui-accent);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.15s ease;
}
.live-participant__park-submit:hover:not(:disabled) {
    background: var(--ui-primary-hover);
}
.live-participant__park-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* ============================================================
   Responsive - Stack to single column on narrow screens
   ============================================================ */
@media (max-width: 768px) {
    .live-participant__main {
        padding: 0 16px 160px;
    }

    .live-participant__now {
        padding: 20px;
    }

    .live-participant__now-title {
        font-size: 20px;
    }

    .live-participant__signals {
        grid-template-columns: repeat(2, 1fr);
    }

    .live-participant__content-grid {
        grid-template-columns: 1fr;
    }

    .live-participant__modal {
        margin: 16px;
        max-width: none;
        border-radius: 16px 16px 0 0;
    }

    .live-participant__modal-backdrop {
        align-items: flex-end;
    }
}
/* ── Mobile (640px and below) ── */
@media (max-width: 640px) {
    .live-participant__header {
        padding: 10px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .live-participant__signals {
        gap: 10px;
    }

    .live-participant__signal {
        padding: 10px 8px;
    }

    .live-participant__action-bar {
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .live-participant__action-btn {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        padding: 8px 6px;
        font-size: 11px;
    }

    .live-participant__content-grid {
        gap: 10px;
    }

    .live-participant__section {
        padding: 12px;
    }

    .live-participant__contrib-form {
        padding: 12px;
    }

    .live-participant__modal-content {
        padding: 16px;
        margin: 12px;
    }

    .live-participant input,
    .live-participant select,
    .live-participant textarea {
        font-size: 16px;
    }
}
/**
 * LiveBoardPage Styles
 * 
 * Read-only 360° dashboard optimized for large screens and screenshare.
 * Grid layout with agenda, pulse visualization, and captures.
 * 
 * Uses only --ui-* CSS variables per project guidelines.
 */

.live-board {
    background: var(--board-bg);
    color: var(--ui-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 14px;
}

/* ============================================================
   Header
   ============================================================ */

.live-board__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--ui-border);
    background: var(--board-bg);
}

.live-board__header-main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.live-board__title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.live-board__badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ui-success);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.live-board__badge--inactive {
    color: var(--ui-text-muted);
}

.live-board__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ui-success);
    animation: live-board__pulse 2s infinite;
}

.live-board__dot--inactive {
    background: var(--ui-text-muted);
    animation: none;
}

@keyframes live-board__pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.live-board__time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 300;
    color: var(--ui-text-muted);
}

/* ============================================================
   Status Messages
   ============================================================ */

.live-board__status {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--ui-text-muted);
    font-size: 16px;
}

.live-board__empty {
    padding: 16px;
    color: var(--ui-text-muted);
    font-size: 12px;
    text-align: center;
}

/* ============================================================
   Main Grid
   ============================================================ */

.live-board__main {
    flex: 1;
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 16px;
    padding: 16px 24px;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .live-board__main {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
}

.live-board__right-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================================
   Panels
   ============================================================ */

.live-board__panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.live-board__panel--agenda {
    max-height: 100%;
}

.live-board__panel--pulse {
    flex: 1;
}

.live-board__panel--captures {
    flex: 1;
}

.live-board__panel--outcomes {
    flex: 0 0 auto;
    max-height: 200px;
}

.live-board__panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

.live-board__panel-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-board__panel-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    padding: 2px 8px;
    background: var(--ui-text-muted);
    color: var(--board-bg);
    border-radius: 10px;
}

.live-board__panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* ============================================================
   Agenda Panel
   ============================================================ */

.live-board__agenda-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ui-border);
}

.live-board__agenda-item:last-child {
    border-bottom: none;
}

.live-board__agenda-item--current {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
}

.live-board__agenda-item--past {
    opacity: 0.5;
}

.live-board__agenda-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    flex-shrink: 0;
}

.live-board__agenda-item--current .live-board__agenda-number {
    background: var(--ui-accent);
    color: white;
}

.live-board__agenda-title {
    flex: 1;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-board__agenda-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ui-text-muted);
}

.live-board__agenda-now {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--ui-accent);
    color: white;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================
   Pulse Panel
   ============================================================ */

.live-board__now-card {
    padding: 16px;
    margin: 8px 16px;
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, transparent);
}

.live-board__now-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--ui-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.live-board__now-title {
    font-size: 18px;
    font-weight: 600;
}

.live-board__pulse-bars {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.live-board__pulse-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.live-board__pulse-emoji {
    font-size: 20px;
    width: 28px;
    text-align: center;
}

.live-board__pulse-label {
    width: 80px;
    font-size: 12px;
    color: var(--ui-text-secondary);
}

.live-board__pulse-bar {
    flex: 1;
    height: 20px;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    border-radius: 4px;
    overflow: hidden;
}

.live-board__pulse-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    min-width: 4px;
}

.live-board__pulse-fill--interest { background: var(--ui-warning); }
.live-board__pulse-fill--contribute { background: var(--ui-success); }
.live-board__pulse-fill--unfamiliar { background: var(--ui-accent); }
.live-board__pulse-fill--confused { background: var(--ui-error); }

.live-board__pulse-count {
    width: 32px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 600;
    text-align: right;
}

/* ============================================================
   Captures Panel
   ============================================================ */

.live-board__capture {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ui-border);
}

.live-board__capture:last-child {
    border-bottom: none;
}

.live-board__capture-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    background: var(--ui-success);
    color: white;
}

.live-board__capture-text {
    flex: 1;
    font-size: 12px;
    line-height: 1.4;
}

.live-board__capture-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--ui-text-muted);
    flex-shrink: 0;
}

/* ============================================================
   Outcomes Panel
   ============================================================ */

.live-board__outcome {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 16px;
}

.live-board__outcome-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--ui-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    color: var(--ui-text-muted);
}

.live-board__outcome-text {
    flex: 1;
    font-size: 12px;
}

/* ============================================================
   Footer Timeline
   ============================================================ */

.live-board__footer {
    border-top: 1px solid var(--ui-border);
    padding: 12px 24px;
    background: var(--board-bg);
}

.live-board__timeline {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
}

.live-board__timeline-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    flex-shrink: 0;
}

.live-board__timeline-item--current {
    background: color-mix(in srgb, var(--ui-accent) 20%, transparent);
    border-radius: 12px;
}

.live-board__timeline-item--past {
    opacity: 0.4;
}

.live-board__timeline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ui-text-muted);
}

.live-board__timeline-item--current .live-board__timeline-dot {
    background: var(--ui-accent);
}

.live-board__timeline-label {
    font-size: 11px;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Mobile (640px and below) ── */
@media (max-width: 640px) {
    .live-board__header {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .live-board__title {
        font-size: 16px;
    }

    .live-board__time {
        font-size: 20px;
    }

    .live-board__main {
        padding: 12px;
        gap: 12px;
    }

    .live-board__pulse {
        padding: 12px;
    }

    .live-board__pulse-label {
        font-size: 10px;
        min-width: 60px;
    }

    .live-board__timeline-item {
        padding: 8px 12px;
        gap: 8px;
    }

    .live-board__capture {
        padding: 8px 12px;
        gap: 6px;
    }

    .live-board__section {
        padding: 12px;
    }

    .live-board input,
    .live-board select,
    .live-board textarea {
        font-size: 16px;
    }
}
/* SessionCreatePage CSS - split into feature files */
/* Session create mock (two-column, template-like) */
.session-create-grid {
  --session-create-chat-w: 380px;
  --session-create-chat-gap: 24px;
  /* Content is centered in full viewport - chat floats as overlay */
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (max-width: 900px) {
  .session-create-grid {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0 16px;
  }
}
.session-create-left {
  display: grid;
  gap: 14px;
  min-width: 0;
  max-width: 920px;
  margin: 0 auto;
}
.session-create-right {
  /* Centered floating bar at bottom */
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 720px;
  z-index: 100;
  pointer-events: none; /* Allow clicking through transparent areas */
  padding: 0 16px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .session-create-right {
    max-width: 100%;
    bottom: 16px;
    padding: 0 12px;
  }
}
.session-create-divider {
  height: 1px;
  width: 100%;
  background: var(--ui-border);
}
.session-create-topbar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.session-create-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.session-create-subtitle {
  font-size: 12px;
  color: var(--ui-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.session-create-back-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.session-create-back-btn:hover {
  background: var(--ui-surface-muted);
  border-color: var(--ui-text-muted);
}
/* Finished session banner */
.session-finished-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 8px 0 4px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ui-text-secondary);
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
  border: 1px solid var(--ui-border);
}
.session-finished-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ui-success);
  color: #fff;
  font-size: 11px;
  flex-shrink: 0;
}
.session-create-row {
  background: var(--ui-surface);
  border: 1px solid var(--ui-warning);
  border-radius: 8px;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 130px 70px 80px 50px;
  gap: 10px;
  align-items: center;
}
/* Status indicator for active sessions */
.session-create-row.is-active {
  border-color: var(--ui-success);
}
@media (max-width: 900px) {
  .session-create-row {
    grid-template-columns: 1fr;
  }
}
.session-create-row-left {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.session-create-title-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--ui-text);
  border-radius: 0;
  padding: 2px 0;
  font-weight: 600;
  font-size: 14px;
  min-width: 0;
}
.session-create-title-input:hover,
.session-create-title-input:focus {
  outline: none;
  border-bottom-color: var(--ui-border);
  box-shadow: none;
}
.session-create-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ui-warning);
  font-size: 11px;
}
.session-create-state-action {
  border: 1px solid var(--ui-border);
  background: transparent;
  color: var(--ui-text-secondary);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.session-create-state-action:hover {
  border-color: var(--ui-accent);
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
}
.session-context-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
  color: var(--ui-primary);
  border: 1px solid color-mix(in srgb, var(--ui-primary) 30%, transparent);
}
.session-context-badge svg {
  flex-shrink: 0;
}
.session-context-badge.badge-success {
  background: color-mix(in srgb, var(--ui-success) 15%, transparent);
  color: var(--ui-success);
  border: 1px solid color-mix(in srgb, var(--ui-success) 30%, transparent);
  cursor: pointer;
  transition: background 0.15s ease;
}
.session-context-badge.badge-success:hover {
  background: color-mix(in srgb, var(--ui-success) 25%, transparent);
}
.session-context-badge.badge-warning {
  background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
  color: var(--ui-warning);
  border: 1px solid color-mix(in srgb, var(--ui-warning) 30%, transparent);
}
.session-create-pill {
  border: none;
  background: transparent;
  border-radius: 4px;
  padding: 4px 6px;
  text-align: center;
  min-width: 0;
  cursor: pointer;
  transition: background 0.12s;
}
.session-create-pill:hover {
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}
.pill-label {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ui-text-muted);
  margin-bottom: 2px;
}
.pill-input {
  width: 100%;
  border: 1px solid var(--ui-border);
  background: #fafafa;
  color: var(--ui-text-secondary);
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 11px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
[data-theme="dark"] .pill-input {
  background: color-mix(in srgb, var(--ui-surface) 80%, var(--ui-surface-muted));
}
.pill-input:focus {
  outline: none;
  border-color: var(--ui-primary);
  box-shadow: none;
}
/* Title diff display */
.session-create-title-diff {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 600;
  font-size: 14px;
}
.session-create-title-diff .diff-del {
  text-decoration: line-through;
  color: var(--ui-error);
  opacity: 0.7;
}
.session-create-title-diff .diff-ins {
  color: var(--ui-success);
  background: color-mix(in srgb, var(--ui-success) 15%, transparent);
  padding: 2px 4px;
  border-radius: 2px;
}
/* Pill diff display */
.pill-diff {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 10px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.pill-diff .diff-del {
  text-decoration: line-through;
  color: var(--ui-error);
  opacity: 0.7;
}
.pill-diff .diff-ins {
  color: var(--ui-success);
  font-weight: 600;
}
/* Highlight pill when showing diff */
.session-create-pill.is-diff-highlight {
  border: 1px solid var(--ui-warning);
  background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
}
/* Type label with optional icon */
.session-header-type-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.session-header-type-icon {
  font-size: 1.1em;
  line-height: 1;
}
.session-header-type-caret {
  font-size: 0.7em;
  opacity: 0.5;
  margin-left: 2px;
}
.session-create-pill--clickable {
  cursor: pointer;
}
.session-create-pill-wrapper {
  position: relative;
}
.session-header-type-popover {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  margin-top: 4px;
  min-width: 280px;
  max-width: 380px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ui-text) 15%, transparent);
  padding: 8px;
}
.session-create-section {
  /* Boxed card style for clear section separation */
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .session-create-section {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
}
.session-create-disabled {
  opacity: 0.7;
}
.session-create-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: transparent;
  margin: 0;
}
.session-create-section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ui-text);
  margin: 0;
  /* Slim green pill background for title */
  background: #d1fae5;
  padding: 0px 4px;
  border-radius: 2px;
}
[data-theme="dark"] .session-create-section-title {
  background: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-surface));
}
[data-theme="light"] .session-create-section-title {
  color: var(--brand-teal);
}
/* Section content padding */
.session-create-section-content {
  padding: 16px;
}
/* Padding for direct children (textareas, etc.) inside sections without wrapper */
.session-create-section > .session-create-textarea,
.session-create-section > .parsed-agenda-items {
  margin: 16px;
  margin-top: 0;
  width: calc(100% - 32px);
}
/* Textarea styling */
.session-create-section-content .session-create-textarea {
  background: var(--ui-surface);
}
.session-create-section-count {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ui-text-muted);
  font-size: 11px;
  background: transparent;
  padding: 0;
}
.session-create-section-action {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  color: var(--ui-success);
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}
.session-create-section-action:hover {
  text-decoration: underline;
}
/* Parsed Agenda Items Display */
.parsed-agenda-items {
  margin-top: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ui-surface) 50%, transparent);
}
.parsed-agenda-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ui-text-muted);
  padding: 6px 12px;
  border-bottom: 1px solid var(--ui-border);
}
.parsed-agenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--ui-border);
  flex-wrap: wrap;
}
.parsed-agenda-item:last-child {
  border-bottom: none;
}
.parsed-agenda-item-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ui-text-muted);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-border);
  border-radius: 50%;
  flex-shrink: 0;
}
.parsed-agenda-item-title {
  font-size: 12px;
  color: var(--ui-text);
  flex: 1;
  min-width: 0;
}
.parsed-agenda-item-reactions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.reaction-count {
  font-size: 11px;
  color: var(--ui-text-muted);
}
.parsed-agenda-item-comments {
  width: 100%;
  margin-left: 26px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.parsed-agenda-comment {
  font-size: 11px;
  color: var(--ui-text-secondary);
}
.session-create-table {
  display: grid;
  gap: 0;
  font-size: 12px;
}
.session-create-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 90px 110px 50px 24px;
  gap: 6px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--ui-border);
}
.session-create-table-row:last-child {
  border-bottom: none;
}
@media (max-width: 900px) {
  .session-create-table-row {
    grid-template-columns: 1fr;
  }
}
.session-create-invite-table .session-create-table-row {
  grid-template-columns: minmax(0, 1.6fr) 90px 110px 110px 110px 120px;
}
@media (max-width: 900px) {
  .session-create-invite-table .session-create-table-row {
    grid-template-columns: 1fr;
  }
}
.session-create-select {
  background: #fafafa;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  color: var(--ui-text-secondary);
  font-size: 10px;
  padding: 4px 6px;
  cursor: pointer;
  width: 100%;
}
[data-theme="dark"] .session-create-select {
  background: color-mix(in srgb, var(--ui-surface) 80%, var(--ui-surface-muted));
}
.session-create-role-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--ui-text-secondary);
  font-size: 11px;
  width: 100%;
  padding: 4px 0;
}
.session-create-role-input:hover,
.session-create-role-input:focus {
  border-bottom-color: var(--ui-border);
  outline: none;
}
.session-create-role-input::placeholder {
  color: var(--ui-text-muted);
}
.session-create-remove-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  font-size: 14px;
}
.session-create-remove-btn:hover {
  color: var(--ui-error);
}
.session-create-email {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.session-create-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--ui-border);
}
.session-create-avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
  color: var(--ui-primary);
  font-size: 11px;
  font-weight: 700;
}
.session-create-email-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.session-create-display-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-text-secondary);
  line-height: 1.2;
}
.session-create-email input {
  background: transparent;
  border: none;
  color: var(--ui-text);
  font-size: 12px;
  padding: 0;
  width: 100%;
}
.session-create-email input:focus {
  outline: none;
}
.session-create-email input::placeholder {
  color: var(--ui-text-muted);
}
.session-create-badge {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  border: none;
  color: var(--ui-success);
  background: color-mix(in srgb, var(--ui-success) 15%, transparent);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 500;
  text-transform: uppercase;
  flex-shrink: 0;
}
.session-create-badge.is-anonymous {
  color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 18%, transparent);
}
.session-create-badge--declined {
  color: var(--ui-warning);
  background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
}
.session-create-badge--absent {
  color: var(--ui-error);
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
}
.session-create-badge--attended {
  color: var(--ui-success);
  background: color-mix(in srgb, var(--ui-success) 15%, transparent);
}
.session-create-table-row--declined {
  opacity: 0.7;
}
.session-create-table-row--declined input {
  text-decoration: line-through;
  color: var(--ui-text-muted);
}
.session-create-absence-message {
  display: flex;
  gap: 8px;
  padding: 6px 12px 10px 12px;
  font-size: 12px;
  background: color-mix(in srgb, var(--ui-warning) 8%, transparent);
  border-left: 2px solid var(--ui-warning);
  margin-top: -1px;
  margin-bottom: 4px;
}
.session-create-absence-label {
  color: var(--ui-text-muted);
  font-weight: 500;
  flex-shrink: 0;
}
.session-create-absence-text {
  color: var(--ui-text);
  font-style: italic;
}
.session-create-remove {
  display: flex;
  justify-content: flex-end;
}
.session-create-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  margin-right: 24px;
  padding: 8px 0;
  background: transparent;
  border-radius: 4px;
  font-size: 12px;
  color: var(--ui-text-secondary);
}
.session-create-checkbox input {
  accent-color: var(--ui-success);
}
.session-create-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.session-create-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-muted);
  border-radius: 4px;
  padding: 5px 8px;
  max-width: 100%;
  font-size: 11px;
}
.session-create-chip-icon {
  font-size: 12px;
}
.session-create-chip-label {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ui-text-secondary);
}
.session-create-chip-remove {
  border: none;
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  opacity: 0.5;
}
.session-create-chip-remove:hover {
  color: var(--ui-error);
  opacity: 1;
}
/* Processing state for materials being analyzed by AI */
.session-create-chip--processing {
  border-color: var(--ui-warning);
  background: color-mix(in srgb, var(--ui-warning) 10%, var(--ui-surface-muted));
}
.session-create-chip-icon--spin {
  animation: spin 1.5s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.session-create-drop {
  margin-top: 6px;
  border: 1px dashed var(--ui-accent);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  color: var(--ui-text-muted);
  font-size: 11px;
  cursor: pointer;
  background: color-mix(in srgb, var(--ui-accent) 8%, transparent);
}
[data-theme="light"] .session-create-drop {
  background: #ecfdf5;
}
.session-create-drop:hover {
  border-color: var(--ui-success);
  color: var(--ui-text-secondary);
  background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
}
.session-create-textarea {
  width: 100%;
  border: 1px solid var(--ui-accent);
  border-radius: 6px;
  padding: 10px;
  min-height: 72px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}
.session-create-textarea:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 20%, transparent);
}
.session-create-textarea-tall {
  min-height: 220px;
}
/* ── Materials fork choice buttons ── */
.materials-fork-choices {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.materials-fork-btn {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.materials-fork-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-primary) 8%, var(--ui-surface));
  border-color: var(--ui-primary);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ui-primary) 15%, transparent);
  transform: translateY(-1px);
}
.materials-fork-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}
.materials-fork-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.materials-fork-icon {
  font-size: 1.25rem;
  line-height: 1;
}
/* ── Brief generating animation ── */
.brief-generating-icon {
  animation: brief-bounce 1.2s ease-in-out infinite;
}
.brief-generating-text {
  font-size: 0.9rem;
}
.brief-generating-bar {
  margin: 1rem auto 0;
  width: 60%;
  max-width: 200px;
  height: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ui-accent) 20%, transparent);
  overflow: hidden;
  position: relative;
}
.brief-generating-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: var(--ui-accent);
  animation: brief-slide 1.6s ease-in-out infinite;
}
@keyframes brief-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes brief-slide {
  0% { left: -40%; }
  50% { left: 100%; }
  100% { left: -40%; }
}
.session-create-lessons {
  display: grid;
  gap: 0;
}
.session-create-lesson {
  border: 1px solid var(--ui-border);
  border-radius: 0;
  overflow: hidden;
}
.session-create-lesson:first-child {
  border-radius: 4px 4px 0 0;
}
.session-create-lesson:last-child {
  border-radius: 0 0 4px 4px;
}
.session-create-lesson:only-child {
  border-radius: 4px;
}
.session-create-lesson + .session-create-lesson {
  border-top: none;
}
.session-create-lesson-header {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 18px auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s;
}
.session-create-lesson-header:hover {
  background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}
.session-create-lesson-expand {
  display: flex;
  align-items: center;
  justify-content: center;
}
.session-create-lesson-expand .expand-icon {
  font-size: 10px;
  color: var(--ui-text-muted);
  transition: transform 0.2s;
}
.session-create-lesson.is-expanded .expand-icon {
  transform: rotate(0deg);
}
.session-create-lesson:not(.is-expanded) .expand-icon {
  transform: rotate(-90deg);
}
.session-create-lesson-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.session-create-lesson-title {
  font-weight: 600;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
.session-create-lesson-audience {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 8px;
  text-transform: uppercase;
  padding: 2px 5px;
  background: color-mix(in srgb, var(--ui-success) 15%, transparent);
  color: var(--ui-success);
  border-radius: 3px;
  font-weight: 500;
}
.session-create-lesson-lang {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 8px;
  text-transform: uppercase;
  padding: 2px 5px;
  background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
  color: var(--ui-primary);
  border-radius: 3px;
  font-weight: 500;
}
.session-create-lesson-objective {
  margin-top: 2px;
  color: var(--ui-text-muted);
  font-size: 11px;
}
.session-create-lesson-meta-row {
  display: flex;
  gap: 12px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  color: var(--ui-text-muted);
  white-space: nowrap;
}
.session-create-lesson-status {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 500;
  font-size: 10px;
}
.session-create-lesson-status.is-ready { color: var(--ui-success); }
.session-create-lesson-status.is-generating { color: var(--ui-warning); }
.session-create-lesson-actions {
  display: flex;
  gap: 6px;
}
.session-create-lesson-btn {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--ui-border);
  background: transparent;
  color: var(--ui-text-secondary);
  cursor: pointer;
}
.session-create-lesson-btn:hover {
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}
.session-create-lesson-body {
  padding: 10px;
  display: grid;
  gap: 8px;
  background: var(--ui-surface-muted);
  border-top: 1px solid var(--ui-border);
}
.session-create-lesson-research {
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface);
  display: grid;
  gap: 8px;
}
.session-create-lesson-card-expansion {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ui-accent) 5%, var(--ui-surface));
  display: grid;
  gap: 8px;
}
.session-create-lesson-research-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ui-text-secondary);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.session-create-lesson-research-content {
  font-size: 12px;
  color: var(--ui-text);
}
.session-create-mini-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.session-create-mini-actions .wp-button {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  padding: 4px 8px;
}
.session-create-card {
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
}
.session-create-card-title {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ui-text-secondary);
  margin-bottom: 4px;
}
.session-create-card-body {
  font-size: 11px;
  color: var(--ui-text-muted);
  line-height: 1.4;
}
.session-create-more-hint {
  font-size: 10px;
  color: var(--ui-text-muted);
  font-style: italic;
  text-align: center;
  padding: 12px;
  border: 1px dashed var(--ui-border);
  border-radius: 4px;
  margin-top: 8px;
}
/* Lesson cards inside expanded induction */
.session-create-lesson-card {
  margin-top: 12px;
  padding: 12px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
}
.session-create-lesson-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.session-create-lesson-card-num {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.session-create-lesson-card-actions {
  display: flex;
  gap: 4px;
}
.session-create-btn-card {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  padding: 4px 8px;
  border-radius: 4px;
  border: none;
  background: var(--ui-accent) !important;
  color: #fff !important;
  cursor: pointer;
  transition: opacity 0.15s;
}
.session-create-btn-card:hover {
  opacity: 0.85;
}
.session-create-lesson-card-title {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}
.session-create-lesson-card-perspective {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px 10px;
  background: var(--ui-surface);
  border-radius: 4px;
}
.session-create-lesson-card-perspective input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--ui-text-secondary);
  font-size: 11px;
  outline: none;
}
.session-create-lesson-card-perspective input::placeholder {
  color: var(--ui-text-muted);
}
.session-create-lesson-card-perspective button {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  padding: 4px 8px;
  border-radius: 4px;
  border: none;
  background: var(--ui-accent) !important;
  color: #fff !important;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.session-create-lesson-card-perspective button:hover {
  opacity: 0.85;
}
.session-create-lesson-card-content {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ui-text-secondary);
}
.session-create-lesson-card-content p {
  margin-bottom: 8px;
}
.session-create-lesson-card-content ul {
  margin-left: 16px;
  margin-bottom: 8px;
}
.session-create-lesson-card-content li {
  margin-bottom: 3px;
}
.session-create-lesson-card-content strong {
  color: var(--ui-text);
}
[data-theme="light"] .session-create-lesson-card-content strong {
  color: var(--brand-teal);
}
/* Inline editing inputs for lesson & card content */
.session-create-lesson-title-input,
.session-create-lesson-objective-input,
.session-create-lesson-card-title-input,
.session-create-lesson-card-content-input {
  width: 100%;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  color: var(--ui-text);
  padding: 4px 8px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.session-create-lesson-title-input:focus,
.session-create-lesson-objective-input:focus,
.session-create-lesson-card-title-input:focus,
.session-create-lesson-card-content-input:focus {
  border-color: var(--ui-primary);
}
.session-create-lesson-title-input {
  font-size: 15px;
  font-weight: 700;
}
.session-create-lesson-objective-input {
  font-size: 12px;
  min-height: 40px;
  resize: vertical;
}
.session-create-lesson-card-title-input {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.session-create-lesson-card-content-input {
  font-size: 13px;
  line-height: 1.6;
  min-height: 60px;
  resize: vertical;
}
/* Quiz section */
.session-create-quiz-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-border);
}
.session-create-quiz-header {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-accent);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.session-create-quiz-header .session-create-lesson-card-title {
  margin-left: auto;
  margin-bottom: 0;
}
.session-create-quiz-card {
  padding: 12px;
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  margin-bottom: 12px;
}
.session-create-quiz-question {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 12px 0 10px 0;
}
.session-create-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.session-create-quiz-option {
  padding: 8px 12px;
  background: var(--ui-accent);
  color: #fff !important;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
}
.session-create-quiz-option:hover {
  opacity: 0.9;
}
.session-create-quiz-option.is-correct {
  background: var(--ui-success);
  color: #fff !important;
}
.session-create-quiz-answer {
  margin-top: 12px;
  padding: 12px;
  background: var(--ui-surface);
  border-radius: 6px;
}
.session-create-quiz-answer-label {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.session-create-quiz-answer p {
  font-size: 12px;
  color: var(--ui-text-secondary);
  margin: 0;
}
/* Induction section styles */
.session-create-induction-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--ui-text-secondary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-border);
  margin-bottom: 8px;
}
.session-create-induction-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}
.session-create-induction-empty {
  font-size: 12px;
  color: var(--ui-text-muted);
  padding: 8px 0;
}
.session-create-induction-empty p {
  margin: 0 0 4px;
}
.session-create-induction-hint {
  font-size: 11px;
  color: var(--ui-text-muted);
  opacity: 0.8;
}
.session-create-induction-form {
  display: grid;
  gap: 12px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface-muted);
}
.session-create-induction-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.session-create-induction-form-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-text);
}
.session-create-induction-form-subtitle {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--ui-text-muted);
}
.session-create-induction-form-fields {
  display: grid;
  gap: 10px;
}
.session-create-induction-label {
  display: grid;
  gap: 6px;
  font-size: 11px;
  color: var(--ui-text-secondary);
}
.session-create-induction-input {
  width: 100%;
}
.session-create-induction-textarea {
  min-height: 96px;
}
.session-create-induction-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.session-create-induction-participants {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--ui-border);
  display: grid;
  gap: 12px;
}
.session-create-induction-participants-header {
  display: grid;
  gap: 4px;
}
.session-create-induction-participants-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-text);
}
.session-create-induction-participants-hint {
  margin: 0;
  font-size: 11px;
  color: var(--ui-text-muted);
}
.session-create-induction-participants-grid {
  display: grid;
  gap: 12px;
}
.session-create-induction-participant {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 12px;
  background: var(--ui-surface);
  display: grid;
  gap: 10px;
}
.session-create-induction-participant-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ui-text);
}
.session-language-modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--ui-text) 35%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 60;
}
.session-language-modal {
  width: min(520px, 94vw);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 20px 40px color-mix(in srgb, var(--ui-text) 20%, transparent);
}
.session-language-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.session-language-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ui-text);
}
.session-language-modal-subtitle {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ui-text-muted);
}
.session-language-modal-close {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--ui-text-muted);
  cursor: pointer;
}
.session-language-modal-close:hover {
  color: var(--ui-text);
}
.session-language-modal-fields {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}
.session-language-modal-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ui-text);
}
.session-language-modal-actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
/* ── Induction generating animation ── */
.induction-generating {
  padding: 2rem;
  text-align: center;
  color: var(--ui-text-muted);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
  margin-bottom: 12px;
}
.induction-generating-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  animation: induction-bounce 1.2s ease-in-out infinite;
}
.induction-generating-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ui-text);
}
.induction-generating-hint {
  font-size: 0.8rem;
  color: var(--ui-text-muted);
  margin-top: 0.4rem;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.induction-generating-bar {
  margin: 1rem auto 0;
  width: 60%;
  max-width: 200px;
  height: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ui-accent) 20%, transparent);
  overflow: hidden;
  position: relative;
}
.induction-generating-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: var(--ui-accent);
  animation: induction-slide 1.6s ease-in-out infinite;
}
@keyframes induction-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes induction-slide {
  0% { left: -40%; }
  50% { left: 100%; }
  100% { left: -40%; }
}
.session-create-lessons-accordion {
  display: grid;
  gap: 8px;
}
.session-create-analysis {
  display: grid;
  gap: 12px;
}
.session-create-score {
  display: flex;
  align-items: center;
  gap: 10px;
}
.session-create-score-circle {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: conic-gradient(var(--ui-success) 0% var(--score-pct, 78%), var(--ui-surface) var(--score-pct, 78%) 100%);
  display: grid;
  place-items: center;
  position: relative;
}
.session-create-score-inner {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--ui-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-success);
}
.session-create-score-num {
  font-weight: 600;
  font-size: 13px;
}
.session-create-score-label {
  font-size: 12px;
  font-weight: 600;
}
[data-theme="light"] .session-create-score-label {
  color: var(--brand-teal);
}
.session-create-score-sublabel {
  font-size: 11px;
  color: var(--ui-text-secondary);
}
.session-create-analysis-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  border: none;
  background: transparent;
}
.session-create-analysis-icon {
  font-size: 14px;
  line-height: 1;
  margin-top: 1px;
  flex-shrink: 0;
}
.session-create-analysis-item-content {
  flex: 1;
  min-width: 0;
}
.session-create-analysis-item-title {
  font-size: 12px;
  font-weight: 600;
}
.session-create-analysis-item-desc {
  font-size: 11px;
  color: var(--ui-text-secondary);
  margin-top: 2px;
}
.session-create-analysis-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.session-create-analysis-item-actions button {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  padding: 4px 8px;
}
.session-create-analysis-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Session page analysis design */
.session-analysis-box {
  padding: 16px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  display: grid;
  gap: 16px;
}
.session-analysis-score {
  display: flex;
  align-items: center;
  gap: 12px;
}
.session-analysis-score-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.session-analysis-score-svg {
  position: absolute;
  inset: 0;
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
}
.session-analysis-score-track,
.session-analysis-score-ring {
  fill: none;
  stroke-width: 3;
}
.session-analysis-score-track {
  stroke: color-mix(in srgb, var(--ui-text) 12%, transparent);
}
.session-analysis-score.is-good .session-analysis-score-ring {
  stroke: var(--ui-success);
}
.session-analysis-score.is-warn .session-analysis-score-ring {
  stroke: var(--ui-warning);
}
.session-analysis-score.is-bad .session-analysis-score-ring {
  stroke: var(--ui-error);
}
.session-analysis-score-inner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ui-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  z-index: 1;
  color: var(--ui-text);
}
.session-analysis-score.is-good .session-analysis-score-num,
.session-analysis-score.is-good .session-analysis-score-label {
  color: var(--ui-success);
}
.session-analysis-score.is-warn .session-analysis-score-num,
.session-analysis-score.is-warn .session-analysis-score-label {
  color: var(--ui-warning);
}
.session-analysis-score.is-bad .session-analysis-score-num,
.session-analysis-score.is-bad .session-analysis-score-label {
  color: var(--ui-error);
}
.session-analysis-score-details {
  flex: 1;
  min-width: 0;
}
.session-analysis-score-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-text);
  margin-bottom: 4px;
}
.session-analysis-score-summary {
  font-size: 11px;
  color: var(--ui-text-secondary);
}
.session-analysis-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.session-analysis-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: color-mix(in srgb, var(--ui-text) 6%, transparent);
  border-radius: 6px;
  font-size: 12px;
}
.session-analysis-item-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.session-analysis-item-content {
  flex: 1;
  min-width: 0;
}
.session-analysis-item-title {
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--ui-text);
}
.session-analysis-item-desc {
  font-size: 11px;
  color: var(--ui-text-secondary);
}
.session-analysis-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.session-analysis-item.is-accepted {
  opacity: 0.7;
}
.session-analysis-item.is-rejected {
  opacity: 0.5;
  text-decoration: line-through;
}
.session-analysis-load {
  padding: 12px;
  background: color-mix(in srgb, var(--ui-text) 6%, transparent);
  border-radius: 6px;
  display: grid;
  gap: 8px;
}
.session-analysis-load-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ui-text-muted);
}
.session-analysis-load-body {
  font-size: 11px;
  color: var(--ui-text-secondary);
}
.session-analysis-load-bar {
  height: 6px;
  background: color-mix(in srgb, var(--ui-text) 8%, transparent);
  border-radius: 3px;
  overflow: hidden;
}
.session-analysis-load-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ui-success), var(--ui-warning));
  border-radius: 3px;
}
.session-analysis-load-fill.is-light {
  width: 35%;
}
.session-analysis-load-fill.is-medium {
  width: 60%;
}
.session-analysis-load-fill.is-heavy {
  width: 85%;
}
.session-analysis-load-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--ui-text-muted);
}
.session-analysis-load-labels .is-active {
  color: var(--ui-text);
  font-weight: 600;
}
/* Analysis score bar */
.session-create-analysis-score {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  margin-bottom: 8px;
}
.session-create-analysis-score-bar {
  flex: 1;
  height: 6px;
  width: 100%;
  background: var(--ui-surface);
  border-radius: 3px;
  overflow: hidden;
  border: none;
  appearance: none;
}
.session-create-analysis-score-bar::-webkit-progress-bar {
  background: var(--ui-surface);
  border-radius: 3px;
}
.session-create-analysis-score-bar::-webkit-progress-value {
  background: var(--ui-success);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.session-create-analysis-score-bar::-moz-progress-bar {
  background: var(--ui-success);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.session-create-analysis-score.score-low .session-create-analysis-score-bar::-webkit-progress-value {
  background: var(--ui-error);
}
.session-create-analysis-score.score-low .session-create-analysis-score-bar::-moz-progress-bar {
  background: var(--ui-error);
}
.session-create-analysis-score.score-medium .session-create-analysis-score-bar::-webkit-progress-value {
  background: var(--ui-warning);
}
.session-create-analysis-score.score-medium .session-create-analysis-score-bar::-moz-progress-bar {
  background: var(--ui-warning);
}
.session-create-analysis-score-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-text-secondary);
  white-space: nowrap;
}
/* Analysis states */
.session-create-analysis-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ui-text-secondary);
  padding: 8px 0;
}
.session-create-analysis-empty {
  font-size: 12px;
  color: var(--ui-text-muted);
  margin: 0;
  padding: 8px 0;
}
.session-create-analysis-reviewed,
.session-create-analysis-pending,
.session-create-analysis-accepted {
  font-size: 11px;
  color: var(--ui-text-muted);
  margin: 8px 0 0;
}
.session-create-analysis-reviewed {
  color: var(--ui-success);
}
.session-create-analysis-pending {
  color: var(--ui-warning);
}
.session-create-analysis-accepted {
  color: var(--ui-success);
}
.session-create-analysis-actions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--ui-border);
}
.session-create-btn-reviewed {
  background: var(--ui-success);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.session-create-btn-reviewed:hover {
  background: var(--ui-success-hover, #28a745);
  transform: translateY(-1px);
}
.session-create-btn-reviewed:active {
  transform: translateY(0);
}
/* Analysis item states */
.session-create-analysis-item.is-accepted {
  opacity: 0.6;
}
.session-create-analysis-item.is-rejected {
  opacity: 0.4;
  text-decoration: line-through;
}
.session-create-analysis-item-text {
  flex: 1;
  font-size: 12px;
  color: var(--ui-text-primary);
}
.session-create-btn-reviewed {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  background: var(--ui-success);
  color: #fff !important;
  cursor: pointer;
}
.session-create-btn-reviewed:hover {
  opacity: 0.9;
}
.session-create-invites-table {
  margin-top: 8px;
  font-size: 12px;
}
.session-create-invites-head {
  display: grid;
  grid-template-columns: 1fr 80px 1fr 140px;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ui-border);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 500;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ui-text-muted);
}
.session-create-invite-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--ui-border);
  display: grid;
  grid-template-columns: 1fr 80px 1fr 140px;
  gap: 12px;
  align-items: center;
  font-size: 11px;
}
.session-create-invite-cell {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--ui-text-secondary);
}
.session-create-invite-row:last-child {
  border-bottom: none;
}
.session-create-invite-actions {
  display: flex;
  justify-content: flex-end;
}
.session-create-btn-invite {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  padding: 4px 10px;
  border-radius: 4px;
  border: none;
  background: var(--ui-success);
  color: var(--ui-on-success);
  cursor: pointer;
  white-space: nowrap;
}
.session-create-btn-invite:hover {
  opacity: 0.9;
}
.session-create-btn-invite:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.session-create-btn-primary {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: var(--ui-success);
  color: var(--ui-on-success);
  cursor: pointer;
}
.session-create-btn-primary:hover {
  opacity: 0.9;
}
.session-create-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.session-create-btn-secondary {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--ui-border);
  background: transparent;
  color: var(--ui-text-secondary);
  cursor: pointer;
}
.session-create-btn-secondary:hover {
  background: color-mix(in srgb, var(--ui-text) 6%, transparent);
}
.session-create-status {
  color: var(--ui-success);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  font-weight: 600;
}
.session-create-btn-send-row {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid var(--ui-accent);
  background: transparent;
  color: var(--ui-accent);
  cursor: pointer;
  white-space: nowrap;
}
.session-create-btn-send-row:hover {
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
}
.session-create-btn-send-row.is-sent {
  border-color: var(--ui-success);
  background: var(--ui-success);
  color: #fff;
  cursor: default;
}
.session-create-personal-row {
  grid-column: 1 / -1;
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid var(--ui-border);
}
.session-create-personal-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--ui-text-muted);
  margin-bottom: 6px;
}
.session-create-message {
  padding: 12px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
}
.session-create-message.is-private {
  border-color: color-mix(in srgb, var(--ui-warning) 30%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-warning) 3%, var(--ui-surface));
}
.session-create-inputs {
  display: grid;
  gap: 12px;
}
.session-create-message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.session-create-message-author {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.session-create-message-time {
  font-size: 10px;
  color: var(--ui-text-muted);
}
.session-create-message-content {
  font-size: 12px;
  color: var(--ui-text-secondary);
  line-height: 1.5;
}
.session-create-message-item {
  display: grid;
  gap: 8px;
}
.session-create-message-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.session-create-message-actions .wp-button {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  padding: 4px 8px;
}
.session-create-message-reply {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface-muted);
}
.session-create-message-reply-input {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  resize: vertical;
}
.session-create-message-reply-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.session-create-message-response {
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-muted);
  border-radius: 8px;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}
.session-create-message-response-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--ui-text-muted);
}
.session-create-message-response-title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.session-create-message-response-time {
  font-size: 10px;
}
.session-create-message-response-text {
  font-size: 12px;
  color: var(--ui-text);
  line-height: 1.5;
}
.session-create-message-response-action {
  font-size: 12px;
  color: var(--ui-text-secondary);
}
.session-create-facilitator-preview {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-muted);
  max-height: 300px;
  overflow-y: auto;
}
.session-create-facilitator-suggestion-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.session-create-btn-accept {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  padding: 4px 10px;
  border-radius: 4px;
  border: none;
  background: var(--ui-success);
  color: #000;
  cursor: pointer;
}
.session-create-btn-reject {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--ui-border);
  background: transparent;
  color: var(--ui-text-secondary);
  cursor: pointer;
}
.session-create-btn-diff {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--ui-accent);
  background: transparent;
  color: var(--ui-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.session-create-btn-diff:hover {
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
}
.session-create-btn-diff.is-active {
  background: var(--ui-accent);
  color: #fff;
}
/* Inline Diff Highlighting */
.session-create-section.is-diff-highlight {
  border: 2px solid var(--ui-warning);
  border-radius: 8px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-warning) 20%, transparent);
  animation: diff-pulse 2s ease-in-out infinite;
}
@keyframes diff-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-warning) 20%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ui-warning) 30%, transparent); }
}
.session-create-diff-badge {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--ui-warning);
  color: #000;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.session-create-diff-close {
  color: var(--ui-warning) !important;
}
.session-create-diff-close:hover {
  background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
}
/* Unified inline diff - single area with del/ins tags */
.session-create-diff-unified {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
  line-height: 1.6;
}
.session-create-diff-unified .diff-unchanged {
  color: var(--ui-text-primary);
}
.session-create-diff-unified .diff-del {
  text-decoration: line-through;
  color: var(--ui-error);
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
}
.session-create-diff-unified .diff-ins {
  text-decoration: none;
  color: var(--ui-success);
  background: color-mix(in srgb, var(--ui-success) 15%, transparent);
}
/* Proposed participant row */
.session-create-table-row.diff-ins-row {
  background: color-mix(in srgb, var(--ui-success) 10%, transparent);
  border-left: 3px solid var(--ui-success);
}
.session-create-table-row.diff-ins-row .diff-ins {
  color: var(--ui-success);
  font-weight: 500;
}
.session-create-diff-empty {
  color: var(--ui-text-muted);
  font-style: italic;
}
.session-create-status-row {
  grid-column: 1 / -1;
  padding-top: 6px;
}
.session-create-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 3px;
  padding: 2px 6px;
  border: none;
  background: color-mix(in srgb, var(--ui-text) 8%, transparent);
  color: var(--ui-text-muted);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 500;
  font-size: 9px;
  text-transform: uppercase;
}
.session-create-badge-pill.is-private {
  background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
  color: var(--ui-warning);
}
.session-create-badge-pill.is-opened {
  background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
  color: var(--ui-warning);
}
.session-create-badge-pill.is-prepped {
  background: var(--ui-success);
  color: #fff;
}
.session-create-badge-pill.is-sent {
  background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
  color: var(--ui-accent);
}
/* Cognitive load bar */
.session-create-load {
  margin-top: 12px;
  padding: 10px;
  background: var(--ui-surface-muted);
  border-radius: 4px;
}
.session-create-load-label {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ui-text-muted);
  margin-bottom: 6px;
}
.session-create-load-bar {
  height: 5px;
  background: var(--ui-surface);
  border-radius: 3px;
  overflow: hidden;
}
.session-create-load-fill {
  height: 100%;
  width: var(--load-pct, 45%);
  background: linear-gradient(90deg, var(--ui-success), var(--ui-warning));
  border-radius: 3px;
}
.session-create-load-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--ui-text-muted);
  margin-top: 4px;
}
.session-create-load-explanation {
  margin-top: 10px;
  font-size: 11px;
  color: var(--ui-text-secondary);
  line-height: 1.5;
}
/* Facilitator box clean */
.session-create-facilitator {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  overflow: hidden;
}
.session-create-facilitator-status {
  padding: 12px 16px;
  background: var(--ui-surface-muted);
  border-bottom: 1px solid var(--ui-border);
}
.session-create-facilitator-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ui-text-secondary);
  margin-bottom: 6px;
}
.session-create-facilitator-status-row:last-child {
  margin-bottom: 0;
}
.session-create-facilitator-status-icon {
  font-size: 14px;
}
.session-create-facilitator-content {
  padding: 16px;
}
.session-create-facilitator-textarea {
  min-height: 280px !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}
.session-create-facilitator-suggestion {
  margin: 0 16px 16px 16px;
  padding: 12px;
  background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface));
  border: 1px solid color-mix(in srgb, var(--ui-accent) 20%, var(--ui-border));
  border-radius: 8px;
}
.session-create-facilitator-suggestion-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ui-text-secondary);
  margin-bottom: 8px;
}
.session-create-facilitator-suggestion-content {
  font-size: 12px;
  color: var(--ui-text-secondary);
  line-height: 1.5;
}
.session-create-facilitator-suggestion-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
/* Invite send all button */
.session-create-send-all {
  width: 100%;
  padding: 14px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--ui-accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  margin-top: 16px;
}
.session-create-send-all:hover {
  opacity: 0.9;
}
.session-create-host-badge {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 8px;
  text-transform: uppercase;
  padding: 2px 5px;
  background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
  color: var(--ui-accent);
  border-radius: 3px;
  flex-shrink: 0;
}
.session-create-btn-add-personal {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px dashed var(--ui-border);
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.session-create-invite-row:hover .session-create-btn-add-personal {
  opacity: 1;
}
.session-create-btn-add-personal:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}
.session-create-btn-remove-personal {
  background: none;
  border: none;
  color: var(--ui-text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}
.session-create-btn-remove-personal:hover {
  color: var(--ui-error);
}
.session-create-btn-resend {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid var(--ui-border);
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
}
.session-create-btn-resend:hover {
  border-color: var(--ui-text-secondary);
  color: var(--ui-text-secondary);
}
.session-create-textarea-sm {
  min-height: 50px !important;
  font-size: 11px !important;
}
.session-create-timeline {
  position: relative;
  padding-left: 24px;
}
.session-create-timeline-filters {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.session-create-timeline-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.session-create-timeline-filter-label {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.session-create-timeline-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.session-create-filter-pill {
  border: 1px solid var(--ui-border);
  background: transparent;
  color: var(--ui-text-secondary);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.session-create-filter-pill:hover {
  border-color: var(--ui-text-muted);
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}
.session-create-filter-pill.is-active {
  border-color: var(--ui-accent);
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
}
.session-create-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--ui-border);
}
.session-create-timeline-item {
  position: relative;
  padding-bottom: 16px;
}
.session-create-timeline-item:last-child {
  padding-bottom: 0;
}
.session-create-timeline-item::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ui-surface);
  border: 2px solid var(--ui-text-muted);
}
.session-create-timeline-item.is-done::before {
  border-color: var(--ui-success);
  background: var(--ui-success);
}
.session-create-timeline-item.is-active::before {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
}
.session-create-timeline-item.is-warning::before {
  border-color: var(--ui-warning);
  background: var(--ui-warning);
}
.session-create-timeline-item.is-error::before {
  border-color: var(--ui-error);
  background: var(--ui-error);
}
.session-create-timeline-time {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  color: var(--ui-text-muted);
  display: inline-block;
  margin-right: 6px;
  margin-bottom: 2px;
}
.session-create-timeline-text {
  font-size: 12px;
  color: var(--ui-text-secondary);
}
.session-create-timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.session-create-timeline-tag {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ui-text) 6%, transparent);
  color: var(--ui-text-muted);
  border: 1px solid var(--ui-border);
}
.session-create-timeline-text strong {
  color: var(--ui-text);
}
/* ==================== AI Chat Container ==================== */
.session-chat-container {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  pointer-events: auto; /* Re-enable pointer events for the chat itself */
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: max-height 0.2s ease-out, box-shadow 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}
[data-theme="dark"] .session-chat-container {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}
.session-chat-container.is-expanded {
  max-height: 60vh;
}
.session-chat-container.is-collapsed {
  /* Collapsed: just show input */
  max-height: 80px;
}
/* Diff preview mode - completely hide chat content to see diff behind */
.session-chat-container.is-diff-active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
/* Floating action buttons shown above input when diff is active */
.session-create-chat-diff-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  margin-bottom: 8px;
}
[data-theme="dark"] .session-create-chat-diff-actions {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.session-chat-container.is-diff-active .session-create-chat-input {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.session-create-chat {
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: none;
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.session-create-chat-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.session-create-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.session-create-chat-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  color: var(--ui-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.session-create-chat-toggle:hover {
  color: var(--ui-text);
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
}
.session-create-chat-title {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ui-text);
  /* Slim green pill background like section titles */
  background: #d1fae5;
  padding: 4px 14px;
  border-radius: 4px;
}
[data-theme="dark"] .session-create-chat-title {
  background: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-surface));
}
[data-theme="light"] .session-create-chat-title {
  color: var(--brand-teal);
}
.session-create-chat-copy-all {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 10px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: var(--ui-text-muted);
  background: transparent;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.session-create-chat-copy-all:hover {
  color: var(--ui-text);
  border-color: var(--ui-accent);
  background: var(--ui-surface-muted);
}
.session-create-ai-badge {
  font-size: 9px;
  padding: 2px 6px;
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-primary));
  color: #fff;
  border-radius: 3px;
  font-weight: 600;
}
.session-create-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--ui-surface);
  min-height: 0; /* Allow shrinking in flex container */
}
.session-create-chat-msg {
  display: flex;
  max-width: 95%;
  position: relative;
}
.session-create-chat-msg.is-user {
  justify-content: flex-end;
  align-self: flex-end;
  margin-left: auto;
}
.session-create-chat-msg.is-ai {
  align-self: flex-start;
}
.session-create-chat-msg.is-system {
  align-self: center;
  max-width: none;
}
.session-create-chat-bubble {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
}
/* Copy button on chat bubbles - hidden by default, shows on hover */
.session-create-chat-copy-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 4px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-text-muted);
}
.session-create-chat-bubble:hover .session-create-chat-copy-btn {
  opacity: 1;
}
.session-create-chat-copy-btn:hover {
  color: var(--ui-text);
  border-color: var(--ui-accent);
}
/* Chat message metadata (timestamp + copy button) */
.session-create-chat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 50%, transparent);
  gap: 8px;
}
.session-create-chat-timestamp {
  font-size: 10px;
  color: var(--ui-text-muted);
  opacity: 0.7;
}
.session-create-chat-msg.is-user .session-create-chat-timestamp {
  color: rgba(255, 255, 255, 0.7);
}
.session-create-chat-msg.is-user .session-create-chat-meta {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.session-create-chat-msg.is-user .session-create-chat-copy-btn {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}
.session-create-chat-msg.is-user .session-create-chat-copy-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
/* Reset copy button positioning when in meta area */
.session-create-chat-meta .session-create-chat-copy-btn {
  position: static;
  opacity: 0.6;
}
.session-create-chat-bubble:hover .session-create-chat-meta .session-create-chat-copy-btn {
  opacity: 1;
}
.session-create-chat-msg.is-ai .session-create-chat-bubble {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-bottom-left-radius: 4px;
  color: var(--ui-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .session-create-chat-msg.is-ai .session-create-chat-bubble {
  background: color-mix(in srgb, var(--ui-surface) 95%, #000);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.session-create-chat-msg.is-user .session-create-chat-bubble {
  background: var(--ui-accent);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.session-create-chat-msg.is-system .session-create-chat-bubble {
  background: transparent;
  border: 1px dashed var(--ui-border);
  color: var(--ui-text-muted);
  font-size: 11px;
  text-align: center;
  padding: 8px 16px;
}
.session-create-chat-system-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.session-create-chat-system-check {
  color: var(--ui-success);
  font-weight: bold;
}
/* System notifications above input - always visible */
.session-create-chat-system-notifications {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  width: 100%;
}
.session-create-chat-system-notification {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ui-text-muted);
  background: color-mix(in srgb, var(--ui-surface) 80%, transparent);
  border: 1px dashed var(--ui-border);
  border-radius: 6px;
  padding: 6px 12px;
}
.session-create-chat-system-notification .wp-spinner {
  width: 14px;
  height: 14px;
}
.session-create-chat-system-notification .session-create-chat-system-check {
  color: var(--ui-success);
  font-weight: bold;
}
/* AI Proposal embedded in message */
.session-create-ai-proposal {
  display: grid;
  gap: 8px;
}
.session-create-ai-proposal-label {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ui-accent);
  margin-bottom: 4px;
}
/* Chat proposal cards (embedded in AI messages) */
.session-create-chat-proposal-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface));
  border: 1px solid color-mix(in srgb, var(--ui-accent) 20%, var(--ui-border));
  border-radius: 8px;
  margin-top: 8px;
}
.session-create-chat-proposal-card.is-accepted {
  background: color-mix(in srgb, var(--ui-success) 8%, var(--ui-surface));
  border-color: color-mix(in srgb, var(--ui-success) 30%, var(--ui-border));
  opacity: 0.8;
}
.session-create-chat-proposal-card.is-accepted .session-create-chat-proposal-label {
  color: var(--ui-success);
}
.session-create-chat-proposal-card.is-dismissed {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  opacity: 0.5;
}
.session-create-chat-proposal-card.is-dismissed .session-create-chat-proposal-label {
  color: var(--ui-text-muted);
}
.session-create-chat-proposal-card.is-dismissed .session-create-chat-proposal-field-value {
  text-decoration: line-through;
  color: var(--ui-text-muted);
}
.session-create-chat-proposal-label {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ui-accent);
  margin-bottom: 4px;
}
/* Intro text before proposals */
.session-create-chat-proposal-intro {
  font-size: 13px;
  color: var(--ui-text-secondary);
  line-height: 1.5;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-border);
  margin-bottom: 8px;
}
/* Container for multiple proposal fields */
.session-create-chat-proposal-fields {
  display: grid;
  gap: 10px;
}
.session-create-chat-proposal-field {
  display: grid;
  gap: 2px;
  margin-bottom: 4px;
}
/* Multiline fields like agenda/outcomes */
.session-create-chat-proposal-field.is-multiline {
  padding: 8px;
  background: color-mix(in srgb, var(--ui-text) 3%, transparent);
  border-radius: 4px;
}
.session-create-chat-proposal-field-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.session-create-chat-proposal-field-value {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: var(--ui-text);
  white-space: pre-wrap;
}
/* Pre-formatted text for agenda/outcomes */
.proposal-pre {
  margin: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  max-height: 200px;
  overflow-y: auto;
}
/* Intro text before proposals */
.session-create-chat-proposal-intro {
  font-size: 13px;
  color: var(--ui-text-secondary);
  line-height: 1.5;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--ui-border);
}
/* Multiple proposal fields container */
.session-create-chat-proposal-fields {
  display: grid;
  gap: 10px;
}
/* Container for current vs proposed values */
.session-create-chat-proposal-field-values {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Old/current value with strikethrough */
.session-create-chat-proposal-old {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--ui-text-muted);
  text-decoration: line-through;
  opacity: 0.7;
  white-space: pre-wrap;
}
/* New/proposed value */
.session-create-chat-proposal-new {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: var(--ui-text);
  white-space: pre-wrap;
}
/* Highlight when value is changed */
.session-create-chat-proposal-new.is-changed {
  color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 8%, transparent);
  padding: 2px 4px;
  border-radius: 2px;
  margin: -2px -4px;
}
/* Reasoning text */
.session-create-chat-proposal-reasoning {
  font-size: 10px;
  color: var(--ui-text-muted);
  font-style: italic;
  margin-top: 2px;
}
.session-create-chat-proposal-field-value {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: var(--ui-text);
}
.session-create-chat-proposal-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.session-create-ai-proposal-field {
  margin-bottom: 6px;
  font-size: 12px;
}
.session-create-ai-proposal-field-label {
  color: var(--ui-text-muted);
  font-size: 10px;
}
.session-create-ai-proposal-field-value {
  color: var(--ui-text);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
}
.session-create-ai-proposal-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.session-create-btn-accept {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  padding: 6px 14px;
  border-radius: 4px;
  border: none;
  background: var(--ui-accent) !important;
  color: #fff !important;
  cursor: pointer;
}
.session-create-btn-reject {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid var(--ui-border);
  background: transparent;
  color: var(--ui-text-secondary);
  cursor: pointer;
}
.session-create-proposal {
  padding: 10px;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface);
  display: grid;
  gap: 8px;
}
.session-create-proposal-title {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ui-text-muted);
  font-size: 10px;
}
.session-create-proposal-options {
  display: grid;
  gap: 6px;
}
.session-create-proposal-option {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  text-align: left;
  background: var(--ui-surface);
  cursor: pointer;
  color: var(--ui-text);
  font-size: 12px;
}
.session-create-proposal-option:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 55%, var(--ui-border));
}
.session-create-proposal-option.is-selected {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-surface));
}
.session-create-radio {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid var(--ui-border);
  margin-top: 3px;
}
.session-create-proposal-option.is-selected .session-create-radio {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
}
.session-create-proposal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.session-create-chat-input {
  padding: 12px 16px;
  background: var(--ui-surface);
  flex-shrink: 0;
}
/* When expanded, add top border to separate from messages */
.session-chat-container.is-expanded .session-create-chat-input {
  border-top: 1px solid var(--ui-border);
}
/* Input row with toggle, title (when collapsed), and input field */
.session-create-chat-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Toggle button in input row */
.session-create-chat-input-row .session-create-chat-toggle {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
  border: 1px solid var(--ui-border);
  color: var(--ui-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.session-create-chat-input-row .session-create-chat-toggle:hover {
  color: var(--ui-text);
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
}
/* Title shown when collapsed */
.session-create-chat-title-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 600;
  font-size: 13px;
  color: var(--ui-text);
  white-space: nowrap;
}
.session-create-chat-input-wrapper {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex: 1;
}
.session-create-chat-input-field {
  flex: 1;
  padding: 8px 14px;
  font-size: 14px;
  font-family: inherit;
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  color: var(--ui-text);
  outline: none;
  resize: none;
  min-height: 36px;
  max-height: 120px;
  line-height: 1.4;
}
.session-create-chat-input-field:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 20%, transparent);
}
.session-create-chat-input-field::placeholder {
  color: var(--ui-text-muted);
}
.session-create-btn-send {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.session-create-btn-send:hover:not(:disabled) {
  filter: brightness(1.1);
}
.session-create-btn-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.session-create-btn-send svg {
  width: 16px;
  height: 16px;
}
.session-create-chat-hint {
  font-size: 11px;
  color: var(--ui-text-muted);
  margin-top: 8px;
  text-align: center;
}
/* ==================== Chat Markdown Styles ==================== */
.chat-md-content {
  font-size: 13px;
  line-height: 1.5;
}
.chat-md-content > *:first-child {
  margin-top: 0;
}
.chat-md-content > *:last-child {
  margin-bottom: 0;
}
.chat-md-p {
  margin: 0.4em 0;
}
.chat-md-h1 {
  font-size: 1.1em;
  font-weight: 700;
  margin: 0.8em 0 0.4em;
  color: var(--ui-text);
}
.chat-md-h2 {
  font-size: 1.05em;
  font-weight: 600;
  margin: 0.7em 0 0.3em;
  color: var(--ui-text);
}
.chat-md-h3 {
  font-size: 1em;
  font-weight: 600;
  margin: 0.6em 0 0.3em;
  color: var(--ui-accent);
}
.chat-md-list {
  margin: 0.4em 0;
  padding-left: 1.4em;
}
.chat-md-list li {
  margin: 0.2em 0;
}
.chat-md-inline-code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.9em;
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  padding: 1px 4px;
}
.chat-md-code-block {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.85em;
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0.5em 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-md-code-block code {
  background: none;
  border: none;
  padding: 0;
}
.chat-md-diagram-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  margin: 0.4em 0;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ui-warning) 12%, transparent);
  color: var(--ui-text-muted);
  font-size: 12px;
}
.chat-md-diagram-error__text {
  flex: 1;
}
.chat-md-diagram-error__button {
  border: 1px solid var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
  color: var(--ui-accent);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.chat-md-diagram-error__button:hover {
  background: color-mix(in srgb, var(--ui-accent) 18%, transparent);
}
/* Cursor for streaming */
.chat-cursor {
  animation: blink 1s step-end infinite;
  color: var(--ui-accent);
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
/* User bubble markdown overrides - ensure text is visible on accent background */
.session-create-chat-msg.is-user .chat-md-content {
  color: #fff;
}
.session-create-chat-msg.is-user .chat-md-h1,
.session-create-chat-msg.is-user .chat-md-h2,
.session-create-chat-msg.is-user .chat-md-h3 {
  color: #fff;
}
.session-create-chat-msg.is-user .chat-md-p {
  color: #fff;
}
.session-create-chat-msg.is-user .chat-md-inline-code {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.session-create-chat-msg.is-user .chat-md-code-block {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
/* Paragraph spacing for line breaks */
.chat-md-p + .chat-md-p {
  margin-top: 0.5em;
}
/* Empty line creates more spacing */
.chat-md-break {
  display: block;
  height: 0.6em;
}
/* ── Session Create: Mobile responsive (640px) ── */
@media (max-width: 640px) {
  .session-create-grid {
    padding: 0 8px;
  }

  .session-create-topbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .session-create-row {
    padding: 12px;
    gap: 8px;
    overflow-x: hidden;
  }

  .session-create-pill {
    padding: 2px 4px;
  }

  .pill-input {
    font-size: 16px;
  }

  .session-create-title-input {
    font-size: 16px;
  }

  .session-create-right {
    bottom: 0;
    padding: 0;
    max-width: 100%;
  }

  .session-create-chat {
    border-radius: 12px 12px 0 0;
  }

  .session-create-chat-input {
    padding: 8px 12px;
  }

  .session-create-section {
    padding: 10px;
  }

  .session-create-section-header {
    flex-wrap: wrap;
    gap: 6px;
  }

  .session-create-textarea {
    box-sizing: border-box;
    max-width: 100%;
    font-size: 16px;
  }

  .session-create-table-row {
    gap: 6px;
    padding: 8px 0;
  }

  .session-create-invite-table .session-create-table-row {
    gap: 6px;
    padding: 8px 0;
  }

  .session-create-lesson-header {
    min-height: 44px;
  }

  .session-create-lesson-title {
    font-size: 12px;
  }

  .session-create-analysis-item {
    flex-direction: column;
    gap: 6px;
  }

  .session-create-score-circle {
    width: 80px;
    height: 80px;
  }

  .session-create-score-num {
    font-size: 20px;
  }

  .session-create-chat-bubble {
    max-width: 95%;
  }

  .session-create-chat-proposal-fields {
    gap: 6px;
  }

  .session-create-proposal-options {
    gap: 6px;
  }

  .session-create-proposal-option {
    padding: 10px;
  }

  .session-create-select {
    font-size: 16px;
  }

  .session-create-role-input {
    font-size: 16px;
  }

  .session-create-email input {
    font-size: 16px;
  }

  .session-create-induction-input,
  .session-create-induction-textarea {
    font-size: 16px;
  }

  .session-create-send-all {
    padding: 12px;
    font-size: 13px;
  }

  .session-create-timeline-item {
    padding-left: 20px;
  }

  .session-create-timeline-item::before {
    left: 0;
  }

  .session-create-timeline::before {
    left: 4px;
  }
}
/* ── WpDateTimePicker ─────────────────────────────────────────────── */
/* Custom date-time picker respecting app locale + 24h preference.   */

.wp-dtp {
    position: relative;
    display: inline-block;
    width: 100%;
}

.wp-dtp-trigger {
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 130px;
}

.wp-dtp-trigger:disabled {
    cursor: default;
    opacity: 0.6;
}

.wp-dtp-placeholder {
    color: var(--ui-text-muted);
}

/* Dropdown panel */
.wp-dtp-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 12px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[data-theme="dark"] .wp-dtp-dropdown {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ── Calendar nav ── */
.wp-dtp-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 4px;
}

.wp-dtp-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--ui-text);
    transition: background 0.12s;
}

.wp-dtp-nav-btn:hover {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
}

.wp-dtp-month-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text);
    user-select: none;
}

/* ── Weekday headers ── */
.wp-dtp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 2px;
}

.wp-dtp-wd {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--ui-text-muted);
    padding: 2px 0;
}

/* ── Day grid ── */
.wp-dtp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.wp-dtp-day {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--ui-text);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    margin: 0 auto;
}

.wp-dtp-day:hover:not(.wp-dtp-day--empty) {
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
}

.wp-dtp-day--empty {
    cursor: default;
}

.wp-dtp-day--today {
    font-weight: 700;
    color: var(--ui-primary);
    border: 1px solid var(--ui-primary);
}

.wp-dtp-day--selected {
    background: var(--ui-primary) !important;
    color: #fff !important;
    font-weight: 600;
}

/* ── Footer (Clear / Today) ── */
.wp-dtp-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid var(--ui-border);
}

.wp-dtp-footer-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    color: var(--ui-primary);
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.12s;
}

.wp-dtp-footer-btn:hover {
    background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
}

/* ── Time row ── */
.wp-dtp-time {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--ui-border);
}

.wp-dtp-time-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.wp-dtp-time-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--ui-text-muted);
    font-weight: 600;
}

.wp-dtp-time-select {
    width: 52px;
    padding: 4px 2px;
    font-size: 14px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    text-align: center;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.wp-dtp-time-select:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.wp-dtp-time-sep {
    font-size: 16px;
    font-weight: 700;
    color: var(--ui-text-muted);
    padding-bottom: 4px;
}

.wp-dtp-ampm {
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
    color: var(--ui-primary);
    cursor: pointer;
    transition: background 0.12s;
}

.wp-dtp-ampm:hover {
    background: color-mix(in srgb, var(--ui-primary) 20%, transparent);
}
/* SaveAsTemplateModal Styles */

.save-template-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.save-template-modal {
    background: var(--ui-surface);
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Header */
.save-template-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ui-border);
}

.save-template-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0;
}

.save-template-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--ui-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.save-template-close:hover {
    color: var(--ui-text);
}

/* Content */
.save-template-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.save-template-error {
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    color: var(--ui-error);
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.save-template-success {
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

/* Fields */
.save-template-field {
    margin-bottom: 1rem;
}

.save-template-field:last-child {
    margin-bottom: 0;
}

.save-template-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ui-text);
    margin-bottom: 0.375rem;
}

.save-template-field input,
.save-template-field textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-family: inherit;
    transition: border-color 0.15s;
}

.save-template-field input:focus,
.save-template-field textarea:focus {
    outline: none;
    border-color: var(--ui-accent);
}

.save-template-field textarea {
    resize: vertical;
    min-height: 60px;
}

/* Target selector */
.save-template-target-selector {
    display: flex;
    gap: 0.75rem;
}

.save-template-target-option {
    flex: 1;
    padding: 0.625rem 1rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    color: var(--ui-text);
    cursor: pointer;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
}

.save-template-target-option:hover {
    border-color: var(--ui-accent);
}

.save-template-target-option.active {
    border-color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    color: var(--ui-text);
}

/* Preview section */
.save-template-preview {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--ui-surface-muted);
    border-radius: 8px;
}

.save-template-preview h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem;
}

.save-template-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
}

.save-template-preview-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
}

.save-template-preview-label {
    color: var(--ui-text-muted);
    font-weight: 500;
}

.save-template-preview-value {
    color: var(--ui-text);
}

/* Footer */
.save-template-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-muted);
}

/* Responsive */
@media (max-width: 600px) {
    .save-template-target-selector {
        flex-direction: column;
    }

    .save-template-preview-grid {
        grid-template-columns: 1fr;
    }

    .save-template-footer {
        flex-direction: column;
    }
}
.custom-field-renderer {
    display: grid;
    gap: 1rem;
}

.custom-field-renderer__section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-muted);
}

.custom-field-group {
    display: grid;
    gap: 0.25rem;
}

.custom-field-group__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.custom-field-group__required {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--ui-error);
}

.custom-field-group__input,
.custom-field-group__select,
.custom-field-group__textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s ease;
}

.custom-field-group__input:focus,
.custom-field-group__select:focus,
.custom-field-group__textarea:focus {
    border-color: var(--ui-primary);
}

.custom-field-group__input:disabled,
.custom-field-group__select:disabled,
.custom-field-group__textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.custom-field-group__textarea {
    min-height: 5rem;
    resize: vertical;
}

.custom-field-group__select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

.custom-field-group__checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.custom-field-group__checkbox {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--ui-primary);
    cursor: pointer;
}

.custom-field-group__checkbox:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.custom-field-group__checkbox-label {
    font-size: 0.875rem;
    color: var(--ui-text);
    cursor: pointer;
}

.custom-field-group__error {
    font-size: 0.75rem;
    color: var(--ui-error);
}
/**
 * ModuleRow Styles
 * Theme-aware using --ui-* CSS variables
 */

.module-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--ui-border);
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background 0.15s;
}

.module-row:hover {
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
}

.module-row__number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ui-text-muted);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: 50%;
    flex-shrink: 0;
}

.module-row.completed .module-row__number {
    background: var(--ui-success);
    border-color: var(--ui-success);
    color: var(--ui-on-success);
    font-size: 12px;
}

.module-row.current .module-row__number {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: var(--ui-surface);
}

.module-row__info {
    min-width: 0;
}

.module-row__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--ui-text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.module-row.completed .module-row__title {
    color: var(--ui-text-muted);
}

.module-row__desc {
    font-size: 11px;
    color: var(--ui-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.module-row__meta {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.module-row__cards {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ui-text-muted);
}

.module-row__prefs {
    font-size: 12px;
}

.module-row__status {
    margin-top: 2px;
}

.module-row__completed-info {
    font-size: 10px;
    color: var(--ui-success);
}

.module-row__position {
    color: var(--ui-text-muted);
}

.module-row__progress-info {
    font-size: 10px;
    color: var(--ui-accent);
}

.module-row__badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    display: inline-block;
}

.module-row__badge.required {
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    color: var(--ui-error);
}

.module-row__badge.role {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.module-row__badge.optional {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    color: var(--ui-text-muted);
}
/**
 * ReportErrorButton Styles
 * Theme-aware using --ui-* CSS variables
 */

/* Trigger button — small, unobtrusive, in card header */
.report-error__trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    color: var(--ui-text-muted);
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.report-error__trigger:hover {
    background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
    border-color: var(--ui-warning);
    color: var(--ui-warning);
}

.report-error__trigger-icon {
    flex-shrink: 0;
}

.report-error__trigger-text {
    font-family: 'JetBrains Mono', monospace;
}

/* Modal overlay */
.report-error__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.report-error__modal {
    width: 100%;
    max-width: 480px;
    background: var(--ui-surface);
    border-top: 1px solid var(--ui-border);
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-radius: 12px 12px 0 0;
}

.report-error__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.report-error__title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ui-text);
    text-transform: uppercase;
}

.report-error__close {
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
}

/* Context */
.report-error__context {
    font-size: 11px;
    color: var(--ui-text-muted);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ui-border);
}

/* Textarea */
.report-error__textarea {
    width: 100%;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    padding: 10px;
    color: var(--ui-text);
    font-size: 13px;
    font-family: inherit;
    resize: none;
    min-height: 100px;
}

.report-error__textarea:focus {
    outline: none;
    border-color: var(--ui-warning);
}

.report-error__textarea::placeholder {
    color: var(--ui-text-muted);
}

/* Privacy note */
.report-error__note {
    margin-top: 10px;
    font-size: 11px;
    color: var(--ui-text-muted);
    font-style: italic;
}

/* Submit */
.report-error__submit {
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    background: var(--ui-warning);
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.report-error__submit:hover:not(:disabled) {
    filter: brightness(1.1);
}

.report-error__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.report-error__submit:active:not(:disabled) {
    transform: scale(0.98);
}

/* Success */
.report-error__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 16px;
    color: var(--ui-success);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}

.report-error__success-icon {
    font-size: 32px;
    animation: report-error-pop 0.3s ease;
}

@keyframes report-error-pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
/**
 * PrepCard Styles
 * Theme-aware using --ui-* CSS variables
 */

.prep-card {
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
    padding: 16px;
}

.prep-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.prep-card__badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ui-text-muted);
    padding: 4px 8px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border-radius: 4px;
}

.prep-card--lesson .prep-card__badge {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
}

.prep-card--knowledge .prep-card__badge {
    background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
    color: var(--ui-warning);
}

.prep-card--example .prep-card__badge {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.prep-card--quiz .prep-card__badge {
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
    color: var(--ui-primary);
}

.prep-card__header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.prep-card__counter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ui-text-muted);
}

.prep-card__context {
    font-size: 11px;
    color: var(--ui-text-muted);
    margin-bottom: 8px;
}

.prep-card__title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0 0 16px 0;
}

.prep-card__content {
    margin-bottom: 16px;
}

.prep-card__loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px;
    color: var(--ui-accent);
    font-size: 13px;
}

.prep-card__loading-icon {
    animation: pulse 1.5s infinite;
}

/* Feedback toast */
.prep-card__feedback {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    animation: slideIn 0.2s ease-out;
}

.prep-card__feedback--transforming {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, transparent);
}

.prep-card__feedback--cached {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
    border: 1px solid color-mix(in srgb, var(--ui-success) 30%, transparent);
}

.prep-card__feedback-icon {
    font-size: 16px;
}

.prep-card__feedback--transforming .prep-card__feedback-icon {
    animation: pulse 1.5s infinite;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.prep-card__markdown {
    font-size: 14px;
    line-height: 1.7;
    color: var(--ui-text-secondary);
}

.prep-card__markdown p {
    margin-bottom: 12px;
}

.prep-card__markdown p:last-child {
    margin-bottom: 0;
}

.prep-card__markdown ul,
.prep-card__markdown ol {
    margin-bottom: 12px;
    padding-left: 20px;
}

.prep-card__markdown li {
    margin-bottom: 6px;
}

.prep-card__markdown strong {
    color: var(--ui-text);
}

.prep-card__markdown code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    padding: 2px 6px;
    border-radius: 3px;
}

.prep-card__markdown--original {
    opacity: 0.6;
    font-size: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--ui-border);
}

.prep-card__original {
    margin-top: 16px;
}

.prep-card__original summary {
    font-size: 11px;
    color: var(--ui-text-muted);
    cursor: pointer;
    margin-bottom: 8px;
}

/* Expansion & Perspective */
.prep-card__expansion {
    display: grid;
    gap: 10px;
    margin: 16px 0;
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

.prep-card__expansion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.prep-card__expand-btn {
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.prep-card__expand-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.prep-card__expand-btn--secondary {
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    color: var(--ui-accent);
    border-color: color-mix(in srgb, var(--ui-accent) 30%, transparent);
}

.prep-card__expand-btn--ghost {
    background: transparent;
    color: var(--ui-text-muted);
}

.prep-card__perspective-form {
    display: grid;
    gap: 8px;
}

.prep-card__perspective-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 12px;
}

.prep-card__perspective-actions {
    display: flex;
    gap: 8px;
}

.prep-card__expansion-block {
    border-top: 1px dashed var(--ui-border);
    padding-top: 10px;
    display: grid;
    gap: 6px;
}

.prep-card__expansion-subtitle {
    font-size: 11px;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.prep-card__expansion-sources {
    display: grid;
    gap: 8px;
}

.prep-card__expansion-source-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.prep-card__expansion-source {
    display: grid;
    gap: 4px;
}

.prep-card__expansion-link {
    color: var(--ui-accent);
    font-size: 13px;
    text-decoration: none;
}

.prep-card__expansion-link:hover {
    text-decoration: underline;
}

.prep-card__expansion-snippet {
    font-size: 12px;
    color: var(--ui-text-secondary);
}

.prep-card__expansion-images {
    display: grid;
    gap: 8px;
}

.prep-card__expansion-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.prep-card__expansion-image {
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    background: var(--ui-surface);
    cursor: pointer;
}

.prep-card__expansion-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.prep-card__image-modal {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ui-text) 75%, transparent);
    display: grid;
    place-items: center;
    z-index: 1000;
    padding: 24px;
}

.prep-card__image-modal img {
    max-width: min(900px, 90vw);
    max-height: 90vh;
    border-radius: 12px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.prep-card__image-modal-close {
    position: fixed;
    top: 16px;
    right: 16px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.prep-card__expansion-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--ui-text-secondary);
    letter-spacing: 0.4px;
}

/* Voice Section */
.prep-card__voice-section {
    margin-bottom: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ui-border);
}

.prep-card__voice-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.prep-card__voice-toggle:hover {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    border-color: var(--ui-text-muted);
}

.prep-card__voice-icon {
    font-size: 16px;
}

.prep-card__voice-selector {
    margin-top: 12px;
    padding: 12px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
}

.prep-card__voice-section-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ui-text-muted);
    margin-bottom: 8px;
    margin-top: 12px;
}

.prep-card__voice-section-label:first-child {
    margin-top: 0;
}

.prep-card__voice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.prep-card__voice-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.prep-card__voice-option:hover {
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    border-color: var(--ui-text-muted);
}

.prep-card__voice-option.active {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    border-color: var(--ui-accent);
}

.prep-card__voice-emoji {
    font-size: 20px;
}

.prep-card__voice-name {
    font-size: 9px;
    color: var(--ui-text-muted);
    text-transform: uppercase;
}

.prep-card__voice-option.active .prep-card__voice-name {
    color: var(--ui-accent);
}

.prep-card__voice-actions {
    display: flex;
    gap: 8px;
}

.prep-card__voice-clear {
    width: 100%;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    color: var(--ui-text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

.prep-card__voice-clear:hover {
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
}

.prep-card__voice-apply {
    width: 100%;
    padding: 8px 12px;
    background: var(--ui-accent);
    border: none;
    border-radius: 4px;
    color: var(--board-bg);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.prep-card__voice-apply:hover {
    opacity: 0.9;
}

/* Navigation */
.prep-card__nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--ui-border);
}

.prep-card__nav-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.prep-card__nav-btn--prev {
    background: transparent;
    border: 1px solid var(--ui-border);
    color: var(--ui-text-secondary);
}

.prep-card__nav-btn--prev:hover {
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
}

.prep-card__nav-btn--next {
    background: var(--ui-accent);
    color: #fff;
}

.prep-card__nav-btn--next:hover {
    background: var(--ui-accent);
    filter: brightness(1.1);
}

.prep-card__nav-btn--next:active {
    transform: scale(0.98);
}

/* Custom Input Styles */
.prep-card__custom-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prep-card__custom-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text);
    font-size: 13px;
    font-family: inherit;
}

.prep-card__custom-input:focus {
    outline: none;
    border-color: var(--ui-accent);
}

.prep-card__custom-input::placeholder {
    color: var(--ui-text-muted);
}

/* Voice Notes Section */
.prep-card__voice-notes {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ui-border);
}

.prep-card__voice-note-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--ui-surface);
    border: 1px dashed var(--ui-border);
    border-radius: 8px;
    color: var(--ui-text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    justify-content: center;
}

.prep-card__voice-note-btn:hover {
    background: var(--ui-surface-muted);
    border-color: var(--ui-accent);
    color: var(--ui-text);
}

.prep-card__voice-note-icon {
    font-size: 16px;
}

/* Recording in progress */
.prep-card__voice-recording {
    padding: 16px;
    background: color-mix(in srgb, var(--ui-error) 10%, transparent);
    border: 1px solid var(--ui-error);
    border-radius: 8px;
}

.prep-card__recording-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-error);
    margin-bottom: 12px;
}

.prep-card__recording-pulse {
    width: 10px;
    height: 10px;
    background: var(--ui-error);
    border-radius: 50%;
    animation: recording-pulse 1s ease-in-out infinite;
}

@keyframes recording-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

.prep-card__recording-transcript {
    padding: 12px;
    background: var(--ui-surface);
    border-radius: 6px;
    font-size: 14px;
    color: var(--ui-text);
    min-height: 60px;
    margin-bottom: 12px;
}

.prep-card__recording-stop {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--ui-error);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    transition: filter 0.15s ease;
}

.prep-card__recording-stop:hover {
    filter: brightness(1.1);
}

/* Review recorded note */
.prep-card__voice-review {
    padding: 16px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
}

.prep-card__review-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text);
    margin-bottom: 12px;
}

.prep-card__review-text {
    padding: 12px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border-radius: 6px;
    font-size: 14px;
    color: var(--ui-text);
    margin-bottom: 12px;
    white-space: pre-wrap;
}

.prep-card__review-actions {
    display: flex;
    gap: 8px;
}

.prep-card__review-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.prep-card__review-btn--dismiss {
    background: transparent;
    border: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
}

.prep-card__review-btn--dismiss:hover {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    color: var(--ui-text);
}

.prep-card__review-btn--accept {
    background: var(--ui-accent);
    border: none;
    color: #fff;
}

.prep-card__review-btn--accept:hover {
    filter: brightness(1.1);
}

/* Saved notes */
.prep-card__saved-notes {
    margin-top: 16px;
}

.prep-card__saved-notes-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.prep-card__saved-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--ui-text);
    margin-bottom: 8px;
}

.prep-card__saved-note:last-child {
    margin-bottom: 0;
}

.prep-card__saved-note-icon {
    flex-shrink: 0;
}

.prep-card__saved-note-text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.prep-card__note-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

.prep-card__saved-note:hover .prep-card__note-actions {
    opacity: 1;
}

.prep-card__note-action {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 13px;
    color: var(--ui-text-muted);
    border-radius: 4px;
    line-height: 1;
}

.prep-card__note-action:hover {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    color: var(--ui-text);
}

.prep-card__note-action--delete:hover {
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    color: var(--ui-error);
}

.prep-card__saved-note--editing {
    flex-direction: column;
}

.prep-card__note-edit-input {
    width: 100%;
    padding: 8px;
    font-size: 13px;
    color: var(--ui-text);
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-primary);
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
}

.prep-card__note-edit-input:focus {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}

.prep-card__note-edit-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    margin-top: 4px;
}

.prep-card__note-edit-btn {
    background: none;
    border: 1px solid var(--ui-border);
    cursor: pointer;
    padding: 4px 10px;
    font-size: 13px;
    border-radius: 4px;
    line-height: 1;
}

.prep-card__note-edit-btn--save {
    color: var(--ui-success);
    border-color: var(--ui-success);
}

.prep-card__note-edit-btn--save:hover {
    background: color-mix(in srgb, var(--ui-success) 10%, transparent);
}

.prep-card__note-edit-btn--cancel {
    color: var(--ui-text-muted);
}

.prep-card__note-edit-btn--cancel:hover {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
}

.prep-card__custom-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.prep-card__custom-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.prep-card__custom-btn--cancel {
    background: transparent;
    border: 1px solid var(--ui-border);
    color: var(--ui-text-secondary);
}

.prep-card__custom-btn--cancel:hover {
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
}

.prep-card__custom-btn--apply {
    background: var(--ui-accent);
    color: #fff;
}

.prep-card__custom-btn--apply:hover:not(:disabled) {
    filter: brightness(1.1);
}

.prep-card__custom-btn--apply:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/**
 * PrepQuiz Styles
 * Theme-aware using --ui-* CSS variables
 */

.prep-quiz {
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
    padding: 16px;
}

.prep-quiz__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.prep-quiz__badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ui-primary);
    padding: 4px 8px;
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
    border-radius: 4px;
}

.prep-quiz__header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.prep-quiz__counter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ui-text-muted);
}

.prep-quiz__context {
    font-size: 11px;
    color: var(--ui-text-muted);
    margin-bottom: 12px;
}

.prep-quiz__question {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.prep-quiz__reassurance {
    font-size: 12px;
    line-height: 1.5;
    color: var(--ui-text-muted);
    margin: 0 0 14px 0;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--ui-accent) 8%, transparent);
    border-radius: 6px;
    border-left: 2px solid var(--ui-accent);
}

.prep-quiz__attempt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ui-warning);
    margin-bottom: 12px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
    border-radius: 4px;
    display: inline-block;
}

.prep-quiz__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.prep-quiz__option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
}

.prep-quiz__option:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    border-color: var(--ui-text-muted);
}

.prep-quiz__option:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.prep-quiz__option.selected {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    border-color: var(--ui-accent);
}

.prep-quiz__option.correct {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    border-color: var(--ui-success);
}

.prep-quiz__option.incorrect {
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    border-color: var(--ui-error);
}

.prep-quiz__option-letter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    border-radius: 4px;
    flex-shrink: 0;
}

.prep-quiz__option.correct .prep-quiz__option-letter {
    background: var(--ui-success);
    color: var(--ui-on-success);
}

.prep-quiz__option.incorrect.selected .prep-quiz__option-letter {
    background: var(--ui-error);
    color: #fff;
}

.prep-quiz__option-text {
    flex: 1;
}

.prep-quiz__option-mark {
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}

.prep-quiz__option.correct .prep-quiz__option-mark {
    color: var(--ui-success);
}

.prep-quiz__option.incorrect .prep-quiz__option-mark {
    color: var(--ui-error);
}

/* Result section */
.prep-quiz__result {
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.prep-quiz__result.correct {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-success) 25%, transparent);
}

.prep-quiz__result.incorrect {
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-error) 25%, transparent);
}

.prep-quiz__result-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

.prep-quiz__result.correct .prep-quiz__result-header {
    color: var(--ui-success);
}

.prep-quiz__result.incorrect .prep-quiz__result-header {
    color: var(--ui-error);
}

.prep-quiz__result-icon {
    font-size: 16px;
}

.prep-quiz__explanations {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prep-quiz__explanation {
    font-size: 12px;
    color: var(--ui-text-secondary);
    line-height: 1.5;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    border-radius: 4px;
}

.prep-quiz__explanation.correct {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    border-left: 2px solid var(--ui-success);
}

.prep-quiz__explanation strong {
    color: var(--ui-text);
}

/* Actions */
.prep-quiz__actions {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--ui-border);
}

.prep-quiz__btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.prep-quiz__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.prep-quiz__btn--prev {
    background: transparent;
    border: 1px solid var(--ui-border);
    color: var(--ui-text-secondary);
}

.prep-quiz__btn--prev:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
}

.prep-quiz__btn--submit {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
}

.prep-quiz__btn--submit:hover:not(:disabled) {
    filter: brightness(1.1);
}

.prep-quiz__btn--retry {
    background: var(--ui-warning);
    color: #000;
}

.prep-quiz__btn--retry:hover:not(:disabled) {
    filter: brightness(1.1);
}

.prep-quiz__btn--next {
    background: var(--ui-accent);
    color: #fff;
}

.prep-quiz__btn--next:hover:not(:disabled) {
    filter: brightness(1.1);
}

.prep-quiz__btn:active:not(:disabled) {
    transform: scale(0.98);
}

.prep-quiz__error {
    padding: 16px;
    color: var(--ui-error);
    text-align: center;
}
/**
 * SignalButton Styles
 * Theme-aware using --ui-* CSS variables
 */

.signal-button__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.signal-button__trigger:hover {
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    border-color: var(--ui-text-muted);
}

.signal-button__trigger-icon {
    font-size: 16px;
}

/* Modal */
.signal-modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.signal-modal {
    width: 100%;
    max-width: 480px;
    background: var(--ui-surface);
    border-top: 1px solid var(--ui-border);
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-radius: 12px 12px 0 0;
}

.signal-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.signal-modal__title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ui-text);
    text-transform: uppercase;
}

.signal-modal__close {
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
}

/* Signal type selector */
.signal-modal__types {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.signal-modal__type {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text-secondary);
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.signal-modal__type:hover {
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
}

.signal-modal__type.active {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    border-color: var(--ui-accent);
    color: var(--ui-accent);
}

.signal-modal__type span:first-child {
    font-size: 18px;
}

/* Context */
.signal-modal__context {
    font-size: 11px;
    color: var(--ui-text-muted);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ui-border);
}

/* Textarea */
.signal-modal__textarea {
    width: 100%;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    padding: 10px;
    color: var(--ui-text);
    font-size: 13px;
    font-family: inherit;
    resize: none;
    min-height: 80px;
}

.signal-modal__textarea:focus {
    outline: none;
    border-color: var(--ui-accent);
}

.signal-modal__textarea::placeholder {
    color: var(--ui-text-muted);
}

/* Quick prompts */
.signal-modal__prompts {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.signal-modal__prompt {
    font-size: 10px;
    color: var(--ui-text-secondary);
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.signal-modal__prompt:hover {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
}

/* Visibility */
.signal-modal__visibility {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ui-border);
}

.signal-modal__visibility-label {
    display: block;
    font-size: 10px;
    color: var(--ui-text-muted);
    margin-bottom: 8px;
}

.signal-modal__visibility-options {
    display: flex;
    gap: 0;
}

.signal-modal__visibility-option {
    flex: 1;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--ui-border);
    color: var(--ui-text-secondary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}

.signal-modal__visibility-option:first-child {
    border-radius: 4px 0 0 4px;
}

.signal-modal__visibility-option:last-child {
    border-radius: 0 4px 4px 0;
    border-left: none;
}

.signal-modal__visibility-option.active {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: var(--ui-on-primary);
}

/* Submit */
.signal-modal__submit {
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    background: var(--ui-accent);
    border: none;
    border-radius: 6px;
    color: var(--ui-on-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.signal-modal__submit:hover:not(:disabled) {
    filter: brightness(1.1);
}

.signal-modal__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.signal-modal__submit:active:not(:disabled) {
    transform: scale(0.98);
}

/* Success */
.signal-modal__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 16px;
    color: var(--ui-success);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}

.signal-modal__success-icon {
    font-size: 32px;
    animation: pop 0.3s ease;
}

@keyframes pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.reaction-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.reaction-button--compact {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
}

.reaction-button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border-color: var(--ui-text-muted);
}

.reaction-button:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}

.reaction-button--active {
    background: color-mix(in srgb, var(--ui-accent) 20%, transparent);
    border-color: var(--ui-accent);
}

.reaction-button--active:hover {
    background: color-mix(in srgb, var(--ui-accent) 30%, transparent);
}

.reaction-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.reaction-button__emoji {
    font-size: 1.25rem;
    line-height: 1;
}

.reaction-button--compact .reaction-button__emoji {
    font-size: 0.875rem;
}

.reaction-button__tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
    font-size: 11px;
    font-weight: 500;
    padding: 6px 8px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--ui-text) 20%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    transform-origin: bottom center;
}

.reaction-button__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: var(--ui-border) transparent transparent;
}

.reaction-button__tooltip::before {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px 5px 0;
    border-style: solid;
    border-color: var(--ui-surface) transparent transparent;
}

.reaction-button:hover:not(:disabled) .reaction-button__tooltip,
.reaction-button:focus-visible .reaction-button__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
}
/**
 * AgendaFeedbackCard Styles
 * Row-based design matching ModuleRow
 */

.agenda-row {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--ui-border);
}

.agenda-row__main {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
}

.agenda-row__number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ui-text-muted);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: 50%;
    flex-shrink: 0;
}

.agenda-row__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.agenda-row__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--ui-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-row__duration {
    font-size: 11px;
    color: var(--ui-text-muted);
}

/* Middle: Add comment link */
.agenda-row__middle {
    flex-shrink: 0;
}

.agenda-row__add-note {
    font-size: 11px;
    color: var(--ui-text-muted);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
}

.agenda-row__add-note:hover:not(:disabled) {
    color: var(--ui-accent);
}

.agenda-row__add-note:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.agenda-row__reactions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Note preview */
.agenda-row__note-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 0 8px 40px;
}

.agenda-row__note-text {
    font-size: 12px;
    color: var(--ui-text-muted);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-row__edit-note {
    font-size: 11px;
    color: var(--ui-text-muted);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.agenda-row__edit-note:hover:not(:disabled) {
    color: var(--ui-accent);
}

/* Expanded form */
.agenda-row__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 12px 40px;
}

.agenda-row__textarea {
    width: 100%;
    padding: 8px;
    font-size: 12px;
    font-family: inherit;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    resize: none;
}

.agenda-row__textarea:focus {
    outline: none;
    border-color: var(--ui-accent);
}

.agenda-row__textarea:disabled {
    opacity: 0.5;
}

.agenda-row__form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.agenda-row__options {
    display: flex;
    gap: 12px;
}

.agenda-row__checkbox {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--ui-text-muted);
    cursor: pointer;
}

.agenda-row__checkbox input {
    width: 14px;
    height: 14px;
    accent-color: var(--ui-accent);
}

.agenda-row__actions {
    display: flex;
    gap: 6px;
}

.agenda-row__btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
}

.agenda-row__btn--cancel {
    background: transparent;
    border: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
}

.agenda-row__btn--cancel:hover {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.agenda-row__btn--save {
    background: var(--ui-accent);
    border: 1px solid var(--ui-accent);
    color: white;
}

.agenda-row__btn--save:hover:not(:disabled) {
    filter: brightness(1.1);
}

.agenda-row__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── Mobile: stack title on its own line, reactions below ─── */
@media (max-width: 480px) {
    .agenda-row__main {
        grid-template-columns: 28px 1fr;
        gap: 6px 8px;
    }

    /* Title wraps fully instead of truncating */
    .agenda-row__title {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    /* Add-comment and reactions flow onto second row under the title */
    .agenda-row__middle {
        grid-column: 2 / -1;
    }

    .agenda-row__reactions {
        grid-column: 2 / -1;
    }

    /* Note preview + form need less left indent on mobile */
    .agenda-row__note-preview {
        padding-left: 36px;
    }

    .agenda-row__form {
        padding-left: 36px;
    }
}
/* ── Participant Intro Overlay ── */
.participant-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

/* ── Card ── */
.participant-intro-card {
    width: 100%;
    max-width: 520px;
    margin: 1rem;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    outline: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.participant-intro-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ui-text);
    text-align: center;
    margin: 0;
}

.participant-intro-invited {
    font-size: 0.9rem;
    color: var(--ui-text-muted);
    text-align: center;
    margin: 0;
}

.participant-intro-session {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.participant-intro-session-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}

.participant-intro-session-date {
    font-size: 0.85rem;
    color: var(--ui-text-muted);
}

.participant-intro-divider {
    height: 1px;
    background: var(--ui-border);
    margin: 0.25rem 0;
}

.participant-intro-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0;
}

.participant-intro-steps {
    padding-left: 1.25rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--ui-text-secondary);
    line-height: 1.8;
}

.participant-intro-note {
    font-size: 0.8rem;
    color: var(--ui-text-muted);
    margin: 0;
    line-height: 1.5;
}

.participant-intro-cta {
    align-self: center;
    margin-top: 0.25rem;
    padding: 0.5rem 1.5rem;
    font-size: 0.95rem;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .participant-intro-card {
        max-width: 100%;
        margin: 0.5rem;
        padding: 1.25rem;
        border-radius: 8px;
    }

    .participant-intro-title {
        font-size: 1.15rem;
    }

    .participant-intro-invited {
        font-size: 0.8125rem;
    }

    .participant-intro-session-title {
        font-size: 0.9375rem;
        overflow-wrap: break-word;
    }

    .participant-intro-steps {
        padding-left: 1rem;
        font-size: 0.8125rem;
        line-height: 1.6;
    }

    .participant-intro-cta {
        padding: 0.5rem 1.25rem;
        font-size: 0.875rem;
    }

    .participant-intro-card input,
    .participant-intro-card select,
    .participant-intro-card textarea {
        font-size: 16px;
    }
}
/**
 * PrepFlowPage Styles
 * Theme-aware using --ui-* CSS variables
 */

.prep-flow-page {
    min-height: 100vh;
    background: var(--board-bg);
    color: var(--ui-text);
    font-family: var(--font-family);
}

/* Loading State */
.prep-flow-page--loading,
.prep-flow-page--error,
.prep-flow-page--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.prep-flow-page__loader,
.prep-flow-page__error,
.prep-flow-page__empty {
    text-align: center;
    padding: 2rem;
}

.prep-flow-page__loader-icon,
.prep-flow-page__error-icon {
    display: block;
    font-size: 2rem;
    margin-bottom: 1rem;
    animation: pulse 1.5s ease-in-out infinite;
}

.prep-flow-page__error-icon {
    animation: none;
}

.prep-flow-page__retry-btn {
    margin-top: 1rem;
    padding: 0.5rem 1.5rem;
    background: var(--ui-accent);
    color: #000;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.prep-flow-page__retry-btn:hover {
    opacity: 0.9;
}

/* Main Content */
.prep-flow-page__main {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
    padding-bottom: 6rem; /* Space for signal button */
}

/* Overview Screen */
.prep-flow-page__overview {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.prep-flow-page__intro {
    text-align: center;
    padding: 1.5rem;
}

.prep-flow-page__intro-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--ui-text);
}

.prep-flow-page__intro-text {
    color: var(--ui-text-secondary);
    margin: 0;
    line-height: 1.6;
}

.prep-flow-page__modules {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Module View */
.prep-flow-page__module-view {
    position: relative;
}

.prep-flow-page__divider {
    height: 1px;
    width: 100%;
    background: var(--ui-border);
}

.prep-flow-page__signals {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.prep-flow-page__signals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.prep-flow-page__signals-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ui-text-muted);
}

.prep-flow-page__signals-list {
    display: grid;
    gap: 0.75rem;
}

.prep-flow-page__signal-item {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.prep-flow-page__signal-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.prep-flow-page__signal-type {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--ui-text);
}

.prep-flow-page__signal-content {
    font-size: 0.9rem;
    color: var(--ui-text);
}

.prep-flow-page__signal-response {
    font-size: 0.8rem;
    color: var(--ui-text-secondary);
}

.prep-flow-page__signal-response-block {
    display: grid;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface-muted);
}

.prep-flow-page__signal-response-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.prep-flow-page__signal-response-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.prep-flow-page__signal-response-time {
    font-size: 0.7rem;
}

.prep-flow-page__signal-response-text {
    font-size: 0.85rem;
    color: var(--ui-text);
}

.prep-flow-page__signals-empty {
    font-size: 0.85rem;
    color: var(--ui-text-muted);
}

.prep-flow-page__signal {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 100;
}

/* Completion Screen */
.prep-flow-page__completion {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.prep-flow-page__completion-card {
    text-align: center;
    padding: 3rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 16px;
}

.prep-flow-page__completion-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 1.5rem;
}

.prep-flow-page__completion-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 1rem;
    background: linear-gradient(135deg, var(--ui-accent), #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.prep-flow-page__completion-text {
    color: var(--ui-text-secondary);
    margin: 0 0 2rem;
}

.prep-flow-page__completion-btn {
    padding: 0.75rem 2rem;
    background: var(--ui-accent);
    color: #000;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.prep-flow-page__completion-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-accent) 30%, transparent);
}

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .prep-flow-page__main {
        padding: 1rem;
        padding-bottom: 5rem;
    }

    .prep-flow-page__intro {
        padding: 1rem;
    }

    .prep-flow-page__intro-title {
        font-size: 1.25rem;
    }

    .prep-flow-page__completion-card {
        padding: 2rem;
    }

    .prep-flow-page__completion-icon {
        font-size: 3rem;
    }

    .prep-flow-page__completion-title {
        font-size: 1.5rem;
    }

    .prep-flow-page__signal {
        bottom: 1rem;
        right: 1rem;
    }

    /* Extra bottom padding so content isn't hidden behind fixed mobile nav */
    .prep-flow-page__content {
        padding-bottom: 4.5rem;
    }
}

/* Module Complete Screen */
.prep-flow-page__module-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 3rem 1rem;
    max-width: 480px;
    margin: 0 auto;
}

.prep-flow-page__module-complete-icon {
    font-size: 3rem;
}

.prep-flow-page__module-complete-title {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    color: var(--ui-text);
}

.prep-flow-page__module-complete-desc {
    text-align: center;
    color: var(--ui-text-muted);
}

.prep-flow-page__feedback-group {
    width: 100%;
}

.prep-flow-page__feedback-label {
    display: block;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    margin-bottom: 0.5rem;
}

.prep-flow-page__feedback-textarea {
    width: 100%;
    min-height: 100px;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-family: inherit;
    font-size: 0.875rem;
    resize: none;
}

.prep-flow-page__feedback-textarea::placeholder {
    color: var(--ui-text-muted);
}

.prep-flow-page__feedback-textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.prep-flow-page__feedback-actions {
    display: flex;
    gap: 0.75rem;
    width: 100%;
}

.prep-flow-page__feedback-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}

.prep-flow-page__feedback-btn:hover {
    opacity: 0.9;
}

.prep-flow-page__feedback-btn--skip {
    background: transparent;
    border: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
}

.prep-flow-page__feedback-btn--submit {
    background: var(--ui-primary);
    border: none;
    color: white;
}

/* Mobile Fixed Bottom Nav Bar */
.prep-flow-page__mobile-nav {
    display: none; /* Hidden on desktop */
}

@media (max-width: 640px) {
    .prep-flow-page__mobile-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        padding: 0.625rem 1rem;
        padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
        background: var(--ui-surface);
        border-top: 1px solid var(--ui-border);
        box-shadow: 0 -2px 8px color-mix(in srgb, var(--ui-text) 8%, transparent);
        gap: 0.5rem;
    }

    .prep-flow-page__mobile-nav-btn {
        flex: 1;
        padding: 0.625rem 0.75rem;
        border: none;
        border-radius: 6px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
    }

    .prep-flow-page__mobile-nav-btn--prev {
        background: transparent;
        border: 1px solid var(--ui-border);
        color: var(--ui-text-secondary);
    }

    .prep-flow-page__mobile-nav-btn--next {
        background: var(--ui-accent);
        color: #fff;
    }

    .prep-flow-page__mobile-nav-counter {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        color: var(--ui-text-muted);
        white-space: nowrap;
        flex-shrink: 0;
    }
}
/* DeclineAttendancePage styles */

.decline-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--board-bg);
}

.decline-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    padding: 32px;
    max-width: 440px;
    width: 100%;
    text-align: center;
}

.decline-card--success {
    border-color: var(--ui-success);
}

.decline-card--error {
    border-color: var(--ui-error);
}

.decline-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.decline-card h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0 0 8px;
}

.decline-subtitle,
.decline-message {
    color: var(--ui-text-muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 24px;
}

.decline-form {
    text-align: left;
}

.decline-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ui-text);
    margin-bottom: 16px;
}

.decline-textarea {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    color: var(--ui-text);
    resize: vertical;
}

.decline-textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.decline-textarea::placeholder {
    color: var(--ui-text-muted);
}

.decline-btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.decline-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.decline-btn--primary {
    width: 100%;
    background: var(--ui-primary);
    color: var(--ui-on-primary);
}

.decline-btn--primary:hover:not(:disabled) {
    background: var(--ui-primary-hover);
}

.decline-btn--secondary {
    background: transparent;
    color: var(--ui-primary);
    border: 1px solid var(--ui-border);
}

.decline-btn--secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
}

.decline-note {
    margin-top: 16px;
    font-size: 12px;
    color: var(--ui-text-muted);
}

/* ── Mobile responsive ── */
@media (max-width: 640px) {
    .decline-page {
        padding: 16px;
    }

    .decline-card {
        padding: 20px 16px;
    }

    .decline-textarea {
        box-sizing: border-box;
        font-size: 16px;
    }

    .decline-icon {
        font-size: 36px;
    }
}
/* PostSessionSummaryPage styles */

.summary-page {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    background: var(--board-bg);
}

.summary-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    padding: 32px;
    max-width: 680px;
    width: 100%;
    margin-top: 24px;
}

.summary-card--loading,
.summary-card--error {
    text-align: center;
    max-width: 440px;
}

.summary-card--error {
    border-color: var(--ui-error);
}

.summary-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--ui-border);
    border-top-color: var(--ui-primary);
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: summary-spin 0.8s linear infinite;
}

@keyframes summary-spin {
    to { transform: rotate(360deg); }
}

.summary-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.summary-icon--info {
    margin-bottom: 8px;
}

/* Header */
.summary-header {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ui-border);
}

.summary-header h1 {
    font-size: 22px;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0 0 8px;
}

.summary-subtitle {
    color: var(--ui-text-muted);
    font-size: 14px;
    margin: 0;
}

.summary-message {
    color: var(--ui-text-muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 24px;
}

/* Info Grid */
.summary-info {
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.summary-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.summary-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-info-label {
    font-size: 12px;
    color: var(--ui-text-muted);
}

.summary-info-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--ui-text);
}

.summary-status {
    text-transform: capitalize;
}

/* Sections */
.summary-section {
    margin-bottom: 20px;
}

.summary-section h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0 0 12px;
}

/* Absence Quote */
.summary-absence {
    background: color-mix(in srgb, var(--ui-warning) 8%, transparent);
    border-radius: 12px;
    padding: 16px;
    border-left: 3px solid var(--ui-warning);
}

.summary-quote {
    margin: 0;
    padding: 0;
    font-style: italic;
    color: var(--ui-text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

/* Lists */
.summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.summary-list li {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--ui-text);
    line-height: 1.4;
}

.summary-list li:last-child {
    margin-bottom: 0;
}

.summary-list--decisions li {
    border-left: 3px solid var(--ui-success);
    padding-left: 12px;
}

.summary-list--actions li {
    border-left: 3px solid var(--ui-warning);
    padding-left: 12px;
}

.summary-list--notes li {
    border-left: 3px solid var(--ui-primary);
    padding-left: 12px;
}

.summary-list--parked li {
    border-left: 3px solid var(--ui-text-muted);
    padding-left: 12px;
}

.summary-assignee {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
    border-radius: 4px;
    font-size: 12px;
    color: var(--ui-primary);
}

/* Empty State */
.summary-empty {
    text-align: center;
    padding: 24px;
    color: var(--ui-text-muted);
}

/* Timeline */
.summary-timeline {
    border-top: 1px solid var(--ui-border);
    padding-top: 20px;
}

.summary-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-timeline-item {
    display: flex;
    gap: 12px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border-radius: 6px;
    font-size: 13px;
}

.summary-timeline-time {
    color: var(--ui-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.summary-timeline-text {
    color: var(--ui-text);
}

.summary-timeline-more {
    text-align: center;
    color: var(--ui-text-muted);
    font-size: 12px;
    padding: 8px;
}

/* Footer */
.summary-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ui-border);
    text-align: center;
}

.summary-footer-text {
    color: var(--ui-text-muted);
    font-size: 12px;
    margin: 0 0 16px;
}

/* Buttons */
.summary-btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.summary-btn--secondary {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text);
}

.summary-btn--secondary:hover {
    background: color-mix(in srgb, var(--ui-text) 15%, transparent);
}

/* ── Mobile responsive ── */
@media (max-width: 640px) {
    .summary-page {
        padding: 12px;
    }

    .summary-card {
        padding: 20px 16px;
        margin-top: 12px;
    }

    .summary-info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .summary-timeline-item {
        gap: 8px;
        padding: 6px 8px;
    }

    .summary-header h1 {
        font-size: 18px;
    }

    .summary-icon {
        font-size: 36px;
    }

    .summary-page input,
    .summary-page select,
    .summary-page textarea {
        font-size: 16px;
    }
}
/**
 * Skeleton Loading Styles
 */

/* Base skeleton */
.skeleton {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ui-text) 8%, transparent) 0%,
    color-mix(in srgb, var(--ui-text) 15%, transparent) 50%,
    color-mix(in srgb, var(--ui-text) 8%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Text skeleton */
.skeleton-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Card skeleton */
.skeleton-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.skeleton-card-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Table skeleton */
.skeleton-table {
  width: 100%;
  border-collapse: collapse;
}

.skeleton-table th,
.skeleton-table td {
  padding: 0.75rem 1rem;
  text-align: left;
}

.skeleton-table thead th {
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.skeleton-table tbody tr {
  border-bottom: 1px solid var(--ui-border);
}

.skeleton-table-row td {
  padding: 1rem;
}

/* Stat card skeleton */
.skeleton-stat-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
  padding: 1.25rem;
}

.skeleton-stat-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Grid layouts */
.skeleton-grid {
  display: grid;
  gap: 1rem;
}

.skeleton-grid--card {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.skeleton-grid--stat {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Chart skeleton */
.skeleton-chart {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
  padding: 1rem;
}

/* List skeleton */
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
}

.skeleton-list-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
/**
 * Session Analytics Page Styles
 * Uses --ui-* CSS variables for theming.
 */

.sa-page {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.sa-back {
    margin-bottom: 1rem;
}

.sa-error {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-error);
    font-size: 0.9375rem;
}

/* Header */
.sa-header {
    margin-bottom: 1.5rem;
}

.sa-header h1 {
    margin: 0 0 0.375rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ui-text);
}

.sa-subtitle {
    margin: 0 0 0.25rem;
    color: var(--ui-text-muted);
    font-size: 0.9375rem;
}

.sa-meta {
    margin: 0;
    color: var(--ui-text-secondary);
    font-size: 0.8125rem;
}

/* AI Health Summary */
/* Grade Banner */
.sa-grade-banner {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
}

.sa-grade-banner__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
}

.sa-grade-banner__badge[data-grade="S"] { background: color-mix(in srgb, var(--ui-success) 10%, transparent); }
.sa-grade-banner__badge[data-grade="A"] { background: color-mix(in srgb, var(--ui-primary) 10%, transparent); }
.sa-grade-banner__badge[data-grade="B"] { background: color-mix(in srgb, var(--ui-warning) 10%, transparent); }
.sa-grade-banner__badge[data-grade="C"] { background: color-mix(in srgb, var(--ui-error) 10%, transparent); }
.sa-grade-banner__badge[data-grade="D"] { background: color-mix(in srgb, var(--ui-error) 15%, transparent); }

.sa-grade-banner__letter {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ui-text);
}

.sa-grade-banner__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text-muted);
}

.sa-grade-banner__reasoning {
    font-size: 0.8125rem;
    color: var(--ui-text-secondary);
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.sa-grade-banner__recs {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
}

.sa-grade-banner__recs strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--ui-text);
}

.sa-grade-banner__recs ul {
    margin: 0;
    padding-left: 1.25rem;
}

.sa-grade-banner__recs li {
    margin-bottom: 0.125rem;
}

.sa-health-summary {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
}

.sa-health-summary h2 {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ui-text);
}

.sa-health-meters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.sa-health-meter {
    text-align: center;
}

.sa-health-meter__label {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.sa-health-meter__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ui-text);
    margin-bottom: 0.375rem;
}

.sa-health-overall {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--ui-text-secondary);
    margin-top: 0.5rem;
}

.sa-health-analyses {
    color: var(--ui-text-muted);
    font-size: 0.75rem;
}

/* Cards Grid */
.sa-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.sa-card {
    padding: 1.25rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
}

.sa-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.sa-card__icon {
    font-size: 1.125rem;
}

.sa-card__title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-muted);
}

.sa-card__main {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.sa-card__value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ui-text);
    line-height: 1;
}

.sa-card__unit {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
}

.sa-card__details {
    margin-top: 0.75rem;
}

.sa-card__divider {
    height: 1px;
    background: var(--ui-border);
    margin: 0.5rem 0;
}

/* Patterns */
.sa-card__patterns {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ui-border);
}

.sa-card__patterns-label {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-text-muted);
    margin-bottom: 0.375rem;
}

.sa-card__pattern-badge {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--ui-warning);
    background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-warning) 25%, transparent);
    border-radius: 0.25rem;
    padding: 0.125rem 0.5rem;
    margin: 0 0.25rem 0.25rem 0;
}

/* Score Bar */
.sa-score-bar {
    height: 6px;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.sa-score-bar__fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.sa-score-bar__fill--default {
    background: var(--ui-primary);
}

.sa-score-bar__fill--success {
    background: var(--ui-success);
}

.sa-score-bar__fill--warning {
    background: var(--ui-warning);
}

.sa-score-bar__fill--error {
    background: var(--ui-error);
}

/* Detail Rows */
.sa-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
}

.sa-detail-row__label {
    color: var(--ui-text-secondary);
}

.sa-detail-row__value {
    color: var(--ui-text);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .sa-cards {
        grid-template-columns: 1fr;
    }

    .sa-health-meters {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* ── Mobile (640px and below) ── */
@media (max-width: 640px) {
    .sa-page {
        padding: 0.75rem;
    }

    .sa-header h1 {
        font-size: 1.25rem;
    }

    .sa-grade-banner {
        padding: 1rem;
    }

    .sa-grade-banner__letter {
        font-size: 1.5rem;
    }

    .sa-health-meters {
        gap: 0.5rem;
    }

    .sa-health-meter {
        padding: 0.75rem;
    }

    .sa-cards {
        gap: 0.75rem;
    }

    .sa-card {
        padding: 0.75rem;
    }

    .sa-page input,
    .sa-page select,
    .sa-page textarea {
        font-size: 16px;
    }
}
/**
 * Organization Invite Accept Page Styles
 */

.org-invite-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  background: var(--board-bg);
}

.org-invite-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 400px;
  padding: 2.5rem;
  border-radius: 0.75rem;
  background: var(--ui-surface);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.org-invite-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 1.5rem;
  border-radius: 50%;
}

.org-invite-icon--success {
  background: color-mix(in srgb, var(--ui-success) 15%, transparent);
  color: var(--ui-success);
}

.org-invite-icon--warning {
  background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
  color: var(--ui-warning);
}

.org-invite-icon--error {
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
  color: var(--ui-error);
}

.org-invite-card h1 {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ui-text);
}

.org-invite-card p {
  margin: 0 0 1.5rem;
  color: var(--ui-text-muted);
  line-height: 1.5;
}

.org-invite-details {
  margin-bottom: 1rem;
}

.org-invite-org-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ui-text);
  margin-bottom: 0.5rem;
}

.org-invite-role {
  color: var(--ui-text-muted);
  font-size: 0.875rem;
}

.org-invite-description {
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
  border-radius: 0.375rem;
}

.org-invite-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.5rem;
}

.org-invite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.org-invite-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.org-invite-btn--primary {
  background: var(--ui-primary);
  color: var(--ui-on-primary);
}

.org-invite-btn--primary:hover:not(:disabled) {
  background: var(--ui-primary-hover);
}

.org-invite-btn--secondary {
  background: color-mix(in srgb, var(--ui-text) 10%, transparent);
  color: var(--ui-text);
}

.org-invite-btn--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-text) 15%, transparent);
}

.org-invite-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--ui-border);
  border-top-color: var(--ui-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Role badges (copied from OrgContextSwitcher) */
.org-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.org-role-badge--admin {
  background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
  color: var(--ui-primary);
}

.org-role-badge--manager {
  background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
  color: var(--ui-accent);
}

.org-role-badge--host {
  background: color-mix(in srgb, var(--ui-success) 15%, transparent);
  color: var(--ui-success);
}

.org-role-badge--viewer {
  background: color-mix(in srgb, var(--ui-text-muted) 15%, transparent);
  color: var(--ui-text-muted);
}

/* Wide card for full invite view */
.org-invite-card--wide {
  max-width: 520px;
}

/* Invite context text */
.org-invite-context {
  margin: 0 0 0.5rem;
  color: var(--ui-text-muted);
  font-size: 0.9375rem;
}

.org-invite-context strong {
  color: var(--ui-text);
}

/* Organization description */
.org-invite-org-desc {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--ui-text-muted);
  line-height: 1.5;
}

/* Role Card */
.org-invite-role-card {
  width: 100%;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
  border-radius: 0.5rem;
  border-left: 3px solid var(--ui-success);
  text-align: left;
}

.org-invite-role-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.org-invite-role-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ui-text-muted);
}

.org-invite-role-desc {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--ui-text);
  line-height: 1.5;
}

.org-invite-responsibilities {
  margin: 0;
  padding: 0 0 0 1.25rem;
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
  line-height: 1.6;
}

.org-invite-responsibilities li {
  margin-bottom: 0.25rem;
}

.org-invite-responsibilities li:last-child {
  margin-bottom: 0;
}

/* About Wellprepd section */
.org-invite-about {
  width: 100%;
  padding: 1rem 1.25rem;
  margin: 0.5rem 0 1rem;
  background: color-mix(in srgb, var(--ui-accent) 8%, transparent);
  border-radius: 0.5rem;
  text-align: left;
}

.org-invite-about h3 {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ui-accent);
}

.org-invite-about p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
  line-height: 1.6;
}

/* ── Mobile responsive ── */
@media (max-width: 640px) {
  .org-invite-page {
    padding: 0.75rem;
  }

  .org-invite-card {
    padding: 1.5rem 1rem;
  }

  .org-invite-card--wide {
    max-width: 100%;
  }

  .org-invite-role-card {
    padding: 0.75rem 1rem;
  }

  .org-invite-about {
    padding: 0.75rem 1rem;
  }

  .org-invite-card h1 {
    font-size: 1.25rem;
  }

  .org-invite-icon {
    width: 64px;
    height: 64px;
  }
}
/**
 * Organization Dashboard Page Styles
 * 
 * Uses --ui-* CSS variables for theming.
 */

.org-dashboard {
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.org-dashboard-back {
  margin-bottom: 1rem;
}

.org-dashboard--loading {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Skeleton loading */
.org-dashboard-skeleton {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.skeleton {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ui-text) 5%, transparent) 0%,
    color-mix(in srgb, var(--ui-text) 10%, transparent) 50%,
    color-mix(in srgb, var(--ui-text) 5%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 0.5rem;
}

.skeleton--header {
  height: 100px;
}

.skeleton--stats {
  height: 120px;
}

.skeleton--content {
  height: 200px;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Header */
.org-dashboard-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ui-border);
}

.org-dashboard-header-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.org-dashboard-logo {
  flex-shrink: 0;
}

.org-dashboard-logo-img {
  width: 56px;
  height: 56px;
  border-radius: 0.75rem;
  object-fit: cover;
}

.org-dashboard-logo-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--ui-primary) 0%, var(--ui-accent) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
}

.org-dashboard-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.org-dashboard-title h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ui-text);
}

.org-dashboard-edit-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--ui-text-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.15s ease;
}

.org-dashboard-edit-btn:hover {
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
  color: var(--ui-text);
  border-color: var(--ui-text-muted);
}

.org-dashboard-description {
  margin: 0.75rem 0 0;
  color: var(--ui-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Role badges (reuse from context switcher) */
.org-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: capitalize;
}

.org-role-badge--admin {
  background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
  color: var(--ui-primary);
}

.org-role-badge--manager {
  background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
  color: var(--ui-accent);
}

.org-role-badge--host {
  background: color-mix(in srgb, var(--ui-success) 15%, transparent);
  color: var(--ui-success);
}

.org-role-badge--viewer {
  background: color-mix(in srgb, var(--ui-text-muted) 15%, transparent);
  color: var(--ui-text-muted);
}

/* Quick Stats */
.org-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.org-stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  transition: all 0.15s ease;
}

.org-stat-card:hover {
  border-color: var(--ui-text-muted);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.org-stat-icon {
  font-size: 1.5rem;
}

.org-stat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.org-stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ui-text);
  line-height: 1.2;
}

.org-stat-label {
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
}

.org-stat-trend {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}

.org-stat-trend--up {
  background: color-mix(in srgb, var(--ui-success) 15%, transparent);
  color: var(--ui-success);
}

.org-stat-trend--down {
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
  color: var(--ui-error);
}

/* Quick Actions */
.org-dashboard-actions {
  margin-bottom: 2rem;
}

.org-dashboard-actions h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ui-text);
  margin: 0 0 1rem;
}

.org-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.org-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.org-action-btn:hover {
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
  border-color: var(--ui-text-muted);
}

.org-action-btn--primary {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: white;
}

.org-action-btn--primary:hover {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
}

.org-action-icon {
  font-size: 1rem;
}

/* Navigation Cards */
.org-dashboard-nav-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.org-nav-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s ease;
}

.org-nav-card:hover {
  border-color: var(--ui-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.org-nav-card-icon {
  font-size: 1.75rem;
}

.org-nav-card-content {
  flex: 1;
}

.org-nav-card-content h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ui-text);
}

.org-nav-card-content p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
}

.org-nav-card-arrow {
  color: var(--ui-text-muted);
  font-size: 1.25rem;
  transition: transform 0.15s ease;
}

.org-nav-card:hover .org-nav-card-arrow {
  transform: translateX(4px);
  color: var(--ui-primary);
}

/* Modal */
.org-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem;
}

.org-modal {
  width: 100%;
  max-width: 420px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.org-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ui-border);
}

.org-modal-header h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ui-text);
}

.org-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--ui-text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.org-modal-close:hover {
  background: color-mix(in srgb, var(--ui-text) 10%, transparent);
  color: var(--ui-text);
}

.org-modal-form {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.org-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.org-form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ui-text);
}

.org-form-group input,
.org-form-group select,
.org-form-group textarea {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.375rem;
  background: var(--board-bg);
  color: var(--ui-text);
  font-size: 0.9375rem;
  transition: all 0.15s ease;
}

.org-form-group input:focus,
.org-form-group select:focus,
.org-form-group textarea:focus {
  outline: none;
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}

.org-form-group input::placeholder {
  color: var(--ui-text-muted);
}

.org-form-error {
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--ui-error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-error) 30%, transparent);
  border-radius: 0.375rem;
  color: var(--ui-error);
  font-size: 0.875rem;
}

.org-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

/* Buttons */
.org-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.org-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.org-btn--primary {
  background: var(--ui-primary);
  color: white;
}

.org-btn--primary:hover:not(:disabled) {
  background: var(--ui-primary-hover);
}

.org-btn--secondary {
  background: transparent;
  border-color: var(--ui-border);
  color: var(--ui-text);
}

.org-btn--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
  border-color: var(--ui-text-muted);
}

/* Responsive */
@media (max-width: 640px) {
  .org-dashboard {
    padding: 1rem;
  }
  
  .org-dashboard-header-content {
    flex-wrap: wrap;
  }
  
  .org-dashboard-title h1 {
    font-size: 1.375rem;
  }
  
  .org-dashboard-edit-btn {
    width: 100%;
    margin-top: 0.75rem;
    justify-content: center;
  }
  
  .org-stat-card {
    padding: 1rem;
  }
  
  .org-stat-value {
    font-size: 1.25rem;
  }
  
  .org-action-buttons {
    flex-direction: column;
  }
  
  .org-action-btn {
    justify-content: center;
  }
}
/**
 * Organization Members Page Styles
 * 
 * Uses --ui-* CSS variables for theming.
 */

.org-members {
  padding: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.org-members--loading {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.org-members-back {
  margin-bottom: 1rem;
}

/* Header */
.org-members-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.org-members-header-content {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.org-members-header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ui-text);
}

.org-members-count {
  font-size: 0.875rem;
  color: var(--ui-text-muted);
}

/* Search */
.org-members-search {
  margin-bottom: 1.5rem;
}

.org-members-search input {
  width: 100%;
  max-width: 400px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.375rem;
  background: var(--board-bg);
  color: var(--ui-text);
  font-size: 0.9375rem;
}

.org-members-search input:focus {
  outline: none;
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}

.org-members-search input::placeholder {
  color: var(--ui-text-muted);
}

/* Sections */
.org-members-section {
  margin-bottom: 2rem;
}

.org-members-section h2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem;
}

.org-members-loading,
.org-members-empty {
  padding: 2rem;
  text-align: center;
  color: var(--ui-text-muted);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
}

/* Members List */
.org-members-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Member Card */
.org-member-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
  transition: all 0.15s ease;
}

.org-member-card:hover {
  border-color: var(--ui-text-muted);
}

.org-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ui-primary) 0%, var(--ui-accent) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  flex-shrink: 0;
}

.org-member-info {
  flex: 1;
  min-width: 0;
}

.org-member-name {
  font-weight: 500;
  color: var(--ui-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-member-email {
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-member-meta {
  font-size: 0.75rem;
  color: var(--ui-text-muted);
  margin-top: 0.25rem;
}

/* Department */
.org-member-department {
  margin-top: 0.25rem;
}

.org-member-dept-display {
  font-size: 0.75rem;
  color: var(--ui-text-secondary);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
  display: inline-block;
}

.org-member-dept-display--editable {
  cursor: pointer;
  transition: background 0.15s ease;
}

.org-member-dept-display--editable:hover {
  background: color-mix(in srgb, var(--ui-text) 10%, transparent);
}

.org-member-dept-edit {
  display: inline-block;
}

.org-member-dept-input {
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--ui-primary);
  border-radius: 0.25rem;
  background: var(--ui-surface);
  color: var(--ui-text);
  outline: none;
  width: 140px;
}

.org-member-actions {
  display: flex;
  gap: 0.25rem;
}

.org-member-action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
}

.org-member-action-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-text) 10%, transparent);
}

.org-member-action-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.org-member-action-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
}

/* Invites List */
.org-invites-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Invite Card */
.org-invite-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--ui-surface);
  border: 1px dashed var(--ui-border);
  border-radius: 0.5rem;
}

.org-invite-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ui-text) 10%, transparent);
  color: var(--ui-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  flex-shrink: 0;
}

.org-invite-info {
  flex: 1;
  min-width: 0;
}

.org-invite-email {
  font-weight: 500;
  color: var(--ui-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-invite-meta {
  font-size: 0.75rem;
  color: var(--ui-text-muted);
  margin-top: 0.25rem;
}

.org-invite-cancel-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.org-invite-cancel-btn:hover {
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
  color: var(--ui-error);
}

/* Role badges (reuse from other org styles) */
.org-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: capitalize;
  flex-shrink: 0;
}

.org-role-badge--admin {
  background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
  color: var(--ui-primary);
}

.org-role-badge--manager {
  background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
  color: var(--ui-accent);
}

.org-role-badge--host {
  background: color-mix(in srgb, var(--ui-success) 15%, transparent);
  color: var(--ui-success);
}

.org-role-badge--viewer {
  background: color-mix(in srgb, var(--ui-text-muted) 15%, transparent);
  color: var(--ui-text-muted);
}

/* Modal styles (shared with dashboard) */
.org-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem;
}

.org-modal {
  width: 100%;
  max-width: 420px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.org-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ui-border);
}

.org-modal-header h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ui-text);
}

.org-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--ui-text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.org-modal-close:hover {
  background: color-mix(in srgb, var(--ui-text) 10%, transparent);
  color: var(--ui-text);
}

.org-modal-form,
.org-modal-content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.org-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.org-form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ui-text);
}

.org-form-group input,
.org-form-group select {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.375rem;
  background: var(--board-bg);
  color: var(--ui-text);
  font-size: 0.9375rem;
  transition: all 0.15s ease;
}

.org-form-group input:focus,
.org-form-group select:focus {
  outline: none;
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}

.org-form-group input::placeholder {
  color: var(--ui-text-muted);
}

.org-form-group input:disabled,
.org-form-group select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.org-form-static {
  padding: 0.625rem 0;
  color: var(--ui-text);
  font-size: 0.9375rem;
}

.org-form-hint {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--ui-text-muted);
}

.org-form-warning {
  margin: 0.25rem 0 0;
  padding: 0.5rem;
  background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-warning) 30%, transparent);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  color: var(--ui-warning);
}

.org-form-error {
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--ui-error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-error) 30%, transparent);
  border-radius: 0.375rem;
  color: var(--ui-error);
  font-size: 0.875rem;
}

.org-confirm-text {
  margin: 0;
  color: var(--ui-text);
  font-size: 0.9375rem;
}

.org-confirm-note {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 0.8125rem;
}

.org-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--ui-border);
}

/* Buttons */
.org-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.org-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.org-btn--primary {
  background: var(--ui-primary);
  color: white;
}

.org-btn--primary:hover:not(:disabled) {
  background: var(--ui-primary-hover);
}

.org-btn--secondary {
  background: transparent;
  border-color: var(--ui-border);
  color: var(--ui-text);
}

.org-btn--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
  border-color: var(--ui-text-muted);
}

.org-btn--danger {
  background: var(--ui-error);
  color: white;
}

.org-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-error) 80%, black);
}

/* Responsive */
@media (max-width: 640px) {
  .org-members {
    padding: 1rem;
  }
  
  .org-members-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .org-members-header h1 {
    font-size: 1.25rem;
  }
  
  .org-member-card {
    flex-wrap: wrap;
  }
  
  .org-member-info {
    flex-basis: calc(100% - 56px);
  }
  
  .org-member-actions {
    margin-left: auto;
  }
}
/**
 * Organization Settings Page Styles
 * 
 * Uses --ui-* CSS variables for theming.
 * Matches the Session Editor section box design.
 */

.org-settings {
  padding: 1.5rem;
  max-width: 700px;
  margin: 0 auto;
}

.org-settings-back {
  margin-bottom: 1rem;
}

.org-settings--loading {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-text-muted);
}

/* Header */
.org-settings-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ui-border);
}

.org-settings-header h1 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ui-text);
}

[data-theme="light"] .org-settings-header h1 {
  color: var(--brand-teal);
}

.org-settings-subtitle {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 0.9375rem;
}

/* Sections - Boxed card style matching Session Editor */
.org-settings-section {
  margin-bottom: 1.5rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .org-settings-section {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
}

.org-settings-section h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ui-text);
  margin: 0;
  /* Slim green pill background for title */
  background: #d1fae5;
  padding: 4px 8px;
  border-radius: 3px;
}

[data-theme="dark"] .org-settings-section h2 {
  background: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-surface));
}

[data-theme="light"] .org-settings-section h2 {
  color: var(--brand-teal);
}

/* Section header wrapper */
.org-settings-section > h2 {
  margin: 16px 16px 0;
}

/* Section content padding */
.org-settings-section-content {
  padding: 16px;
}

.org-settings-section--danger h2 {
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
  color: var(--ui-error);
}

[data-theme="dark"] .org-settings-section--danger h2 {
  background: color-mix(in srgb, var(--ui-error) 20%, var(--ui-surface));
}

.org-settings-section--danger {
  border: 2px solid var(--ui-error);
}

/* Form - content padding within section box */
.org-settings-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 16px;
}

.org-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.org-form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ui-text);
}

.org-form-group input,
.org-form-group select,
.org-form-group textarea {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.375rem;
  background: var(--board-bg);
  color: var(--ui-text);
  font-size: 0.9375rem;
  font-family: inherit;
  transition: all 0.15s ease;
}

.org-form-group input:focus,
.org-form-group select:focus,
.org-form-group textarea:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 20%, transparent);
}

.org-form-group input::placeholder,
.org-form-group textarea::placeholder {
  color: var(--ui-text-muted);
}

.org-form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.org-input--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.org-form-hint {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--ui-text-muted);
}

.org-form-error {
  margin: 0;
  padding: 0.625rem 0.875rem;
  background: color-mix(in srgb, var(--ui-error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-error) 30%, transparent);
  border-radius: 0.375rem;
  color: var(--ui-error);
  font-size: 0.875rem;
}

.org-form-success {
  margin: 0;
  padding: 0.625rem 0.875rem;
  background: color-mix(in srgb, var(--ui-success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-success) 30%, transparent);
  border-radius: 0.375rem;
  color: var(--ui-success);
  font-size: 0.875rem;
}

.org-form-actions {
  display: flex;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

/* Billing Card - content inside section box */
.org-billing-card {
  padding: 16px;
}

.org-billing-plan {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.org-billing-plan-label {
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
}

.org-billing-plan-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ui-text);
}

.org-billing-info {
  margin: 0 0 1rem;
  color: var(--ui-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Danger Card - content inside section box */
.org-danger-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 16px;
}

.org-danger-info {
  flex: 1;
}

.org-danger-info h3 {
  margin: 0 0 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ui-text);
}

.org-danger-info p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
  line-height: 1.5;
}

/* Delete Warning */
.org-delete-warning {
  padding: 1rem;
  background: color-mix(in srgb, var(--ui-error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-error) 25%, transparent);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.org-delete-warning-icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.5rem;
}

.org-delete-warning p {
  margin: 0 0 0.75rem;
  color: var(--ui-text);
  font-size: 0.875rem;
  line-height: 1.5;
}

.org-delete-warning ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--ui-text-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* Modal */
.org-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem;
}

.org-modal {
  width: 100%;
  max-width: 480px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.org-modal--danger {
  border-color: color-mix(in srgb, var(--ui-error) 30%, transparent);
}

.org-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ui-border);
}

.org-modal-header h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ui-text);
}

.org-modal--danger .org-modal-header h2 {
  color: var(--ui-error);
}

.org-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--ui-text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.org-modal-close:hover {
  background: color-mix(in srgb, var(--ui-text) 10%, transparent);
  color: var(--ui-text);
}

.org-modal-content {
  padding: 1.25rem;
}

.org-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--ui-border);
}

/* Buttons */
.org-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.org-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.org-btn--primary {
  background: var(--ui-primary);
  color: white;
}

.org-btn--primary:hover:not(:disabled) {
  background: var(--ui-primary-hover);
}

.org-btn--secondary {
  background: transparent;
  border-color: var(--ui-border);
  color: var(--ui-text);
}

.org-btn--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
  border-color: var(--ui-text-muted);
}

.org-btn--danger {
  background: var(--ui-error);
  color: white;
}

.org-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-error) 80%, black);
}

/* Responsive */
@media (max-width: 640px) {
  .org-settings {
    padding: 1rem;
  }
  
  .org-settings-header h1 {
    font-size: 1.25rem;
  }
  
  .org-danger-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .org-danger-card .org-btn {
    width: 100%;
  }
}
/* LessonPreviewModal Styles */

.lesson-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.lesson-preview-modal {
  background: var(--ui-surface);
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Header */
.lesson-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem;
  border-bottom: 1px solid var(--ui-border);
  gap: 1rem;
}

.lesson-preview-header-content {
  flex: 1;
  min-width: 0;
}

.lesson-preview-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ui-text);
  margin: 0 0 0.5rem;
}

.lesson-preview-objective {
  font-size: 0.95rem;
  color: var(--ui-text-muted);
  margin: 0;
  line-height: 1.4;
}

.lesson-preview-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--ui-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.lesson-preview-close:hover {
  color: var(--ui-text);
}

/* Tags */
.lesson-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--ui-border);
}

.lesson-preview-tag {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-accent) 20%, transparent);
  color: var(--ui-accent);
}

/* Meta Info */
.lesson-preview-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface-muted);
}

.lesson-preview-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.lesson-preview-meta-label {
  font-size: 0.75rem;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lesson-preview-meta-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ui-text);
}

/* Cards Preview */
.lesson-preview-cards {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.lesson-preview-cards h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem;
}

.lesson-preview-cards-empty {
  color: var(--ui-text-muted);
  text-align: center;
  padding: 2rem;
}

.lesson-preview-cards-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lesson-preview-card {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  overflow: hidden;
}

.lesson-preview-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
}

.lesson-preview-card-header:hover {
  background: var(--ui-surface-muted);
}

.lesson-preview-card-number {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ui-accent);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
}

.lesson-preview-card-title {
  flex: 1;
  font-size: 0.9rem;
  color: var(--ui-text);
}

.lesson-preview-card-type {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
}

.lesson-preview-card-toggle {
  font-size: 0.75rem;
  color: var(--ui-text-muted);
}

.lesson-preview-card-content {
  padding: 1rem;
  border-top: 1px solid var(--ui-border);
  font-size: 0.9rem;
  color: var(--ui-text-secondary);
  line-height: 1.5;
  background: var(--ui-surface-muted);
  white-space: pre-wrap;
}

/* Footer Info */
.lesson-preview-footer-info {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  font-size: 0.75rem;
  color: var(--ui-text-muted);
  border-top: 1px solid var(--ui-border);
}

/* Actions */
.lesson-preview-actions {
  display: flex;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface-muted);
}

.lesson-preview-delete-confirm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ui-text-muted);
}

/* Responsive */
@media (max-width: 600px) {
  .lesson-preview-meta {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .lesson-preview-actions {
    flex-wrap: wrap;
  }
  
  .lesson-preview-actions .org-btn {
    flex: 1;
    min-width: 45%;
  }
}
/* TagInput Styles */

.tag-input {
  position: relative;
}

.tag-input-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  min-height: 42px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  transition: border-color 0.15s;
}

.tag-input-container:focus-within {
  border-color: var(--ui-accent);
}

/* Tags */
.tag-input-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
  color: var(--ui-accent);
  border-radius: 6px;
}

.tag-input-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ui-accent);
  font-size: 0.625rem;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.15s;
}

.tag-input-tag-remove:hover {
  background: var(--ui-accent);
  color: white;
}

/* Input */
.tag-input-field {
  flex: 1;
  min-width: 100px;
  padding: 0.125rem 0;
  border: none;
  background: transparent;
  color: var(--ui-text);
  font-size: 0.9rem;
  outline: none;
}

.tag-input-field::placeholder {
  color: var(--ui-text-muted);
}

/* Suggestions dropdown */
.tag-input-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
}

.tag-input-suggestion {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  text-align: left;
  border: none;
  background: none;
  color: var(--ui-text);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.1s;
}

.tag-input-suggestion:hover,
.tag-input-suggestion--focused {
  background: var(--ui-surface-muted);
}

.tag-input-suggestion:first-child {
  border-radius: 8px 8px 0 0;
}

.tag-input-suggestion:last-child {
  border-radius: 0 0 8px 8px;
}

.tag-input-suggestion:only-child {
  border-radius: 8px;
}

/* Hint */
.tag-input-hint {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--ui-text-muted);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  z-index: 99;
}
/* LessonEditorModal Styles */

.lesson-editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.lesson-editor-modal {
  background: var(--ui-surface);
  border-radius: 12px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Header */
.lesson-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--ui-border);
}

.lesson-editor-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ui-text);
  margin: 0;
}

.lesson-editor-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--ui-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.lesson-editor-close:hover {
  color: var(--ui-text);
}

/* Content */
.lesson-editor-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.lesson-editor-error {
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
  color: var(--ui-error);
  border-radius: 8px;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

/* Sections */
.lesson-editor-section {
  margin-bottom: 2rem;
}

.lesson-editor-section:last-child {
  margin-bottom: 0;
}

.lesson-editor-section h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem;
}

.lesson-editor-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.lesson-editor-section-header h3 {
  margin: 0;
}

/* Fields */
.lesson-editor-field {
  margin-bottom: 1rem;
}

.lesson-editor-field:last-child {
  margin-bottom: 0;
}

.lesson-editor-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ui-text);
  margin-bottom: 0.375rem;
}

.lesson-editor-field input,
.lesson-editor-field textarea,
.lesson-editor-field select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9rem;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
  transition: border-color 0.15s;
}

.lesson-editor-field input:focus,
.lesson-editor-field textarea:focus,
.lesson-editor-field select:focus {
  outline: none;
  border-color: var(--ui-accent);
}

.lesson-editor-field textarea {
  resize: vertical;
  min-height: 60px;
}

.lesson-editor-row {
  display: flex;
  gap: 1rem;
}

.lesson-editor-row .lesson-editor-field {
  flex: 1;
}

.lesson-editor-field--grow {
  flex: 2 !important;
}

/* Cards */
.lesson-editor-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lesson-editor-card {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  overflow: hidden;
}

.lesson-editor-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--ui-surface-muted);
  border-bottom: 1px solid var(--ui-border);
}

.lesson-editor-card-number {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ui-text);
}

.lesson-editor-card-actions {
  display: flex;
  gap: 0.25rem;
}

.lesson-editor-card-actions button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface);
  color: var(--ui-text-muted);
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.15s;
}

.lesson-editor-card-actions button:hover:not(:disabled) {
  background: var(--ui-surface-muted);
  color: var(--ui-text);
}

.lesson-editor-card-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lesson-editor-card-remove:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-error) 10%, transparent) !important;
  color: var(--ui-error) !important;
  border-color: var(--ui-error);
}

.lesson-editor-card-body {
  padding: 1rem;
}

/* Footer */
.lesson-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface-muted);
}

/* Button variants */
.org-btn--small {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

/* Responsive */
@media (max-width: 600px) {
  .lesson-editor-row {
    flex-direction: column;
  }
  
  .lesson-editor-footer {
    flex-direction: column;
  }
}
/* TemplatePreviewModal Styles */

.template-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.template-preview-modal {
  background: var(--ui-surface);
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Header */
.template-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem;
  border-bottom: 1px solid var(--ui-border);
  gap: 1rem;
}

.template-preview-header-content {
  flex: 1;
  min-width: 0;
}

.template-preview-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.template-preview-type-icon {
  font-size: 1.25rem;
}

.template-preview-type-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.template-preview-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ui-text);
  margin: 0 0 0.5rem;
}

.template-preview-description {
  font-size: 0.95rem;
  color: var(--ui-text-muted);
  margin: 0;
  line-height: 1.4;
}

.template-preview-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--ui-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.template-preview-close:hover {
  color: var(--ui-text);
}

/* Tags */
.template-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--ui-border);
}

.template-preview-tag {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-accent) 20%, transparent);
  color: var(--ui-accent);
}

/* Meta Info */
.template-preview-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface-muted);
}

.template-preview-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.template-preview-meta-label {
  font-size: 0.75rem;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.template-preview-meta-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ui-text);
}

/* Content */
.template-preview-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.template-preview-section {
  margin-bottom: 1.5rem;
}

.template-preview-section:last-child {
  margin-bottom: 0;
}

.template-preview-section h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}

/* Agenda */
.template-preview-agenda {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.template-preview-agenda-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--ui-surface-muted);
  border-radius: 8px;
}

.template-preview-agenda-number {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ui-primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.template-preview-agenda-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.template-preview-agenda-title {
  font-size: 0.9rem;
  color: var(--ui-text);
}

.template-preview-agenda-duration {
  font-size: 0.75rem;
  color: var(--ui-text-muted);
  padding: 0.125rem 0.5rem;
  background: var(--ui-surface);
  border-radius: 4px;
}

/* Outcomes */
.template-preview-outcomes {
  margin: 0;
  padding-left: 1.25rem;
}

.template-preview-outcomes li {
  font-size: 0.9rem;
  color: var(--ui-text);
  padding: 0.25rem 0;
}

/* Lessons */
.template-preview-lessons-count {
  font-size: 0.9rem;
  color: var(--ui-text-secondary);
  margin: 0;
}

/* Footer Info */
.template-preview-footer-info {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  font-size: 0.75rem;
  color: var(--ui-text-muted);
  border-top: 1px solid var(--ui-border);
}

/* Actions */
.template-preview-actions {
  display: flex;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface-muted);
}

.template-preview-delete-confirm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ui-text-muted);
}

/* Responsive */
@media (max-width: 600px) {
  .template-preview-meta {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .template-preview-actions {
    flex-wrap: wrap;
  }
  
  .template-preview-actions .org-btn {
    flex: 1;
    min-width: 45%;
  }
}
/* TemplateEditorModal Styles */

.template-editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.template-editor-modal {
  background: var(--ui-surface);
  border-radius: 12px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Header */
.template-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--ui-border);
}

.template-editor-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ui-text);
  margin: 0;
}

.template-editor-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--ui-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.template-editor-close:hover {
  color: var(--ui-text);
}

/* Content */
.template-editor-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.template-editor-error {
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
  color: var(--ui-error);
  border-radius: 8px;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

/* Sections */
.template-editor-section {
  margin-bottom: 2rem;
}

.template-editor-section:last-child {
  margin-bottom: 0;
}

.template-editor-section h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem;
}

.template-editor-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.template-editor-section-header h3 {
  margin: 0;
}

.template-editor-empty {
  text-align: center;
  padding: 1.5rem;
  color: var(--ui-text-muted);
  font-size: 0.875rem;
  background: var(--ui-surface-muted);
  border-radius: 8px;
}

/* Fields */
.template-editor-field {
  margin-bottom: 1rem;
}

.template-editor-field:last-child {
  margin-bottom: 0;
}

.template-editor-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ui-text);
  margin-bottom: 0.375rem;
}

.template-editor-field input,
.template-editor-field textarea,
.template-editor-field select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9rem;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
  transition: border-color 0.15s;
}

.template-editor-field input:focus,
.template-editor-field textarea:focus,
.template-editor-field select:focus {
  outline: none;
  border-color: var(--ui-accent);
}

.template-editor-field textarea {
  resize: vertical;
  min-height: 60px;
}

.template-editor-row {
  display: flex;
  gap: 1rem;
}

.template-editor-row .template-editor-field {
  flex: 1;
}

.template-editor-field--grow {
  flex: 2 !important;
}

.template-editor-field--small {
  flex: 0.5 !important;
  min-width: 100px;
}

/* Agenda */
.template-editor-agenda {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.template-editor-agenda-item {
  padding: 1rem;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface-muted);
}

.template-editor-agenda-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.template-editor-agenda-number {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ui-primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
}

.template-editor-agenda-remove {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--ui-text-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
}

.template-editor-agenda-remove:hover {
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
  color: var(--ui-error);
}

/* Outcomes */
.template-editor-outcomes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.template-editor-outcome {
  display: flex;
  gap: 0.5rem;
}

.template-editor-outcome input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  font-size: 0.9rem;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
}

.template-editor-outcome input:focus {
  outline: none;
  border-color: var(--ui-accent);
}

.template-editor-outcome-remove {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
}

.template-editor-outcome-remove:hover {
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
  color: var(--ui-error);
  border-color: var(--ui-error);
}

/* Footer */
.template-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface-muted);
}

/* Responsive */
@media (max-width: 600px) {
  .template-editor-row {
    flex-direction: column;
  }
  
  .template-editor-footer {
    flex-direction: column;
  }
}
/* MaterialUploadModal Styles */

.material-upload-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.material-upload-modal {
  background: var(--ui-surface);
  border-radius: 12px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Header */
.material-upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--ui-border);
}

.material-upload-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ui-text);
  margin: 0;
}

.material-upload-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--ui-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.material-upload-close:hover {
  color: var(--ui-text);
}

/* Content */
.material-upload-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.material-upload-error {
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
  color: var(--ui-error);
  border-radius: 8px;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

/* Type Selector */
.material-upload-type-selector {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.material-upload-type-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s;
}

.material-upload-type-btn:hover {
  background: var(--ui-surface-muted);
  color: var(--ui-text);
}

.material-upload-type-btn--active {
  background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

/* Dropzone */
.material-upload-dropzone {
  border: 2px dashed var(--ui-border);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 1.5rem;
}

.material-upload-dropzone:hover {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 5%, transparent);
}

.material-upload-dropzone--dragover {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
}

.material-upload-dropzone--has-file {
  border-style: solid;
  padding: 1rem;
}

.material-upload-dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.material-upload-dropzone-icon {
  font-size: 2.5rem;
  opacity: 0.5;
}

.material-upload-dropzone-text {
  color: var(--ui-text-muted);
  font-size: 0.875rem;
  margin: 0;
}

/* File Info */
.material-upload-file-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
}

.material-upload-file-icon {
  font-size: 1.5rem;
}

.material-upload-file-details {
  flex: 1;
  min-width: 0;
}

.material-upload-file-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ui-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.material-upload-file-size {
  font-size: 0.75rem;
  color: var(--ui-text-muted);
}

.material-upload-file-remove {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}

.material-upload-file-remove:hover {
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
  color: var(--ui-error);
}

/* Fields */
.material-upload-field {
  margin-bottom: 1rem;
}

.material-upload-field:last-child {
  margin-bottom: 0;
}

.material-upload-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ui-text);
  margin-bottom: 0.375rem;
}

.material-upload-field input,
.material-upload-field textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9rem;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
  transition: border-color 0.15s;
}

.material-upload-field input:focus,
.material-upload-field textarea:focus {
  outline: none;
  border-color: var(--ui-accent);
}

.material-upload-field textarea {
  resize: vertical;
  min-height: 60px;
}

/* Footer */
.material-upload-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface-muted);
}
/**
 * Session Selector Modal Styles
 */

.session-selector-description {
    margin-bottom: 1rem;
    color: var(--ui-text-muted);
}

.session-selector-loading,
.session-selector-empty {
    padding: 2rem;
    text-align: center;
    color: var(--ui-text-muted);
}

.session-selector-empty p {
    margin: 0.5rem 0;
}

.session-selector-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.session-selector-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.session-selector-item:hover {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.session-selector-item.selected {
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
    border-color: var(--ui-primary);
}

.session-selector-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.session-selector-item-title {
    font-weight: 500;
    color: var(--ui-text);
}

.session-selector-item-meta {
    font-size: 0.85rem;
    color: var(--ui-text-muted);
}

.session-selector-item-check {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--ui-primary);
}
/**
 * Create Session From Template Modal Styles
 */

.create-session-template-info {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.create-session-template-label {
    color: var(--ui-text-muted);
}

.create-session-template-name {
    font-weight: 500;
    color: var(--ui-text);
}

.create-session-error {
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    color: var(--ui-error);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.create-session-field {
    margin-bottom: 1rem;
}

.create-session-field label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--ui-text);
}

.create-session-field input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    color: var(--ui-text);
}

.create-session-field input:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.create-session-template-details {
    margin-top: 1.5rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border-radius: 8px;
}

.create-session-template-details h4 {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--ui-text-muted);
}

.create-session-template-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.create-session-template-details li {
    padding: 0.25rem 0;
    color: var(--ui-text);
    font-size: 0.9rem;
}

.create-session-template-details li strong {
    color: var(--ui-text-muted);
    font-weight: 500;
}
/**
 * Organization Library Page Styles
 * 
 * Uses --ui-* CSS variables for theming.
 */

.org-library {
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.org-library-back {
  margin-bottom: 1rem;
}

.org-library--loading {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-text-muted);
}

/* Header */
.org-library-header {
  margin-bottom: 1.5rem;
}

.org-library-header h1 {
  margin: 0 0 0.375rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ui-text);
}

.org-library-subtitle {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 0.9375rem;
}

/* Tabs */
.org-library-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
  border-radius: 0.5rem;
  margin-bottom: 1.25rem;
}

.org-library-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--ui-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.org-library-tab:hover {
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.org-library-tab--active {
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.org-library-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-text) 10%, transparent);
  font-size: 0.75rem;
  font-weight: 500;
}

.org-library-tab--active .org-library-tab-count {
  background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
  color: var(--ui-primary);
}

/* Search */
.org-library-search {
  position: relative;
  margin-bottom: 1.25rem;
}

.org-library-search input {
  width: 100%;
  padding: 0.625rem 2.5rem 0.625rem 0.875rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.375rem;
  background: var(--board-bg);
  color: var(--ui-text);
  font-size: 0.9375rem;
}

.org-library-search input:focus {
  outline: none;
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}

.org-library-search input::placeholder {
  color: var(--ui-text-muted);
}

.org-library-search-clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.org-library-search-clear:hover {
  background: color-mix(in srgb, var(--ui-text) 10%, transparent);
  color: var(--ui-text);
}

/* Content */
.org-library-content {
  min-height: 300px;
}

.org-library-loading {
  padding: 3rem;
  text-align: center;
  color: var(--ui-text-muted);
}

/* Empty State */
.org-library-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  background: var(--ui-surface);
  border: 1px dashed var(--ui-border);
  border-radius: 0.75rem;
}

.org-library-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.org-library-empty h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ui-text);
}

.org-library-empty p {
  margin: 0 0 1.5rem;
  color: var(--ui-text-muted);
  font-size: 0.9375rem;
  max-width: 300px;
}

/* Grid */
.org-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Library Card */
.library-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.library-card:hover {
  border-color: var(--ui-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.library-card-content {
  flex: 1;
}

.library-card-title {
  margin: 0 0 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ui-text);
  line-height: 1.3;
}

.library-card-description {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.library-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.library-card-tag {
  display: inline-flex;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
  color: var(--ui-accent);
  font-size: 0.6875rem;
  font-weight: 500;
}

.library-card-tag--more {
  background: color-mix(in srgb, var(--ui-text) 10%, transparent);
  color: var(--ui-text-muted);
}

.library-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ui-border);
  margin-top: auto;
}

.library-card-footer-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.library-card-meta {
  font-size: 0.75rem;
  color: var(--ui-text-muted);
}

.library-card-usage {
  font-size: 0.75rem;
  color: var(--ui-text-muted);
}

.library-card-action {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s;
}

.library-card:hover .library-card-action {
  opacity: 0.7;
}

.library-card-action:hover {
  opacity: 1 !important;
  border-color: var(--ui-primary);
  color: var(--ui-primary);
}

.library-card-delete {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.875rem;
  opacity: 0;
  transition: all 0.15s;
}

.library-card:hover .library-card-delete {
  opacity: 0.5;
}

.library-card-delete:hover {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
}

/* Actions Bar */
.org-library-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

/* Buttons */
.org-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.org-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.org-btn--primary {
  background: var(--ui-primary);
  color: white;
}

.org-btn--primary:hover:not(:disabled) {
  background: var(--ui-primary-hover);
}

/* Responsive */
@media (max-width: 768px) {
  .org-library {
    padding: 1rem;
  }
  
  .org-library-tabs {
    flex-direction: column;
  }
  
  .org-library-tab {
    justify-content: flex-start;
    padding: 0.75rem 1rem;
  }
  
  .org-library-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile (640px and below) ── */
@media (max-width: 640px) {
  .org-library {
    padding: 0.75rem;
  }

  .org-library-header h1 {
    font-size: 1.25rem;
  }

  .org-library-tabs {
    padding: 0.125rem;
    gap: 0.125rem;
  }

  .org-library-tab {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  .org-library-search {
    padding: 0.75rem;
  }

  .org-library-card {
    padding: 0.875rem;
  }

  .org-library-card-title {
    font-size: 0.9375rem;
  }

  .org-library-type-filters {
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .org-library input,
  .org-library select,
  .org-library textarea {
    font-size: 16px;
  }
}
/* Chart Container Styles */

.chart-container {
  position: relative;
  width: 100%;
}

.chart-container--doughnut {
  max-width: 300px;
  margin: 0 auto;
}
/* HostDetailModal Styles */

.host-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.host-detail-modal {
  background: var(--ui-surface);
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Header */
.host-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem;
  border-bottom: 1px solid var(--ui-border);
  gap: 1rem;
}

.host-detail-header-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.host-detail-avatar {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ui-accent);
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
}

.host-detail-header h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ui-text);
  margin: 0;
}

.host-detail-subtitle {
  font-size: 0.875rem;
  color: var(--ui-text-muted);
  margin: 0.25rem 0 0;
}

.host-detail-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--ui-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.host-detail-close:hover {
  color: var(--ui-text);
}

/* Content */
.host-detail-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.host-detail-loading,
.host-detail-error {
  text-align: center;
  padding: 2rem;
  color: var(--ui-text-muted);
}

.host-detail-error {
  color: var(--ui-error);
}

/* Stats Overview */
.host-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.host-detail-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: var(--ui-surface-muted);
  border-radius: 8px;
}

.host-detail-stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ui-text);
}

.host-detail-stat-label {
  font-size: 0.75rem;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

/* Sections */
.host-detail-section {
  margin-bottom: 1.5rem;
}

.host-detail-section:last-child {
  margin-bottom: 0;
}

.host-detail-section h3 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}

/* Types */
.host-detail-types {
  display: flex;
  gap: 1rem;
}

.host-detail-type {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--ui-surface-muted);
  border-radius: 8px;
}

.host-detail-type-icon {
  font-size: 1.5rem;
}

.host-detail-type-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ui-text);
}

.host-detail-type-label {
  font-size: 0.75rem;
  color: var(--ui-text-muted);
}

/* Activity */
.host-detail-activity {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.host-detail-activity-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--ui-border);
}

.host-detail-activity-item:last-child {
  border-bottom: none;
}

.host-detail-activity-label {
  font-size: 0.875rem;
  color: var(--ui-text-muted);
}

.host-detail-activity-value {
  font-size: 0.875rem;
  color: var(--ui-text);
  font-weight: 500;
}

/* Footer */
.host-detail-footer {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface-muted);
}
/**
 * Organization Statistics Page Styles
 * 
 * Uses --ui-* CSS variables for theming.
 */

.org-statistics {
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.org-statistics-back {
  margin-bottom: 1rem;
}

.org-statistics--loading {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-text-muted);
}

/* Header */
.org-statistics-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.org-statistics-header-content h1 {
  margin: 0 0 0.375rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ui-text);
}

.org-statistics-subtitle {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 0.9375rem;
}

/* Date Range Selector */
.org-statistics-date-range {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
  border-radius: 0.5rem;
}

.org-statistics-date-btn {
  padding: 0.375rem 0.75rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--ui-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.org-statistics-date-btn:hover {
  color: var(--ui-text);
}

.org-statistics-date-btn--active {
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Sections */
.org-statistics-section {
  margin-bottom: 2rem;
}

.org-statistics-section h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ui-text);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ui-border);
}

.org-statistics-loading,
.org-statistics-empty {
  padding: 2rem;
  text-align: center;
  color: var(--ui-text-muted);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
}

/* Stats Grid */
.org-statistics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* Stat Card */
.org-stat-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
}

.org-stat-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.org-stat-card-value {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ui-text);
  line-height: 1.2;
}

.org-stat-card-label {
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
}

.org-stat-card-sub {
  font-size: 0.75rem;
  color: var(--ui-text-muted);
  margin-top: 0.25rem;
}

.org-stat-card-trend {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}

.org-stat-card-trend--up {
  background: color-mix(in srgb, var(--ui-success) 15%, transparent);
  color: var(--ui-success);
}

.org-stat-card-trend--down {
  background: color-mix(in srgb, var(--ui-error) 15%, transparent);
  color: var(--ui-error);
}

/* Session Types */
.org-statistics-types {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.org-statistics-type-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
  min-width: 180px;
}

.org-statistics-type-icon {
  font-size: 2rem;
}

.org-statistics-type-content {
  display: flex;
  flex-direction: column;
}

.org-statistics-type-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ui-text);
}

.org-statistics-type-label {
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
}

/* Host Table */
.org-statistics-table-container {
  overflow-x: auto;
}

.org-statistics-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.org-statistics-table th,
.org-statistics-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--ui-border);
}

.org-statistics-table th {
  background: color-mix(in srgb, var(--ui-text) 5%, transparent);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ui-text-muted);
}

.org-statistics-table td {
  font-size: 0.875rem;
  color: var(--ui-text);
}

.org-statistics-table tbody tr:last-child td {
  border-bottom: none;
}

.org-statistics-table tbody tr:hover {
  background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

/* Library Stats */
.org-statistics-library {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.org-statistics-library-card {
  padding: 1.25rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
}

.org-statistics-library-card h3 {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ui-text);
}

.org-statistics-library-total {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.org-statistics-library-value {
  font-size: 2rem;
  font-weight: 600;
  color: var(--ui-text);
}

.org-statistics-library-label {
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
}

.org-statistics-library-size {
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
}

.org-statistics-library-top {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ui-border);
}

.org-statistics-library-top h4 {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.org-statistics-library-top ol {
  margin: 0;
  padding-left: 1.25rem;
}

.org-statistics-library-top li {
  font-size: 0.8125rem;
  color: var(--ui-text);
  margin-bottom: 0.25rem;
}

.org-statistics-usage-count {
  color: var(--ui-text-muted);
  font-size: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
  .org-statistics {
    padding: 1rem;
  }
  
  .org-statistics-header {
    flex-direction: column;
  }
  
  .org-statistics-date-range {
    width: 100%;
    justify-content: space-between;
  }
  
  .org-stat-card-value {
    font-size: 1.5rem;
  }
  
  .org-statistics-table {
    font-size: 0.8125rem;
  }
  
  .org-statistics-table th,
  .org-statistics-table td {
    padding: 0.5rem 0.75rem;
  }
}

/* ── Mobile (640px and below) ── */
@media (max-width: 640px) {
  .org-statistics {
    padding: 0.75rem;
  }

  .org-statistics-header-content h1 {
    font-size: 1.25rem;
  }

  .org-statistics-date-range {
    flex-wrap: wrap;
    gap: 0.125rem;
  }

  .org-statistics-date-btn {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
  }

  .org-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .org-statistics-library-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .org-statistics-type-cards {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .org-stat-card {
    padding: 0.875rem;
  }

  .org-statistics-table {
    font-size: 0.75rem;
  }

  .org-statistics input,
  .org-statistics select,
  .org-statistics textarea {
    font-size: 16px;
  }
}
/**
 * Organization Meeting Health Dashboard Styles
 *
 * Uses --ui-* CSS variables for theming.
 */

.org-health {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.org-health--loading {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-text-muted);
}

.org-health-back {
    margin-bottom: 1rem;
}

/* Header with month navigator */
.org-health-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.org-health-header-content h1 {
    margin: 0 0 0.375rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ui-text);
}

.org-health-subtitle {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 0.9375rem;
}

/* Month Navigator */
.org-health-month-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border-radius: 0.5rem;
}

.org-health-month-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--ui-text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.org-health-month-btn:hover:not(:disabled) {
    color: var(--ui-text);
    background: var(--ui-surface);
}

.org-health-month-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.org-health-month-label {
    min-width: 10rem;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ui-text);
}

/* Health Cards Grid */
.org-health-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.org-health-card {
    padding: 1.25rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
}

.org-health-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.org-health-card-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-muted);
}

.org-health-card-trend {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
}

.org-health-card-trend--positive {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

.org-health-card-trend--negative {
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    color: var(--ui-error);
}

.org-health-card-trend--neutral {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text-muted);
}

.org-health-card-main {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.org-health-card-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.2;
}

.org-health-card-unit {
    font-size: 0.875rem;
    color: var(--ui-text-muted);
}

/* Progress Bar */
.org-health-progress {
    width: 100%;
    height: 0.5rem;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.org-health-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
    background: var(--ui-accent);
}

.org-health-progress-fill--success {
    background: var(--ui-success);
}

.org-health-progress-fill--warning {
    background: var(--ui-warning);
}

.org-health-progress-fill--error {
    background: var(--ui-error);
}

/* Card Details List */
.org-health-card-details {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.org-health-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.org-health-detail-label {
    color: var(--ui-text-muted);
}

.org-health-detail-value {
    color: var(--ui-text);
    font-weight: 500;
}

/* Trend Section */
.org-health-section {
    margin-bottom: 2rem;
}

.org-health-section h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ui-border);
}

.org-health-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1rem;
}

.org-health-chart-card {
    padding: 1.25rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
}

.org-health-chart-card h3 {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text);
}

/* Department Table - reuses org-statistics-table patterns */
.org-health-empty {
    padding: 2rem;
    text-align: center;
    color: var(--ui-text-muted);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .org-health {
        padding: 1rem;
    }

    .org-health-header {
        flex-direction: column;
    }

    .org-health-cards {
        grid-template-columns: 1fr;
    }

    .org-health-charts {
        grid-template-columns: 1fr;
    }

    .org-health-card-value {
        font-size: 1.5rem;
    }
}

/* ── Mobile (640px and below) ── */
@media (max-width: 640px) {
    .org-health {
        padding: 0.75rem;
    }

    .org-health-header-content h1 {
        font-size: 1.25rem;
    }

    .org-health-month-nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .org-health-month-label {
        min-width: 8rem;
    }

    .org-health-cards {
        gap: 0.75rem;
    }

    .org-health-card {
        padding: 1rem;
    }

    .org-health-charts {
        gap: 0.75rem;
    }

    .org-health-chart {
        padding: 1rem;
    }

    .org-health input,
    .org-health select,
    .org-health textarea {
        font-size: 16px;
    }
}
/**
 * PricingPage styles
 */

.pricing-page {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 32px 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.pricing-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.pricing-title {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ui-text);
}

.pricing-subtitle {
    margin: 12px 0 0;
    font-size: 1.125rem;
    color: var(--ui-text-muted);
    line-height: 1.6;
}

/* Sections */
.pricing-section,
.comparison-section,
.faq-section {
    width: 100%;
}

/* Loading State */
.pricing-loading {
    display: flex;
    justify-content: center;
}

.pricing-grid-skeleton {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1200px;
}

.pricing-card-skeleton {
    height: 400px;
}

@media (max-width: 1200px) {
    .pricing-grid-skeleton {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .pricing-grid-skeleton {
        grid-template-columns: 1fr;
    }
}

/* Error State */
.pricing-error {
    text-align: center;
    padding: 48px 24px;
    max-width: 400px;
    margin: 0 auto;
}

.pricing-error h2 {
    margin: 0 0 12px;
    color: var(--ui-text);
}

.pricing-error p {
    margin: 0 0 20px;
    color: var(--ui-text-muted);
}

/* Empty State */
.pricing-empty {
    text-align: center;
    padding: 48px 24px;
    max-width: 400px;
    margin: 0 auto;
}

.pricing-empty p {
    margin: 0;
    color: var(--ui-text-muted);
}

/* FAQ Section */
.faq-title {
    margin: 0 0 24px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ui-text);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    padding: 20px;
}

.faq-item h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}

.faq-item p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .pricing-page {
        gap: 32px;
        padding: 24px 16px;
    }

    .pricing-title {
        font-size: 2rem;
    }

    .pricing-subtitle {
        font-size: 1rem;
    }

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

@media (max-width: 480px) {
    .pricing-title {
        font-size: 1.75rem;
    }
}
/**
 * CheckoutPage styles
 */

.checkout-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Header */
.checkout-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    text-decoration: none;
}

.back-link:hover {
    color: var(--ui-text);
}

.checkout-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ui-text);
}

/* Container */
.checkout-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* Error State */
.checkout-error-state {
    text-align: center;
    padding: 48px 24px;
    max-width: 400px;
    margin: 0 auto;
}

.checkout-error-state h2 {
    margin: 0 0 12px;
    color: var(--ui-text);
}

.checkout-error-state p {
    margin: 0 0 24px;
    color: var(--ui-text-muted);
}

/* Plan Details */
.checkout-plan-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}

.plan-name {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ui-text);
}

.plan-description {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    line-height: 1.5;
}

/* Billing Toggle */
.billing-toggle {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.toggle-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ui-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-option:hover {
    color: var(--ui-text);
}

.toggle-option.active {
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ui-text) 10%, transparent);
}

.discount-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ui-success);
    text-transform: uppercase;
}

/* Price */
.plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ui-text);
}

.price-period {
    font-size: 1rem;
    color: var(--ui-text-muted);
}

/* Features */
.plan-features h3 {
    margin: 0 0 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text-secondary);
}

.plan-features ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--ui-text);
}

.plan-features li::before {
    content: '✓';
    color: var(--ui-success);
    font-weight: 600;
}

/* Form Container (legacy) */
.checkout-form-container {
    padding: 24px;
}

/* Payment Panel (Stripe redirect) */
.checkout-payment-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}

.stripe-checkout-info p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    line-height: 1.5;
}

.checkout-error {
    padding: 12px 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-error) 10%, transparent);
    color: var(--ui-error);
    font-size: 0.875rem;
}

.checkout-stripe-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
}

.checkout-stripe-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .checkout-page {
        padding: 16px;
    }

    .checkout-container {
        grid-template-columns: 1fr;
    }

    .checkout-title {
        font-size: 1.5rem;
    }

    .price-amount {
        font-size: 1.5rem;
    }
}
/**
 * SubscriptionSuccessPage styles
 */

.success-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 24px;
}

.success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    max-width: 500px;
    padding: 48px 32px;
}

/* Icon */
.success-icon {
    font-size: 4rem;
    line-height: 1;
    animation: bounce 0.6s ease;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* Title */
.success-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ui-text);
}

.success-message {
    margin: 0;
    font-size: 1rem;
    color: var(--ui-text-muted);
    line-height: 1.5;
}

/* Details */
.success-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-label {
    font-size: 0.875rem;
    color: var(--ui-text-muted);
}

.detail-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ui-text);
}

.status-active {
    color: var(--ui-success);
}

/* Invoice Reference */
.invoice-reference {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.invoice-label {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.invoice-number {
    font-family: monospace;
    font-size: 0.875rem;
    padding: 6px 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    color: var(--ui-text);
}

/* What's Next */
.whats-next {
    width: 100%;
    text-align: left;
}

.whats-next h2 {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}

.whats-next ul {
    margin: 0;
    padding: 0 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.whats-next li {
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    line-height: 1.5;
}

/* Actions */
.success-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.primary-action {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

.secondary-action {
    width: 100%;
    padding: 10px 20px;
    font-size: 0.875rem;
    text-align: center;
}

/* Responsive */
@media (max-width: 480px) {
    .success-content {
        padding: 32px 20px;
    }

    .success-icon {
        font-size: 3rem;
    }

    .success-title {
        font-size: 1.5rem;
    }
}
/**
 * AccountBillingPage styles
 */

.billing-page {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.billing-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ui-text);
}

/* Sections */
.billing-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text-secondary);
}

/* Subscription Card */
.subscription-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}

.sub-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.sub-plan {
    display: flex;
    align-items: center;
    gap: 12px;
}

.plan-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ui-text);
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge.active {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

.status-badge.past_due {
    background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
    color: var(--ui-warning);
}

.status-badge.canceled {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text-muted);
}

.sub-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ui-text);
}

.price-period {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ui-text-muted);
}

/* Sub Details */
.sub-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.detail-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ui-text);
}

/* Cancel Notice */
.cancel-notice {
    padding: 12px 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-warning) 30%, transparent);
    font-size: 0.875rem;
    color: var(--ui-warning);
}

/* Sub Actions */
.sub-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cancel-btn {
    color: var(--ui-error);
    border-color: var(--ui-error);
}

.cancel-btn:hover {
    background: color-mix(in srgb, var(--ui-error) 10%, transparent);
}

/* No Subscription */
.no-subscription {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px;
    text-align: center;
}

.no-subscription p {
    margin: 0;
    color: var(--ui-text-muted);
}

/* Invoice List */
.invoice-list {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.invoice-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ui-border);
}

.invoice-row:last-child {
    border-bottom: none;
}

.invoice-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.invoice-number {
    font-family: monospace;
    font-size: 0.875rem;
    color: var(--ui-text);
}

.invoice-date {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.invoice-amount {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text);
}

/* Invoice Status */
.invoice-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.invoice-status.paid {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

.invoice-status.open {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
}

.invoice-status.past-due {
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    color: var(--ui-error);
}

.invoice-status.void {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text-muted);
}

/* No Invoices */
.no-invoices {
    padding: 32px;
    text-align: center;
}

.no-invoices p {
    margin: 0;
    color: var(--ui-text-muted);
}

/* Responsive */
@media (max-width: 600px) {
    .billing-page {
        padding: 16px;
    }

    .sub-details {
        grid-template-columns: 1fr;
    }

    .invoice-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .invoice-row > *:not(:first-child) {
        justify-self: start;
    }
}
/**
 * AIConfigGenerator styles
 */

.ai-generator-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ui-text) 50%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.ai-generator-modal {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px color-mix(in srgb, var(--ui-text) 25%, transparent);
}

.ai-generator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--ui-border);
}

.ai-generator-header h2 {
    margin: 0;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-generator-header h2::before {
    content: '✨';
}

.ai-generator-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--ui-text-muted);
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

.ai-generator-close:hover {
    color: var(--ui-text);
}

/* Input Section */
.ai-generator-input-section {
    padding: 1.5rem;
}

.ai-generator-rate-limit {
    margin-bottom: 1rem;
    text-align: right;
}

.rate-limit-badge {
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    background: var(--ui-surface-muted);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
}

.ai-generator-prompt-area textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--board-bg);
    color: var(--ui-text);
    font-size: 1rem;
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.ai-generator-prompt-area textarea:focus {
    outline: none;
    border-color: var(--ui-accent);
}

.ai-generator-prompt-area textarea::placeholder {
    color: var(--ui-text-muted);
}

.ai-generator-examples-toggle {
    margin: 1rem 0;
}

.examples-toggle-btn {
    background: none;
    border: none;
    color: var(--ui-accent);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0;
}

.examples-toggle-btn:hover {
    text-decoration: underline;
}

.ai-generator-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--ui-surface-muted);
    border-radius: 8px;
}

.example-prompt-btn {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--ui-text);
    transition: all 0.15s ease;
}

.example-prompt-btn:hover {
    border-color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
}

.ai-generator-error {
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    color: var(--ui-error);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.ai-generator-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.ai-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ai-spin 0.75s linear infinite;
    margin-right: 0.5rem;
}

@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

/* Result Section */
.ai-generator-result-section {
    padding: 1.5rem;
}

.ai-result-preview h3 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--ui-text-muted);
}

.ai-result-card {
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 1.25rem;
}

.ai-result-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.ai-result-slug {
    font-family: monospace;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    margin-bottom: 0.75rem;
}

.ai-result-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ui-accent);
    margin-bottom: 0.5rem;
}

.ai-result-limits {
    font-size: 0.875rem;
    color: var(--ui-text-secondary);
    margin-bottom: 0.75rem;
}

.ai-result-description {
    font-size: 0.9375rem;
    color: var(--ui-text);
    line-height: 1.5;
}

.ai-result-coupon {
    margin-top: 1.5rem;
}

.ai-result-coupon h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
    color: var(--ui-text-muted);
}

.ai-coupon-card {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    border: 1px dashed var(--ui-success);
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
}

.coupon-code {
    font-family: monospace;
    font-weight: 600;
    font-size: 1.125rem;
}

.coupon-discount {
    font-weight: 600;
    color: var(--ui-success);
}

.ai-result-explanation {
    margin-top: 1.5rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    border-radius: 8px;
}

.ai-result-explanation h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    color: var(--ui-accent);
}

.ai-result-explanation p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ui-text);
}

.ai-result-features {
    margin-top: 1.5rem;
}

.ai-result-features h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
    color: var(--ui-text-muted);
}

.ai-features-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ai-feature-badge {
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    color: var(--ui-success);
}
/**
 * ConfigDiffView styles
 */

.config-diff-view {
    padding: 1.5rem;
}

.diff-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.diff-header h3 {
    margin: 0;
    font-size: 1.125rem;
}

.diff-summary {
    font-size: 0.875rem;
    color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
}

.diff-preview {
    margin-bottom: 1.5rem;
}

.diff-card {
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 1.25rem;
}

.diff-card-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-muted);
    margin-bottom: 0.5rem;
}

.diff-card-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.diff-card-price {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--ui-accent);
}

.diff-changes {
    margin-bottom: 1.5rem;
}

.diff-changes h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
    color: var(--ui-text-muted);
}

.diff-list {
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    overflow: hidden;
}

.diff-row {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.diff-row:last-child {
    border-bottom: none;
}

.diff-row.diff-addition {
    background: color-mix(in srgb, var(--ui-success) 10%, transparent);
}

.diff-row.diff-removal {
    background: color-mix(in srgb, var(--ui-error) 10%, transparent);
}

.diff-row.diff-change {
    background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
}

.diff-field {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--ui-text);
}

.diff-values {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.diff-old {
    color: var(--ui-error);
    text-decoration: line-through;
    opacity: 0.8;
    font-family: monospace;
    white-space: pre-wrap;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.diff-arrow {
    color: var(--ui-text-muted);
    flex-shrink: 0;
}

.diff-new {
    color: var(--ui-success);
    font-weight: 500;
    font-family: monospace;
    white-space: pre-wrap;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.diff-explanation {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    border-radius: 8px;
}

.diff-explanation h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    color: var(--ui-accent);
}

.diff-explanation p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ui-text);
}

.diff-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}
/* ConfigEditor styles */

.config-editor {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.editor-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.editor-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-assist-btn {
    background: linear-gradient(135deg, var(--ui-accent), var(--ui-primary));
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.ai-assist-btn:hover {
    opacity: 0.9;
}

.back-btn {
    background: transparent;
    border: none;
    color: var(--ui-text-muted);
    cursor: pointer;
    font-size: 0.875rem;
}

.back-btn:hover {
    color: var(--ui-primary);
}

.editor-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ui-text);
}

.version-warning {
    padding: 12px 16px;
    background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
    border: 1px solid var(--ui-warning);
    border-radius: 8px;
    color: var(--ui-warning);
    font-size: 0.875rem;
}

.error-banner {
    padding: 12px 16px;
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    border: 1px solid var(--ui-error);
    border-radius: 8px;
    color: var(--ui-error);
    font-size: 0.875rem;
}

/* Layout */
.editor-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 24px;
    align-items: start;
}

/* Form */
.editor-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-section {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 20px;
}

.form-section h3 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}

.form-row {
    margin-bottom: 16px;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-grid:last-child {
    margin-bottom: 0;
}

.form-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ui-text-muted);
}

.form-input,
.form-select,
.form-textarea {
    padding: 10px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    width: 100%;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.form-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Language tabs */
.lang-tabs {
    display: flex;
    gap: 4px;
}

.lang-tab {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    cursor: pointer;
}

.lang-tab:hover {
    border-color: var(--ui-primary);
}

.lang-tab.active {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: white;
}

/* Input decorations */
.input-with-prefix,
.input-with-suffix {
    display: flex;
    align-items: stretch;
}

.input-prefix,
.input-suffix {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
    font-size: 0.875rem;
}

.input-prefix {
    border-right: none;
    border-radius: 6px 0 0 6px;
}

.input-suffix {
    border-left: none;
    border-radius: 0 6px 6px 0;
}

.input-with-prefix .form-input {
    border-radius: 0 6px 6px 0;
}

.input-with-suffix .form-input {
    border-radius: 6px 0 0 6px;
}

/* Unlimited toggle */
.unlimited-toggle {
    margin-bottom: 8px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    cursor: pointer;
}

.checkbox-label input {
    cursor: pointer;
}

.visibility-toggle {
    align-self: end;
    padding-bottom: 10px;
}

/* Features grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.feature-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.feature-checkbox:hover {
    border-color: var(--ui-primary);
}

.feature-checkbox:has(input:checked) {
    background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
    border-color: var(--ui-primary);
}

.feature-checkbox input {
    cursor: pointer;
}

.feature-name {
    font-size: 0.75rem;
    color: var(--ui-text);
    word-break: break-word;
}

/* Form actions */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}

/* Preview */
.editor-preview {
    position: sticky;
    top: 24px;
}

.editor-preview h3 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}

/* Responsive */
@media (max-width: 1024px) {
    .editor-layout {
        grid-template-columns: 1fr;
    }

    .editor-preview {
        position: static;
        order: -1;
    }

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

@media (max-width: 640px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

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

/* AI Modify Modal */
.ai-modify-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ui-text) 50%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.ai-modify-modal {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 20px 40px color-mix(in srgb, var(--ui-text) 25%, transparent);
}

.ai-modify-modal-wide {
    max-width: 700px;
}

.ai-modify-modal h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
}

.ai-modify-hint {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
}

.ai-modify-modal textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--board-bg);
    color: var(--ui-text);
    font-size: 0.9375rem;
    font-family: inherit;
    resize: vertical;
}

.ai-modify-modal textarea:focus {
    outline: none;
    border-color: var(--ui-accent);
}

.ai-modify-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}
/* ConfigList styles */

.config-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Toolbar */
.config-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.search-input {
    padding: 8px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    min-width: 200px;
}

.search-input:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    cursor: pointer;
}

.inactive-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    cursor: pointer;
}

.inactive-toggle input {
    cursor: pointer;
}

/* Error banner */
.error-banner {
    padding: 12px 16px;
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    border: 1px solid var(--ui-error);
    border-radius: 8px;
    color: var(--ui-error);
    font-size: 0.875rem;
}

/* Table */
.config-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}

.config-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.config-table th,
.config-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--ui-border);
}

.config-table th {
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    color: var(--ui-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.config-table tbody tr:last-child td {
    border-bottom: none;
}

.config-table tbody tr:hover {
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

.inactive-row {
    opacity: 0.6;
}

.empty-state {
    text-align: center;
    color: var(--ui-text-muted);
    padding: 48px 16px !important;
}

/* Cells */
.name-cell {
    font-weight: 500;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.config-badge {
    font-size: 0.625rem;
    padding: 2px 6px;
    background: var(--ui-accent);
    color: white;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.slug-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slug-cell code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    padding: 2px 6px;
    border-radius: 4px;
}

.version-badge {
    font-size: 0.625rem;
    padding: 2px 4px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text-muted);
    border-radius: 3px;
}

.category-badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    text-transform: capitalize;
}

.badge-individual {
    background: color-mix(in srgb, var(--ui-success) 20%, transparent);
    color: var(--ui-success);
}

.badge-team {
    background: color-mix(in srgb, var(--ui-accent) 20%, transparent);
    color: var(--ui-accent);
}

.badge-enterprise {
    background: color-mix(in srgb, var(--ui-primary) 20%, transparent);
    color: var(--ui-primary);
}

.price-cell {
    font-weight: 600;
    color: var(--ui-text);
}

.price-period {
    font-weight: 400;
    color: var(--ui-text-muted);
    font-size: 0.75rem;
}

.sessions-cell {
    font-weight: 500;
}

.status-badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.status-active {
    background: color-mix(in srgb, var(--ui-success) 20%, transparent);
    color: var(--ui-success);
}

.status-hidden {
    background: color-mix(in srgb, var(--ui-warning) 20%, transparent);
    color: var(--ui-warning);
}

.actions-cell {
    display: flex;
    gap: 4px;
}

.action-btn {
    padding: 6px 8px;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.action-btn:hover {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.action-danger:hover {
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    border-color: var(--ui-error);
}

/* Responsive */
@media (max-width: 768px) {
    .config-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

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

    .search-input {
        min-width: 100%;
    }
}
/* CouponManager styles */

.coupon-manager {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Toolbar */
.coupon-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.inactive-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    cursor: pointer;
}

.inactive-toggle input {
    cursor: pointer;
}

/* Error banner */
.error-banner {
    padding: 12px 16px;
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    border: 1px solid var(--ui-error);
    border-radius: 8px;
    color: var(--ui-error);
    font-size: 0.875rem;
}

/* Table */
.coupon-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}

.coupon-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.coupon-table th,
.coupon-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--ui-border);
}

.coupon-table th {
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    color: var(--ui-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.coupon-table tbody tr:last-child td {
    border-bottom: none;
}

.coupon-table tbody tr:hover {
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

.inactive-row {
    opacity: 0.6;
}

.empty-state {
    text-align: center;
    color: var(--ui-text-muted);
    padding: 48px 16px !important;
}

.code-cell code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
    color: var(--ui-primary);
    padding: 4px 8px;
    border-radius: 4px;
}

.discount-cell {
    font-weight: 600;
    color: var(--ui-success);
}

.duration-cell {
    text-transform: capitalize;
}

.duration-months {
    color: var(--ui-text-muted);
    font-size: 0.75rem;
}

.uses-cell {
    font-weight: 500;
}

.status-badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    text-transform: capitalize;
}

.status-active {
    background: color-mix(in srgb, var(--ui-success) 20%, transparent);
    color: var(--ui-success);
}

.status-inactive {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text-muted);
}

.status-expired {
    background: color-mix(in srgb, var(--ui-error) 20%, transparent);
    color: var(--ui-error);
}

.status-exhausted {
    background: color-mix(in srgb, var(--ui-warning) 20%, transparent);
    color: var(--ui-warning);
}

.actions-cell {
    display: flex;
    gap: 4px;
}

.action-btn {
    padding: 6px 8px;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.action-btn:hover {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.action-danger:hover {
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    border-color: var(--ui-error);
}

/* Coupon Editor */
.coupon-editor {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 600px;
}

.editor-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.back-btn {
    background: transparent;
    border: none;
    color: var(--ui-text-muted);
    cursor: pointer;
    font-size: 0.875rem;
}

.back-btn:hover {
    color: var(--ui-primary);
}

.editor-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ui-text);
}

.coupon-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 20px;
}

.form-row {
    display: flex;
    flex-direction: column;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ui-text-muted);
}

.form-input,
.form-select,
.form-textarea {
    padding: 10px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    width: 100%;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.form-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-textarea {
    resize: vertical;
    min-height: 60px;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    font-weight: 400;
}

.code-input-group {
    display: flex;
    gap: 8px;
}

.code-input-group .form-input {
    flex: 1;
}

.generate-btn {
    padding: 8px 12px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
}

.generate-btn:hover {
    background: color-mix(in srgb, var(--ui-text) 15%, transparent);
}

.input-with-suffix {
    display: flex;
    align-items: stretch;
}

.input-suffix {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border: 1px solid var(--ui-border);
    border-left: none;
    border-radius: 0 6px 6px 0;
    color: var(--ui-text-muted);
    font-size: 0.875rem;
}

.input-with-suffix .form-input {
    border-radius: 6px 0 0 6px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    cursor: pointer;
    color: var(--ui-text);
}

.checkbox-label input {
    cursor: pointer;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}

/* Responsive */
@media (max-width: 640px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}
/* RetentionOfferEditor styles */

.retention-editor {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.retention-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.retention-description {
    color: var(--ui-text-muted);
    font-size: 0.875rem;
    margin: 0;
    max-width: 600px;
}

/* Error banner */
.error-banner {
    padding: 12px 16px;
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    border: 1px solid var(--ui-error);
    border-radius: 8px;
    color: var(--ui-error);
    font-size: 0.875rem;
}

/* Offers List */
.offers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.offer-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    position: relative;
}

.offer-card.inactive {
    opacity: 0.6;
}

.skeleton-card {
    padding: 0;
    overflow: hidden;
}

.empty-state {
    text-align: center;
    color: var(--ui-text-muted);
    padding: 48px 16px;
    background: var(--ui-surface);
    border: 1px dashed var(--ui-border);
    border-radius: 8px;
}

.offer-sequence {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-primary);
    color: white;
    font-weight: 700;
    border-radius: 50%;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.offer-content {
    flex: 1;
    min-width: 0;
}

.offer-title {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}

.offer-desc {
    margin: 0 0 8px 0;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.offer-meta {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
}

.offer-value {
    color: var(--ui-success);
    font-weight: 600;
}

.offer-duration,
.offer-cooldown {
    color: var(--ui-text-muted);
}

.offer-actions {
    display: flex;
    gap: 4px;
}

.action-btn {
    padding: 6px 8px;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.action-btn:hover {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.inactive-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.625rem;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text-muted);
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Preview */
.retention-preview {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 20px;
}

.retention-preview h3 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}

.flow-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 0;
}

.flow-step {
    display: flex;
    align-items: center;
    gap: 8px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    padding: 10px 14px;
    border-radius: 8px;
    flex-shrink: 0;
}

.flow-end {
    background: color-mix(in srgb, var(--ui-error) 10%, transparent);
}

.step-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50%;
}

.flow-end .step-number {
    background: var(--ui-error);
}

.step-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.step-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ui-text);
}

.step-value {
    font-size: 0.75rem;
    color: var(--ui-success);
    font-weight: 600;
}

.step-arrow {
    color: var(--ui-text-muted);
    font-size: 1.25rem;
}

/* Form */
.retention-form-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 600px;
}

.editor-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.back-btn {
    background: transparent;
    border: none;
    color: var(--ui-text-muted);
    cursor: pointer;
    font-size: 0.875rem;
}

.back-btn:hover {
    color: var(--ui-primary);
}

.editor-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ui-text);
}

.retention-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 20px;
}

.form-row {
    display: flex;
    flex-direction: column;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ui-text-muted);
}

.form-input,
.form-select,
.form-textarea {
    padding: 10px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    width: 100%;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.form-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-textarea {
    resize: vertical;
    min-height: 60px;
}

.lang-tabs {
    display: flex;
    gap: 4px;
}

.lang-tab {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    cursor: pointer;
}

.lang-tab:hover {
    border-color: var(--ui-primary);
}

.lang-tab.active {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: white;
}

.input-with-suffix {
    display: flex;
    align-items: stretch;
}

.input-suffix {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border: 1px solid var(--ui-border);
    border-left: none;
    border-radius: 0 6px 6px 0;
    color: var(--ui-text-muted);
    font-size: 0.875rem;
}

.input-with-suffix .form-input {
    border-radius: 6px 0 0 6px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    cursor: pointer;
    color: var(--ui-text);
}

.checkbox-label input {
    cursor: pointer;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .retention-header {
        flex-direction: column;
    }

    .flow-preview {
        flex-wrap: wrap;
    }

    .step-arrow {
        display: none;
    }
}

@media (max-width: 640px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}
/* SubscriptionUserList styles */

.subscription-user-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Toolbar */
.user-toolbar {
    display: flex;
    gap: 16px;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    cursor: pointer;
}

/* Error banner */
.error-banner {
    padding: 12px 16px;
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    border: 1px solid var(--ui-error);
    border-radius: 8px;
    color: var(--ui-error);
    font-size: 0.875rem;
}

/* Layout */
.user-list-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 24px;
    align-items: start;
}

.user-list-layout:not(:has(.user-detail-panel)) {
    grid-template-columns: 1fr;
}

/* Table */
.user-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}

.user-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.user-table th,
.user-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--ui-border);
}

.user-table th {
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    color: var(--ui-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.user-table tbody tr:last-child td {
    border-bottom: none;
}

.clickable-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.clickable-row:hover {
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

.clickable-row.selected {
    background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
}

.empty-state {
    text-align: center;
    color: var(--ui-text-muted);
    padding: 48px 16px !important;
}

.user-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-email {
    font-weight: 500;
    color: var(--ui-text);
}

.user-name {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.tier-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.billing-badge {
    font-size: 0.625rem;
    padding: 2px 4px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text-muted);
    border-radius: 3px;
    text-transform: uppercase;
}

.status-badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    text-transform: capitalize;
}

.status-active {
    background: color-mix(in srgb, var(--ui-success) 20%, transparent);
    color: var(--ui-success);
}

.status-trialing {
    background: color-mix(in srgb, var(--ui-accent) 20%, transparent);
    color: var(--ui-accent);
}

.status-canceled {
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    color: var(--ui-text-muted);
}

.status-warning {
    background: color-mix(in srgb, var(--ui-warning) 20%, transparent);
    color: var(--ui-warning);
}

.cancel-badge {
    font-size: 0.625rem;
    padding: 2px 4px;
    background: color-mix(in srgb, var(--ui-error) 20%, transparent);
    color: var(--ui-error);
    border-radius: 3px;
    margin-left: 4px;
}

.date-cell {
    white-space: nowrap;
}

.sessions-cell {
    font-weight: 500;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-top: 1px solid var(--ui-border);
}

.page-info {
    font-size: 0.875rem;
    color: var(--ui-text-muted);
}

/* Detail Panel */
.user-detail-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 20px;
    position: sticky;
    top: 24px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.panel-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}

.close-btn {
    background: transparent;
    border: none;
    color: var(--ui-text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
}

.close-btn:hover {
    color: var(--ui-text);
}

.panel-loading {
    padding: 20px 0;
}

.detail-section {
    margin-bottom: 20px;
}

.detail-section:last-child {
    margin-bottom: 0;
}

.detail-section h4 {
    margin: 0 0 12px 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    margin: 0;
}

.detail-list dt {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
}

.detail-list dd {
    font-size: 0.8125rem;
    color: var(--ui-text);
    margin: 0;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.cancel-btn {
    background: color-mix(in srgb, var(--ui-error) 10%, transparent);
    border-color: var(--ui-error);
    color: var(--ui-error);
}

.cancel-btn:hover {
    background: color-mix(in srgb, var(--ui-error) 20%, transparent);
}

.no-history {
    color: var(--ui-text-muted);
    font-size: 0.875rem;
    margin: 0;
}

.history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-item {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border-radius: 4px;
    font-size: 0.8125rem;
}

.history-action {
    font-weight: 500;
    color: var(--ui-primary);
    text-transform: capitalize;
}

.history-date {
    color: var(--ui-text-muted);
}

.history-reason {
    color: var(--ui-text-muted);
    font-style: italic;
    width: 100%;
}

/* Responsive */
@media (max-width: 1024px) {
    .user-list-layout {
        grid-template-columns: 1fr;
    }

    .user-detail-panel {
        position: static;
        order: -1;
    }
}
/* RevenueStats styles */

.revenue-stats {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.revenue-stats.empty {
    padding: 48px;
    text-align: center;
    color: var(--ui-text-muted);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
}

.stat-card.highlight {
    border-color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary) 5%, var(--ui-surface));
}

.stat-icon {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border-radius: 8px;
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ui-text);
}

.stat-value.positive {
    color: var(--ui-success);
}

.stat-value.negative {
    color: var(--ui-error);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Activity Section */
.activity-section h3,
.tier-breakdown h3,
.recent-activity h3 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}

.activity-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.activity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    text-align: center;
}

.activity-card.success {
    border-left: 3px solid var(--ui-success);
}

.activity-card.warning {
    border-left: 3px solid var(--ui-error);
}

.activity-card.info {
    border-left: 3px solid var(--ui-accent);
}

.activity-card.neutral {
    border-left: 3px solid var(--ui-text-muted);
}

.activity-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ui-text);
}

.activity-label {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Tier Breakdown */
.tier-breakdown {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 20px;
}

.tier-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tier-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tier-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tier-name {
    font-size: 0.875rem;
    color: var(--ui-text);
    font-family: 'JetBrains Mono', monospace;
}

.tier-count {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text-muted);
}

.tier-bar {
    height: 8px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    border-radius: 4px;
    overflow: hidden;
}

.tier-fill {
    height: 100%;
    background: var(--ui-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Recent Activity */
.recent-activity {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 20px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border-radius: 6px;
}

.activity-action {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.action-subscribe {
    background: color-mix(in srgb, var(--ui-success) 20%, transparent);
    color: var(--ui-success);
}

.action-cancel {
    background: color-mix(in srgb, var(--ui-error) 20%, transparent);
    color: var(--ui-error);
}

.action-upgrade,
.action-downgrade {
    background: color-mix(in srgb, var(--ui-accent) 20%, transparent);
    color: var(--ui-accent);
}

.action-reactivate,
.action-renew,
.action-save_with_offer {
    background: color-mix(in srgb, var(--ui-primary) 20%, transparent);
    color: var(--ui-primary);
}

.action-admin_change {
    background: color-mix(in srgb, var(--ui-warning) 20%, transparent);
    color: var(--ui-warning);
}

.activity-user {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
}

.activity-time {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

/* Charts Row placeholder */
.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.chart-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 1024px) {
    .stats-grid,
    .activity-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .stats-grid,
    .activity-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        flex-direction: column;
        text-align: center;
    }
}
/* HistoryLog styles */

.history-log {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Filters */
.history-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.search-input {
    padding: 8px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    min-width: 200px;
}

.search-input:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    cursor: pointer;
    text-transform: capitalize;
}

/* Error banner */
.error-banner {
    padding: 12px 16px;
    background: color-mix(in srgb, var(--ui-error) 15%, transparent);
    border: 1px solid var(--ui-error);
    border-radius: 8px;
    color: var(--ui-error);
    font-size: 0.875rem;
}

/* Timeline */
.history-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.empty-state {
    text-align: center;
    color: var(--ui-text-muted);
    padding: 48px 16px;
    background: var(--ui-surface);
    border: 1px dashed var(--ui-border);
    border-radius: 8px;
}

.history-entry {
    display: flex;
    gap: 16px;
    position: relative;
}

.history-entry:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: var(--ui-border);
}

.history-entry.skeleton {
    padding: 8px 0;
}

.entry-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--ui-surface);
    border: 2px solid var(--ui-border);
    position: relative;
    z-index: 1;
}

.entry-indicator.action-positive {
    background: color-mix(in srgb, var(--ui-success) 15%, var(--ui-surface));
    border-color: var(--ui-success);
}

.entry-indicator.action-negative {
    background: color-mix(in srgb, var(--ui-error) 15%, var(--ui-surface));
    border-color: var(--ui-error);
}

.entry-indicator.action-neutral {
    background: color-mix(in srgb, var(--ui-accent) 15%, var(--ui-surface));
    border-color: var(--ui-accent);
}

.entry-indicator.action-info {
    background: color-mix(in srgb, var(--ui-primary) 15%, var(--ui-surface));
    border-color: var(--ui-primary);
}

.entry-indicator.action-warning {
    background: color-mix(in srgb, var(--ui-warning) 15%, var(--ui-surface));
    border-color: var(--ui-warning);
}

.action-icon {
    font-size: 0.875rem;
}

.entry-content {
    flex: 1;
    padding: 12px 16px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.entry-content:hover {
    border-color: var(--ui-primary);
}

.history-entry.expanded .entry-content {
    border-color: var(--ui-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.entry-action {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: capitalize;
}

.entry-action.action-positive {
    color: var(--ui-success);
}

.entry-action.action-negative {
    color: var(--ui-error);
}

.entry-action.action-neutral {
    color: var(--ui-accent);
}

.entry-action.action-info {
    color: var(--ui-primary);
}

.entry-action.action-warning {
    color: var(--ui-warning);
}

.entry-time {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
}

.entry-details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.8125rem;
}

.entry-user,
.entry-org,
.entry-by {
    color: var(--ui-text-muted);
}

.entry-details code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--ui-text);
}

.entry-reason {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    font-style: italic;
    margin-top: 8px;
}

/* Expanded content */
.entry-expanded {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ui-border);
}

.config-change {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.from-config,
.to-config {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
}

.config-change code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--ui-text);
}

.change-arrow {
    color: var(--ui-text-muted);
    font-size: 1rem;
}

.config-snapshot {
    margin-top: 12px;
}

.config-snapshot h5 {
    margin: 0 0 8px 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.config-snapshot pre {
    margin: 0;
    padding: 12px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--ui-text);
    overflow-x: auto;
    max-height: 200px;
    overflow-y: auto;
}

/* Responsive */
@media (max-width: 640px) {
    .history-filters {
        flex-direction: column;
    }

    .search-input {
        min-width: 100%;
    }

    .entry-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}
/* AdminSubscriptionsPage styles */

.admin-subscriptions-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    overflow-x: hidden;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 24px;
    flex-wrap: wrap;
}

.header-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-link {
    color: var(--ui-text-muted);
    font-size: 0.875rem;
    text-decoration: none;
}

.back-link:hover {
    color: var(--ui-primary);
}

.admin-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ui-text);
}

.quick-stats {
    display: flex;
    gap: 24px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ui-primary);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Tab Navigation */
.tab-nav {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border-radius: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
}

.tab-btn {
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--ui-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--ui-text);
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.tab-btn.active {
    color: var(--ui-text);
    background: var(--ui-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Tab Content */
.tab-content {
    min-height: 400px;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-subscriptions-page {
        padding: 16px;
    }

    .admin-header {
        flex-direction: column;
    }

    .quick-stats {
        width: 100%;
        justify-content: space-between;
    }

    .tab-nav {
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}
/* Admin Session Types Page */

.ast-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ui-text) 40%, transparent);
}

.ast-editor-panel {
    display: flex;
    flex-direction: column;
    width: 95vw;
    max-width: 1200px;
    max-height: 90vh;
    border-radius: 12px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    overflow: hidden;
}

.ast-editor-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ast-editor-form {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 1.5rem;
    border-right: 1px solid var(--ui-border);
}

.ast-editor-preview {
    width: 380px;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

.ast-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--ui-border);
}

.ast-editor-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--ui-border);
}

.ast-field {
    margin-bottom: 1rem;
}

.ast-field label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ui-text-muted);
}

.ast-field-row {
    display: flex;
    gap: 0.75rem;
}

.ast-field-row > * {
    flex: 1;
}

.ast-json-textarea {
    width: 100%;
    min-height: 300px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    resize: vertical;
    padding: 0.75rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
}

.ast-json-textarea:focus {
    outline: 2px solid var(--ui-primary);
    outline-offset: -1px;
}

.ast-validation-ok {
    color: var(--ui-success);
    font-size: 0.8125rem;
}

.ast-validation-error {
    color: var(--ui-error);
    font-size: 0.8125rem;
}

.ast-preview-section {
    margin-bottom: 1.25rem;
}

.ast-preview-section h4 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-muted);
    margin-bottom: 0.5rem;
}

.ast-flag-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.125rem 0.5rem;
    font-size: 0.75rem;
}

.ast-flag-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.ast-ai-context {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    font-size: 0.75rem;
}

.ast-ai-context-label {
    font-weight: 600;
    color: var(--ui-text);
    margin-bottom: 0.125rem;
}

.ast-ai-context-value {
    color: var(--ui-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.ast-display-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.ast-display-icon {
    font-size: 2rem;
    line-height: 1;
}

.ast-category-group {
    margin-bottom: 1.5rem;
}

.ast-category-group h4 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-muted);
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--ui-border);
}

@media (max-width: 768px) {
    .ast-editor-body {
        flex-direction: column;
    }
    .ast-editor-preview {
        width: 100%;
        border-top: 1px solid var(--ui-border);
    }
    .ast-editor-form {
        border-right: none;
    }
}

/* ── Generate from NL section ── */

.ast-generate-section {
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
}

.ast-generate-label {
    color: var(--ui-text-muted);
}

.ast-generate-textarea {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    resize: vertical;
    font-size: 0.875rem;
}

.ast-generate-btn {
    align-self: flex-end;
}

.ast-generate-error {
    color: var(--ui-error);
}
/* AdminPlatformSettingsPage styles */

.platform-settings-page {
    max-width: 48rem;
    margin: 0 auto;
}

.platform-settings-page h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--ui-text);
}

.platform-settings-page .settings-description {
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    margin-bottom: 2rem;
}

.platform-settings-loading,
.platform-settings-error {
    padding: 2rem;
    text-align: center;
}

.platform-settings-loading {
    color: var(--ui-text-muted);
}

.platform-settings-error {
    color: var(--ui-error);
}

.platform-settings-error .wp-button {
    margin-left: 1rem;
}

.setting-card {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.setting-card-content {
    flex: 1;
}

.setting-card-label {
    font-weight: 600;
    color: var(--ui-text);
    margin-bottom: 0.25rem;
}

.setting-card-description {
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    line-height: 1.5;
}

.setting-status-badge {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.setting-status-badge.enabled {
    color: var(--ui-success);
    background: color-mix(in srgb, var(--ui-success) 10%, transparent);
}

.setting-status-badge.disabled {
    color: var(--ui-warning);
    background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
}

.setting-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Toggle switch */
.setting-toggle {
    position: relative;
    width: 3rem;
    height: 1.625rem;
    border-radius: 1rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.setting-toggle.on {
    background: var(--ui-success);
}

.setting-toggle.off {
    background: var(--ui-border);
}

.setting-toggle.saving {
    cursor: wait;
    opacity: 0.6;
}

.setting-toggle-knob {
    position: absolute;
    top: 0.1875rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: white;
    transition: left 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.setting-toggle.on .setting-toggle-knob {
    left: 1.5rem;
}

.setting-toggle.off .setting-toggle-knob {
    left: 0.1875rem;
}
/* Series Page Styles */

.series-page {
    display: grid;
    gap: 1.5rem;
    max-width: 56rem;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.series-loading,
.series-error {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ui-text-muted);
}

.series-error {
    color: var(--ui-error);
}

/* Header */
.series-header {
    display: grid;
    gap: 0.5rem;
}

.series-header-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.series-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0;
}

.series-description {
    color: var(--ui-text-muted);
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.series-status-pill {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    text-transform: capitalize;
}

.series-status--planned {
    background: color-mix(in srgb, var(--ui-text-muted) 15%, transparent);
    color: var(--ui-text-muted);
}

.series-status--active {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
}

.series-status--completed {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

/* Progress banner */
.series-progress-banner {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    display: grid;
    gap: 0.5rem;
}

.series-progress-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ui-text);
}

.series-progress-bar {
    height: 6px;
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    border-radius: 3px;
    overflow: hidden;
}

.series-progress-fill {
    height: 100%;
    background: var(--ui-success);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Sections */
.series-section {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
    padding: 1.25rem;
    display: grid;
    gap: 1rem;
}

.series-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.series-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0;
}

.series-empty {
    color: var(--ui-text-muted);
    font-size: 0.85rem;
    margin: 0;
}

/* Sessions list */
.series-sessions-list {
    display: grid;
    gap: 0.25rem;
}

.series-session-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    transition: background 0.15s;
}

.series-session-row:hover {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.series-session-order {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.series-session-link {
    flex: 1;
    color: var(--ui-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.series-session-link:hover {
    text-decoration: underline;
}

.series-badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    text-transform: capitalize;
    flex-shrink: 0;
}

.series-badge--success {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

.series-badge--accent {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
}

.series-badge--muted {
    background: color-mix(in srgb, var(--ui-text-muted) 15%, transparent);
    color: var(--ui-text-muted);
}

.series-session-date {
    font-size: 0.8rem;
    color: var(--ui-text-muted);
    flex-shrink: 0;
}

.series-session-remove {
    background: none;
    border: none;
    color: var(--ui-text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.25rem;
    border-radius: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.series-session-row:hover .series-session-remove {
    opacity: 1;
}

.series-session-remove:hover {
    color: var(--ui-error);
}

/* Add session row */
.series-add-session {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.series-add-input {
    flex: 1;
    font-size: 0.85rem;
}

/* Analytics cards */
.series-analytics-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}

.series-stat-card {
    background: color-mix(in srgb, var(--ui-text) 3%, transparent);
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
}

.series-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ui-text);
}

.series-stat-label {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    margin-top: 0.25rem;
}

/* Participation trend bars */
.series-trend {
    display: grid;
    gap: 0.75rem;
}

.series-trend-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0;
}

.series-trend-bars {
    display: grid;
    gap: 0.5rem;
}

.series-trend-item {
    display: grid;
    gap: 0.25rem;
}

.series-trend-bar-container {
    height: 8px;
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    border-radius: 4px;
    overflow: hidden;
}

.series-trend-bar {
    height: 100%;
    background: var(--ui-accent);
    border-radius: 4px;
    transition: width 0.3s ease;
    min-width: 4px;
}

.series-trend-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.series-trend-session {
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.series-trend-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ui-text);
    flex-shrink: 0;
}
.async-host-dashboard {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.async-host-dashboard__title {
    font-weight: 600;
    color: var(--ui-text);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.async-host-dashboard__stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.async-host-dashboard__stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.async-host-dashboard__stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

.async-host-dashboard__stat-label {
    font-size: 0.8rem;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.async-host-dashboard__processing {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--ui-text);
    margin-bottom: 1rem;
}

.async-host-dashboard__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.async-host-dashboard__extend-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.async-host-dashboard__extend-input {
    width: 60px;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface-muted);
    color: var(--ui-text);
    font-size: 0.85rem;
    text-align: center;
}

.async-host-dashboard__extend-input:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.async-host-dashboard__submissions-list {
    margin-top: 1rem;
}

.async-host-dashboard__submissions-list h4 {
    font-size: 0.85rem;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.5rem;
}

.async-host-dashboard__participant-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ui-border);
    font-size: 0.9rem;
}

.async-host-dashboard__participant-row:last-child {
    border-bottom: none;
}

.async-host-dashboard__participant-name {
    color: var(--ui-text);
}

.async-host-dashboard__participant-status {
    font-size: 0.8rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.async-host-dashboard__participant-status--submitted {
    background: color-mix(in srgb, var(--ui-success) 15%, transparent);
    color: var(--ui-success);
}

.async-host-dashboard__participant-status--pending {
    background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
    color: var(--ui-warning);
}
.async-session-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Status Banner */
.async-status-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--ui-border);
}

.async-status-banner--open {
    background: color-mix(in srgb, var(--ui-success) 10%, transparent);
    border-color: var(--ui-success);
}

.async-status-banner--scheduled {
    background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
    border-color: var(--ui-warning);
}

.async-status-banner--closed {
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.async-status-banner__icon {
    font-size: 1.5rem;
}

.async-status-banner__info {
    flex: 1;
}

.async-status-banner__title {
    font-weight: 600;
    color: var(--ui-text);
    margin: 0 0 0.25rem;
}

.async-status-banner__detail {
    font-size: 0.85rem;
    color: var(--ui-text-muted);
}

.async-status-banner__countdown {
    font-variant-numeric: tabular-nums;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ui-text);
}

/* Submission Form */
.async-submission-form {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.async-submission-form__title {
    font-weight: 600;
    color: var(--ui-text);
    margin: 0 0 1rem;
}

.async-submission-form__textarea {
    width: 100%;
    min-height: 120px;
    padding: 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface-muted);
    color: var(--ui-text);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

.async-submission-form__textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
}

.async-submission-form__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.async-submission-form__anon-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--ui-text-muted);
    cursor: pointer;
}

/* Submissions List */
.async-submissions {
    margin-bottom: 1.5rem;
}

.async-submissions__title {
    font-weight: 600;
    color: var(--ui-text);
    margin: 0 0 1rem;
}

.async-submission-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.async-submission-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.async-submission-card__author {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ui-text-muted);
}

.async-submission-card__time {
    font-size: 0.8rem;
    color: var(--ui-text-muted);
}

.async-submission-card__content {
    color: var(--ui-text);
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Processing Status */
.async-processing-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    border: 1px solid var(--ui-accent);
    border-radius: 10px;
    margin-bottom: 1.5rem;
    color: var(--ui-text);
    font-weight: 500;
}

/* Host Controls */
.async-host-controls {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Empty state */
.async-empty {
    text-align: center;
    padding: 2rem;
    color: var(--ui-text-muted);
}
/**
 * Help & Docs Page Styles
 * Uses --ui-* CSS variables for theming.
 */

.help-page {
    padding: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.help-header {
    margin-bottom: 2rem;
}

.help-header h1 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ui-text);
}

.help-header p {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Search */
.help-search {
    margin-bottom: 2rem;
}

.help-search-input {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.9375rem;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.help-search-input::placeholder {
    color: var(--ui-text-muted);
}

.help-search-input:focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 18%, transparent);
}

/* Section / Accordion */
.help-section {
    margin-bottom: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface);
    overflow: hidden;
}

.help-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    color: var(--ui-text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background-color 150ms ease;
}

.help-section-toggle:hover {
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
}

.help-section-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.help-section-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--ui-text-muted);
    transition: transform 200ms ease;
}

.help-section-chevron--open {
    transform: rotate(90deg);
}

.help-section-body {
    padding: 0 1.25rem 1.25rem 3rem;
}

/* FAQ items inside a section */
.help-faq {
    margin-bottom: 0.75rem;
}

.help-faq:last-child {
    margin-bottom: 0;
}

.help-faq-q {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ui-text);
}

.help-faq-a {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    line-height: 1.6;
}

/* Keyboard shortcuts table */
.help-shortcuts {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.help-shortcuts th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
    font-weight: 500;
    font-size: 0.8125rem;
}

.help-shortcuts td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 50%, transparent);
    color: var(--ui-text);
}

.help-shortcuts kbd {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    font-family: monospace;
    font-size: 0.8125rem;
}

/* Step lists */
.help-steps {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    line-height: 1.7;
}

.help-steps li {
    margin-bottom: 0.25rem;
}

/* Tip callout */
.help-tip {
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--ui-accent);
    border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--ui-accent) 6%, transparent);
    font-size: 0.8125rem;
    color: var(--ui-text-muted);
    line-height: 1.5;
}

.help-tip strong {
    color: var(--ui-text);
}

/* No results */
.help-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ui-text-muted);
    font-size: 0.9375rem;
}

/* Responsive */
@media (max-width: 640px) {
    .help-page {
        padding: 1rem;
    }

    .help-section-body {
        padding-left: 1.25rem;
    }
}
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wide: .025em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components {
  .wp-logo {
    font-family: var(--font-family);
    letter-spacing: -.05em;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
  }

  .wp-logo-well {
    font-weight: 400;
  }

  .wp-logo-prep {
    font-weight: 600;
  }

  @media (min-width: 640px) {
    .wp-logo {
      font-size: 2rem;
    }
  }

  .wp-logo-blue {
    color: var(--brand-teal);
  }

  .wp-logo-green {
    color: var(--brand-teal-hover);
  }

  .wp-logo-prepd-d {
    color: var(--brand-teal-hover);
    display: inline-block;
    position: relative;
  }

  .wp-logo-prepd-d:after {
    content: "✓";
    color: var(--ui-warning);
    pointer-events: none;
    font-size: .72em;
    font-weight: 900;
    position: absolute;
    top: 36%;
    left: 62%;
    transform: translate(-50%, -50%);
  }

  .wp-logo-button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
  }

  .wp-logo-button:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 4px;
    border-radius: 4px;
  }

  .wp-muted {
    color: var(--ui-text-secondary);
  }

  .wp-warning-underline {
    text-decoration-line: underline;
    -webkit-text-decoration-color: var(--ui-error);
    -webkit-text-decoration-color: var(--ui-error);
    text-decoration-color: var(--ui-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .wp-warning-underline {
      -webkit-text-decoration-color: color-mix(in srgb, var(--ui-error) 70%, transparent);
      -webkit-text-decoration-color: color-mix(in srgb, var(--ui-error) 70%, transparent);
      text-decoration-color: color-mix(in srgb, var(--ui-error) 70%, transparent);
    }
  }

  .wp-warning-underline {
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
  }

  .wp-justify {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .wp-header {
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
  }

  @media (min-width: 641px) {
    .wp-header-grid {
      justify-content: space-between;
      align-items: center;
      display: flex !important;
    }

    .wp-header-email {
      display: none !important;
    }
  }

  @media (max-width: 640px) {
    .wp-header-grid {
      flex-direction: column;
      gap: 8px;
      padding: 10px 12px !important;
      display: flex !important;
    }

    .wp-header-logo {
      justify-content: center !important;
    }

    .wp-header-controls {
      flex-wrap: wrap;
      order: 2;
      justify-content: center !important;
      gap: 8px !important;
    }

    .wp-header-controls .wp-header-email-inline {
      display: flex;
    }

    .wp-header-controls .wp-header-email-inline button.wp-muted {
      max-width: 160px;
    }
  }

  .wp-footer {
    background: var(--ui-surface);
    border-top: 1px solid var(--ui-border);
  }

  .wp-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 4);
  }

  .wp-card .chat-md-image {
    border-radius: 8px;
    max-width: 100%;
    margin: 8px 0;
  }

  .wp-card-muted {
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 3);
  }

  .runway-section {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px #00000014, 0 2px 8px #0000000a;
  }

  [data-theme="dark"] .runway-section {
    box-shadow: 0 1px 3px #0003, 0 2px 8px #00000026;
  }

  .wp-input {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }

  .wp-input:focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px var(--ui-primary);
    outline: none;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .wp-input:focus {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 18%, transparent);
    }
  }

  .wp-button {
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
  }

  .wp-tooltip {
    position: relative;
  }

  .wp-tooltip[data-tooltip]:after {
    content: attr(data-tooltip);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
    white-space: nowrap;
    box-shadow: 0 8px 18px var(--ui-text);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 500;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .wp-tooltip[data-tooltip]:after {
      box-shadow: 0 8px 18px color-mix(in srgb, var(--ui-text) 20%, transparent);
    }
  }

  .wp-tooltip[data-tooltip]:after {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 50;
    transition: opacity .15s, transform .15s, visibility .15s;
  }

  .wp-tooltip[data-tooltip]:before {
    content: "";
    border-style: solid;
    border-width: 6px 6px 0;
    border-color: var(--ui-surface) transparent transparent;
    filter: drop-shadow(0 -1px 0 var(--ui-border));
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s, transform .15s, visibility .15s;
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
  }

  .wp-tooltip[data-tooltip]:after, .wp-tooltip[data-tooltip]:before {
    transform: translateX(-50%)translateY(0);
  }

  .wp-tooltip:hover:after, .wp-tooltip:focus-visible:after, .wp-tooltip:focus-within:after, .wp-tooltip:hover:before, .wp-tooltip:focus-visible:before, .wp-tooltip:focus-within:before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%)translateY(-2px);
  }

  .wp-tooltip--bottom[data-tooltip]:after {
    top: calc(100% + 6px);
    bottom: auto;
  }

  .wp-tooltip--bottom[data-tooltip]:before {
    border-width: 0 6px 6px;
    border-color: transparent transparent var(--ui-surface);
    filter: drop-shadow(0 1px 0 var(--ui-border));
    top: calc(100% + 1px);
    bottom: auto;
  }

  .wp-tooltip--bottom:hover:after, .wp-tooltip--bottom:focus-visible:after, .wp-tooltip--bottom:focus-within:after, .wp-tooltip--bottom:hover:before, .wp-tooltip--bottom:focus-visible:before, .wp-tooltip--bottom:focus-within:before {
    transform: translateX(-50%)translateY(2px);
  }

  .wp-header-button {
    justify-content: center;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    line-height: 1;
    transition: background-color .15s, border-color .15s, color .15s, filter .15s;
    display: inline-flex;
  }

  .wp-icon-button {
    width: 32px;
    padding: 0;
  }

  .wp-button:hover {
    background: var(--ui-surface-muted);
  }

  .wp-button.wp-header-button:hover, .wp-button.wp-header-button[aria-expanded="true"] {
    background-color: var(--ui-accent);
    filter: brightness(.95);
    border-color: #0000;
    color: #fff !important;
  }

  .wp-button.wp-header-button:active {
    background-color: var(--ui-accent);
    filter: brightness(.9);
    border-color: #0000;
    color: #fff !important;
  }

  .wp-button-primary {
    background: var(--ui-accent);
    color: #fff;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border: 1px solid #0000;
  }

  .wp-button-primary:hover {
    filter: brightness(.9);
  }

  .wp-button-success {
    background: var(--ui-accent);
    color: #fff;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border: 1px solid #0000;
  }

  .wp-button-success:hover {
    filter: brightness(.95);
  }

  .wp-button-danger {
    background: var(--ui-error);
    color: #fff;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border: 1px solid #0000;
  }

  .wp-button-danger:hover {
    filter: brightness(.9);
  }

  .wp-button-accent {
    background: var(--ui-accent);
    color: #fff;
    cursor: pointer;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border: 1px solid #0000;
    transition: filter .15s, transform .15s, box-shadow .15s;
  }

  .wp-button-accent:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px var(--ui-accent);
    transform: translateY(-1px);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .wp-button-accent:hover {
      box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-accent) 35%, transparent);
    }
  }

  .wp-button-accent:active {
    filter: brightness(.9);
    box-shadow: none;
    transform: translateY(0);
  }

  .wp-menu {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 30px #02061724;
  }

  .wp-menu-item {
    text-align: left;
    width: 100%;
    color: var(--ui-text);
    border-radius: 8px;
    padding: 8px 10px;
  }

  .wp-menu-item:hover {
    background: var(--ui-surface-muted);
  }

  .wp-pre {
    background: var(--code-bg);
    color: var(--code-text);
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    border-radius: .25rem;
  }
}

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .visible {
    visibility: visible;
  }

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

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-1\/2 {
    top: 50%;
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .left-full {
    left: 100%;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-5 {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-auto {
    margin-left: auto;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

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

  .table {
    display: table;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-\[72px\] {
    height: 72px;
  }

  .h-auto {
    height: auto;
  }

  .min-h-24 {
    min-height: calc(var(--spacing) * 24);
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-6xl {
    max-width: var(--container-6xl);
  }

  .max-w-\[180px\] {
    max-width: 180px;
  }

  .max-w-\[220px\] {
    max-width: 220px;
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .flex-1 {
    flex: 1;
  }

  .flex-shrink-0, .shrink-0 {
    flex-shrink: 0;
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .list-inside {
    list-style-position: inside;
  }

  .list-decimal {
    list-style-type: decimal;
  }

  .list-disc {
    list-style-type: disc;
  }

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

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

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

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

  .flex-col {
    flex-direction: column;
  }

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

  .items-baseline {
    align-items: baseline;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-\[2px\] {
    gap: 2px;
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  .justify-self-end {
    justify-self: flex-end;
  }

  .justify-self-start {
    justify-self: flex-start;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-t {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .object-cover {
    object-fit: cover;
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

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

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

  .text-right {
    text-align: right;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .wrap-break-word {
    overflow-wrap: break-word;
  }

  .break-all {
    word-break: break-all;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .no-underline {
    text-decoration-line: none;
  }

  .underline {
    text-decoration-line: underline;
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 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 {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  @media (hover: hover) {
    .hover\:font-semibold:hover {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }

    .hover\:text-\[var\(--ui-warning\)\]:hover {
      color: var(--ui-warning);
    }

    .hover\:opacity-70:hover {
      opacity: .7;
    }
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  @media (min-width: 40rem) {
    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }

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

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

    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }

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

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

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
}

:root {
  color-scheme: light;
  --brand-teal: #14b8a6;
  --brand-teal-hover: #0d9488;
  --board-bg: #f3f4f6;
  --board-pattern-color: #cbd5e1;
  --board-header-text: #0b1120;
  --ui-surface: #fff;
  --ui-surface-muted: #f3f4f6;
  --ui-border: #e2e8f0;
  --ui-border-strong: #e2e8f0;
  --ui-text: #0b1120;
  --ui-text-muted: #475569;
  --ui-text-secondary: #475569;
  --ui-primary: #14b8a6;
  --ui-primary-hover: #0d9488;
  --ui-primary-subtle: #f3f4f6;
  --ui-on-primary: #fff;
  --ui-on-success: #fff;
  --ui-success: #22c55e;
  --ui-warning: #f59e0b;
  --ui-error: #ef4444;
  --ui-accent: #2dd4bf;
  --code-bg: #0b1120;
  --code-text: #f8fafc;
  --font-family: "Inter", system-ui, -apple-system, sans-serif;
}

body {
  background: var(--board-bg);
  color: var(--ui-text);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
}

.session-list {
  flex-direction: column;
  display: flex;
}

.session-row {
  border-bottom: 1px solid var(--ui-border);
  grid-template-columns: minmax(200px, 280px) auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  transition: background .12s;
  display: grid;
}

.col-datetime-live {
  display: contents;
}

@media (min-width: 769px) {
  .session-row {
    grid-template-columns: minmax(200px, 280px) 130px 80px 1fr;
  }
}

@media (max-width: 768px) {
  .session-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 12px;
  }

  .col-info {
    order: 1;
  }

  .col-datetime-live {
    flex-direction: column;
    order: 2;
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .col-datetime {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    padding-left: 0;
    padding-right: 0;
    display: flex;
  }

  .col-datetime .datetime-row {
    margin-top: 0;
  }

  .col-type {
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    padding-left: 0;
    padding-right: 0;
  }

  .col-actions {
    flex-wrap: wrap;
    order: 3;
    justify-content: center;
    gap: 6px;
  }

  .col-actions .btn {
    border: 1px solid var(--ui-border);
    border-radius: 4px;
  }

  .col-actions .btn:not(:last-child) {
    border-right: 1px solid var(--ui-border);
  }
}

.session-row:last-child {
  border-bottom: none;
}

.session-row:hover {
  background: var(--ui-surface-muted);
}

.session-row.is-live {
  background: var(--ui-success);
}

@supports (color: color-mix(in lab, red, red)) {
  .session-row.is-live {
    background: color-mix(in srgb, var(--ui-success) 6%, transparent);
  }
}

.session-row.is-live {
  border-color: var(--ui-success);
}

@supports (color: color-mix(in lab, red, red)) {
  .session-row.is-live {
    border-color: color-mix(in srgb, var(--ui-success) 30%, var(--ui-border));
  }
}

.session-title {
  color: var(--ui-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
}

[data-theme="light"] .session-title {
  color: var(--brand-teal);
}

.runway-title {
  color: var(--ui-text);
}

[data-theme="light"] .runway-title, [data-theme="light"] .session-create-title, [data-theme="light"] .session-create-section-title, [data-theme="light"] .session-create-lesson-title, [data-theme="light"] .session-create-card-title, [data-theme="light"] .session-create-lesson-card-title, [data-theme="light"] .session-create-analysis-item-title, [data-theme="light"] .session-create-chat-title, [data-theme="light"] .session-create-proposal-title {
  color: var(--brand-teal);
}

.session-state {
  color: var(--ui-text-secondary);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

.state-dot {
  background: currentColor;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.state-draft {
  color: var(--ui-warning);
}

.state-cleared, .state-live, .state-scheduled {
  color: var(--ui-success);
}

.state-completed {
  color: var(--ui-text-secondary);
}

.broadcast-icon {
  width: 16px;
  height: 16px;
  color: var(--ui-success);
  animation: 1.5s ease-in-out infinite broadcast-pulse;
}

.session-summary-badge {
  align-items: center;
  margin-left: 8px;
  display: inline-flex;
}

.session-summary-badge .summary-icon {
  width: 14px;
  height: 14px;
  color: var(--ui-text-muted);
  flex-shrink: 0;
}

.prep-readiness {
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
  display: flex;
}

.prep-readiness-track {
  background: var(--ui-text);
  border-radius: 3px;
  width: 80px;
  height: 6px;
}

@supports (color: color-mix(in lab, red, red)) {
  .prep-readiness-track {
    background: color-mix(in srgb, var(--ui-text) 12%, transparent);
  }
}

.prep-readiness-track {
  flex-shrink: 0;
  overflow: hidden;
}

.prep-readiness-fill {
  background: var(--ui-accent);
  border-radius: 3px;
  height: 100%;
  transition: width .3s;
}

.prep-readiness-label {
  color: var(--ui-text-muted);
  white-space: nowrap;
  font-size: 11px;
}

@keyframes broadcast-pulse {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 2px var(--ui-success));
  }

  50% {
    opacity: .6;
    filter: drop-shadow(0 0 6px var(--ui-success));
  }
}

.col-datetime {
  font-family: var(--font-family);
  text-align: left;
  padding-left: 24px;
  padding-right: 0;
}

.datetime-row {
  color: var(--ui-text-secondary);
  white-space: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: flex;
}

.datetime-row.secondary {
  color: var(--ui-text-muted);
  margin-top: 2px;
  font-size: 11px;
}

.meta-icon {
  opacity: .6;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.session-type {
  font-family: var(--font-family);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ui-text-muted);
  background: var(--ui-text);
  padding: 3px 8px;
  font-size: 10px;
}

@supports (color: color-mix(in lab, red, red)) {
  .session-type {
    background: color-mix(in srgb, var(--ui-text) 4%, transparent);
  }
}

.session-type {
  box-sizing: border-box;
  text-indent: .5px;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  width: 80px;
  display: flex;
}

.col-type {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding-left: 24px;
  padding-right: 16px;
  display: flex;
}

.col-actions {
  justify-content: flex-end;
  gap: 0;
  display: flex;
}

.btn {
  font-family: var(--font-family);
  text-align: center;
  border: 1px solid var(--ui-border);
  width: 80px;
  color: var(--ui-text-secondary);
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap;
  background: none;
  padding: 7px 0;
  font-size: 10px;
  font-weight: 500;
  transition: all .12s;
}

.btn:first-child {
  border-radius: 4px 0 0 4px;
}

.btn:last-child {
  border-radius: 0 4px 4px 0;
}

.btn:only-child {
  border-radius: 4px;
}

.btn:not(:last-child) {
  border-right: none;
}

.btn:hover {
  background: var(--ui-surface-muted);
  color: var(--ui-text);
}

.btn.btn-accent:hover {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: #fff;
  filter: brightness(.95);
}

.btn.btn-accent:active {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: #fff;
  filter: brightness(.9);
}

.btn-go {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: #fff;
  font-weight: 600;
}

.btn-live-active {
  background: var(--ui-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .btn-live-active {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
  }
}

.btn-live-active {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
  font-weight: 600;
}

.btn-disabled {
  color: var(--ui-text-muted);
  opacity: .35;
  cursor: not-allowed;
}

.btn.btn-danger {
  border-color: var(--ui-error);
  color: var(--ui-error);
  background: none;
  font-weight: 700;
}

.btn.btn-danger:hover {
  background: var(--ui-error);
  border-color: var(--ui-error);
  color: #fff;
  filter: brightness(.95);
}

.btn.btn-danger:active {
  background: var(--ui-error);
  border-color: var(--ui-error);
  color: #fff;
  filter: brightness(.9);
}

.btn-live {
  font-family: var(--font-family);
  text-align: center;
  border: 1px solid var(--ui-border);
  width: 80px;
  color: var(--ui-text-secondary);
  cursor: pointer;
  text-transform: uppercase;
  box-sizing: border-box;
  background: none;
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 500;
  transition: all .12s;
}

.btn-live:hover {
  background: var(--ui-surface-muted);
  color: var(--ui-text);
}

.btn-live-go {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: #fff;
  font-weight: 600;
}

.btn-live-go:hover {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: #fff;
  filter: brightness(.95);
}

.btn-live-danger {
  border-color: var(--ui-error);
  color: var(--ui-error);
  background: none;
  font-weight: 700;
}

.btn-live-danger:hover {
  background: var(--ui-error);
  border-color: var(--ui-error);
  color: #fff;
  filter: brightness(.95);
}

.btn-live-disabled {
  color: var(--ui-text-muted);
  opacity: .35;
  cursor: not-allowed;
}

.btn-wrap {
  white-space: pre-line;
}

.runway-divider {
  background: var(--ui-border);
  width: 100%;
  height: 1px;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}