@font-face { font-family: "Geist"; src: url("assets/fonts/geist.woff2") format("woff2-variations"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Geist Fallback"; src: local("Arial"); size-adjust: 104.755%; ascent-override: 95.9379%; descent-override: 28.1609%; line-gap-override: 0%; }
@font-face { font-family: remixicon-card; src: url("assets/fonts/remixicon.woff2") format("woff2"); }

html, body { font-family: "Geist", "Geist Fallback", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif; color-scheme: dark; }
.no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }

@keyframes pulse-migrate { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.animate-pulse-migrate { animation: pulse-migrate 3s ease-in-out infinite; animation-delay: var(--delay, 0ms); }

/* editor drawer, styled after Axiom's dialog inputs */
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row > span { font-size: 12px; line-height: 16px; color: rgb(200 201 209); white-space: nowrap; }
.field { height: 32px; width: 160px; border-radius: 4px; border: 1px solid rgb(50 53 66); background: transparent; padding: 0 8px; font-size: 12px; color: rgb(252 252 252); outline: none; transition: all .15s; }
.field:hover, .field:focus { background: rgb(50 53 66 / .2); border-color: rgb(50 53 66 / .8); }
select.field option { background: rgb(24 24 26); }
.btn, .btn-primary { height: 32px; border-radius: 4px; padding: 0 10px; font-size: 13px; font-weight: 500; white-space: nowrap; transition: all .125s; }
.btn { background: rgb(107 114 128 / .15); color: rgb(255 255 255 / .8); } .btn:hover { background: rgb(107 114 128 / .2); }
.btn-primary { background: rgb(82 111 255); color: #06070b; font-weight: 700; border-radius: 999px; padding: 0 14px; } .btn-primary:hover { filter: brightness(1.1); }
.calc { font-size: 12px; line-height: 17px; color: rgb(119 122 140); font-variant-numeric: tabular-nums; }
.calc b { color: rgb(252 252 252); font-weight: 500; }
.calc .pos { color: #2FE3AC; } .calc .neg { color: #EC397A; } .calc .warn { color: #EED686; }

.range { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: rgb(255 255 255 / .1); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(82 111 255 / .25); cursor: pointer; transition: box-shadow .15s; }
.range::-webkit-slider-thumb:hover { box-shadow: 0 0 0 6px rgb(82 111 255 / .3); }
.range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.ctool { display: flex; height: 22px; width: 22px; align-items: center; justify-content: center; border-radius: 999px; font-size: 13px; color: rgb(255 255 255 / .6); transition: all .125s; }
.ctool:hover { background: rgb(107 114 128 / .25); color: #fff; }
.ctool:active { transform: scale(.92); }
#tradeInfo, #t_calc, #chartDlgInfo { transition: opacity .15s; }

:root { --primary-color: 82 111 255; }
.vol-range::-webkit-slider-thumb { -webkit-appearance: none; position: relative; z-index: 10; height: 8px; width: 8px; border-radius: 999px; background: rgb(82 111 255); }
.vol-range::-moz-range-thumb { height: 8px; width: 8px; border: 0; border-radius: 999px; background: rgb(82 111 255); }

/* template strip: arrows show only while there are more templates that way */
.thumb-nav { position: absolute; top: 50%; z-index: 2; display: none; height: 28px; width: 28px; transform: translateY(-50%); align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgb(50 53 66); background: rgb(24 24 26 / .92); color: rgb(252 252 252); font-size: 18px; box-shadow: 0 4px 12px rgb(0 0 0 / .5); transition: background .125s; }
.thumb-nav:hover { background: rgb(50 53 66); }
.thumb-nav.on { display: flex; }