.cc-card{--cc-radius:14px;--cc-gap:16px;--cc-result-bg:var(--color-muted-surface);--cc-result-border:var(--color-border);--cc-accent:var(--color-accent);--cc-text:var(--color-text);--cc-muted:var(--color-text-muted);--cc-danger:var(--color-danger);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--cc-radius);max-width:520px;margin:0 auto;padding:24px;box-shadow:0 8px 32px #0000000f}.cc-row{gap:var(--cc-gap);grid-template-columns:1fr auto 1fr;align-items:end;display:grid}.cc-swap{border:1px solid var(--color-border);background:var(--color-muted-surface);width:44px;height:44px;color:var(--cc-text);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;margin-bottom:2px;font-size:1.25rem;transition:background .2s,transform .2s,border-color .2s;display:flex}.cc-swap:hover{background:var(--color-surface);border-color:var(--cc-accent);transform:rotate(180deg)}.cc-swap:disabled{opacity:.5;cursor:not-allowed;transform:none}.cc-result{text-align:center;background:var(--cc-result-bg);border:1px solid var(--cc-result-border);border-radius:var(--cc-radius);flex-direction:column;justify-content:center;align-items:center;min-height:120px;margin-top:20px;padding:22px 20px;transition:opacity .25s,transform .25s;display:flex}.cc-result.is-loading{opacity:.7}.cc-result.is-updated{animation:.35s cc-fade-in}@keyframes cc-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.cc-result-amount{color:var(--cc-accent);margin:6px 0;font-size:clamp(1.75rem,5vw,2.35rem);font-weight:700;line-height:1.2}.cc-result-rate{color:var(--cc-muted);font-size:.88rem}.cc-result-date{color:var(--cc-muted);margin-top:8px;font-size:.8rem}.cc-error{color:var(--cc-danger);background:color-mix(in srgb, var(--cc-danger) 10%, transparent);border:1px solid color-mix(in srgb, var(--cc-danger) 25%, transparent);border-radius:8px;margin-top:12px;padding:10px 14px;font-size:.88rem}.cc-actions{flex-wrap:wrap;gap:12px;margin-top:18px;display:flex}.cc-actions .btn{flex:1;min-width:140px}@media (max-width:540px){.cc-card{padding:18px}.cc-row{grid-template-columns:1fr;gap:12px}.cc-swap{margin:0 auto;transform:rotate(90deg)}.cc-swap:hover{transform:rotate(270deg)}}