:root{--mr:#a31621;--mr2:#6f0d16;--mr3:#c4202e;--ring:rgba(163,22,33,.20);--sh:0 1px 2px rgba(40,10,15,.05),0 14px 36px rgba(60,12,20,.10)}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{text-rendering:optimizeLegibility}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
main,.b,.roles,form,.tip,details.ac{animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
.roles .role:nth-child(2){animation-delay:.05s}.roles .role:nth-child(3){animation-delay:.1s}.roles .role:nth-child(4){animation-delay:.15s}

/* login cards */
.role{position:relative;overflow:hidden;border-radius:20px!important;border:1px solid rgba(163,22,33,.16)!important;box-shadow:var(--sh);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s!important}
.role::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(163,22,33,.10),transparent 55%);opacity:0;transition:opacity .28s;pointer-events:none}
.role:hover{transform:translateY(-5px);border-color:var(--mr)!important;box-shadow:0 20px 44px rgba(163,22,33,.24)}
.role:hover::after{opacity:1}.role:active{transform:scale(.97)}
.role svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}.role:hover svg{transform:scale(1.14) rotate(-4deg)}
.role b{letter-spacing:.2px}

/* inputs and buttons */
input,select,textarea{border-radius:14px!important;border:1.5px solid rgba(163,22,33,.22)!important;padding-left:14px;transition:box-shadow .2s,border-color .2s,background .2s}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--mr)!important;box-shadow:0 0 0 4px var(--ring)}
button{border-radius:14px!important;border:0!important;color:#fff!important;font-weight:650;letter-spacing:.25px;background-image:linear-gradient(135deg,var(--mr3),var(--mr2))!important;box-shadow:0 6px 16px rgba(163,22,33,.28);cursor:pointer;transition:transform .16s,box-shadow .2s,filter .2s}
button:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 10px 22px rgba(163,22,33,.36)}
button:active{transform:scale(.97)}
.back{transition:opacity .2s,transform .2s;display:inline-block}.back:hover{opacity:.75;transform:translateX(-3px)}
.err{border-radius:12px;animation:rise .3s both}

/* admin panels and tables */
.b{border-radius:22px!important;border:1px solid rgba(163,22,33,.08);box-shadow:var(--sh)}
.tip{border-radius:14px!important;border-left:4px solid var(--mr)}
table{border-collapse:separate;border-spacing:0;width:100%}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.9px;opacity:.65;font-weight:700;text-align:left;padding:12px 10px}
td{padding:11px 10px;border-top:1px solid rgba(163,22,33,.08);transition:background .15s}
tr:hover td{background:rgba(163,22,33,.045)}
details.ac{border-radius:18px!important;border:1px solid rgba(163,22,33,.12);box-shadow:var(--sh);overflow:hidden;transition:box-shadow .25s}
details.ac:hover{box-shadow:0 18px 40px rgba(60,12,20,.14)}
details.ac summary{cursor:pointer;font-weight:650;list-style:none;transition:background .2s}
details.ac summary::-webkit-details-marker{display:none}
details.ac summary:hover{background:rgba(163,22,33,.05)}
details.ac[open] .in{animation:rise .35s both}
a{transition:color .2s,opacity .2s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}