#fx-rates-app { padding: 1rem 0 2rem; } .fx-stack { display: grid; gap: 1rem; } .fx-card { background: var(--panel-bg, #fff); border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 8px; padding: 1rem; } .fx-card h1, .fx-card h2 { margin: 0 0 0.5rem; } .fx-card p { margin: 0 0 0.75rem; color: #5b6573; } .fx-card-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; } .fx-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .fx-button { appearance: none; border: 1px solid #d0d7e2; background: #fff; color: #1c2734; border-radius: 8px; padding: 0.7rem 1rem; cursor: pointer; } .fx-button--primary { background: #1c2734; color: #fff; border-color: #1c2734; } .fx-button[disabled] { opacity: 0.6; cursor: wait; } .fx-meta-grid, .fx-form-grid { display: grid; gap: 0.75rem; } .fx-meta-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 0.75rem; } .fx-form-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .fx-form-grid label, .fx-block { display: grid; gap: 0.35rem; } .fx-form-grid span, .fx-block span { font-size: 0.9rem; color: #5b6573; } .fx-form-grid input, .fx-form-grid select, .fx-block input { width: 100%; border: 1px solid #d0d7e2; border-radius: 8px; padding: 0.7rem 0.8rem; } .fx-message { min-height: 1.5rem; color: #1c2734; } .fx-message.is-error { color: #b42318; } .fx-message.is-success { color: #027a48; } .fx-table-wrap { overflow-x: auto; } .fx-table { width: 100%; border-collapse: collapse; } .fx-table th, .fx-table td { text-align: left; border-bottom: 1px solid #eef2f6; padding: 0.65rem 0.4rem; } .fx-api-note { margin-top: 0.75rem; font-size: 0.95rem; } .fx-convert-result { margin-top: 1rem; min-height: 1.5rem; font-size: 1rem; font-weight: 700; color: #1c2734; } .fx-history-block { margin-top: 1.25rem; } .fx-history-block h3 { margin: 0 0 0.75rem; font-size: 1rem; }