:root,[data-theme="light"]{--color-bg:#f7f6f2;--color-surface:#f9f8f5;--color-surface-2:#fbfbf9;--color-surface-offset:#f0ede8;--color-divider:#dcd9d5;--color-border:#d4d1ca;--color-text:#28251d;--color-text-muted:#7a7974;--color-text-faint:#bab9b4;--color-primary:#01696f;--color-primary-highlight:#cedcd8;--color-success:#437a22;--color-error:#c0392b;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--shadow-sm:0 1px 2px oklch(0.2 0.01 80/0.06);--shadow-md:0 4px 12px oklch(0.2 0.01 80/0.08);--sp1:.25rem;--sp2:.5rem;--sp3:.75rem;--sp4:1rem;--sp5:1.25rem;--sp6:1.5rem;--sp8:2rem;--text-xs:clamp(.75rem,.7rem + .25vw,.875rem);--text-sm:clamp(.875rem,.8rem + .35vw,1rem);--text-base:clamp(1rem,.95rem + .25vw,1.125rem);--text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);--text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);--font-body:'Inter','Apple SD Gothic Neo',sans-serif;--t:180ms cubic-bezier(.16,1,.3,1)}
[data-theme="dark"]{--color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;--color-surface-offset:#242321;--color-divider:#262523;--color-border:#393836;--color-text:#cdccca;--color-text-muted:#797876;--color-text-faint:#5a5957;--color-primary:#4f98a3;--color-primary-highlight:#313b3b;--color-success:#6daa45;--color-error:#e74c3c;--shadow-sm:0 1px 2px oklch(0 0 0/0.2);--shadow-md:0 4px 12px oklch(0 0 0/0.3)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased}body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);display:flex;flex-direction:column}button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}input,select{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}a,button,input,select{transition:color var(--t),background var(--t),border-color var(--t),box-shadow var(--t)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.app-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp4) var(--sp6);border-bottom:1px solid var(--color-divider);background:var(--color-surface);position:sticky;top:0;z-index:10}.logo{display:flex;align-items:center;gap:var(--sp2);font-size:var(--text-lg);font-weight:700;color:var(--color-text);text-decoration:none}.logo svg{color:var(--color-primary)}.header-actions{display:flex;align-items:center;gap:var(--sp2)}.lang-select,.theme-btn{height:36px;border-radius:var(--radius-md);border:1px solid var(--color-divider);background:var(--color-surface-2);color:var(--color-text-muted)}.lang-select{padding:0 var(--sp2);font-size:var(--text-xs)}.theme-btn{width:36px;display:flex;align-items:center;justify-content:center}main{flex:1;max-width:620px;margin:0 auto;width:100%;padding:var(--sp6) var(--sp4)}.hero{margin-bottom:var(--sp5)}h1{font-size:var(--text-xl);line-height:1.18;letter-spacing:-.03em;margin-bottom:var(--sp2)}.intro{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.6}.rate-status{display:flex;align-items:center;justify-content:space-between;gap:var(--sp2);padding:var(--sp3) var(--sp4);background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-divider);margin-bottom:var(--sp5);font-size:var(--text-sm)}.rate-status-left{display:flex;align-items:center;gap:var(--sp2);color:var(--color-text-muted)}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--color-success);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}.refresh-btn{display:flex;align-items:center;gap:var(--sp1);font-size:var(--text-xs);color:var(--color-primary);padding:var(--sp1) var(--sp2);border-radius:var(--radius-sm);white-space:nowrap}.refresh-btn:hover{background:var(--color-primary-highlight)}.refresh-btn.spinning svg{animation:spin .8s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.calc-card{background:var(--color-surface);border-radius:var(--radius-xl);border:1px solid var(--color-divider);box-shadow:var(--shadow-md);overflow:hidden;margin-bottom:var(--sp5)}.currency-row{padding:var(--sp5) var(--sp6)}.currency-row+.currency-row{border-top:1px solid var(--color-divider)}.row-label{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp2)}.row-inner{display:flex;align-items:center;gap:var(--sp3)}.currency-select-wrap{position:relative;flex-shrink:0}.currency-select{appearance:none;background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--sp2) var(--sp8) var(--sp2) var(--sp3);font-size:var(--text-sm);font-weight:700;cursor:pointer;min-width:115px}.select-chevron{position:absolute;right:var(--sp2);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--color-text-muted)}.amount-input{flex:1;background:none;border:none;outline:none;font-size:var(--text-xl);font-weight:700;color:var(--color-text);text-align:right;min-width:0;font-variant-numeric:tabular-nums}.amount-result{flex:1;font-size:var(--text-xl);font-weight:700;color:var(--color-text-muted);text-align:right;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.swap-container{display:flex;justify-content:center}.swap-btn{width:40px;height:40px;border-radius:var(--radius-full);background:var(--color-surface);border:2px solid var(--color-divider);color:var(--color-primary);display:flex;align-items:center;justify-content:center;margin:-20px 0;position:relative;z-index:1;box-shadow:var(--shadow-sm)}.swap-btn:hover{background:var(--color-primary-highlight);border-color:var(--color-primary)}.rate-display{background:var(--color-surface-2);border-radius:var(--radius-lg);padding:var(--sp4) var(--sp5);margin-bottom:var(--sp5);display:flex;align-items:center;justify-content:space-between;border:1px solid var(--color-divider);gap:var(--sp4)}.rate-text{font-size:var(--text-sm);color:var(--color-text-muted)}.rate-value{font-size:var(--text-sm);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}.quick-label,.section-title{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp3)}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp2);margin-bottom:var(--sp5)}.quick-btn{padding:var(--sp2) var(--sp3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);text-align:center}.quick-btn:hover,.quick-btn.active{background:var(--color-primary-highlight);border-color:var(--color-primary);color:var(--color-primary)}.pairs-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp2);margin-bottom:var(--sp6)}.pair-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--sp4);cursor:pointer}.pair-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-primary)}.pair-name{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--sp1);font-weight:600}.pair-rate{font-size:var(--text-base);font-weight:800;font-variant-numeric:tabular-nums;color:var(--color-text)}.seo-section{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);padding:var(--sp5);margin:var(--sp5) 0;line-height:1.7}.seo-section h2{font-size:var(--text-lg);margin-bottom:var(--sp2);letter-spacing:-.02em}.seo-section p,.seo-section li{color:var(--color-text-muted);font-size:var(--text-sm)}.seo-section ul{padding-left:1.2rem}.notice{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.6;margin-top:var(--sp3)}.footer{max-width:620px;width:100%;margin:0 auto;padding:var(--sp4);color:var(--color-text-muted);font-size:var(--text-xs);display:flex;justify-content:space-between;gap:var(--sp3);border-top:1px solid var(--color-divider)}.footer a{color:inherit}@media(max-width:480px){main{padding:var(--sp4) var(--sp3)}.app-header{padding:var(--sp3) var(--sp4)}.currency-row{padding:var(--sp5) var(--sp4)}.pairs-grid{grid-template-columns:1fr 1fr}.footer{flex-direction:column}.rate-status{align-items:flex-start}.row-inner{gap:var(--sp2)}.currency-select{min-width:105px}}