* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: #111; color: #eee; font: 16px/1.4 system-ui, sans-serif; overflow-x: hidden; }
main { padding: 12px 12px 80px; max-width: 600px; margin: 0 auto; }
h1 { font-size: 22px; margin: 4px 0 12px; display: flex; justify-content: space-between; align-items: baseline; }
h1 small { font-size: 15px; color: #999; font-weight: normal; }
h2 { font-size: 17px; margin: 0 0 8px; }
.card { background: #1c1c1e; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.grow { flex: 1; min-width: 0; }
.muted { color: #999; font-size: 14px; }
.err { color: #ff6b6b; min-height: 1em; margin: 6px 0; }
.ok { color: #6bd96b; }
button, input, select, textarea { font: inherit; color: inherit; min-height: 44px; border-radius: 8px; border: 1px solid #333; background: #2a2a2d; padding: 0 10px; }
button { background: #333; cursor: pointer; }
button.primary { background: #ff5a36; border-color: #ff5a36; color: #fff; width: 100%; font-weight: 600; }
button.icon { min-width: 44px; padding: 0; }
button.link { background: none; border: 0; text-align: left; width: 100%; padding: 0 4px; }
input, select { min-width: 0; }
input.num { width: 64px; text-align: center; }
textarea { width: 100%; padding: 8px 10px; }
ul { list-style: none; padding: 0; margin: 0; }
li { padding: 4px 0; border-bottom: 1px solid #2a2a2d; }
li:last-child { border-bottom: 0; }
fieldset { border: 1px solid #333; border-radius: 8px; margin: 8px 0; padding: 6px; }
fieldset label { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; width: 49%; font-size: 14px; }
fieldset input { min-height: 20px; width: 20px; }
.up { color: #6bd96b; } .deload { color: #ff6b6b; }
#tabs { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: #1c1c1e; border-top: 1px solid #333; }
#tabs a { flex: 1; text-align: center; padding: 18px 0; min-height: 56px; color: #999; text-decoration: none; font-size: 13px; }
#tabs a.active { color: #ff5a36; }
#token { position: fixed; inset: 0; background: #111; padding: 30vh 24px 0; display: flex; flex-direction: column; gap: 12px; }
#token[hidden] { display: none; }
#token button { background: #ff5a36; color: #fff; border: 0; }
.seg { display: flex; margin: 8px 0; }
.seg button { flex: 1; border-radius: 0; }
.seg button:first-child { border-radius: 8px 0 0 8px; }
.seg button:last-child { border-radius: 0 8px 8px 0; }
.seg button.active { background: #ff5a36; border-color: #ff5a36; color: #fff; }
.chart { position: relative; height: 300px; margin: 8px 0; }
.fig { display: flex; justify-content: center; gap: 12px; margin: 8px 0; }
.fig svg { width: 44%; max-width: 180px; height: auto; }
.fig.mini svg { width: 70px; }
a.block { display: block; color: inherit; text-decoration: none; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; color: #999; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 4px; vertical-align: -2px; border: 1px solid #555; }
.overlay { position: fixed; inset: 0; z-index: 10; background: #111; overflow-y: auto; padding: 12px 12px 24px; }
.small { font-size: 12px; }
.small a { color: inherit; }
input.wide { width: 100%; }
.chips { display: flex; gap: 6px; margin: 8px 0; overflow-x: auto; }
.chips button { flex: none; border-radius: 22px; font-size: 14px; }
.chips button.active { background: #ff5a36; border-color: #ff5a36; color: #fff; }
li.tap { cursor: pointer; }
/* рисунки Everkinetic — чёрные линии: светлая подложка, чтобы читались в тёмной теме */
.thumb { width: 48px; height: 48px; flex: none; object-fit: contain; background: #f2f2f2; border-radius: 8px; padding: 2px; cursor: pointer; }
.phases { display: flex; gap: 8px; }
.phases figure { flex: 1; margin: 0; text-align: center; color: #999; font-size: 14px; }
.phases img { width: 100%; background: #f2f2f2; border-radius: 12px; padding: 6px; }