:root{--boi-primary-color:#2563eb;--boi-primary-hover:#1d4ed8;--boi-secondary-color:#64748b;--boi-border-color:#e2e8f0;--boi-background-color:#f8fafc;--boi-card-background:#fff;--boi-text-primary:#1e293b;--boi-text-secondary:#64748b;--boi-danger-color:#ef4444;--boi-success-color:#22c55e;--boi-shadow-sm:0 1px 2px 0 rgb(0 0 0/0.05);--boi-shadow-md:0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);--boi-shadow-lg:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1)}.boi-widget{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--boi-background-color);color:var(--boi-text-primary);line-height:1.5;padding:1rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;max-width:100%;box-sizing:border-box;overflow-x:auto}.boi-container{max-width:100%;margin:0 auto;animation:boiFadeIn .5s ease-out;box-sizing:border-box}@keyframes boiFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.boi-header{background:#fff;padding:1.5rem 1rem .8rem;border-bottom:1px solid #e0e0e0;text-align:center;box-shadow:0 2px 4px rgba(0,0,0,.04);margin-bottom:2rem;border-radius:1rem 1rem 0 0}.boi-header h1{font-size:2rem;font-weight:700;color:#036;letter-spacing:.5px;margin:0;padding-bottom:.2rem}.boi-header p{font-size:1.05rem;font-weight:400;color:#555;margin-top:.2rem}.boi-main-content{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start;width:100%;box-sizing:border-box}@media (min-width:1024px){.boi-main-content{grid-template-columns:1fr 350px}}@media (min-width:1200px){.boi-main-content{grid-template-columns:1fr 400px}}.boi-rates-table{background:var(--boi-card-background);border-radius:1rem;overflow:hidden;box-shadow:var(--boi-shadow-md);transition:box-shadow .3s ease;width:100%;overflow-x:auto;box-sizing:border-box}.boi-rates-table:hover{box-shadow:var(--boi-shadow-lg)}.boi-table{width:100%;min-width:600px;border-collapse:separate;border-spacing:0;font-family:'IBM Plex Sans',sans-serif;box-sizing:border-box;table-layout:fixed}.boi-th{background:var(--boi-background-color);padding:1.25rem 1rem;text-align:left;font-weight:600;color:var(--boi-text-secondary);font-size:.8125rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--boi-border-color)}.boi-td{padding:1rem;border-bottom:1px solid var(--boi-border-color);font-size:.9375rem;transition:background-color .2s ease}.boi-tr:hover .boi-td{background-color:rgba(37,99,235,.05)}.boi-flag-img{width:24px;height:16px;margin-right:.75rem;vertical-align:middle;border-radius:2px;box-shadow:var(--boi-shadow-sm)}.boi-currency-name{display:flex;align-items:center;font-weight:500;white-space:nowrap;overflow:visible;text-overflow:clip}.boi-down{color:var(--boi-danger-color);font-weight:500;display:flex;align-items:center;gap:.25rem}.boi-down i{font-size:.875rem}.boi-card{background:var(--boi-card-background);padding:1.5rem;border-radius:1rem;box-shadow:var(--boi-shadow-md);transition:all .3s ease}.boi-card:hover{box-shadow:var(--boi-shadow-lg);transform:translateY(-2px)}.boi-card-title{color:var(--boi-text-primary);font-size:1.25rem;margin-bottom:1.5rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.boi-card-title i{color:var(--boi-primary-color);font-size:1.125rem}.boi-converter-container{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.boi-currency-input-group{position:relative}.boi-currency-input{display:flex;border:1px solid var(--boi-border-color);border-radius:.75rem;overflow:hidden;background:#fff;transition:all .2s ease}.boi-currency-input:focus-within{border-color:var(--boi-primary-color);box-shadow:0 0 0 3px rgba(37,99,235,.1)}.boi-amount-input{flex:1;padding:1rem 1.25rem;border:none;background:0 0;font-size:1.125rem;font-weight:600;font-family:'IBM Plex Sans',monospace;color:var(--boi-text-primary);outline:none}.boi-amount-input::placeholder{color:#9ca3af;font-weight:400}.boi-currency-select{padding:1rem 1.25rem;border:none;border-left:1px solid var(--boi-border-color);background:#f8fafc;font-size:.875rem;font-weight:500;color:var(--boi-text-secondary);outline:none;cursor:pointer;min-width:140px}.boi-swap-container{display:flex;justify-content:center;align-items:center;margin:-.5rem 0;z-index:10;position:relative}.boi-swap-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--boi-border-color);background:#fff;color:var(--boi-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:var(--boi-shadow-sm)}.boi-swap-btn:hover{border-color:var(--boi-primary-color);color:var(--boi-primary-color);transform:rotate(180deg);box-shadow:var(--boi-shadow-md)}.boi-swap-btn i{font-size:.875rem}.boi-conversion-info{padding:1rem;background:#f8fafc;border-radius:.5rem;border:1px solid var(--boi-border-color)}.boi-rate-info{font-size:.875rem;font-weight:600;color:var(--boi-text-primary);margin:0 0 .25rem}.boi-last-update{font-size:.75rem;color:var(--boi-text-secondary);margin:0}.boi-spinner{display:inline-block;width:32px;height:32px;border:3px solid var(--boi-primary-color);border-top-color:transparent;border-radius:50%;animation:boiSpin .8s linear infinite;margin:1.5rem auto}@keyframes boiSpin{to{transform:rotate(360deg)}}.spinner-cell{text-align:center;padding:2rem 0}@media (max-width:1024px){.boi-main-content{display:flex;flex-direction:column}.boi-side-panels{width:100%}}@media (max-width:767px){.boi-widget{padding:1.5rem}}@media (max-width:1200px){.boi-main-content{grid-template-columns:1fr;gap:1rem}}@media (max-width:767px){.boi-widget{padding:1rem}.boi-main-content{display:flex;flex-direction:column;gap:1rem}.boi-rates-table{order:2;margin:0;border-radius:.5rem}.boi-side-panels{order:1}.boi-table{font-size:.875rem}.boi-td,.boi-th{padding:.75rem .5rem}.boi-currency-name{font-size:.875rem}.boi-flag-img{width:20px;height:14px;margin-right:.5rem}.boi-card{border-radius:.75rem;margin:0;padding:1.25rem}.boi-currency-select{min-width:120px;font-size:.8125rem}.boi-amount-input{font-size:1rem}}@media (max-width:480px){.boi-widget{padding:.5rem}.boi-flag-img{width:20px;height:14px;margin-right:.5rem}}