:root{
	--steel:#eef1f5; --panel:#ffffff; --panel-2:#e4e9f0; --edge:#c9d3e0;
	--volt:#1b4fd8; --volt-hi:#3a6bf0; --on-volt:#ffffff;
	--lime:#2f7d4f; --alert:#c62828; --text:#16202e; --mute:#62718a;
	--ui:"Chakra Petch",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--steel);color:var(--text);font-family:var(--ui);font-size:15px;line-height:1.45}
.hud{max-width:1140px;margin:0 auto;padding-block:0;padding-inline:20px}
.bevel{clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-block:14px}
.tag{font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase}
.tag i{font-style:normal;color:var(--volt)}
.tag a{color:inherit;text-decoration:none}
.tag a:hover,.tag a:focus-visible{color:var(--volt)}
.tag .logo{height:22px;width:auto;vertical-align:-5px;margin-right:8px}
.pilot{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--mute)}
.ava{width:28px;height:28px;background:var(--panel-2);border:1px solid var(--volt);color:var(--volt);
	display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.panels{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-block:16px 0}
.pane{background:var(--panel);border:1px solid var(--edge);padding:22px 24px}
.k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.v{font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;margin:4px 0 10px}
.track{height:10px;background:var(--panel-2);border:1px solid var(--edge);overflow:hidden}
.track i{display:block;height:100%;background:var(--volt)}
.track i.hold{background:var(--lime)}
.legend{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--mute);margin-top:6px}
.cta{display:inline-block;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
	background:var(--volt);color:var(--on-volt);padding:12px 24px;text-decoration:none;margin-top:16px}
.cta:hover,.cta:focus-visible{background:var(--volt-hi)}
.stats{display:flex;flex-direction:column;gap:12px;justify-content:center}
.stat{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-family:var(--mono);font-size:13px}
.stat span:first-child{color:var(--mute)}
.ok{color:var(--lime)}
.bad{color:var(--alert)}
section{padding-block:26px}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between;
	border-left:3px solid var(--volt);padding:2px 0 2px 12px;margin-bottom:14px}
h2{font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0}
.sub{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.06em}
.wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:640px;background:var(--panel);font-family:var(--mono);font-size:13px}
th{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-align:left;
	padding:10px 14px;border-bottom:1px solid var(--edge);font-weight:400}
td{padding:11px 14px;border-bottom:1px solid var(--edge);font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--panel-2)}
td.desc{font-family:var(--ui);font-size:14px}
.kind{font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;padding:2px 7px;color:var(--mute);white-space:nowrap}
.kind.credit{color:var(--lime)}
.kind.hold{color:var(--volt)}
.amt{text-align:right;white-space:nowrap}
.plus{color:var(--lime)}
.minus{color:var(--alert)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.list{background:var(--panel);border:1px solid var(--edge);padding:4px 18px}
.row{display:flex;gap:14px;justify-content:space-between;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--edge)}
.row:last-child{border-bottom:none}
.t{font-size:15px;font-weight:600}
.d{font-family:var(--mono);font-size:11px;color:var(--mute);margin-top:4px}
.act{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--volt);text-decoration:none;white-space:nowrap}
.act:hover,.act:focus-visible{text-decoration:underline}
.here{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);border:1px solid var(--lime);padding:1px 6px;margin-left:8px}
.scopes{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.scope{font-family:var(--mono);font-size:10px;border:1px solid var(--edge);padding:2px 7px;color:var(--mute)}
.warn{background:var(--panel);border:1px solid var(--alert);border-left-width:4px;padding:15px 18px;
	display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:14px}
.warn p{margin:0;font-size:14px;color:var(--mute);max-width:58ch}
.warn b{color:var(--alert)}
footer{border-top:1px solid var(--edge);padding-block:16px 40px;font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.06em}
@media(max-width:900px){.panels,.two{grid-template-columns:1fr}}

/* Светлая тема, объявлена выше в :root целиком.
   Тёмная: переопределяет только токены, ни одного цвета ниже по файлу. */
@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]){
		--steel:#14100d; --panel:#201a15; --panel-2:#2a221b; --edge:#3d3128;
		--volt:#e07a2f; --volt-hi:#ff9a4d; --on-volt:#1a1209;
		--lime:#4fb8a5; --alert:#ef6a58; --text:#eee3d6; --mute:#9c8a76;
	}
}
:root[data-theme="dark"]{
		--steel:#14100d; --panel:#201a15; --panel-2:#2a221b; --edge:#3d3128;
	--volt:#e07a2f; --volt-hi:#ff9a4d; --on-volt:#1a1209;
	--lime:#4fb8a5; --alert:#ef6a58; --text:#eee3d6; --mute:#9c8a76;
}
.theme{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mute);
	background:var(--panel);border:1px solid var(--edge);padding:8px 14px;cursor:pointer}
.theme:hover,.theme:focus-visible{color:var(--volt);border-color:var(--volt)}

/* ---- всё ниже — сверх макета: формы, сообщения, навигация, вход ---------------- */

