/* Страницы «Расчёты», «Замечания», «Аккаунты», «Настройки», вход. Только токены из tokens.css (hex-цветов и размеров шрифта здесь нет).
   Те же правила, что в style.css: линии вместо рамок, акцентная полоса у важных блоков, табличные цифры, единые состояния. */
@import url("tokens.css");
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--page);color:var(--text);font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-size:var(--fs-4);line-height:var(--lh);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.band{background:var(--brand);color:var(--on-brand);padding:var(--sp-3) var(--sp-4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.band img{height:var(--sp-5)}.band .logo{height:var(--sp-5)}
.band .t{font-size:var(--fs-2);border-left:1px solid var(--on-brand-line);padding-left:var(--sp-3)}
.band .who{margin-left:auto;font-size:var(--fs-2)}
.band a{color:var(--on-brand);text-decoration:none;font-size:var(--fs-3);border:1px solid var(--on-brand-line);border-radius:var(--r-1);padding:var(--sp-2) var(--sp-3)}
.band a:hover{background:var(--on-brand-hover)}
.wrap{max-width:1360px;margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-7)}
.note{font-size:var(--fs-1);color:var(--muted);margin:0 0 var(--sp-2)}
/* вкладки */
.tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--rule);margin-bottom:var(--sp-5);overflow-x:auto}
.tab{padding:var(--sp-3) var(--sp-4);border:0;background:none;font-family:inherit;font-size:var(--fs-4);font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tab:hover{color:var(--brand-dark)}
.tab[aria-selected=true]{color:var(--brand-dark);border-color:var(--brand)}
.tab:focus-visible,.chip:focus-visible,.it:focus-visible,.add:focus-visible,button:focus-visible,input:focus,select:focus{outline:2px solid var(--brand);outline-offset:1px}
.tab .n{font-size:var(--fs-1);font-weight:600;background:var(--tint);border-radius:var(--sp-3);padding:1px var(--sp-2);margin-left:var(--sp-1);color:var(--muted-on-tint)}
.split{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:var(--sp-6);align-items:start}
.card{background:var(--page);border-top:1px solid var(--rule)}
.list{display:flex;flex-direction:column;max-height:calc(100vh - 190px);min-height:420px}
.tools{padding:var(--sp-3) 0;border-bottom:1px solid var(--border);display:grid;gap:var(--sp-2)}
.tools input,.tools select,.f input,.f select,td input{width:100%;min-height:var(--sp-7);border:1px solid var(--rule);border-radius:var(--r-1);padding:0 var(--sp-3);font-family:inherit;font-size:var(--fs-4);background:var(--page);color:var(--text)}
.tools input:hover,.tools select:hover,.f input:hover,.f select:hover,td input:hover{border-color:var(--muted)}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chip{border:1px solid var(--rule);background:var(--page);border-radius:var(--sp-4);padding:var(--sp-1) var(--sp-3);font-family:inherit;font-size:var(--fs-2);color:var(--muted);cursor:pointer}
.chip:hover{border-color:var(--brand)}
.chip[aria-pressed=true]{background:var(--tint);border-color:var(--brand);color:var(--brand);font-weight:600}
.items{overflow:auto;flex:1}
.it{display:grid;grid-template-columns:1fr auto;gap:2px var(--sp-2);width:100%;text-align:left;border:0;border-bottom:1px solid var(--border);background:var(--page);padding:var(--sp-3) var(--sp-3);cursor:pointer;font-family:inherit;font-size:var(--fs-4);color:inherit}
.it:hover{background:var(--tint)}
.it[aria-current=true]{background:var(--tint);box-shadow:inset 6px 0 0 var(--brand)}
.it .a{font-weight:600;color:var(--brand-dark)}.it .b{font-size:var(--fs-1);color:var(--muted)}
.it[aria-current=true] .b,.it:hover .b{color:var(--muted-on-tint)}
.it .r{grid-row:1 / span 2;grid-column:2;align-self:center;text-align:right;font-size:var(--fs-1);color:var(--muted)}
.it[aria-current=true] .r,.it:hover .r{color:var(--muted-on-tint)}
.dot{display:inline-block;width:var(--sp-2);height:var(--sp-2);border-radius:50%;background:var(--ok-text);margin-right:var(--sp-2)}.dot.off{background:var(--muted)}
.bar{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-1);color:var(--muted);display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border)}
.bar button{border:1px solid var(--rule);background:var(--page);border-radius:var(--r-1);padding:var(--sp-2) var(--sp-3);font-family:inherit;font-size:var(--fs-2);color:var(--brand);cursor:pointer}
.add{margin:var(--sp-3) 0;min-height:var(--sp-7);width:100%;border:1.5px dashed var(--brand);color:var(--brand);background:var(--page);border-radius:var(--r-1);font-family:inherit;font-size:var(--fs-3);font-weight:600;cursor:pointer}
.add:hover{background:var(--tint)}
/* форма записи */
.form{padding:var(--sp-4) 0;display:grid;gap:var(--sp-5);grid-template-columns:minmax(0,1fr)}.form>*{min-width:0}
.head{display:flex;gap:var(--sp-3);align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.head h2{margin:0;font-size:var(--fs-6);color:var(--brand-dark)}.head .sub{font-size:var(--fs-2);color:var(--muted)}
.state{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);background:var(--warn-bg);border-left:6px solid var(--warn-line);color:var(--warn-text);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-2)}
.state .sp{flex:1}.state button{min-height:var(--sp-6);border-radius:var(--r-1);padding:0 var(--sp-4);font-family:inherit;font-size:var(--fs-3);font-weight:600;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--sp-3)}
label{display:block;font-size:var(--fs-2);color:var(--muted);margin-bottom:var(--sp-1)}
.f .hint{font-size:var(--fs-2);color:var(--muted);margin-top:var(--sp-1)}
.hint{font-size:var(--fs-2);color:var(--muted);max-width:70ch}
.sec{border-top:1px solid var(--border);padding-top:var(--sp-4)}
.sec h3{margin:0 0 var(--sp-2);font-size:var(--fs-4);font-weight:600;color:var(--muted-on-tint)}
h2,.sec h2{font-size:var(--fs-5);font-weight:600;color:var(--brand-dark)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-3);font-variant-numeric:tabular-nums}
th{font-size:var(--fs-2);color:var(--muted);font-weight:600;text-align:left;padding:var(--sp-1) var(--sp-2);border-bottom:1px solid var(--rule)}
td{padding:var(--sp-1) var(--sp-2);border-bottom:1px solid var(--border)}
td input{min-height:var(--sp-6);padding:0 var(--sp-2);font-size:var(--fs-3)}
td.n,.imp td.n{text-align:right}
td.x button{border:0;background:none;color:var(--muted);font-size:var(--fs-5);cursor:pointer}
td.x button:hover{color:var(--err-text)}
tfoot td{font-weight:600}.ok{color:var(--ok-text)}
.pill{display:inline-block;font-size:var(--fs-1);font-weight:600;border-radius:var(--sp-3);padding:2px var(--sp-2);background:var(--tint);color:var(--brand)}
.pill.warn{background:var(--warn-bg);color:var(--warn-text)}.pill.gray{background:var(--border);color:var(--text)}
/* статус: значок и текст, не только цвет */
.pill.st-ok{background:var(--ok-bg);color:var(--ok-text)}.pill.st-ok::before{content:"\2713\00a0"}
.pill.st-warn::before{content:"\25B2\00a0"}.pill.st-wait::before{content:"\25CB\00a0"}
.route{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.route label{border:1px solid var(--rule);border-radius:var(--r-1);padding:var(--sp-3);font-size:var(--fs-2);color:var(--text);cursor:pointer;margin:0}
.route label:hover{border-color:var(--brand)}
.route input{display:none}.route label:has(input:checked){border-color:var(--brand);background:var(--tint);box-shadow:inset 6px 0 0 var(--brand)}
.route b{display:block;font-size:var(--fs-3);color:var(--brand-dark)}
.slider{display:flex;align-items:center;gap:var(--sp-3)}.slider input{flex:1;accent-color:var(--brand)}.slider b{min-width:48px;text-align:right}
.sc{overflow-x:auto}.imp td:first-child,.imp th:first-child{width:38%}
.imp td.neg{background:var(--err-bg);color:var(--err-text);font-weight:700}
.imp-note{font-size:var(--fs-2);color:var(--muted);margin:var(--sp-2) 0 0}
.actions{display:flex;gap:var(--sp-3);justify-content:flex-end;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:var(--sp-4)}
.actions button{min-height:var(--sp-7);border-radius:var(--r-1);padding:0 var(--sp-5);font-family:inherit;font-size:var(--fs-4);font-weight:600;cursor:pointer}
.primary{background:var(--brand);color:var(--on-brand);border:1px solid var(--brand)}.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.ghost{background:var(--page);color:var(--brand);border:1px solid var(--rule)}.ghost:hover{background:var(--tint);border-color:var(--brand)}
.danger{background:transparent;color:var(--err-text);border:0;text-decoration:underline;font-weight:400}
.actions button:disabled,.primary:disabled{background:var(--border);color:var(--disabled-text);border-color:var(--border);cursor:default}
.panel{display:none}.panel.on{display:block}
.promo{display:grid;grid-template-columns:1fr auto;gap:2px var(--sp-2)}
.rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--sp-5);padding:var(--sp-4) 0}
.lock{font-size:var(--fs-1);color:var(--muted)}
.msg{font-size:var(--fs-2);margin:var(--sp-2) 0 0}.msg.err{color:var(--err-text)}.msg.ok{color:var(--ok-text)}
.denied{padding:var(--sp-5);text-align:center;color:var(--muted)}
.back{display:none;margin:var(--sp-3) 0 0;border:1px solid var(--rule);background:var(--page);border-radius:var(--r-1);padding:var(--sp-2) var(--sp-3);font-family:inherit;font-size:var(--fs-3);font-weight:600;color:var(--brand);cursor:pointer;width:fit-content}
.ro input,.ro select{background:var(--tint);color:var(--disabled-text)}
.chk{display:flex;gap:var(--sp-4);flex-wrap:wrap;min-height:var(--sp-7);align-items:center}.chk label{display:flex;gap:var(--sp-2);align-items:center;margin:0;font-size:var(--fs-3);color:var(--text)}.chk input{width:auto;min-height:0}
.empty{padding:var(--sp-5) var(--sp-4);color:var(--muted);text-align:center;max-width:70ch;margin:0 auto}
.empty b{display:block;color:var(--text);font-size:var(--fs-4);margin-bottom:var(--sp-2)}
.empty .cta{display:inline-block;margin-top:var(--sp-3);min-height:var(--sp-7);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-1);background:var(--brand);color:var(--on-brand);text-decoration:none;font-family:inherit;font-size:var(--fs-3);font-weight:600;border:0;cursor:pointer}
.empty .cta:hover{background:var(--brand-hover)}
.rate-edit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2);align-items:end;max-width:420px}
.rate-edit button{min-height:var(--sp-7);border-radius:var(--r-1);padding:0 var(--sp-4);font-family:inherit;font-size:var(--fs-3);font-weight:600;cursor:pointer}
footer{max-width:1360px;margin:0 auto;padding:var(--sp-4) var(--sp-4) var(--sp-5);font-size:var(--fs-2);color:var(--muted);border-top:1px solid var(--border)}
footer select{margin-left:var(--sp-2);min-height:var(--sp-6);border:1px solid var(--rule);border-radius:var(--r-1);padding:0 var(--sp-2);font-family:inherit;font-size:var(--fs-3);background:var(--page)}
.linkbtn{border:0;background:none;color:var(--brand);cursor:pointer;font:inherit;text-decoration:underline;padding:0;width:auto;min-height:0;margin:0}
.band .who{margin-left:auto}.band #accountsLink+#toCalc{margin-left:var(--sp-2)}
code{background:var(--tint);border-radius:var(--r-1);padding:2px var(--sp-2);color:var(--brand-dark)}
.lang{display:inline-flex;gap:2px;margin-left:var(--sp-2);flex-shrink:0}
.lang-btn{width:auto;min-width:var(--sp-6);min-height:var(--sp-6);padding:0 var(--sp-2);border:1px solid var(--on-brand-line);background:transparent;color:var(--on-brand);font-family:inherit;font-size:var(--fs-1);font-weight:600;border-radius:var(--r-1);cursor:pointer}
.lang-btn:hover{background:var(--on-brand-hover)}
.lang-btn[aria-pressed=true]{background:var(--on-brand);color:var(--brand)}
@media (max-width:860px){
  .split{grid-template-columns:minmax(0,1fr)}.split>*{min-width:0}.list{max-height:520px;min-height:0}
  .route{grid-template-columns:1fr}
  .split.on-card .list{display:none}.split:not(.on-card) .form{display:none}.split.on-card .back{display:block}
}
@media (max-width:640px){.band .who{margin-left:0}.band .t{border-left:0;padding-left:0}}

