/* ============================================
   EVALUATION CRITERIA + AUDIO BEHAVIOR PAGE
   ============================================ */

@layer components {
  .eval-criteria-page {
    position: relative;
    padding-block: var(--space-xl);
    overflow: hidden;

    /* === MAIN CONTENT === */
    .criteria-content {
      flex: 1;
      min-inline-size: 300px;
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
    }

    .card {
      padding: var(--space-lg);
      border-radius: 12px;
    }

    /* === STAGE 2 TABS === */
    .stage2-tabs {
      display: inline-flex;
      border-radius: 100px;
      overflow: hidden;
      padding: var(--space-3xs);
      align-self: center;
    }

    .stage2-tab {
      padding: var(--space-xs) var(--space-xl);
      border: none;
      background: transparent;
      cursor: pointer;
      font-size: var(--fs-small);
      border-radius: 100px;
      transition: all 0.2s ease-out;
      font-weight: var(--fw-medium);
    }

    /* === TAB PANELS === */
    .tab-panel {
      display: none;
      flex-direction: column;
      gap: var(--space-lg);

      &.active {
        display: flex;
      }
    }

    /* === CRITERIA CATEGORY === */
    .criteria-category {
      border-radius: 12px;
      overflow: hidden;
    }

    .category-header {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-md) var(--space-lg);

      h3 {
        font-size: var(--fs-body);
        flex: 1;
      }
    }

    .category-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      inline-size: 32px;
      block-size: 32px;
      border-radius: 8px;
    }

    .category-count {
      font-size: var(--fs-xsmall);
      padding: var(--space-3xs) var(--space-sm);
      border-radius: 100px;
      font-weight: var(--fw-medium);
    }

    .criterion-list {
      display: flex;
      flex-direction: column;
    }

    /* === CRITERION CARD (expandable) === */
    .criterion-card {
      interpolate-size: allow-keywords;
      overflow-anchor: none;

      summary {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-md) var(--space-lg);
        cursor: pointer;
        list-style: none;
        user-select: none;
        transition: all 0.15s ease-out;

        &::-webkit-details-marker {
          display: none;
        }

        &::after {
          content: '';
          inline-size: 8px;
          block-size: 8px;
          border-inline-end: 2px solid currentColor;
          border-block-end: 2px solid currentColor;
          transform: rotate(-45deg);
          opacity: 0.4;
          transition: transform 0.2s ease;
          flex-shrink: 0;
          margin-inline-start: var(--space-sm);
        }
      }

      &[open] summary::after {
        transform: rotate(45deg);
      }

      &::details-content {
        block-size: 0;
        overflow: clip;
        transition:
          block-size 0.3s ease,
          content-visibility 0.3s allow-discrete;
      }

      &[open]::details-content {
        block-size: auto;
      }
    }

    .criterion-header-info {
      flex: 1;
      min-inline-size: 0;

      strong {
        font-size: var(--fs-small);
      }
    }

    .criterion-meta {
      display: flex;
      gap: var(--space-xs);
      flex-shrink: 0;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    /* Expanded body sits inside its parent card. A subtle left accent and a
       matching inline-start margin keep the interior visually anchored to the
       card's header when neighboring cards are collapsed, so the expanded
       content doesn't read as a sibling of the next peer. */
    .criterion-body {
      margin-inline-start: var(--space-sm);
      padding: var(--space-sm) var(--space-lg) var(--space-lg);
    }

    .criterion-form {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);

      input[type='text'],
      input[type='number'],
      textarea,
      select {
        padding: var(--space-sm) var(--space-md);
        border-radius: 8px;
        border: 1px solid transparent;
        font-size: var(--fs-small);
        font-family: inherit;
        outline: none;
        transition: border-color 0.15s ease-out;

        &:focus {
          border-color: var(--accent-primary);
        }
      }

      textarea {
        resize: vertical;
        min-block-size: 4em;
      }
    }

    .form-row--3col {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--space-sm);
    }

    /* Proficiency / Weight / Importance in a single row, each field the same
       width. Labels sit above the control (compact uppercase), so the row
       reads as three equal columns at any reasonable viewport.
       NB: templates must use `class="form-row--inline"` on its own — combining
       it with the base `.form-row` class would trip a later `display: grid`
       rule at equal specificity and collapse this flex layout. */
    .form-row--inline {
      display: flex;
      align-items: stretch;
      flex-wrap: nowrap;
      gap: var(--space-sm);
    }

    .inline-field {
      /* flex: 1 1 0 makes all three fields exactly equal-width, regardless of
         label length. min-inline-size: 0 lets them shrink on narrow viewports
         without forcing the row to wrap. */
      flex: 1 1 0;
      min-inline-size: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);

      > span {
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-medium);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      select,
      input[type='number'] {
        inline-size: 100%;
      }
    }

    .criterion-actions {
      display: flex;
      justify-content: flex-end;
      gap: var(--space-sm);
      padding-block-start: var(--space-sm);
    }

    /* === OBSERVATION QUESTIONS === */
    .observation-questions {
      margin-block-start: var(--space-md);
      padding-block-start: var(--space-md);
      border-block-start: 1px solid oklch(from var(--glass-tint) l c h / 0.1);

      .obs-header {
        margin-block-end: var(--space-sm);
      }

      /* Title + always-visible Regenerate button on one line. */
      .obs-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-sm);
        margin-block-end: var(--space-3xs);
      }

      h4 {
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
        margin: 0;
        color: var(--text-secondary);
      }

      /* Regenerate button is only relevant on READY cards — PENDING already
         shows a spinner, FAILED shows its own Retry button. */
      .obs-regenerate-btn {
        display: none;
        padding: var(--space-3xs) var(--space-sm);
        border-radius: 100px;
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-medium);
        cursor: pointer;
        transition:
          background 0.15s ease-out,
          border-color 0.15s ease-out,
          color 0.15s ease-out;
      }

      .obs-rationale {
        font-size: var(--fs-xsmall);
        line-height: 1.5;
        margin: 0;
        max-inline-size: 72ch;

        em {
          font-style: normal;
          font-weight: var(--fw-semibold);
        }
      }

      .obs-loading {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        color: var(--text-secondary);
        font-size: var(--fs-small);

        &.hidden {
          display: none;
        }
      }

      .obs-failed {
        display: flex;
        align-items: center;
        gap: var(--space-sm);

        &.hidden {
          display: none;
        }

        .error-text {
          color: var(--status-error);
          font-size: var(--fs-small);
        }
      }

      .obs-list {
        list-style: disc;
        padding-inline-start: var(--space-lg);
        font-size: var(--fs-small);
        color: var(--text-primary);

        &.hidden {
          display: none;
        }

        li {
          margin-block-end: var(--space-3xs);
        }
      }

      .spinner-small {
        inline-size: 16px;
        block-size: 16px;
        border: 2px solid oklch(from var(--accent-primary) l c h / 0.2);
        border-block-start-color: var(--accent-primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
      }
    }

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

    .danger-button {
      padding: var(--space-xs) var(--space-lg);
      border-radius: 100px;
      border: none;
      font-size: var(--fs-small);
      font-weight: var(--fw-medium);
      cursor: pointer;
      transition: all 0.2s ease-out;
    }

    /* Regenerate button appears on the obs-header only for READY cards.
       Keyed off the card's data attribute so the visibility state stays in
       sync with the server-rendered questionStatus on page load and the
       JS-updated status on polling transitions. */
    .criterion-card[data-question-status='READY'] .obs-regenerate-btn {
      display: inline-flex;
    }

    /* === BADGES === */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: var(--space-3xs) var(--space-sm);
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-medium);
      white-space: nowrap;
    }

    /* === LABEL === */
    .label {
      display: block;
      font-size: var(--fs-xsmall);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-block-end: var(--space-xs);
    }

    /* === AUDIO BEHAVIOR FORM === */
    .audio-behavior-form {
      display: flex;
      flex-direction: column;
      gap: var(--space-xl);
    }

    .form-section {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      padding: var(--space-lg);
      border-radius: 12px;
    }

    .form-section-header {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding-block-end: var(--space-md);

      h3 {
        font-size: var(--fs-body);
      }
    }

    .form-section-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      inline-size: 32px;
      block-size: 32px;
      border-radius: 8px;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-md);
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);

      label {
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-medium);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      input[type='text'],
      select {
        padding: var(--space-sm) var(--space-md);
        border-radius: 8px;
        border: 1px solid transparent;
        font-size: var(--fs-small);
        font-family: inherit;
        outline: none;
        transition: border-color 0.15s ease-out;

        &:focus {
          border-color: var(--accent-primary);
        }
      }
    }

    /* === SLIDERS === */
    .slider-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);
    }

    .slider-label {
      display: flex;
      justify-content: space-between;
      align-items: baseline;

      label {
        font-size: var(--fs-small);
        font-weight: var(--fw-medium);
      }

      .slider-value {
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        min-inline-size: 2.5em;
        text-align: end;
      }
    }

    .slider-range-labels {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-xsmall);
    }

    input[type='range'] {
      -webkit-appearance: none;
      appearance: none;
      inline-size: 100%;
      block-size: 6px;
      border-radius: 100px;
      outline: none;
      cursor: pointer;

      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        inline-size: 18px;
        block-size: 18px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid transparent;
        transition: transform 0.15s ease-out;
      }

      &::-webkit-slider-thumb:hover {
        transform: scale(1.15);
      }
    }

    /* === YOLGEN FOUR TYPE CARDS === */
    .personality-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-sm);
    }

    .yolgen-type-card {
      display: grid;
      grid-template-columns: 10px 1fr auto 40px;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      border-radius: var(--radius-md);
    }

    .yolgen-type-card .yolgen-type-dot {
      align-self: start;
      margin-top: 4px;
    }

    .yolgen-type-info strong {
      font-size: var(--fs-small);
    }

    .yolgen-type-info p {
      font-size: var(--fs-xsmall, 12px);
      color: var(--text-secondary);
      margin: 2px 0 0;
      line-height: 1.4;
    }

    .yolgen-type-card .yolgen-type-slider {
      inline-size: 120px;
    }

    .personality-hint {
      font-size: var(--fs-small);
      color: var(--text-secondary);
      margin: 0 0 var(--space-sm);
    }

    .yolgen-type-dot {
      inline-size: 10px;
      block-size: 10px;
      border-radius: 50%;
    }

    .yolgen-type-slider {
      inline-size: 100%;
      accent-color: var(--accent-primary);
      cursor: pointer;
    }

    .yolgen-type-pct {
      font-size: var(--fs-small);
      color: var(--text-secondary);
      text-align: end;
      font-variant-numeric: tabular-nums;
    }

    .personality-summary {
      font-size: var(--fs-small);
      line-height: 1.6;
      margin: 0;
      padding: var(--space-md);
      border-radius: 8px;
      border-inline-start: 3px solid var(--accent-primary);
      font-style: italic;
    }

    .personality-summary:empty {
      display: none;
    }

    /* === OCEAN EXPLAINER === */
    .ocean-explainer {
      padding: var(--space-md) var(--space-lg);
      border-radius: var(--radius-md);

      h4 {
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
        margin: 0 0 var(--space-xs);
      }

      p {
        font-size: var(--fs-xsmall);
        color: var(--text-secondary);
        line-height: 1.6;
        margin: 0;
      }
    }

    /* === OCEAN ADVANCED (collapsible) === */
    .ocean-advanced {
      border-radius: 8px;
      border: 1px solid oklch(0.4 0.01 260 / 0.3);
      margin-block-start: var(--space-sm);
    }

    .ocean-advanced-toggle {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      padding: var(--space-sm) var(--space-md);
      font-size: var(--fs-small);
      font-weight: var(--fw-semibold);
      cursor: pointer;
      list-style: none;
      color: var(--text-secondary);
    }

    .ocean-advanced-toggle::-webkit-details-marker {
      display: none;
    }

    .ocean-chevron {
      transition: transform 0.2s ease;
      margin-inline-start: auto;
    }

    .ocean-advanced[open] .ocean-chevron {
      transform: rotate(180deg);
    }

    .ocean-advanced-hint {
      font-size: var(--fs-xsmall);
      color: var(--text-secondary);
      margin: 0;
      padding: 0 var(--space-md) var(--space-sm);
    }

    .ocean-advanced-layout {
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
      padding: 0 var(--space-md) var(--space-md);
    }

    .ocean-radar-col {
      display: flex;
      justify-content: center;
    }

    /* === OCEAN PROFILE === */
    .ocean-profile-section {
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
    }

    .ocean-trait-cards {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
    }

    .ocean-trait-card {
      padding: var(--space-lg);
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      transition: opacity 0.25s ease-out;
    }

    .ocean-trait-card[data-enabled='false'] {
      opacity: 0.4;

      .ocean-trait-controls {
        display: none;
      }
    }

    .ocean-trait-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-md);
    }

    .ocean-toggle {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      cursor: pointer;

      input[type='checkbox'] {
        inline-size: 18px;
        block-size: 18px;
        cursor: pointer;
        accent-color: var(--accent-primary);
      }
    }

    .ocean-trait-name {
      font-size: var(--fs-body);
      font-weight: var(--fw-semibold);
    }

    .ocean-trait-description {
      font-size: var(--fs-small);
      line-height: 1.5;
      margin: 0;
    }

    .ocean-trait-controls {
      display: flex;
      align-items: flex-end;
      gap: var(--space-lg);
      padding-block-start: var(--space-xs);

      .slider-group {
        flex: 1;
      }
    }

    .ocean-weight-group {
      inline-size: 120px;
      flex-shrink: 0;
    }

    .save-ocean-btn {
      align-self: flex-start;
    }

    /* === STATUS BANNER === */
    .status-banner {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      padding: var(--space-lg);
      border-radius: 12px;

      .status-icon {
        flex-shrink: 0;
      }

      p {
        font-size: var(--fs-small);
      }
    }

    /* === MOBILE RESPONSIVE === */
    @media (max-width: 640px) {
      padding-block: var(--space-lg);

      & > .page-header {
        gap: var(--space-md);

        .header-actions {
          width: 100%;

          .primary-button,
          .secondary-button {
            flex: 1;
            justify-content: center;
            padding: var(--space-sm) var(--space-md);
            font-size: var(--fs-small);
          }
        }
      }

      .stage2-tabs {
        align-self: stretch;
      }

      .stage2-tab {
        flex: 1;
        text-align: center;
        padding: var(--space-xs) var(--space-md);
      }

      .criterion-meta {
        flex-wrap: wrap;
        gap: var(--space-3xs);
      }

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

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

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

      .ocean-trait-controls {
        flex-direction: column;

        .ocean-weight-group {
          inline-size: 100%;
        }
      }
    }
  }
}

