/* Saudiah economic currency experience */
.sa-service-currency,
.sa-service-currency-converter {
    --fx-navy: #07162c;
    --fx-navy-2: #0d2444;
    --fx-emerald: #059669;
    --fx-emerald-dark: #047857;
    --fx-gold: #d6a84b;
    --fx-ink: #122033;
    --fx-muted: #667085;
    --fx-line: #dfe7ef;
    --fx-soft: #f3f7f9;
    --fx-green-soft: #ecfdf5;
    --fx-red: #c2414c;
    --fx-red-soft: #fff1f2;
}

.sa-service-currency .sa-tool-card__header,
.sa-service-currency-converter .sa-tool-card__header,
.sa-service-currency .sa-tool-aftercare,
.sa-service-currency-converter .sa-tool-aftercare {
    display: none !important;
}

.sa-service-currency .sa-tool-card,
.sa-service-currency-converter .sa-tool-card {
    padding: 0 !important;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sa-service-currency .sa-tool-content,
.sa-service-currency-converter .sa-tool-content {
    min-width: 0;
}

.fx-market,
.fx-converter {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 18px;
    color: var(--fx-ink);
}

.fx-market *,
.fx-converter * {
    box-sizing: border-box;
}

.fx-hero,
.fx-converter-intro,
.fx-converter-shell,
.fx-table-card,
.fx-chart-card,
.fx-picker-card,
.fx-history-card,
.fx-pair-links,
.fx-popular-strip {
    min-width: 0;
    border: 1px solid var(--fx-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(8, 28, 51, .08);
}

.fx-hero,
.fx-converter-intro {
    position: relative;
    overflow: hidden;
    padding: clamp(22px, 4vw, 38px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 15%, rgba(214,168,75,.27), transparent 31%),
        linear-gradient(135deg, var(--fx-navy), var(--fx-navy-2));
}

.fx-hero::after,
.fx-converter-intro::after {
    content: "";
    position: absolute;
    inset: auto -70px -100px auto;
    width: 240px;
    aspect-ratio: 1;
    border: 38px solid rgba(255,255,255,.04);
    border-radius: 50%;
    pointer-events: none;
}

.fx-hero > *,
.fx-converter-intro > * {
    position: relative;
    z-index: 1;
}

.fx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #cfeee5;
    font-size: 12px;
    font-weight: 700;
}

.fx-hero h2,
.fx-converter-intro h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 3.3vw, 38px);
    line-height: 1.35;
}

.fx-hero h2 b,
.fx-converter-intro h2 b {
    display: inline-flex;
    margin-inline-start: 6px;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 9px;
    color: #f8d98e;
    font-size: .54em;
    direction: ltr;
}

.fx-hero p,
.fx-converter-intro p {
    max-width: 720px;
    margin: 8px 0 0;
    color: #cad7e7;
    font-size: 13px;
}

.fx-hero__identity,
.fx-converter-selected {
    display: flex;
    align-items: center;
    gap: 17px;
    min-width: 0;
}

