/* ==========================================================================
     CURRENCY PAGE - Fresh rebuild
     ========================================================================== */

    .currency-card {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .currency-card {
      --currency-value-width: clamp(140px, 24vw, 220px);
      --currency-symbol-width: 48px;
    }

    /* ==========================================================================
     STATUS / ERROR STATES
     ========================================================================== */

    .currency-status {
      display: none;
      padding: var(--space-4);
      border-radius: var(--radius-lg);
      border: 1px dashed color-mix(in oklab, var(--border) 60%, transparent);
      background: color-mix(in oklab, var(--surface-2) 92%, transparent);
      gap: var(--space-4);
    }

    .currency-status[hidden] {
      display: none !important;
    }

    .currency-status--error {
      display: flex;
      align-items: center;
    }

    .currency-status__icon {
      font-size: clamp(32px, 6vw, 40px);
    }

    .currency-status__copy h3 {
      margin: 0 0 var(--space-1);
      font-size: var(--size-18);
    }

    .currency-status__copy p {
      margin: 0 0 var(--space-3);
      max-width: 340px;
      color: var(--text-muted);
    }

    /* ==========================================================================
     TOP CONTROL BAR (Base currency + amount input)
     ========================================================================== */

    .currency-control {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) 110px 70px var(--currency-value-width) var(--currency-symbol-width) 60px;
      align-items: center;
      gap: var(--space-3);
      border-radius: var(--radius-xl);
      background: color-mix(in oklab, var(--surface-2) 88%, transparent);
      border: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
      padding: var(--space-3) var(--space-4);
    }

    .currency-control__name-group {
      grid-column: 1;
    }

    .currency-value-grid {
      grid-column: 4 / 7;
      display: grid;
      grid-template-columns: var(--currency-value-width) var(--currency-symbol-width) 60px;
      align-items: center;
      column-gap: var(--space-2);
      justify-self: end;
    }

    .currency-value-number {
      text-align: right;
      font-size: 24px;
      font-variant-numeric: tabular-nums;
      font-weight: var(--weight-semibold);
      background: color-mix(in oklab, var(--surface) 70%, var(--surface-2) 30%);
      -webkit-appearance: none;
      appearance: none;
      border: 1px solid color-mix(in oklab, var(--accent-currency) 35%, var(--border) 65%);
      padding: var(--space-1) var(--space-2);
      min-height: 44px;
      min-width: 80px;
      width: 100%;
      border-radius: var(--radius-md);
      line-height: 1.2;
      color: var(--text);
      box-shadow: none;
    }

    #currency-amount {
      font-size: 24px !important;
    }

    .currency-value-number:focus {
      outline: none;
      border-color: var(--accent-currency);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-currency) 15%, transparent);
    }

    .currency-value-symbol {
      text-align: left;
      font-size: var(--size-18);
      color: var(--text-muted);
      font-weight: var(--weight-medium);
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: var(--space-2);
    }

    .currency-value-action {
      width: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      border-radius: var(--radius-md);
      transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
      justify-self: end;
    }

    .currency-value-action:hover {
      background: color-mix(in oklab, var(--surface-hover) 80%, transparent);
      color: var(--text);
    }

    .currency-value-action:focus-visible {
      outline: 2px solid var(--accent-currency);
      outline-offset: 2px;
    }

    .currency-value-action:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .currency-control__name-group {
      flex: 1 1 200px;
      min-width: 0;
      grid-column: 1;
    }

    .currency-control__selector {
      width: 100%;
      min-width: 0;
    }

    .currency-control__selector .wa-combobox {
      width: 100%;
    }

    .currency-control__selector .wa-combobox__trigger {
      min-width: 200px;
      max-width: 280px;
    }

    .currency-control__amount-block {
      display: grid;
      grid-template-columns: 1fr 60px 40px;
      align-items: center;
      gap: 0;
      flex: 1 1 200px;
      justify-content: flex-end;
    }

    .currency-control__amount {
      display: flex;
      align-items: baseline;
      gap: var(--space-2);
      flex: 1;
      min-width: 0;
      justify-content: flex-end;
      padding-right: var(--space-2);
    }

    .currency-control__input {
      border: 1px solid transparent;
      background: transparent !important;
      text-align: right;
      min-width: 80px;
      max-width: 200px;
      padding: var(--space-1) var(--space-2);
      color: var(--text);
      font-variant-numeric: tabular-nums;
      font-size: var(--size-24);
      font-weight: var(--weight-semibold);
      line-height: 1.2;
      flex: 1;
      border-radius: var(--radius-md);
    }

    .currency-control__input:focus {
      outline: none;
      border-color: var(--accent-currency);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-currency) 15%, transparent);
    }

    .currency-control__symbol {
      font-size: var(--size-16);
      font-weight: var(--weight-medium);
      color: var(--text-muted);
      flex-shrink: 0;
      width: 60px;
      text-align: left;
    }

    .currency-control__actions {
      flex-shrink: 0;
      width: 40px;
      display: flex;
      justify-content: center;
      margin-left: var(--space-3);
    }

    /* ==========================================================================
     CURRENCY LIST CONTAINER
     ========================================================================== */

    .currency-list {
      display: flex;
      flex-direction: column;
      border-radius: var(--radius-xl);
      overflow: hidden;
      background: color-mix(in oklab, var(--surface-2) 92%, transparent);
      border: 1px solid color-mix(in oklab, var(--border) 58%, transparent);
    }

    /* ==========================================================================
     CURRENCY ROW - Desktop (5-column layout)
     ========================================================================== */

    .currency-row {
      display: grid;
      /* Fixed widths for auxiliary columns to ensure vertical alignment */
      grid-template-columns: minmax(220px, 1fr) 110px 70px var(--currency-value-width) var(--currency-symbol-width) 60px;
      grid-template-areas: "name rate badge value value actions";
      gap: var(--space-3);
      align-items: center;
      padding: var(--space-3) var(--space-4);
      font-variant-numeric: tabular-nums;
      color: var(--text);
      background: transparent;
    }



    .currency-row+.currency-row {
      box-shadow: inset 0 1px 0 color-mix(in oklab, var(--border) 50%, transparent);
    }

    /* Row children - grid area assignments */
    .currency-row__name {
      grid-area: name;
      display: flex;
      align-items: center;
      gap: var(--space-2);
      min-width: 0;
    }

    .currency-row__flag {
      font-size: 22px;
      line-height: 1;
      flex-shrink: 0;
    }

    .currency-row__label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: var(--weight-medium);
    }

    .currency-row__rate {
      grid-area: rate;
      font-size: var(--size-14);
      font-weight: var(--weight-medium);
      color: var(--text-muted);
      text-align: right;
      font-variant-numeric: tabular-nums;
      min-width: 90px;
    }

    .currency-row__badge {
      grid-area: badge;
      font-size: var(--size-11);
      font-weight: var(--weight-medium);
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      width: 60px;
      text-align: left;
    }

    /* Meta container - hidden on desktop, used for mobile layout */
    .currency-row__meta {
      display: none;
    }

    .currency-row__value {
      grid-area: value;
      display: grid;
      grid-template-columns: var(--currency-value-width) var(--currency-symbol-width);
      align-items: center;
      gap: var(--space-2);
      font-size: clamp(22px, 2.1vw, 28px);
      font-weight: var(--weight-semibold);
      text-align: right;
      justify-content: end;
      justify-self: end;
      width: calc(var(--currency-value-width) + var(--currency-symbol-width) + var(--space-2));
    }

    .currency-row__value-number {
      font-variant-numeric: tabular-nums;
      justify-self: end;
      text-align: right;
      width: var(--currency-value-width);
    }

    .currency-row__symbol {
      font-size: var(--size-16);
      color: var(--text-muted);
      font-weight: var(--weight-medium);
      justify-self: start;
      text-align: left;
      padding-left: var(--space-2);
      width: var(--currency-symbol-width);
      min-width: var(--currency-symbol-width);
    }

    .currency-row__actions {
      grid-area: actions;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      min-width: 40px;
      justify-self: end;
    }

    /* ==========================================================================
     ACTION BUTTONS
     ========================================================================== */

    .currency-action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      padding: 0;
      border: 1px solid transparent;
      border-radius: 50%;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      transition: all var(--fast) var(--ease);
    }

    .currency-action-btn:hover {
      color: color-mix(in oklab, var(--accent-currency) 80%, var(--text) 20%);
      border-color: color-mix(in oklab, var(--accent-currency) 35%, transparent);
      background: color-mix(in oklab, var(--accent-currency) 12%, transparent);
      transform: translateY(-1px);
    }

    .currency-action-btn:focus-visible {
      outline: none;
      color: color-mix(in oklab, var(--accent-currency) 80%, var(--text) 20%);
      border-color: color-mix(in oklab, var(--accent-currency) 50%, transparent);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-currency) 20%, transparent);
    }

    .currency-action-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none;
    }

    .currency-action-btn[data-feedback="copied"] {
      color: var(--accent-info);
      border-color: color-mix(in oklab, var(--accent-info) 35%, transparent);
      background: color-mix(in oklab, var(--accent-info) 10%, transparent);
    }

    .currency-action-btn[data-feedback="error"] {
      color: var(--status-warning, #f59e0b);
      border-color: color-mix(in oklab, var(--status-warning, #f59e0b) 35%, transparent);
      background: color-mix(in oklab, var(--status-warning, #f59e0b) 10%, transparent);
    }

    /* ==========================================================================
     EMPTY STATE
     ========================================================================== */

    .currency-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: var(--space-8) var(--space-4);
      gap: var(--space-3);
    }

    .currency-empty__icon {
      font-size: 48px;
    }

    .currency-empty__content h3 {
      margin: 0 0 var(--space-2);
      font-size: var(--size-18);
    }

    .currency-empty__content p {
      margin: 0 0 var(--space-4);
      color: var(--text-muted);
      max-width: 300px;
    }

    /* ==========================================================================
     CONFIG PANEL STYLES
     ========================================================================== */

    .currency-config__list {
      display: grid;
      gap: var(--space-3);
    }

    .currency-config #currency-add-combobox .wa-combobox__trigger {
      width: 100%;
      justify-content: center;
    }

    /* ==========================================================================
     RESPONSIVE - Mobile/Tablet (2-row stacked layout)
     ========================================================================== */

    @media (max-width: 845px) {

      .currency-card {
        --currency-symbol-width: 32px;
        --currency-action-width: 40px;
      }

      /* Control bar - simple 2-column layout */
      .currency-control {
        display: grid;
        grid-template-columns: minmax(120px, 1fr) minmax(180px, auto);
        grid-template-areas: none;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3);
      }

      .currency-control__name-group {
        grid-column: 1;
        min-width: 0;
      }

      .currency-control__selector .wa-combobox__trigger {
        max-width: 100%;
        width: auto;
      }

      /* Value grid - flex row for input + symbol + action */
      .currency-value-grid {
        grid-column: 2;
        display: flex !important;
        align-items: center;
        gap: var(--space-2);
      }

      .currency-value-grid .currency-value-number {
        width: auto;
        min-width: 100px;
        flex: 1 1 auto;
      }

      .currency-value-grid .currency-value-symbol {
        width: var(--currency-symbol-width);
        flex: 0 0 var(--currency-symbol-width);
        padding-left: var(--space-1);
        text-align: left;
      }

      .currency-value-grid .currency-value-action {
        width: var(--currency-action-width);
        flex: 0 0 var(--currency-action-width);
        display: flex;
        justify-content: center;
      }

      .currency-control__actions {
        display: none;
      }

      /* =====================================================================
         TABLET CURRENCY ROWS
         Key insight: Symbol must be its own grid column (like desktop) for alignment.
         We use display:contents on .currency-row__value so its children
         (.currency-row__value-number and .currency-row__symbol) become direct
         grid children of .currency-row.
         ===================================================================== */

      .currency-row {
        display: grid;
        grid-template-columns: 1fr 150px var(--currency-symbol-width) var(--currency-action-width);
        grid-template-areas: none; /* Reset desktop grid-template-areas */
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: var(--space-2);
        row-gap: var(--space-1);
        padding: var(--space-3);
      }

      .currency-row + .currency-row {
        border-top: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
      }

      /* Row 1, Column 1: Name */
      .currency-row__name {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        min-width: 0;
      }

      /* Make value container transparent to grid - children become grid items */
      .currency-row__value {
        display: contents;
        /* Reset all desktop properties that could interfere */
        grid-area: unset;
        width: auto;
      }

      /* Row 1, Column 2: Number */
      .currency-row__value-number {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        font-size: var(--size-20);
        font-weight: var(--weight-semibold);
        font-variant-numeric: tabular-nums;
        /* Reset desktop properties */
        width: auto;
        justify-self: end;
      }

      /* Row 1, Column 3: Symbol - NOW ITS OWN COLUMN */
      .currency-row__symbol {
        grid-column: 3;
        grid-row: 1;
        font-size: var(--size-14);
        color: var(--text-muted);
        text-align: left;
        padding-left: var(--space-1);
        /* Reset desktop properties */
        width: auto;
        min-width: unset;
        justify-self: start;
      }

      /* Row 1, Column 4: Actions */
      .currency-row__actions {
        grid-column: 4;
        grid-row: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      /* Row 2: Meta spans all columns */
      .currency-row__meta {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        align-items: center;
        gap: var(--space-2);
      }

      /* Hide desktop-only elements */
      .currency-row__rate,
      .currency-row__badge {
        display: none;
      }

      .currency-row__meta-rate {
        font-size: var(--size-13);
        font-weight: var(--weight-medium);
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
      }

      .currency-row__meta-badge {
        font-size: var(--size-11);
        font-weight: var(--weight-medium);
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .currency-value-symbol {
        font-size: var(--size-14);
      }

      .currency-row__flag {
        font-size: 24px;
      }

      .currency-row__label {
        font-size: var(--size-14);
        font-weight: var(--weight-semibold);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    /* ==========================================================================
     RESPONSIVE - Narrow Mobile (stacked control bar)
     ========================================================================== */
    @media (max-width: 640px) {

      .currency-card {
        --currency-value-width: auto;
        --currency-symbol-width: 28px;
        --currency-action-width: 36px;
      }

      /* Stack dropdown and input on separate rows */
      .currency-control {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3);
      }

      /* Dropdown takes full width but not extra height */
      .currency-control__name-group {
        width: 100%;
        flex: 0 0 auto;
      }

      .currency-control__selector .wa-combobox__trigger {
        max-width: none;
        width: 100%;
      }

      /* Value grid stretches full width */
      .currency-value-grid {
        display: flex !important;
        width: 100%;
        align-items: center;
        gap: var(--space-2);
      }

      .currency-value-grid .currency-value-number {
        flex: 1 1 auto;
        width: auto;
        min-width: 80px;
      }

      .currency-value-grid .currency-value-symbol {
        flex: 0 0 var(--currency-symbol-width);
        width: var(--currency-symbol-width);
        padding-left: var(--space-1);
      }

      .currency-value-grid .currency-value-action {
        flex: 0 0 var(--currency-action-width);
        width: var(--currency-action-width);
      }

      /* Currency rows - use display:contents for symbol alignment */
      .currency-row {
        display: grid;
        grid-template-columns: 1fr 120px var(--currency-symbol-width) var(--currency-action-width);
        grid-template-areas: none; /* Reset desktop grid-template-areas */
        grid-template-rows: auto auto;
        row-gap: var(--space-1);
        column-gap: var(--space-2);
        padding: var(--space-3);
      }

      .currency-row__name {
        grid-row: 1;
        grid-column: 1;
      }

      .currency-row__value {
        display: contents;
      }

      .currency-row__value-number {
        grid-row: 1;
        grid-column: 2;
        text-align: right;
        font-size: var(--size-18);
        font-variant-numeric: tabular-nums;
        justify-self: end;
      }

      .currency-row__symbol {
        grid-row: 1;
        grid-column: 3;
        font-size: var(--size-14);
        color: var(--text-muted);
        text-align: left;
        padding-left: var(--space-1);
      }

      .currency-row__actions {
        grid-row: 1;
        grid-column: 4;
        display: flex;
        justify-content: center;
      }

      .currency-row__meta {
        grid-row: 2;
        grid-column: 1 / -1;
      }

      .currency-row__flag {
        font-size: 22px;
      }

      .currency-row__label {
        font-size: var(--size-13);
      }
    }

    /* ==========================================================================
     UTILITY: Screen reader only
     ========================================================================== */

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