/* --- THEME --- */
@layer theme {
  .eval-criteria-page {
    /* === STAGE 2 TABS === */
    .stage2-tabs {
      background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.04));
      border: 1px solid light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.08));
    }

    .stage2-tab {
      color: var(--text-secondary);

      &.active {
        background: light-dark(oklch(100% 0 0 / 0.9), oklch(100% 0 0 / 0.1));
        color: var(--text-primary);
        box-shadow: 0 1px 3px oklch(0% 0 0 / 0.08);
      }

      &:hover:not(.active) {
        color: var(--text-primary);
      }
    }

    /* === CRITERIA CATEGORY === */
    .criteria-category {
      background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
    }

    .category-header {
      border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
    }

    .category-icon {
      background: linear-gradient(
        135deg,
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.15),
          oklch(from var(--accent-primary) l c h / 0.25)
        ),
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.05),
          oklch(from var(--accent-primary) l c h / 0.1)
        )
      );
      border: 1px solid
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.2),
          oklch(from var(--accent-primary) l c h / 0.3)
        );
      color: var(--accent-primary);
    }

    .category-count {
      background: light-dark(
        oklch(from var(--accent-primary) l c h / 0.1),
        oklch(from var(--accent-primary) l c h / 0.15)
      );
      color: var(--accent-primary);
    }

    /* === CRITERION CARD === */
    .criterion-card {
      border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.04);

      &:last-child {
        border-block-end: none;
      }

      summary:hover {
        background: light-dark(oklch(0% 0 0 / 0.01), oklch(100% 0 0 / 0.02));
      }

      &[open] summary {
        border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      }
    }

    .criterion-body {
      background: light-dark(oklch(0% 0 0 / 0.01), oklch(100% 0 0 / 0.015));
      border-inline-start: 2px solid oklch(from var(--accent-primary) l c h / 0.25);
    }

    .criterion-form {
      input[type='text'],
      input[type='number'],
      textarea,
      select {
        background: light-dark(oklch(100% 0 0 / 0.8), oklch(100% 0 0 / 0.05));
        border-color: oklch(from var(--glass-tint) l c h / 0.08);
        color: var(--text-primary);
      }

      label {
        color: light-dark(
          oklch(from var(--accent-primary) calc(l - 0.05) calc(c - 0.03) h),
          oklch(from var(--accent-primary) calc(l + 0.1) calc(c - 0.03) h)
        );
      }
    }

    .inline-field > span {
      color: var(--text-secondary);
    }

    .yolgen-type-card {
      background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
    }

    .ocean-explainer {
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.1);
      background: var(--surface-elevated);
    }

    .obs-rationale {
      color: var(--text-tertiary, var(--text-secondary));

      em {
        color: var(--text-secondary);
      }
    }

    .danger-button {
      background: light-dark(oklch(0.6 0.2 25 / 0.1), oklch(0.6 0.2 25 / 0.15));
      color: light-dark(oklch(0.45 0.15 25), oklch(0.75 0.15 25));

      &:hover {
        background: light-dark(oklch(0.6 0.2 25 / 0.2), oklch(0.6 0.2 25 / 0.25));
      }
    }

    /* === BUTTON STATE MODIFIERS === */

    /* Transient confirmation on successful save — applied by JS for ~1.5s
       after a save resolves, then stripped. */
    .primary-button.btn--success {
      background: oklch(from var(--status-success, oklch(0.7 0.16 155)) l c h);
      color: white;
    }

    /* First-click state for destructive actions — signals "click again to
       confirm." Wider padding + high-contrast text make it clear this is a
       different state than the default Delete label. */
    .danger-button.btn--confirming {
      background: oklch(from var(--status-error) l c h);
      color: white;
      font-weight: var(--fw-semibold);
    }

    .obs-regenerate-btn {
      border: 1px solid oklch(from var(--text-secondary) l c h / 0.3);
      background: transparent;
      color: var(--text-secondary);

      &:hover {
        border-color: var(--accent-primary);
        color: var(--accent-primary);
        background: oklch(from var(--accent-primary) l c h / 0.08);
      }
    }

    /* === BADGES === */
    .badge--proficiency {
      background: light-dark(
        oklch(from var(--accent-primary) l c h / 0.1),
        oklch(from var(--accent-primary) l c h / 0.15)
      );
      color: light-dark(
        oklch(from var(--accent-primary) calc(l - 0.1) c h),
        oklch(from var(--accent-primary) calc(l + 0.1) c h)
      );
    }

    .badge--weight {
      background: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.06));
      color: var(--text-secondary);
    }

    .badge--importance-critical {
      background: light-dark(oklch(0.6 0.2 25 / 0.1), oklch(0.6 0.2 25 / 0.2));
      color: light-dark(oklch(0.45 0.15 25), oklch(0.75 0.15 25));
    }

    .badge--importance-high {
      background: light-dark(oklch(0.7 0.15 60 / 0.1), oklch(0.7 0.15 60 / 0.2));
      color: light-dark(oklch(0.5 0.12 60), oklch(0.8 0.12 60));
    }

    .badge--importance-medium {
      background: light-dark(oklch(0.75 0.1 200 / 0.1), oklch(0.75 0.1 200 / 0.2));
      color: light-dark(oklch(0.5 0.08 200), oklch(0.8 0.08 200));
    }

    .badge--importance-low {
      background: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.06));
      color: var(--text-secondary);
    }

    /* === LABEL === */
    .label {
      color: light-dark(
        oklch(from var(--accent-primary) calc(l - 0.05) calc(c - 0.03) h),
        oklch(from var(--accent-primary) calc(l + 0.1) calc(c - 0.03) h)
      );
    }

    /* === FORM SECTION === */
    .form-section {
      background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
    }

    .form-section-header {
      border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
    }

    .form-section-icon {
      background: linear-gradient(
        135deg,
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.15),
          oklch(from var(--accent-primary) l c h / 0.25)
        ),
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.05),
          oklch(from var(--accent-primary) l c h / 0.1)
        )
      );
      border: 1px solid
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.2),
          oklch(from var(--accent-primary) l c h / 0.3)
        );
      color: var(--accent-primary);
    }

    .form-group {
      label {
        color: light-dark(
          oklch(from var(--accent-primary) calc(l - 0.05) calc(c - 0.03) h),
          oklch(from var(--accent-primary) calc(l + 0.1) calc(c - 0.03) h)
        );
      }

      input[type='text'],
      select {
        background: light-dark(oklch(100% 0 0 / 0.8), oklch(100% 0 0 / 0.05));
        border-color: oklch(from var(--glass-tint) l c h / 0.08);
        color: var(--text-primary);
      }
    }

    /* === SLIDERS === */
    .slider-value {
      color: var(--accent-primary);
    }

    .slider-range-labels {
      color: var(--text-secondary);
    }

    input[type='range'] {
      background: light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.08));

      &::-webkit-slider-thumb {
        background: var(--accent-primary);
        border-color: light-dark(oklch(100% 0 0), oklch(0.15 0 0));
        box-shadow: 0 2px 6px oklch(from var(--accent-primary) l c h / 0.3);
      }
    }

    /* === PERSONALITY SUMMARY === */
    .personality-summary {
      background: light-dark(oklch(0.97 0.01 250), oklch(0.2 0.01 250));
      color: var(--text-secondary);
    }

    /* === OCEAN PROFILE === */
    .ocean-trait-card {
      background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
    }

    .ocean-trait-description {
      color: var(--text-secondary);
    }

    .ocean-weight-group {
      input[type='number'] {
        background: light-dark(oklch(100% 0 0 / 0.8), oklch(100% 0 0 / 0.05));
        border-color: oklch(from var(--glass-tint) l c h / 0.08);
        color: var(--text-primary);
      }

      label {
        color: light-dark(
          oklch(from var(--accent-primary) calc(l - 0.05) calc(c - 0.03) h),
          oklch(from var(--accent-primary) calc(l + 0.1) calc(c - 0.03) h)
        );
      }
    }

    /* === STATUS BANNER === */
    .status-banner {
      background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

      .status-icon {
        color: var(--accent-warm);
      }

      p {
        color: var(--text-secondary);
      }
    }
  }
}