:root{--bg:#b0b2b5;--card:#fbfbfd;--input:#f9fafc;--border:#d1d5db;--text:#111827;--muted:#6b7280;--primary:#2563eb;--primary-hover:#1e4fd8}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%;font-family:Segoe UI,Arial,sans-serif;color:var(--text);background:url(/image/WUP1.webp) no-repeat center center fixed;background-size:cover}.reg-wrapper{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 10px;background:#00000080;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.site-title{font-size:22px;font-weight:700;margin-bottom:30px;text-align:center;color:#135d0b}.reg-card{width:100%;max-width:1100px;background:var(--card);padding:5px 40px 40px;border-radius:10px;box-shadow:0 30px 80px #00000059,0 10px 30px #00000040;border:1px solid rgba(255,255,255,.15)}.reg-content{display:flex;gap:40px;align-items:flex-start}.form-section{flex:2}.documents-section{flex:1;padding-left:30px;border-left:2px solid #c0c2c5}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px}.field{display:flex;flex-direction:column;gap:6px}.field-label{font-size:16px;font-weight:500;color:var(--text)}.field input:not([type=file]),.top-role select{width:100%;height:38px;padding:8px 12px;border-radius:6px;background:var(--input);border:1.5px solid #3f3f46;font-size:15px;outline:none;transition:.2s ease}.field input.valid,.top-role select.valid{border-color:#05441c!important;box-shadow:0 0 0 2px #16a34a26}.field input.invalid,.top-role select.invalid{border-color:#7a0909!important;box-shadow:0 0 0 2px #dc262626}.field input::placeholder{font-size:15px;color:#6b7280;opacity:1}.field input:focus,.top-role select:focus{border-color:#135d0b;box-shadow:0 0 0 2px #135d0b40}.show-both-wrapper{display:flex;justify-content:flex-end;margin-top:10px}.show-both{font-size:12px;color:#002559;display:flex;align-items:center;gap:8px;font-weight:500;cursor:pointer}.show-both input{width:16px;height:16px;cursor:pointer}.file-row{display:flex;gap:12px;align-items:center}.btn-upload{padding:6px 14px;border-radius:6px;border:1px solid var(--border);background:#f9fafb;font-size:13px;cursor:pointer}.btn-upload:hover{background:#f1f5f9}.btn-upload img{width:14px;height:14px}.btn-view-file{background:none;border:none;font-size:13px;color:var(--primary);cursor:pointer;text-decoration:underline}.file-hidden{position:absolute;opacity:0;width:1px;height:1px}.role-pills{position:relative;display:flex;width:220px;height:36px;background:#f3f4f6;border-radius:20px;overflow:hidden}.role-pills:before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;width:calc(50% - 3px);background:var(--primary);border-radius:16px;transition:.25s ease}.role-pills:has(.pill:nth-child(2) input:checked):before{transform:translate(100%)}.pill{flex:1;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;z-index:1}.pill input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0}.pill-text{font-size:13px;font-weight:500;color:var(--primary)}.pill input:checked+.pill-text{color:#fff}.form-actions{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:15px;margin-top:1px}.btn-register{width:220px;height:40px;background:var(--primary);color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;transition:.2s ease}.btn-register:hover:not(:disabled){background:var(--primary-hover)}.btn-register:disabled{background:#cbd5e1;cursor:not-allowed}.back-login-link{position:static;font-size:14px;font-weight:500;color:#135d0b;text-decoration:none}.back-login-link:hover{text-decoration:underline}@media (max-width:850px){.reg-card{padding:25px 20px 35px}.form-grid{grid-template-columns:1fr}.btn-register,.role-pills{width:100%}}.top-role{margin-bottom:25px}.top-role select{width:100%;height:38px;padding:8px 12px;border-radius:6px;background:var(--input);border:1.5px solid #3f3f46;font-size:14px;outline:none;cursor:pointer;transition:.2s ease}.top-role select:focus{border-color:var(--primary);box-shadow:0 0 0 2px #2563eb26}.name-row{grid-column:1 / -1;display:grid;grid-template-columns:2fr 1fr 2fr;gap:15px}.contact-row,.dept-position-row,.password-row{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:20px}.documents-title{font-size:15px;font-weight:600;margin:0;color:#111827}.upload-area{min-height:210px;border:2px dashed #151515;border-radius:8px;padding:25px;text-align:center;background:#fff;transition:.2s ease}.upload-area:hover{border-color:#2563eb;background:#f0f7ff}.upload-area p{margin:0 0 5px;font-weight:600;font-size:15px;color:#000}.upload-area input[type=file]{border:none;font-size:13px;cursor:pointer}.documents-title{font-size:18px;font-weight:600;margin-bottom:25px}.upload-area{margin-bottom:20px}.upload-btn{margin-top:10px;padding:6px 14px;border-radius:6px;border:1px solid #3f3f46;background:#f3f4f6;cursor:pointer;font-size:14px}.upload-btn:hover{background:#e5e7eb}.file-name{display:block;margin-top:8px;font-size:14px;color:#374151}.password-meta-row{margin-top:-1px;display:flex;align-items:center;width:100%}.confirm-meta-row{margin-top:-15px;display:flex;justify-content:flex-end;align-items:center;width:100%}.password-requirements{font-size:15px;color:#282829;display:flex;gap:5px;flex-wrap:wrap;flex:1}.checkbox-group{display:flex;align-items:center;gap:6px;font-size:12px;color:#002559;font-weight:500;cursor:pointer;white-space:nowrap}.checkbox-group input{width:15px;height:15px;cursor:pointer}.password-requirements small.valid{color:#05441c;font-weight:600}
