body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;background-color: #f1f3f6;padding: 40px 20px;margin: 0;text-align: center;}h1 {color: #222;margin-bottom: 20px;}.animated-title {display: inline-block;overflow: hidden;white-space: nowrap;font-family: 'Nunito', sans-serif;font-weight: 900;color: #21aa58;text-shadow: 1px 1px 2px rgba(0,0,0,0.1);letter-spacing: 0.5px;}.animated-title .letter {display: inline-block;opacity: 0;transform: translateY(-50px);animation-fill-mode: forwards;}@keyframes dropIn {0% {opacity: 0;transform: translateY(-50px);}60% {transform: translateY(10px);}80% {transform: translateY(-5px);}100% {opacity: 1;transform: translateY(0);}}@media (min-width: 769px) {.animated-title {font-size: 32px;font-weight: 900;color: #21aa58;text-shadow: 2px 2px 4px rgba(0,0,0,0.1);letter-spacing: 0.5px;}.animated-title .letter {animation: fadeIn 0.3s ease forwards;animation-delay: calc(var(--index) * 0.05s);padding: 0;}@keyframes fadeIn {0% {opacity: 0;transform: translateY(-10px);}100% {opacity: 1;transform: translateY(0);}}}@media (max-width: 768px) {.animated-title {display: block;text-align: center;margin-top: 15px;margin-bottom: 25px;font-size: 36px;font-weight: 900;color: #21aa58;letter-spacing: 0.5px;text-shadow: 2px 2px 3px rgba(0,0,0,0.2);}.animated-title .letter {display: inline-block;opacity: 0;transform: translateY(-50px);}@keyframes dropIn {0% {opacity: 0;transform: translateY(-50px);}60% {transform: translateY(10px);}80% {transform: translateY(-5px);}100% {opacity: 1;transform: translateY(0);}}.animated-title .letter.animate {animation: dropIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;animation-delay: calc(var(--index) * 0.1s);}}input[type="text"] {padding: 10px 14px;border-radius: 8px;border: 1px solid #ccc;background-color: #fff;font-size: 14px;transition: border 0.3s ease;min-width: 200px;}input[type="text"]:focus {outline: none;border-color: #21aa58;}.dropdown {position: relative;display: inline-block;}.dropdown > button {padding: 10px 14px;border-radius: 8px;border: none;background-color: #21aa58;color: #fff;font-size: 14px;cursor: pointer;transition: background-color 0.3s ease;}.dropdown > button:hover {background-color: #1a944c;}.dropdown-content {display: none;position: absolute;background-color: #fff;min-width: 250px;max-height: 300px;overflow-y: auto;box-shadow: 0 8px 16px rgba(0,0,0,0.15);border-radius: 10px;z-index: 1;text-align: left;margin-top: 8px;padding: 8px 0;}.dropdown-content .currency-option {padding: 10px 16px;cursor: pointer;display: flex;align-items: center;transition: background-color 0.2s ease;}.dropdown-content .currency-option:hover {background-color: #f3f3f3;}.dropdown-content img {width: 24px;height: 24px;border-radius: 50%;margin-right: 10px;}.dropdown:hover .dropdown-content {display: block;}.card-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));gap: 15px;justify-items: center;}.currency-card {position: relative;background-color: #fff;border-radius: 20px;box-shadow: 0 2px 12px rgba(0,0,0,0.06);width: 100%;max-width: 150px;padding: 20px 15px 15px;display: flex;flex-direction: column;align-items: center;transition: background-color 0.6s ease;}.currency-card.green {background-color: #e4f8e4;}.currency-card.red {background-color: #fce7e7;}.flag {width: 36px;height: 36px;border-radius: 50%;object-fit: cover;margin-bottom: 10px;}.name {font-weight: 600;font-size: 15px;color: #333;margin-bottom: 2px;}.code {font-size: 12px;color: #aaa;margin-bottom: 6px;}.price {font-size: 20px;font-weight: bold;color: #000;margin-top: 5px;}.change {position: absolute;top: 8px;right: 8px;font-size: 14px;font-weight: 500;}.change.up {color: green;}.change.down {color: red;}.remove-btn {position: absolute;top: 8px;left: 8px;background: #f0f0f0;border: none;border-radius: 50%;font-size: 16px;width: 26px;height: 26px;line-height: 26px;text-align: center;padding: 0;color: #444;cursor: pointer;box-shadow: 0 0 3px rgba(0,0,0,0.1);}.remove-btn:hover {background-color: #e0e0e0;color: #000;}.error-msg {color: red;font-size: 14px;margin-top: 20px;}.controls {margin-bottom: 25px;display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;}.bottom-menu {position: fixed;bottom: 20px;right: 20px;background: linear-gradient(135deg, #21aa58, #1a944c);color: white;padding: 14px 24px;border-radius: 50px;box-shadow: 0 6px 20px rgba(33, 170, 88, 0.3);cursor: pointer;font-size: 16px;font-weight: 600;z-index: 1000;transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;gap: 8px;min-width: 160px;text-align: center;border: 2px solid rgba(255, 255, 255, 0.2);backdrop-filter: blur(5px);}.bottom-menu:hover {background: linear-gradient(135deg, #1a944c, #157a3e);transform: translateY(-2px);box-shadow: 0 8px 25px rgba(33, 170, 88, 0.4);}.bottom-menu:active {transform: translateY(1px);box-shadow: 0 4px 15px rgba(33, 170, 88, 0.3);}.currency-modal {position: fixed;bottom: 0;left: 0;width: 100%;max-height: 60vh;background-color: #fff;box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);border-radius: 12px 12px 0 0;padding: 15px 15px 60px;overflow-y: auto;z-index: 1001;display: none;animation: slideUp 0.3s ease-out;box-sizing: border-box;}.currency-modal-header {display: flex;justify-content: flex-end;position: sticky;top: 0;background: white;z-index: 10;padding-bottom: 10px;}.close-modal {background: transparent;border: none;font-size: 24px;color: #999;cursor: pointer;}.close-modal:hover {color: #333;}@keyframes slideUp {from {transform: translateY(100%);opacity: 0;}to {transform: translateY(0);opacity: 1;}}.currency-option {padding: 10px;display: flex;align-items: center;border-bottom: 1px solid #f0f0f0;cursor: pointer;}.currency-option:hover {background-color: #f8f8f8;}.currency-option img {width: 24px;height: 24px;border-radius: 50%;margin-right: 10px;}.converter-section {max-width: 620px;margin: auto;margin-bottom: 50px;background: #fff;border-radius: 20px;box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);padding: 30px 24px;display: flex;flex-direction: column;gap: 22px;transition: all 0.3s ease-out;}.converter-header {display: flex;justify-content: flex-end;margin-bottom: 10px;}.close-converter {display: none;background: transparent;border: none;font-size: 24px;color: #999;cursor: pointer;padding: 0;width: 30px;height: 30px;line-height: 30px;}.close-converter:hover {color: #333;}.converter-toggle {position: fixed;bottom: 20px;left: 20px;background: linear-gradient(135deg, #3366cc, #2a56ad);color: white;padding: 14px 24px;border-radius: 50px;box-shadow: 0 6px 20px rgba(51, 102, 204, 0.3);cursor: pointer;font-size: 16px;font-weight: 600;z-index: 1000;transition: all 0.3s ease;display: none;align-items: center;justify-content: center;gap: 8px;min-width: 160px;text-align: center;border: 2px solid rgba(255, 255, 255, 0.2);backdrop-filter: blur(5px);}.converter-toggle:hover {background: linear-gradient(135deg, #2a56ad, #1e4080);transform: translateY(-2px);box-shadow: 0 8px 25px rgba(51, 102, 204, 0.4);}.converter-toggle:active {transform: translateY(1px);box-shadow: 0 4px 15px rgba(51, 102, 204, 0.3);}.button-icon {width: 20px;height: 20px;margin-right: 8px;stroke-width: 2.5;}@media (max-width: 768px) {.converter-toggle {display: flex;bottom: 25px;left: 5px;width: 42%;max-width: 150px;justify-content: center;padding: 12px 5px;min-width: auto;font-size: 14px;border-radius: 30px;}.bottom-menu {bottom: 25px;right: 5px;width: 42%;max-width: 150px;justify-content: center;padding: 12px 5px;min-width: auto;font-size: 14px;border-radius: 30px;}.button-icon {width: 18px;height: 18px;margin-right: 5px;}.close-converter {display: block;font-size: 28px;width: 36px;height: 36px;line-height: 36px;}.converter-section {position: fixed;bottom: 0;left: 0;right: 0;width: 100%;max-width: 100%;margin: 0;border-radius: 20px 20px 0 0;z-index: 999;transform: translateY(100%);opacity: 0;visibility: hidden;box-sizing: border-box;padding: 24px 20px 30px;}.converter-section.active {transform: translateY(0);opacity: 1;visibility: visible;}.converter-section.active ~ .converter-toggle {display: none;}.converter-section.active ~ .bottom-menu {bottom: calc(100% - 80px);}.converter-field {padding: 15px;border-radius: 16px;background-color: #f9fafb;box-shadow: 0 1px 3px rgba(0,0,0,0.05);}.converter-field label {font-size: 14px;margin-bottom: 4px;color: #555;}.converter-field input, .converter-field select {font-size: 18px;font-weight: 500;}.amount-field input {font-size: 24px;font-weight: 600;text-align: center;}.currency-selector {gap: 12px;}.currency-selector img {width: 28px;height: 28px;}.currency-static {font-size: 18px;}.swap-btn {width: 46px;height: 46px;font-size: 22px;box-shadow: 0 4px 10px rgba(33, 170, 88, 0.3);margin: 0 5px;}.converter-result {font-size: 22px;padding: 15px;margin-top: 10px;background-color: #f0f8f0;border-radius: 12px;}.converter-row {gap: 0;margin-bottom: 5px;justify-content: space-between;}.currency-exchange-row {flex-wrap: nowrap;align-items: center;gap: 4px;}.currency-exchange-row .converter-field {flex: 1;min-width: 0;padding: 12px;}.swap-container {flex: 0 0 auto;margin: 0;}.converter-header {margin-bottom: 15px;}}.converter-title {text-align: center;font-size: 20px;font-weight: 600;color: #333;}.converter-row {display: flex;align-items: center;gap: 14px;flex-wrap: wrap;}.currency-exchange-row {display: flex;align-items: center;justify-content: space-between;gap: 8px;margin-bottom: 15px;width: 100%;}.currency-exchange-row .converter-field {flex: 1;min-width: 0;}.currency-exchange-row .swap-container {flex: 0 0 auto;display: flex;justify-content: center;align-items: center;margin: 0 5px;}.converter-field {flex: 1;border: 1px solid #ddd;border-radius: 14px;padding: 16px;background: #f9fafb;display: flex;flex-direction: column;gap: 8px;min-width: 140px;}.converter-field label {font-size: 13px;font-weight: 500;color: #666;}.converter-field input, .converter-field select {border: none;background: transparent;font-size: 16px;font-weight: 500;color: #222;outline: none;}.flag-label {display: flex;align-items: center;gap: 8px;font-weight: 500;}.flag-label img {width: 18px;height: 18px;border-radius: 50%;}.swap-btn {background: #21aa58;color: #fff;border: none;width: 44px;height: 44px;border-radius: 50%;font-size: 20px;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: transform 0.3s ease;}.swap-btn:hover {transform: rotate(180deg);background-color: #1a944c;}.converter-result {text-align: center;font-size: 18px;font-weight: bold;color: #21aa58;}.result-amount {color: #333;}.result-converted {color: #21aa58;font-weight: 700;}.amount-field {width: 100%;}.currency-selector {display: flex;align-items: center;gap: 10px;}.currency-selector img {width: 24px;height: 24px;border-radius: 50%;}.currency-static {font-size: 16px;font-weight: 500;color: #222;}@media (max-width: 768px) {.currency-static {font-size: 18px;font-weight: 600;}}.swap-container {display: flex;justify-content: center;align-items: center;}.convert-btn {background-color: #3366cc;color: white;border: none;border-radius: 8px;padding: 12px 20px;font-size: 16px;font-weight: 500;cursor: pointer;transition: background-color 0.3s ease;margin-top: 10px;width: 100%;}.convert-btn:hover {background-color: #2a56ad;}