*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif}.rates-container{max-width:800px;margin:0 auto;padding:2rem;transition:all .3s ease}.rates-container.premium-mode{background:linear-gradient(to bottom,#f8f9ff,#fff);border-radius:12px;box-shadow:0 4px 20px #007bff1a}.header{margin-bottom:2rem}.title-row{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.header h1{margin:0;font-size:1.8rem}.premium-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.4rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600;box-shadow:0 2px 8px #667eea4d;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 2px 8px #667eea4d}50%{box-shadow:0 2px 16px #667eea80}}.status-bar{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.status{padding:.25rem .75rem;border-radius:4px;font-size:.9rem;font-weight:500}.status.fresh{background-color:#d4edda;color:#155724}.status.stale{background-color:#fff3cd;color:#856404}.status.real-time{background-color:#cce5ff;color:#004085}.timestamp{color:#666;font-size:.9rem}.cache-badge{background-color:#e9ecef;color:#495057;padding:.25rem .5rem;border-radius:4px;font-size:.8rem}.premium-indicator{background-color:#d1ecf1;color:#0c5460;padding:.25rem .75rem;border-radius:4px;font-size:.85rem;font-weight:500;animation:shimmer 2s ease-in-out infinite}@keyframes shimmer{0%,to{opacity:1}50%{opacity:.8}}.base-currency{margin-bottom:1.5rem;font-size:1.1rem;display:flex;align-items:center;gap:.75rem}.premium-tag{background-color:#667eea;color:#fff;padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600}.rates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin-bottom:2rem}.rate-item{display:flex;justify-content:space-between;padding:.75rem;border:1px solid #ddd;border-radius:4px;background-color:#f9f9f9;transition:all .2s ease}.rate-item.premium-rate{border-color:#667eea;background:linear-gradient(to right,#fff,#f8f9ff);box-shadow:0 2px 4px #667eea1a}.rate-item.premium-rate:hover{transform:translateY(-2px);box-shadow:0 4px 8px #667eea33}.currency{font-weight:600;color:#333}.rate{color:#666;font-family:monospace}.premium-section{text-align:center;padding:2rem;border:2px dashed #007bff;border-radius:8px;background-color:#f0f8ff}.premium-button{background-color:#007bff;color:#fff;border:none;padding:.75rem 2rem;font-size:1rem;border-radius:4px;cursor:pointer;font-weight:600;margin-bottom:.5rem}.premium-button:hover{background-color:#0056b3}.premium-note{color:#666;font-size:.9rem;margin:.75rem 0 0;line-height:1.5;max-width:500px;margin-left:auto;margin-right:auto}.premium-active{text-align:center;padding:2rem;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;margin-top:2rem;color:#fff;box-shadow:0 4px 20px #667eea4d}.premium-message{margin-bottom:1.5rem}.premium-title{margin-bottom:.5rem;font-weight:700;font-size:1.2rem;color:#fff}.premium-subtitle{margin:0;font-size:.95rem;opacity:.95;color:#fff}.back-button{background-color:#6c757d;color:#fff;border:none;padding:.5rem 1.5rem;font-size:.9rem;border-radius:4px;cursor:pointer}.back-button:hover{background-color:#5a6268}.error{color:#dc3545;text-align:center;padding:2rem}.fallback-page{text-align:center;padding:4rem 2rem;max-width:500px;margin:0 auto}.fallback-icon{font-size:4rem;margin-bottom:1.5rem}.fallback-page h2{margin-bottom:1rem;color:#333}.fallback-page p{color:#666;margin-bottom:2rem;line-height:1.6}.retry-button{background-color:#007bff;color:#fff;border:none;padding:.75rem 2rem;font-size:1rem;border-radius:4px;cursor:pointer;font-weight:600}.retry-button:hover{background-color:#0056b3}.retry-button-small{background-color:#007bff;color:#fff;border:none;padding:.5rem 1rem;font-size:.85rem;border-radius:4px;cursor:pointer;font-weight:500;margin-left:1rem}.retry-button-small:hover{background-color:#0056b3}.offline-banner{background-color:#fff3cd;border:1px solid #ffc107;border-radius:8px;padding:1rem;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}.offline-banner p{margin:0;color:#856404;font-weight:500}.offline-badge{background-color:#e9ecef;color:#495057;padding:.25rem .75rem;border-radius:4px;font-size:.85rem;font-weight:500}