/* утилиты страниц: бывшие inline-стили, значения переведены на токены */
.x1{max-width:460px}
.x2{padding:var(--sp-4)}
.x3{margin:0 0 var(--sp-3);color:var(--brand-dark)}
.x4{margin-top:var(--sp-2)}
.x5{width:100%;min-height:var(--sp-7);border-radius:var(--r-2);margin-top:var(--sp-2);font-weight:600;font-size:var(--fs-3);font-family:inherit;cursor:pointer}
.x6{color:var(--muted);font-size:var(--fs-2)}
.x7{margin:0 0 var(--sp-1);color:var(--brand-dark)}
.x8{color:var(--muted);font-size:var(--fs-2);margin:0 0 var(--sp-2)}
.x9{display:grid;gap:var(--sp-3);grid-template-columns:minmax(0,1fr)}
.x10{position:static}
.x11{justify-content:flex-start;border-top:0;padding-top:0}
.x12{width:100%;border:var(--sp-1) solid var(--rule);border-radius:var(--r-1);padding:var(--sp-2);font-size:var(--fs-3);font-family:inherit}
.x13{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
.x14{min-height:var(--sp-7);border-radius:var(--r-1);padding:0 var(--sp-4);font-weight:600;font-size:var(--fs-3);font-family:inherit;cursor:pointer}
.x15{max-width:520px}
.x16{display:flex;gap:var(--sp-2);margin:var(--sp-2) 0;flex-wrap:wrap}
.x17{margin-top:var(--sp-2)}
.x18{margin:0 0 var(--sp-2)}
.x19{margin:var(--sp-1) 0}
.x20{margin:0}
.x21{min-height:var(--sp-7);border:var(--sp-1) solid var(--rule);border-radius:var(--r-1);padding:0 var(--sp-2);font-size:var(--fs-3);font-family:inherit}
.x22{width:100%;min-height:var(--sp-7);border:var(--sp-1) solid var(--rule);border-radius:var(--r-1);padding:0 var(--sp-2);font-size:var(--fs-3);font-family:inherit}
.x23{padding:var(--sp-4);margin-bottom:var(--sp-3)}
.x24{margin:0 0 var(--sp-2);color:var(--brand-dark)}
.x25{align-self:end}
.x26{position:static;margin-top:var(--sp-2)}
.x27{font-size:var(--fs-4)}
.x28{border:0;background:none;color:var(--brand);cursor:pointer;font:inherit;text-decoration:underline}
.x29{margin-left:auto}
.x30{grid-column:1 / -1}
.x31{margin-top:var(--sp-1)}
.x32{margin-top:var(--sp-2);min-height:var(--sp-7);border-radius:var(--r-1);padding:0 var(--sp-4);font-weight:600;font-size:var(--fs-3);font-family:inherit;cursor:pointer}
.x33{min-height:var(--sp-7);border:var(--sp-1) solid var(--rule);border-radius:var(--r-1);padding:0 var(--sp-2);font-size:var(--fs-3);font-family:inherit}
.x34{padding:0 var(--sp-4) var(--sp-2)}
.x35{padding:0 var(--sp-4) var(--sp-3)}
.compact{min-height:var(--sp-6)}.nowrap{white-space:nowrap}
.chip+.chip{margin-left:var(--sp-2)}
.trm-stage{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--sp-2);margin:0 0 var(--sp-2)}