a{color:var(--volt)}
header nav{display:flex;flex-wrap:wrap;gap:4px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
header nav a{color:var(--mute);text-decoration:none;padding-block:4px;border-bottom:2px solid transparent}
header nav a:hover,header nav a:focus-visible{color:var(--volt)}
header nav a.on{color:var(--text);border-bottom-color:var(--volt)}
.pilot form{margin:0}
.link{background:none;border:0;padding:0;font:inherit;color:var(--mute);cursor:pointer;text-decoration:underline}
.link:hover,.link:focus-visible{color:var(--volt)}
.langs{display:flex;gap:6px}
.langs a{color:var(--mute);text-decoration:none}
.langs a.on{color:var(--volt)}

main{padding-bottom:40px}
h1{font-size:24px;letter-spacing:.04em;text-transform:uppercase;margin:22px 0 6px}
.lead{color:var(--mute);margin:0 0 18px;max-width:70ch}

.alert{border:1px solid var(--edge);border-left-width:4px;background:var(--panel);padding:12px 16px;margin-block:14px;font-size:14px}
.alert.bad{border-color:var(--alert);color:var(--text)}
.alert.bad b{color:var(--alert)}
.alert.ok{border-color:var(--lime)}
.alert.warn{border-color:var(--volt)}
.alert code{font-family:var(--mono);font-size:12px;color:var(--mute)}

form.card,.card{background:var(--panel);border:1px solid var(--edge);padding:22px 24px;margin-block:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label,.label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.field small{color:var(--mute);font-size:12px}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],input[type=date],select,textarea{
	font:inherit;font-size:15px;color:var(--text);background:var(--steel);border:1px solid var(--edge);padding:10px 12px;width:100%;max-width:460px}
textarea{min-height:90px;max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--volt);outline-offset:0;border-color:var(--volt)}
.check{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.check input{margin-top:4px}
/* галочка лежит внутри .field, и без этого наследовала бы мелкую серую подпись поля */
.field label.check{font-family:var(--ui);font-size:14px;letter-spacing:normal;text-transform:none;color:var(--text)}
.check small{display:block;color:var(--text);font-family:var(--mono);font-size:11px;letter-spacing:normal;text-transform:none}
button,.button{font:inherit;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
	background:var(--volt);color:var(--on-volt);border:0;padding:12px 24px;text-decoration:none;display:inline-block}
button:hover,.button:hover,button:focus-visible,.button:focus-visible{background:var(--volt-hi)}
button.quiet,.button.quiet{background:var(--panel-2);color:var(--text);border:1px solid var(--edge)}
button.danger{background:var(--alert);color:#fff}
.buttons{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.inline{display:inline;margin:0}

.corner{display:flex;justify-content:flex-end;padding-block:14px}
.auth{max-width:460px;margin:26px auto 40px}
.auth .tag{display:block;margin-bottom:18px}
.or{display:flex;align-items:center;gap:12px;color:var(--mute);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-block:18px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--edge)}
.providers{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.providers a{text-align:center}
.telegram{margin-top:10px;display:flex;justify-content:center;min-height:40px}
.after{margin-top:16px;font-size:14px;color:var(--mute)}

.secret{font-family:var(--mono);font-size:15px;background:var(--steel);border:1px dashed var(--volt);padding:12px 14px;word-break:break-all;user-select:all}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-family:var(--mono);font-size:15px}
.qr{background:#fff;display:inline-block;padding:8px;border:1px solid var(--edge)}
/* родной размер, целый масштаб: растянутый на дробный множитель QR рвётся щелями между модулями */
.qr svg{display:block;max-width:100%;height:auto}
.qr svg path{shape-rendering:crispEdges}
.pager{display:flex;gap:16px;justify-content:flex-end;font-family:var(--mono);font-size:12px;margin-top:10px}
.muted{color:var(--mute)}
.mono{font-family:var(--mono);font-size:12px}
.nowrap{white-space:nowrap}
.tag-role{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--volt);color:var(--volt);padding:2px 7px;margin-right:6px}
.tag-role.frozen{border-color:var(--alert);color:var(--alert)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.grid2,.providers{grid-template-columns:1fr}}

/* ---- вместо style="…": политика безопасности страниц встроенные стили отбрасывает ---- */

.plain{color:inherit;text-decoration:none}
.langs.inline{display:inline-flex}
.gap{margin-top:14px}
.gap-s{margin-top:10px}
.gap-l{margin-top:22px}
.narrow{max-width:560px}
.v.small{font-size:26px}
.cta.flat{margin:0}
select.short{max-width:220px}
.subnav{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:18px}
.subnav a{color:var(--mute);text-decoration:none;padding-block:4px;border-bottom:2px solid transparent}
.subnav a:hover,.subnav a:focus-visible{color:var(--volt)}
.subnav a.on{color:var(--text);border-bottom-color:var(--volt)}
.options{display:flex;flex-wrap:wrap;gap:6px 18px}
.options a{color:var(--mute);text-decoration:none;border-bottom:2px solid transparent}
.options a.on{color:var(--text);border-bottom-color:var(--volt)}
.filters{margin-bottom:22px}
.filters input{max-width:180px}
.details{font-size:11px;color:var(--mute)}
.details span{display:block}
small.block{display:block;font-size:11px}
.button.wide{display:block;text-align:center}
.small-note{font-size:12px;margin-top:6px}