.currency-display{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:12px 16px;border:1px solid #cbded4;border-radius:12px;background:#f1f8f4;color:#193b2d;font:13px/1.5 system-ui,sans-serif}
.currency-display strong{margin-right:8px}
.currency-display button{min-height:44px;padding:8px 16px;border:1px solid #8fae9f;border-radius:8px;background:white;color:#193b2d;font:inherit;cursor:pointer}
.currency-display button[aria-pressed=true]{background:#087553;color:white;border-color:#087553}
.currency-display button:focus-visible{outline:3px solid #3079be;outline-offset:3px}
.currency-display button:disabled{opacity:.6;cursor:wait}
.currency-display p{flex-basis:100%;margin:4px 0 0;overflow-wrap:anywhere;font-size:12px}
.top-actions>a.topbar-button{padding:8px 14px;border:1px solid #b5cbbf;background:#f1f8f4;color:#193b2d;font:600 13px/1.5 system-ui,sans-serif;white-space:nowrap}
.top-actions>a.topbar-button:hover{background:#e1f0e8;border-color:#087553}
.topbar:has(.currency-topbar) #refresh{width:44px;height:44px;flex-shrink:0}
.currency-topbar{position:relative;flex-wrap:nowrap;flex-shrink:0;gap:4px;margin:0;padding:0;border:0;background:transparent}
.currency-topbar>strong{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.currency-topbar>button{padding:8px 10px;font-weight:600;white-space:nowrap}
.currency-info>summary{list-style:none;display:grid;place-items:center;min-width:44px;height:44px;border-radius:8px;color:#426355;cursor:pointer;font:600 15px/1 system-ui,sans-serif}
.currency-info>summary::-webkit-details-marker{display:none}
.currency-info>summary:hover,.currency-info[open]>summary{background:#e1f0e8}
.currency-info>summary:focus-visible{outline:3px solid #3079be;outline-offset:3px}
.currency-info>p{position:absolute;right:0;top:calc(100% + 10px);z-index:25;width:min(340px,calc(100vw - 28px));margin:0;padding:16px;border:1px solid #b5cbbf;border-radius:12px;background:#fff;color:#193b2d;box-shadow:0 8px 30px #163b2926;text-align:left;white-space:normal}
@media(max-width:900px){
 .topbar:has(.currency-topbar){height:auto;min-height:116px;padding:12px 14px;flex-wrap:wrap;gap:10px}
 .topbar:has(.currency-topbar) .brand{min-height:36px;padding-right:156px}
 .topbar:has(.currency-topbar) .top-actions{width:100%;gap:8px}
 .topbar:has(.currency-topbar) .top-actions #refresh{position:absolute;right:14px;top:10px;display:block;width:44px;height:44px}
 .topbar:has(.currency-topbar) .mode{position:absolute;right:66px;top:18px}
 .topbar:has(.currency-topbar)~main .connection-warning{top:116px}
 .top-actions>a.topbar-button{padding:8px 10px}
 .currency-topbar{margin-left:auto}
 .currency-topbar>button{padding:8px;font-size:12px}
}
@media(max-width:380px){.topbar:has(.currency-topbar) .brand small{display:none}}