*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#f5f5f7;
  --white:#ffffff;
  --border:rgba(0,0,0,0.08);
  --border-mid:rgba(0,0,0,0.13);
  --t1:#1d1d1f;
  --t2:#515154;
  --t3:#86868b;
  --accent:#b3002d;
  --accent-d:#8f0024;
  --blue:#0071e3;
  --blue-gl:rgba(0,113,227,0.11);
  --green:#1a7a3c;
  --green-gl:rgba(26,122,60,0.08);
  --red:#d70015;
  --red-gl:rgba(215,0,21,0.08);
  --amber:#b87800;
  --r:16px;
  --rsm:10px;
  --ease:cubic-bezier(.25,.46,.45,.94);
}

html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--t1);
  min-height:100vh;-webkit-font-smoothing:antialiased;
  display:flex;align-items:center;justify-content:center;padding:20px;
}

.wrap{max-width:380px;width:100%;display:flex;flex-direction:column;gap:12px}

.brand{display:flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:600;color:var(--t1);letter-spacing:-.015em;margin-bottom:6px}
.logodot{width:28px;height:28px;border-radius:7px;background:var(--accent);display:flex;align-items:center;justify-content:center}
.logodot svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.brand span{font-weight:400;color:var(--t3)}

.card{
  background:var(--white);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0px 0px 0px 1px rgba(0,0,0,.06),0px 1px 2px -1px rgba(0,0,0,.06),0px 2px 4px 0px rgba(0,0,0,.04);
  animation:rise .38s var(--ease) both;
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.p{padding:24px 22px}
h1{font-size:17px;font-weight:600;margin-bottom:4px;letter-spacing:-.01em}
.sub{font-size:13px;color:var(--t3);margin-bottom:18px;line-height:1.5}

.f{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.f label{font-size:11px;font-weight:500;color:var(--t3);text-transform:uppercase;letter-spacing:.04em}

input{
  font-family:'Inter',sans-serif;font-size:14px;
  padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius:var(--rsm);
  background:var(--bg);color:var(--t1);
  width:100%;outline:none;
  transition:border-color .18s,box-shadow .18s,background .15s;
  -webkit-appearance:none;
}
input:hover:not(:focus){border-color:var(--border-mid);background:var(--white)}
input:focus{border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px var(--blue-gl)}

button,.btn{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  padding:10px 18px;border-radius:var(--rsm);
  border:1.5px solid var(--accent);
  background:var(--accent);color:#fff;
  cursor:pointer;letter-spacing:-.01em;
  transition:background .15s,border-color .15s,scale .1s,box-shadow .15s,opacity .15s;
  white-space:nowrap;width:100%;text-align:center;text-decoration:none;display:block;
  box-shadow:0 1px 4px rgba(179,0,45,.2);
}
button:hover:not(:disabled),.btn:hover{background:var(--accent-d);border-color:var(--accent-d);box-shadow:0 3px 10px rgba(179,0,45,.26)}
button:active:not(:disabled),.btn:active{scale:.98}
button:disabled{opacity:.4;cursor:not-allowed}

.btn-sec{background:var(--white);color:var(--t1);border-color:var(--border);box-shadow:none}
.btn-sec:hover{background:var(--bg);border-color:var(--border-mid)}

.msg{font-size:13px;font-weight:500;border-radius:8px;padding:9px 13px;margin-bottom:14px}
.msg.err{color:var(--red);background:var(--red-gl)}
.msg.ok{color:var(--green);background:var(--green-gl)}

.links{display:flex;justify-content:space-between;margin-top:16px;font-size:12px}
.links a{color:var(--t3);text-decoration:none}
.links a:hover{color:var(--t1)}

.hr{height:1px;background:var(--border);margin:18px 0}

.rtable{width:100%;border-collapse:collapse;font-size:13px}
.rtable th{text-align:left;font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;padding:0 8px 8px;border-bottom:1px solid var(--border)}
.rtable td{padding:9px 8px;border-bottom:1px solid var(--border);color:var(--t1);vertical-align:middle}
.tag{font-size:10px;font-weight:600;padding:2px 8px;border-radius:99px;letter-spacing:.03em;text-transform:uppercase}
.tag.admin{background:var(--blue-gl);color:var(--blue)}
.tag.user{background:rgba(0,0,0,0.055);color:var(--t3)}
.icon-btn{width:auto;display:inline-block;padding:6px 10px;font-size:11px}

footer{text-align:center;font-size:11px;color:var(--t3);padding:1.5rem 0;letter-spacing:.02em}