/* The login pages (templates/accounts): the prototype's «Бордо и песок» (TZ 3) — its variables,
   light and dark, and only the classes these pages use, with the prototype's values. */
:root{
  --paper:#FFFFFF; --panel-light:#F9F9F9; --panel:#EBEBEB; --line:#DDDDDD;
  --sand:#DCCDBC; --sand-light:#EFE7DC; --on-sand:#222222;
  --ink:#222222; --text:#444444; --muted:#6E6E6E; --accent:#790101; --ok:#2F5D50;
  --font-display:"Raleway","Helvetica Neue",Arial,sans-serif;
  --font-body:"Open Sans","Segoe UI",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#111111; --panel-light:#1A1A1A; --panel:#232323; --line:#333333;
  --sand:#4A4036; --sand-light:#2A2520; --on-sand:#F2F2F2;
  --ink:#F2F2F2; --text:#CFCFCF; --muted:#9A9A9A; --accent:#D46A66; --ok:#86C2AE; color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#111111; --panel-light:#1A1A1A; --panel:#232323; --line:#333333;
  --sand:#4A4036; --sand-light:#2A2520; --on-sand:#F2F2F2;
  --ink:#F2F2F2; --text:#CFCFCF; --muted:#9A9A9A; --accent:#D46A66; --ok:#86C2AE; color-scheme:dark }
*{box-sizing:border-box}
html,body{background:var(--paper)}
body{margin:0;color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums;padding-bottom:env(safe-area-inset-bottom,0px)}
h1,h2{font-family:var(--font-display);color:var(--ink);margin:0;text-wrap:balance}
h1{font-weight:300;font-size:clamp(24px,3.2vw,32px);line-height:1.2}
h2{font-weight:400;font-size:21px;line-height:1.3}
p{margin:0}
a{color:var(--ink)}
.label{font-family:var(--font-display);font-weight:600;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header{background:var(--paper);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.hrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 32px;padding-block:16px 14px}
.hrow .t{display:grid;gap:4px}
/* The language switcher: the prototype's .seg, with links instead of buttons. */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line);margin-left:auto}
.seg a{font-family:var(--font-display);font-weight:600;font-size:12.5px;letter-spacing:.08em;background:var(--paper);color:var(--text);border-right:1px solid var(--line);padding:10px 16px;white-space:nowrap;text-align:center;text-decoration:none}
.seg a:last-child{border-right:0}
.seg a[aria-current]{background:var(--ink);color:var(--paper)}
main{padding-block:28px 64px}
.sheet{max-width:480px;display:grid;gap:18px;align-content:start}
form{display:grid;gap:16px}
.field{display:grid;gap:6px;min-width:0}
.field>label{font-family:var(--font-display);font-weight:600;font-size:12.5px;color:var(--ink)}
input{font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:0;padding:9px 11px;width:100%;min-width:0}
.btn{display:block;width:100%;text-align:center;text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:12.5px;letter-spacing:.08em;background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:0;padding:12px 16px;cursor:pointer}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.danger{color:var(--accent);border-color:var(--accent)}
.btn.quiet{border-color:var(--line)}
.btn[aria-disabled="true"]{opacity:.4;cursor:progress}
.note{background:var(--sand-light);color:var(--ink);padding:11px 14px;font-size:13.5px}
.note.stop{background:var(--panel);color:var(--accent)}
.empty{background:var(--panel-light);padding:18px 20px;color:var(--muted);font-size:14px;display:grid;gap:12px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:760px){
  .seg{margin-left:0;width:100%}
}