.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);max-width:520px;margin:0 auto;padding:24px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--cc-radius);box-shadow:0 8px 32px rgba(0,0,0,.06)}.cc-row{display:grid;grid-template-columns:1fr auto 1fr;grid-gap:var(--cc-gap);gap:var(--cc-gap);align-items:end}.cc-swap{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:2px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-muted-surface);color:var(--cc-text);font-size:1.25rem;cursor:pointer;transition:background .2s,transform .2s,border-color .2s}.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{margin-top:20px;padding:22px 20px;text-align:center;background:var(--cc-result-bg);border:1px solid var(--cc-result-border);border-radius:var(--cc-radius);min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .25s ease,transform .25s ease}.cc-result.is-loading{opacity:.7}.cc-result.is-updated{animation:cc-fade-in .35s ease}@keyframes cc-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.cc-result-amount{font-size:clamp(1.75rem,5vw,2.35rem);font-weight:700;color:var(--cc-accent);margin:6px 0;line-height:1.2}.cc-result-rate{font-size:.88rem;color:var(--cc-muted)}.cc-result-date{font-size:.8rem;color:var(--cc-muted);margin-top:8px}.cc-error{margin-top:12px;padding:10px 14px;border-radius:8px;font-size:.88rem;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)}.cc-actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}.cc-actions .btn{flex:1 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)}}