.notice{background:var(--warn-bg);color:var(--warn-text);border-radius:var(--r-1);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-3)}
.qr{display:block;width:min(100%,264px);height:auto;aspect-ratio:1;background:var(--page);border:1px solid var(--rule);margin:var(--sp-3) 0}.qr path{fill:var(--text)}
.tfkey{display:inline-block;font-size:var(--fs-4);letter-spacing:.06em;word-break:break-all}
.codes{list-style:none;padding:0;margin:var(--sp-3) 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:var(--sp-2);font-size:var(--fs-4);font-family:ui-monospace,Menlo,Consolas,monospace}
.codes li{background:var(--tint);border-radius:var(--r-1);padding:var(--sp-2) var(--sp-3);text-align:center;user-select:all}
.tf-reminder{background:var(--warn-bg);color:var(--warn-text);padding:var(--sp-2) var(--sp-4);font-size:var(--fs-3);text-align:center}.tf-reminder a{color:inherit;font-weight:600}

.codebox{display:flex;gap:var(--sp-2);align-items:stretch}.codebox input{flex:1;min-width:0}.codebox .cp{min-height:var(--sp-7);border-radius:var(--r-1);padding:0 var(--sp-4);font-family:inherit;font-size:var(--fs-3);font-weight:600;cursor:pointer;white-space:nowrap}