.fx-hero__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.fx-btn {
    min-height: 47px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.fx-btn:hover { transform: translateY(-2px); }
.fx-btn--primary { background: var(--fx-gold); color: #1c2735 !important; }
.fx-btn--ghost { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff !important; }

.fx-flag {
    width: 42px;
    height: 31px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(12,31,52,.12);
    border-radius: 8px;
    background: #eef3f6;
    color: var(--fx-navy);
}
.fx-flag img { width: 100%; height: 100%; object-fit: cover; }
.fx-flag--large { width: 72px; height: 52px; border-radius: 13px; box-shadow: 0 12px 25px rgba(0,0,0,.18); }

.fx-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.fx-metric-grid article,
.fx-market-summary article {
    min-width: 0;
    padding: 17px;
    display: grid;
    grid-template-columns: 43px minmax(0,1fr);
    align-items: center;
    gap: 11px;
    border: 1px solid var(--fx-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(8,28,51,.05);
}

.fx-metric-grid article > span,
.fx-market-summary article > i {
    width: 43px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    grid-row: 1 / span 2;
    border-radius: 13px;
    background: var(--fx-green-soft);
    color: var(--fx-emerald);
    font-size: 18px;
}

.fx-metric-grid small,
.fx-market-summary small { display: block; color: var(--fx-muted); font-size: 11px; }
.fx-metric-grid strong,
.fx-market-summary strong { min-width: 0; color: var(--fx-ink); font-size: clamp(14px, 1.5vw, 18px); overflow-wrap: anywhere; direction: ltr; text-align: right; }
.fx-metric-grid article.is-up > span { background: var(--fx-green-soft); color: var(--fx-emerald); }
.fx-metric-grid article.is-down > span { background: var(--fx-red-soft); color: var(--fx-red); }
.fx-metric-grid article.is-neutral > span { background: #f1f5f9; color: #64748b; }

.fx-section-head,
.fx-chart-card > header,
.fx-picker-card > header,
.fx-converter-form-card > header {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid var(--fx-line);
}

.fx-section-head > div:first-child,
.fx-chart-card > header > div:first-child,
.fx-picker-card > header > div:first-child,
.fx-converter-form-card > header > div:first-child {
    display: flex;
    align-items: center;
    gap: 11px;
}

.fx-section-head > div:first-child > span,
.fx-chart-card > header > div:first-child > span,
.fx-picker-card > header > div:first-child > span,
.fx-converter-form-card > header > div:first-child > span {
    width: 43px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 13px;
    background: var(--fx-green-soft);
    color: var(--fx-emerald);
    font-size: 18px;
}

.fx-section-head small,
.fx-chart-card header small,
.fx-picker-card header small,
.fx-converter-form-card header small { display: block; color: var(--fx-muted); font-size: 10px; }
.fx-section-head h3,
.fx-chart-card h3,
.fx-picker-card h3,
.fx-converter-form-card h2 { margin: 0; color: var(--fx-ink); font-size: clamp(17px, 2vw, 23px); }

.fx-table-tools {
    display: flex;
    align-items: center;
    gap: 9px;
}

.fx-table-tools label,
.fx-picker-card header label {
    min-width: 260px;
    min-height: 44px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--fx-line);
    border-radius: 11px;
    background: #f8fafc;
    color: var(--fx-muted);
}

.fx-table-tools input,
.fx-picker-card header input {
    width: 100%;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--fx-ink);
}

.fx-table-tools select {
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--fx-line);
    border-radius: 11px;
    background: #fff;
    color: var(--fx-ink);
}

.fx-table-wrap { width: 100%; overflow: auto; }
.fx-rate-table { width: 100%; min-width: 800px; border-collapse: collapse; }
.fx-rate-table th { padding: 13px 15px; background: #f4f7f9; color: #536174; font-size: 11px; text-align: right; white-space: nowrap; }
.fx-rate-table td { padding: 13px 15px; border-top: 1px solid #eaf0f4; vertical-align: middle; }
.fx-rate-table tbody tr { transition: background .15s ease; }
.fx-rate-table tbody tr:hover { background: #f8fcfa; }
.fx-rate-table td b { display: inline-block; color: var(--fx-ink); direction: ltr; }
.fx-rate-table td small { display: block; color: var(--fx-muted); font-size: 10px; direction: ltr; }

.fx-currency-name { display: flex; align-items: center; gap: 10px; min-width: 180px; color: var(--fx-ink) !important; }
.fx-currency-name strong,.fx-currency-name small { display:block; }
.fx-currency-name small { color: var(--fx-muted); direction:ltr; }

.fx-change { display: inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:8px; font-size:11px; direction:ltr; }
.fx-change.is-up { background:var(--fx-green-soft); color:var(--fx-emerald-dark); }
.fx-change.is-down { background:var(--fx-red-soft); color:var(--fx-red); }
.fx-change.is-neutral { background:#f1f5f9; color:#64748b; }

.fx-mini-btn { min-height:36px; padding:0 11px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid #a9d9c8; border-radius:9px; background:#effbf6; color:var(--fx-emerald-dark) !important; font-size:11px; font-weight:700; white-space:nowrap; }

.fx-chart-card { overflow:hidden; }
.fx-chart-ranges { display:flex; align-items:center; gap:6px; }
.fx-chart-ranges button { min-height:35px; padding:0 10px; border:1px solid var(--fx-line); border-radius:9px; background:#fff; color:var(--fx-muted); cursor:pointer; font-size:10px; }
.fx-chart-ranges button.is-active { border-color:var(--fx-emerald); background:var(--fx-emerald); color:#fff; }
.fx-chart { position:relative; min-height:285px; padding:16px 18px 8px; overflow:hidden; }
.fx-chart svg { width:100%; height:270px; display:block; overflow:visible; }
.fx-chart__grid { stroke:#dfe7ef; stroke-width:1; stroke-dasharray:4 6; }
.fx-chart__line { fill:none; stroke:var(--fx-emerald); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.fx-chart__area { fill:url(#fxAreaGradient); opacity:.9; }
.fx-chart__dot { fill:#fff; stroke:var(--fx-emerald); stroke-width:2; }
.fx-chart__label { fill:#718096; font-size:10px; font-family:Alexandria,Arial,sans-serif; }
.fx-chart__empty { min-height:250px; display:grid; place-items:center; text-align:center; color:var(--fx-muted); }
.fx-chart-tooltip { position:absolute; z-index:5; pointer-events:none; min-width:145px; padding:9px 11px; border-radius:10px; background:var(--fx-navy); color:#fff; box-shadow:0 10px 25px rgba(0,0,0,.2); opacity:0; transform:translate(-50%,-115%); font-size:10px; direction:ltr; }
.fx-chart-note { margin:0; padding:0 20px 18px; color:var(--fx-muted); font-size:11px; }
.fx-chart-note i { color:var(--fx-gold); }

.fx-market-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.fx-market-summary article { grid-template-columns:48px minmax(0,1fr); }
.fx-market-summary article > i { grid-row:auto; }

.fx-popular-strip { overflow:hidden; }
.fx-popular-grid { padding:14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.fx-popular-grid a { min-width:0; padding:13px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid var(--fx-line); border-radius:13px; background:#fff; color:var(--fx-ink) !important; }
.fx-popular-grid a:hover { border-color:#9bd5c1; background:#f8fffc; }
.fx-popular-grid small,.fx-popular-grid strong { display:block; min-width:0; overflow-wrap:anywhere; }
.fx-popular-grid small { color:var(--fx-muted); font-size:10px; }
.fx-popular-grid strong { direction:ltr; text-align:right; font-size:12px; }
.fx-popular-grid em { font-style:normal; font-size:10px; direction:ltr; }
.fx-popular-grid em.is-up { color:var(--fx-emerald); }
.fx-popular-grid em.is-down { color:var(--fx-red); }

.fx-no-results,.fx-empty-state { padding:45px 20px; text-align:center; color:var(--fx-muted); }
.fx-no-results i,.fx-empty-state > i { display:block; margin-bottom:10px; color:var(--fx-gold); font-size:42px; }
.fx-no-results h4,.fx-empty-state h2 { margin:0; color:var(--fx-ink); }
.fx-empty-state a { margin-top:12px; min-height:42px; padding:0 14px; display:inline-flex; align-items:center; gap:7px; border-radius:10px; background:var(--fx-emerald); color:#fff !important; }

[data-theme="dark"] .fx-hero,
[data-theme="dark"] .fx-converter-intro { background:linear-gradient(135deg,#050e1d,#0b213e); }
[data-theme="dark"] .fx-table-card,
[data-theme="dark"] .fx-chart-card,
[data-theme="dark"] .fx-picker-card,
[data-theme="dark"] .fx-history-card,
[data-theme="dark"] .fx-pair-links,
[data-theme="dark"] .fx-popular-strip,
[data-theme="dark"] .fx-metric-grid article,
[data-theme="dark"] .fx-market-summary article { background:#151d28; border-color:#2a3544; }
[data-theme="dark"] .fx-section-head h3,
[data-theme="dark"] .fx-chart-card h3,
[data-theme="dark"] .fx-picker-card h3,
[data-theme="dark"] .fx-metric-grid strong,
[data-theme="dark"] .fx-market-summary strong,
[data-theme="dark"] .fx-rate-table td b,
[data-theme="dark"] .fx-currency-name { color:#f4f7fb !important; }
[data-theme="dark"] .fx-rate-table th { background:#1d2734; color:#b9c4d2; }
[data-theme="dark"] .fx-rate-table td { border-color:#293442; }
[data-theme="dark"] .fx-rate-table tbody tr:hover { background:#1a2730; }
[data-theme="dark"] .fx-table-tools label,
[data-theme="dark"] .fx-picker-card header label,
[data-theme="dark"] .fx-table-tools select { background:#111923; border-color:#334155; color:#edf2f7; }
[data-theme="dark"] .fx-table-tools input,
[data-theme="dark"] .fx-picker-card header input { color:#fff; }
[data-theme="dark"] .fx-popular-grid a { background:#111923; border-color:#2d3947; color:#fff !important; }
[data-theme="dark"] .fx-chart__grid { stroke:#334155; }

@media (max-width: 980px) {
    .fx-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .fx-section-head,.fx-chart-card>header,.fx-picker-card>header { align-items:stretch; flex-direction:column; }
    .fx-table-tools { width:100%; }
    .fx-table-tools label { min-width:0; flex:1; }
}

@media (max-width: 680px) {
    .fx-hero,.fx-converter-intro { align-items:flex-start; flex-direction:column; padding:22px 16px; border-radius:17px; }
    .fx-hero__identity,.fx-converter-selected { align-items:flex-start; }
    .fx-hero__actions,.fx-hero__actions .fx-btn { width:100%; }
    .fx-hero__actions .fx-btn { flex:1; }
    .fx-metric-grid,.fx-market-summary { grid-template-columns:1fr; }
    .fx-popular-grid { grid-template-columns:1fr; padding:10px; }
    .fx-table-tools { align-items:stretch; flex-direction:column; }
    .fx-table-tools label,.fx-table-tools select { width:100%; }
    .fx-table-wrap { overflow:visible; }
    .fx-rate-table { min-width:0; }
    .fx-rate-table thead { display:none; }
    .fx-rate-table,.fx-rate-table tbody,.fx-rate-table tr,.fx-rate-table td { display:block; width:100%; }
    .fx-rate-table tbody { padding:10px; display:grid; gap:10px; }
    .fx-rate-table tr { padding:13px; border:1px solid var(--fx-line); border-radius:14px; background:#fff; }
    .fx-rate-table td { padding:8px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; border-bottom:1px dashed #e5ebf0; text-align:left; }
    .fx-rate-table td:last-child { border-bottom:0; }
    .fx-rate-table td::before { content:attr(data-label); flex:0 0 42%; color:var(--fx-muted); font-size:10px; text-align:right; }
    .fx-rate-table td:first-child { display:block; }
    .fx-rate-table td:first-child::before { display:none; }
    .fx-currency-name { min-width:0; }
    .fx-mini-btn { width:100%; }
    .fx-chart-ranges { width:100%; overflow:auto; }
    .fx-chart-ranges button { flex:1; white-space:nowrap; }
    .fx-chart { min-height:245px; padding-inline:7px; }
    .fx-chart svg { height:230px; }
    [data-theme="dark"] .fx-rate-table tr { background:#111923; border-color:#2d3947; }
}

@media (max-width: 390px) {
    .fx-hero__identity,.fx-converter-selected { flex-direction:column; }
    .fx-metric-grid article,.fx-market-summary article { padding:14px; }
}

@media print {
    .fx-table-tools,.fx-chart-ranges,.fx-hero__actions,.fx-mini-btn { display:none !important; }
    .fx-hero { color:#111; background:#fff !important; border:1px solid #ccc; }
    .fx-hero h2,.fx-hero p,.fx-eyebrow { color:#111 !important; }
}

/* Converter-specific components */
.fx-converter-intro__icon { font-size:78px; color:rgba(255,255,255,.16); }
.fx-picker-card { overflow:hidden; }
.fx-picker-grid { padding:15px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.fx-picker-grid a { min-width:0; padding:13px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid var(--fx-line); border-radius:13px; background:#fff; color:var(--fx-ink) !important; }
.fx-picker-grid a:hover { border-color:#82cbb1; background:#f5fffb; transform:translateY(-2px); }
.fx-picker-grid strong,.fx-picker-grid small { display:block; min-width:0; overflow-wrap:anywhere; }
.fx-picker-grid small { color:var(--fx-muted); direction:ltr; }

.fx-converter-shell { padding:18px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:17px; }
.fx-converter-form-card,.fx-result-card { min-width:0; border:1px solid var(--fx-line); border-radius:17px; background:#fff; overflow:hidden; }
.fx-converter-form-card form { padding:19px; display:grid; gap:17px; }
.fx-live-dot { display:inline-flex; align-items:center; gap:6px; color:var(--fx-emerald); font-size:10px; font-weight:700; }
.fx-live-dot i { font-size:8px; animation:fxPulse 1.8s infinite; }
@keyframes fxPulse { 50% { opacity:.3; } }

.fx-pair-selectors { display:grid; grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr); align-items:end; gap:10px; }
.fx-pair-selectors label > span,.fx-amount-field > span { display:block; margin-bottom:6px; color:var(--fx-muted); font-size:11px; font-weight:700; }
.fx-pair-selectors select { width:100%; min-height:50px; padding:0 12px; border:1px solid var(--fx-line); border-radius:12px; background:#f8fafc; color:var(--fx-ink); }
.fx-swap { width:46px; aspect-ratio:1; display:grid; place-items:center; border:0; border-radius:50%; background:var(--fx-navy); color:#fff; cursor:pointer; }
.fx-swap:hover { background:var(--fx-emerald); }

.fx-amount-field > div { min-height:62px; display:flex; align-items:center; overflow:hidden; border:2px solid #acd9ca; border-radius:14px; background:#fff; }
.fx-amount-field input { width:100%; min-width:0; min-height:60px; padding:0 17px; border:0 !important; outline:0; background:transparent !important; color:var(--fx-ink); font-size:22px; font-weight:800; direction:ltr; text-align:right; box-shadow:none !important; }
.fx-amount-field b { align-self:stretch; min-width:68px; display:grid; place-items:center; background:var(--fx-green-soft); color:var(--fx-emerald-dark); direction:ltr; }
.fx-quick-amounts { display:flex; flex-wrap:wrap; gap:7px; }
.fx-quick-amounts button { min-height:36px; padding:0 11px; border:1px solid var(--fx-line); border-radius:9px; background:#fff; color:var(--fx-ink); cursor:pointer; }
.fx-quick-amounts button:hover { border-color:var(--fx-emerald); color:var(--fx-emerald); }
.fx-convert-submit { min-height:53px; display:flex; align-items:center; justify-content:center; gap:9px; border:0; border-radius:13px; background:linear-gradient(135deg,var(--fx-emerald),var(--fx-emerald-dark)); color:#fff; cursor:pointer; font-weight:800; box-shadow:0 11px 24px rgba(5,150,105,.2); }

.fx-result-card { position:relative; padding:23px; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(155deg,#07162c,#102d4d); color:#fff; }
.fx-result-card::after { content:""; position:absolute; inset:auto -55px -75px auto; width:180px; aspect-ratio:1; border:25px solid rgba(255,255,255,.04); border-radius:50%; }
.fx-result-card > * { position:relative; z-index:1; }
.fx-result-card__label { color:#9ec7bb; font-size:11px; }
.fx-result-line { margin:14px 0; display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr); align-items:center; gap:8px; }
.fx-result-line > span { min-width:0; padding:14px 10px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.13); border-radius:14px; background:rgba(255,255,255,.06); text-align:center; }
.fx-result-line img { margin-bottom:8px; border-radius:6px; }
.fx-result-line b { max-width:100%; color:#fff; font-size:clamp(20px,3vw,31px); direction:ltr; overflow-wrap:anywhere; }
.fx-result-line small { color:#f4d58c; direction:ltr; }
.fx-result-line > i { color:#f4d58c; text-align:center; }
.fx-result-rates { display:grid; gap:6px; color:#c7d4e3; font-size:11px; }
.fx-result-rates b { color:#fff; direction:ltr; }
.fx-result-actions { margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.fx-result-actions button { min-height:40px; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid rgba(255,255,255,.18); border-radius:9px; background:rgba(255,255,255,.07); color:#fff; cursor:pointer; font-size:10px; }
.fx-result-actions button:hover { background:rgba(255,255,255,.15); }
.fx-update-time { margin-top:13px; color:#9eb0c2; font-size:9px; }

.fx-history-card,.fx-pair-links { overflow:hidden; }
.fx-history-grid { padding:14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.fx-history-grid > div { min-width:0; padding:12px; border:1px solid var(--fx-line); border-radius:12px; background:#f8fafc; }
.fx-history-grid time,.fx-history-grid strong,.fx-history-grid small { display:block; }
.fx-history-grid time { color:var(--fx-muted); font-size:9px; direction:ltr; }
.fx-history-grid strong { margin:4px 0; color:var(--fx-ink); direction:ltr; overflow-wrap:anywhere; }
.fx-history-grid small { color:var(--fx-muted); font-size:9px; }
.fx-pair-links > div { padding:14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.fx-pair-links a { min-width:0; padding:12px; display:grid; grid-template-columns:auto auto auto; align-items:center; justify-content:center; gap:8px; border:1px solid var(--fx-line); border-radius:12px; background:#fff; color:var(--fx-ink) !important; }
.fx-pair-links a i { color:var(--fx-gold); }
.fx-pair-links a small { grid-column:1/-1; color:var(--fx-muted); text-align:center; font-size:9px; }

[data-theme="dark"] .fx-picker-grid a,
[data-theme="dark"] .fx-converter-form-card,
[data-theme="dark"] .fx-history-grid>div,
[data-theme="dark"] .fx-pair-links a { background:#111923; border-color:#2d3947; color:#fff !important; }
[data-theme="dark"] .fx-pair-selectors select,
[data-theme="dark"] .fx-amount-field>div,
[data-theme="dark"] .fx-quick-amounts button { background:#111923; border-color:#334155; color:#fff; }
[data-theme="dark"] .fx-amount-field input,.dark .fx-history-grid strong { color:#fff; }

@media (max-width:980px) {
    .fx-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .fx-converter-shell { grid-template-columns:1fr; }
    .fx-history-grid,.fx-pair-links>div { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:680px) {
    .fx-converter-intro__icon { display:none; }
    .fx-picker-grid { grid-template-columns:1fr; padding:10px; }
    .fx-converter-shell { padding:10px; border-radius:17px; }
    .fx-pair-selectors { grid-template-columns:1fr; }
    .fx-swap { margin:auto; transform:rotate(90deg); }
    .fx-result-line { grid-template-columns:1fr; }
    .fx-result-line>i { transform:rotate(-90deg); }
    .fx-history-grid,.fx-pair-links>div { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:390px) {
    .fx-history-grid,.fx-pair-links>div { grid-template-columns:1fr; }
    .fx-result-actions { grid-template-columns:1fr; }
}