:root{--bg: #ffffff;--text: #111111;--card-bg: #f5f5f5;--item-bg: #ececec;--control-bg: #e0e0e0}html.dark{--bg: #111827;--text: #ffffff;--card-bg: #1f2938;--item-bg: #2c2c2c;--control-bg: #7e8b9e}body{margin:0;font-family:system-ui,sans-serif}.app-container{min-height:100vh;background:var(--bg);color:var(--text);padding:20px;transition:background .3s,color .3s}.card{background:var(--card-bg);padding:20px;border-radius:12px;max-width:700px;margin:0 auto}.controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:15px}select,button,input{background:var(--control-bg);color:var(--text);border:1px solid rgba(0,0,0,.15);padding:8px 12px;border-radius:6px;font-size:14px;font-family:inherit}select,button{cursor:pointer}input{cursor:text}html.dark select,html.dark button,html.dark input{border-color:#fff3}input:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e51a}.rates-list{list-style:none;padding:0}.rate-item{background:var(--item-bg);color:var(--text);padding:12px;border-radius:6px;margin-bottom:8px;display:flex;align-items:center;gap:12px;border:1px solid rgba(0,0,0,.08)}html.dark .rate-item{border-color:#ffffff1a}.currency-name{opacity:.8;font-size:.9em}.background{width:600px!important;height:600px!important}@media(max-width:479px){.background{width:320px!important;height:320px!important}}