/* Index converter — layout & form colors */
header {
  width: 100%;
  max-width: 440px;
}

.selector-row { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; }
.select-group { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.select-group label { font-size: 0.7rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
select, input[type="text"] { background: var(--input-bg); border: 1px solid var(--card-border); color: var(--text-main); font-family: inherit; padding: 0.6rem 0.75rem; border-radius: 12px; font-size: 0.95rem; outline: none; transition: all 0.3s ease; width: 100%; }
select { cursor: pointer; appearance: none; background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1em; }
html[data-theme="dark"] select { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); }
html[data-theme="light"] select { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); }
select:focus, input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.converter-row { margin-bottom: 1rem; position: relative; }
.converter-row label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; font-size: 0.85rem; color: var(--text-muted); }
.input-wrapper { position: relative; display: flex; align-items: center; }
.symbol-prefix { position: absolute; left: 1rem; font-size: 1.1rem; color: var(--accent); font-family: inherit; pointer-events: none; opacity: 0.85; }
.converter-row input { font-size: 1.35rem; font-weight: 700; padding: 0.75rem 1rem 0.75rem 2.25rem; height: 56px; background: var(--input-overlay); }
.unit-badge { background: var(--badge-bg); color: var(--text-muted); padding: 0.2rem 0.5rem; border-radius: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; pointer-events: none; border: 1px solid var(--card-border); }
.price-ticker { margin-top: 1.25rem; text-align: center; padding-top: 1.25rem; border-top: 1px solid var(--card-border); }
.price-ticker p { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }

@keyframes pulse-box { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 60% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.live-price { font-size: 1.8rem; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); padding: 0.25rem 1.25rem; border-radius: 12px; display: inline-block; background: var(--input-overlay); transition: color 0.5s ease; animation: pulse-box 4s infinite ease-out; text-shadow: 0 0 24px var(--accent-glow); }

@keyframes pulse-green-text { 0% { text-shadow: 0 0 0px transparent; } 50% { text-shadow: 0 0 8px var(--green-glow); } 100% { text-shadow: 0 0 0px transparent; } }
.sats-per-dollar { display: block; margin-top: 0.75rem; text-align: center; background: var(--input-overlay); border: 1px solid var(--card-border); color: var(--green); padding: 0.6rem; border-radius: 12px; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.03em; animation: pulse-green-text 3s infinite ease-in-out; transition: all 0.3s ease; }
.sats-per-dollar:hover { border-color: var(--green-border); background: var(--green-dim); box-shadow: 0 0 15px var(--green-glow); text-decoration: none; }
.refresh-btn { margin-top: 0.5rem; background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.5rem; transition: color 0.3s, transform 0.3s; display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; border-radius: 50%; }
.refresh-btn:hover { color: var(--accent); background: var(--badge-bg); }
.refresh-btn.spinning svg { animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--accent); color: var(--toast-text); padding: 0.75rem 2rem; border-radius: 50px; font-weight: 700; opacity: 0; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 10000; box-shadow: 0 10px 25px var(--accent-glow); letter-spacing: 0.05em; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.custom-inputs { display: flex; gap: 0.5rem; margin-top: 0.5rem;}
.custom-inputs input { padding: 0.5rem 0.75rem; font-size: 0.8rem; background: var(--input-overlay); }
@media (max-width: 480px) { .glass-card { padding: 1.25rem; border-radius: 20px; } .converter-row input { font-size: 1.2rem; height: 50px; } }