:root {
      --color-bg: #f5f6f8;
      --color-surface: #fff;
      --color-border: #e4e7ec;
      --color-border-strong: #cdd3dc;
      --color-text: #1c2128;
      --color-text-muted: #667085;
      --color-accent: #0d8a6d;
      --color-accent-hover: #0a6f58;
      --color-accent-soft: rgba(13, 138, 109, 0.10);
      --color-danger: #cf2f2f;
      --color-danger-soft: rgba(207, 47, 47, 0.08);
      --color-success: #16805a;
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 24px;
      --space-6: 32px;
      --space-7: 48px;
      --space-8: 64px;
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;
      --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
      --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --text-xs: 12px;
      --text-sm: 14px;
      --text-base: 16px;
      --text-lg: 18px;
      --text-xl: 22px;
      --text-2xl: 28px;
      --text-3xl: 36px;
    }

    html {
      box-sizing: border-box;
    }

    body,
    main,
    section,
    header,
    footer,
    div,
    p,
    h1,
    h2,
    h3,
    span,
    label,
    input,
    select,
    button,
    svg {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: var(--font-sans);
      font-size: var(--text-base);
      line-height: 1.5;
      color: var(--color-text);
      background: var(--color-bg);
      -webkit-font-smoothing: antialiased;
    }

    h1,
    h2,
    h3,
    p {
      margin: 0;
    }

    button,
    input,
    select {
      font: inherit;
      color: inherit;
    }

    button {
      background: none;
      border: 0;
      padding: 0;
    }

    .app {
      min-height: 100vh;
      display: flex;
    }

    .container {
      width: 100%;
      max-width: 720px;
      margin: auto;
      padding: var(--space-7) var(--space-4);
    }

    .header {
      margin-bottom: var(--space-6);
    }

    .eyebrow {
      margin-bottom: var(--space-2);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-accent);
    }

    .title {
      font-size: var(--text-2xl);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .subtitle {
      margin-top: var(--space-2);
      max-width: 60ch;
      color: var(--color-text-muted);
    }

    .card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      padding: var(--space-5);
    }

    .rates-card {
      margin-top: var(--space-5);
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .field-label {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-text-muted);
    }

    .text-input {
      width: 100%;
      padding: var(--space-3) var(--space-4);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      font-size: var(--text-xl);
      font-weight: 600;
      color: var(--color-text);
      appearance: none;
      -webkit-appearance: none;
      transition: border-color 150ms ease, box-shadow 150ms ease;
    }

    .text-input::placeholder {
      color: var(--color-text-muted);
      font-weight: 400;
      opacity: 0.7;
    }

    .text-input:hover {
      border-color: var(--color-border-strong);
    }

    .text-input:focus {
      outline: none;
      border-color: var(--color-accent);
      box-shadow: 0 0 0 4px var(--color-accent-soft);
    }

    .select {
      width: 100%;
      padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4);
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: var(--color-surface);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right var(--space-3) center;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      font-size: var(--text-base);
      font-weight: 500;
      cursor: pointer;
      transition: border-color 150ms ease, box-shadow 150ms ease;
    }

    .select:hover {
      border-color: var(--color-border-strong);
    }

    .select:focus {
      outline: none;
      border-color: var(--color-accent);
      box-shadow: 0 0 0 4px var(--color-accent-soft);
    }

    .pair-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: var(--space-3);
      align-items: end;
      margin-top: var(--space-5);
    }

    .swap-wrap {
      display: flex;
      justify-content: center;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 48px;
      padding: 0 var(--space-4);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      font-weight: 500;
      color: var(--color-text);
      cursor: pointer;
      touch-action: manipulation;
      transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
    }

    .btn:hover {
      background: var(--color-bg);
      border-color: var(--color-border-strong);
    }

    .btn:active {
      transform: scale(0.97);
    }

    button:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
    }

    .btn-icon {
      width: 48px;
      padding: 0;
      color: var(--color-text-muted);
    }

    .btn-icon:hover {
      color: var(--color-accent-hover);
    }

    .swap-icon {
      display: block;
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .result-block {
      margin-top: var(--space-5);
      padding: var(--space-5);
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
    }

    .result-label {
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-text-muted);
    }

    .result-main {
      display: flex;
      align-items: baseline;
      gap: var(--space-2);
      margin-top: var(--space-2);
    }

    .result-amount {
      font-size: var(--text-3xl);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .result-currency {
      font-size: var(--text-xl);
      font-weight: 600;
      color: var(--color-text-muted);
    }

    .result-rate {
      margin-top: var(--space-2);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }

    .error-note {
      margin-top: var(--space-3);
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-sm);
      background: var(--color-danger-soft);
      font-size: var(--text-sm);
      color: var(--color-danger);
    }

    .status-note {
      margin-top: var(--space-4);
      padding: var(--space-3) var(--space-4);
      border: 1px dashed var(--color-border-strong);
      border-radius: var(--radius-md);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }

    .rates-header {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-3);
      justify-content: space-between;
      margin-bottom: var(--space-4);
    }

    .rates-title {
      font-size: var(--text-lg);
      font-weight: 600;
    }

    .rates-updated {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
    }

    .rates-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-3);
    }

    .rate-item {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto;
      column-gap: var(--space-3);
      row-gap: var(--space-1);
      align-items: center;
      min-width: 0;
      min-height: 64px;
      padding: var(--space-3) var(--space-4);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      text-align: left;
      cursor: pointer;
      touch-action: manipulation;
      transition: background-color 150ms ease, border-color 150ms ease;
    }

    .rate-item:hover {
      background: var(--color-bg);
      border-color: var(--color-border-strong);
    }

    .rate-item.active {
      background: var(--color-accent-soft);
      border-color: var(--color-accent);
    }

    .rate-item.active:hover {
      border-color: var(--color-accent-hover);
    }

    .rate-code {
      font-size: var(--text-sm);
      font-weight: 600;
    }

    .rate-name {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .rate-value {
      grid-column: 2;
      grid-row: 1 / span 2;
      font-size: var(--text-sm);
      font-weight: 600;
      white-space: nowrap;
    }

    .rate-item.skeleton {
      cursor: default;
    }

    .rate-item.skeleton .skeleton-line {
      display: block;
      height: 12px;
      border-radius: var(--radius-sm);
      background: var(--color-border);
      animation: skeleton-pulse 1.4s ease-in-out infinite;
    }

    .rate-item.skeleton .skeleton-short {
      width: 55%;
      margin-top: var(--space-1);
    }

    @keyframes skeleton-pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.4;
      }
    }

    .footer {
      margin-top: var(--space-7);
      text-align: center;
    }

    .footer-note {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
    }

    .is-hidden {
      display: none;
    }

    @media (max-width: 640px) {
      .container {
        padding: var(--space-5) var(--space-4);
      }

      .card {
        padding: var(--space-4);
      }

      .header {
        margin-bottom: var(--space-5);
      }

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

      .swap-wrap {
        padding: var(--space-1) 0;
      }

      .rates-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .title {
        font-size: var(--text-xl);
      }

      .result-amount {
        font-size: var(--text-2xl);
      }
    }

    @media (max-width: 400px) {
      .rates-grid {
        grid-template-columns: 1fr;
      }
    }

    div {
      box-sizing: border-box;
    }