/* Tonnex skin for the sign-in, account and admin pages */
:root{--white:#fff;--black:#151515;--red:#D32330;--text-2:#666;--rule:#e4e4e4;--soft:#fbe9ea;--radius:12px;--btn-h:64px;--gap:16px;
  --f:"Montserrat","Helvetica Neue",Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--black);font:16px/1.5 var(--f);
  padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));
  padding-top:env(safe-area-inset-top,0px);padding-bottom:max(32px,env(safe-area-inset-bottom,0px))}
.wrap{max-width:440px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column;padding-block:48px 24px}
.wrap.wide{max-width:900px;display:block;min-height:0}
h1{font-size:40px;line-height:1.05;font-weight:800;letter-spacing:-.01em;margin:0;text-wrap:balance}
h2{font-size:20px;font-weight:800;margin:32px 0 12px;text-transform:uppercase;letter-spacing:.04em}
.rl{width:64px;height:5px;background:var(--red);margin:16px 0 16px}
.sub{color:var(--text-2);margin:0 0 32px}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:var(--btn-h);border-radius:var(--radius);border:2px solid var(--black);
  background:var(--white);color:var(--black);font:800 16px var(--f);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-decoration:none;padding:0 18px}
.btn.k{background:var(--black);color:var(--white)}
.btn.r{background:var(--red);border-color:var(--red);color:var(--white)}
.btn.sm{min-height:44px;width:auto;font-size:13px;padding:0 14px}
.btn:disabled{opacity:.5;cursor:default}
.btn:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:2px}
label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
input{font:500 17px var(--f);color:var(--black);min-height:56px;border:2px solid var(--black);border-radius:var(--radius);padding:0 14px;background:var(--white);width:100%;text-transform:none;letter-spacing:0}
input.code{letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.link{background:none;border:0;padding:8px 0;font:700 14px var(--f);color:var(--black);text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:center}
.msg{border-left:5px solid var(--red);background:var(--soft);padding:12px 14px;border-radius:0 var(--radius) var(--radius) 0;font-size:15px}
.msg.ok{border-color:var(--black);background:#f3f3f3}
.note{color:var(--text-2);font-size:14px;margin:0}
.foot{margin-top:auto;padding-top:32px;color:var(--text-2);font-size:13px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.card{border:1px solid var(--rule);border-radius:var(--radius);padding:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.card .t{min-width:0;flex:1 1 200px}
.card b{display:block;overflow-wrap:anywhere}
.card small{color:var(--text-2)}
.list{display:flex;flex-direction:column;gap:12px}
.codebox{font:800 32px var(--f);letter-spacing:.18em;text-align:center;border:2px dashed var(--black);border-radius:var(--radius);padding:16px;user-select:all}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.top a{font-weight:800;color:var(--black);text-decoration:none;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:99px;padding:1px 8px;margin-left:6px;vertical-align:2px}
.tag.r{color:var(--red)}
[hidden]{display:none!important}