:root{
  --pu:#5B1D7A;--pu2:#7B2FA0;--pu3:#EDE9FE;--pu4:#F7F3FF;--acc:#8B5CF6;--acc2:#A78BFA;
  --bg:#F3F0F8;--white:#fff;--border:#DDD5EE;--tx:#1A0A2E;--tx2:#3D2B5A;--tx3:#6E5C8A;
  --won:#16A34A;--won-bg:#DCFCE7;--lost:#DC2626;--lost-bg:#FEE2E2;--paused:#D97706;
  --sh:0 1px 4px rgba(91,29,122,.08);--sh2:0 8px 30px rgba(91,29,122,.14);
}
*{box-sizing:border-box;font-family:'Nunito',sans-serif}
body{margin:0;background:var(--bg);color:var(--tx)}
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px;background:radial-gradient(1200px 500px at 50% -10%,#fff,var(--bg))}
.card{width:100%;max-width:400px;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--sh2);padding:32px}
.logo{font-weight:900;font-size:22px;color:var(--pu)}.logo span{color:var(--acc)}
.logo-img{height:26px;width:auto;vertical-align:middle;display:inline-block}
.pill{font-size:11px;font-weight:800;color:var(--pu2);background:var(--pu3);padding:3px 9px;border-radius:20px;margin-left:8px}
h1{font-size:20px;margin:18px 0 4px}.sub{color:var(--tx3);font-size:13px;margin-bottom:22px;line-height:1.5}
label{display:block;font-size:12px;font-weight:800;color:var(--tx2);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.04em}
input,select{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:9px;font-size:16px;background:#fff}
input:focus,select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.hint{font-size:12px;color:var(--tx3);margin-top:6px}
.btn{width:100%;margin-top:22px;padding:12px;border:none;border-radius:11px;background:var(--pu);color:#fff;font-weight:800;font-size:15px;cursor:pointer}
.btn:hover{background:var(--pu2)}.btn:disabled{opacity:.6;cursor:default}
.alt{text-align:center;margin-top:16px;font-size:13px;color:var(--tx3)}.alt a{color:var(--pu2);font-weight:800;text-decoration:none}
.note{background:var(--pu4);border:1px solid var(--border);border-radius:11px;padding:12px 14px;font-size:13px;color:var(--tx2);margin-top:16px;line-height:1.5}
.msg{margin-top:14px;font-size:13px;font-weight:700;min-height:18px}
.msg.err{color:var(--lost)}.msg.ok{color:var(--won)}
.topbar{display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--border);padding:12px 22px;box-shadow:var(--sh)}
.userchip{display:flex;align-items:center;gap:9px}
.userchip .role{font-size:11px;font-weight:800;color:var(--pu);background:var(--pu3);padding:2px 8px;border-radius:20px}
.userchip button{border:1px solid var(--border);background:#fff;border-radius:9px;padding:6px 10px;font-weight:700;font-size:12px;cursor:pointer}
.wrap{max-width:920px;margin:26px auto;padding:0 22px}
.panel{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh);overflow:hidden}
.panel h2{font-size:16px;margin:0;padding:16px 20px;border-bottom:1px solid var(--border)}
table{width:100%;border-collapse:collapse}th{text-align:left;font-size:11px;text-transform:uppercase;color:var(--tx3);padding:10px 20px;border-bottom:1px solid var(--border)}
td{padding:12px 20px;border-bottom:1px solid var(--border);font-size:14px}td select{width:auto;min-width:150px;padding:7px 9px}
.approve{background:var(--pu);color:#fff;border:none;border-radius:9px;padding:8px 14px;font-weight:800;cursor:pointer}
/* a11y: respect reduced-motion preference (audit UX-C2) */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}