:root{--navy: #0d2c51;--navy-deep: #081d38;--navy-darker: #051426;--gold: #cda075;--gold-soft: #d9b58f;--line: #e3e8ee;--ink: #1c2b3a;--muted: #5b6b7c;--bg: #f4f6f9;--red: #b3382c;--green: #1a7f5c}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Sarabun,sans-serif;background:var(--bg);color:var(--ink)}button{font-family:inherit;cursor:pointer}input,select{font-family:inherit}.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 120% 90% at 50% 0%,var(--navy) 0%,var(--navy-deep) 55%,var(--navy-darker) 100%);padding:24px}.gate-card{background:#fff;border-radius:16px;padding:40px 36px;width:100%;max-width:420px;box-shadow:0 20px 60px #00000059}.gate-card .logo{width:200px;display:block;margin:0 auto 8px}.gate-card h1{font-size:20px;color:var(--navy);text-align:center;margin-bottom:4px}.gate-card .sub{font-size:13px;color:var(--muted);text-align:center;margin-bottom:24px}.field{margin-bottom:14px}.field label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:5px}.field input{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:9px;font-size:15px;transition:border-color .2s}.field input:focus{outline:none;border-color:var(--gold)}.btn{width:100%;padding:12px;border:none;border-radius:9px;font-size:15px;font-weight:600;background:var(--navy);color:#fff;transition:background .2s}.btn:hover{background:var(--navy-deep)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.gold{background:var(--gold);color:var(--navy-darker)}.btn.ghost{background:none;color:var(--muted);font-weight:400;font-size:13px;margin-top:10px}.msg{font-size:13.5px;border-radius:8px;padding:10px 14px;margin-bottom:14px}.msg.error{background:#fbeae8;color:var(--red)}.msg.ok{background:#e5f4ee;color:var(--green)}.otp-input{letter-spacing:12px;text-align:center;font-size:24px!important;font-weight:700}.shell{display:flex;min-height:100vh}.side{width:232px;background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);color:#cfdae8;padding:24px 14px;display:flex;flex-direction:column;flex-shrink:0}.side .brand{text-align:center;margin-bottom:26px}.side .brand img{width:150px}.side nav a{display:block;padding:10px 14px;border-radius:8px;color:#cfdae8;text-decoration:none;font-size:14.5px;margin-bottom:4px}.side nav a:hover{background:#ffffff12}.side nav a.active{background:#cda07529;color:var(--gold-soft);font-weight:600}.side .me{margin-top:auto;font-size:12.5px;color:#8fa3bb;padding:12px 14px;border-top:1px solid rgba(255,255,255,.1)}.side .me b{color:#fff;display:block;font-size:13.5px}.main{flex:1;padding:30px 36px;max-width:1100px}.main h2{color:var(--navy);font-size:22px;margin-bottom:4px}.main .crumb{color:var(--muted);font-size:13.5px;margin-bottom:22px}.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:16px}table.data{width:100%;border-collapse:collapse;font-size:14px}table.data th{text-align:left;color:var(--muted);font-weight:600;font-size:12.5px;padding:8px 10px;border-bottom:2px solid var(--line)}table.data td{padding:10px;border-bottom:1px solid var(--line)}.pill{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 10px;border-radius:20px}.pill.admin{background:#e8eef6;color:var(--navy)}.pill.lawyer{background:#fdf2e0;color:#a86a00}.pill.paralegal{background:#efe9fb;color:#5b3fa8}.pill.staff{background:#eef1f4;color:var(--muted)}.pill.active{background:#e5f4ee;color:var(--green)}.pill.suspended{background:#fbeae8;color:var(--red)}.row{display:flex;gap:12px;flex-wrap:wrap}.row .field{flex:1;min-width:160px}@media (max-width: 760px){.shell{flex-direction:column}.side{width:100%;flex-direction:row;align-items:center;padding:10px}.side .brand,.side .me{display:none}.side nav{display:flex;gap:4px}.main{padding:18px}}