*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Rajdhani', 'Noto Sans Bengali', sans-serif; background: #050d1a; color: #e0f4ff; min-height: 100vh; background-image: radial-gradient(ellipse at 10% 0%, #0d3b2e55 0%, transparent 45%), radial-gradient(ellipse at 90% 100%, #1a0d4055 0%, transparent 40%), linear-gradient(160deg, #030a14 0%, #060e1e 60%, #070615 100%); }
.reg-page { display: flex; min-height: 100vh; padding: 18px; gap: 16px; max-width: 1280px; margin: 0 auto; }
.left-panel { width: 415px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: linear-gradient(145deg,#0c1e30cc,#091526ee); border: 1px solid #1e5a7a55; border-radius: 14px; box-shadow: 0 0 28px #062e4433; }
.logo-wrap { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.logo-icon { width: 46px; height: 46px; background: linear-gradient(135deg,#0a2a3a,#0d3d28); border: 1px solid #baff00; border-radius: 12px; display: grid; place-items: center; font-family: 'Orbitron',sans-serif; font-size: 11px; font-weight: 800; color: #baff00; box-shadow: 0 0 20px #83ff0066, inset 0 0 12px #83ff0022; position: relative; }
.logo-text b { display: block; font-family: 'Orbitron',sans-serif; font-size: 16px; color: #baff00; letter-spacing: 1px; text-shadow: 0 0 18px #8eff00aa; }
.logo-text small { display: block; color: #7ac8e0; font-size: 11px; margin-top: 2px; }
.close-btn { width: 30px; height: 30px; border: 1px solid #4dc8e0; border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: #9af0ff; font-size: 18px; box-shadow: 0 0 10px #30d8ff44; transition: all .2s; }
.close-btn:hover { transform: rotate(90deg); background: #2af0ff22; }
.welcome-card { background: linear-gradient(145deg,#0c1e30cc,#091526ee); border: 1px solid #1e5a7a55; border-radius: 16px; padding: 22px; box-shadow: 0 0 32px #062e4433, inset 0 1px #ffffff08; }
.welcome-emoji { font-size: 26px; margin-bottom: 6px; }
.welcome-card h1 { font-family: 'Orbitron',sans-serif; font-size: 21px; color: #fff; margin-bottom: 4px; }
.welcome-card h1 span { color: #baff00; text-shadow: 0 0 14px #75ff0077; }
.welcome-card > p { color: #9abbc8; font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
.robot-area { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 14px 0 4px; }
.robot-face { background: #0a2535; border: 1px solid #2ae8ff55; border-radius: 16px; padding: 14px 20px; font-size: 28px; letter-spacing: 10px; color: #50e8ff; box-shadow: 0 0 24px #19caff55; }
.shield-icon { width: 66px; height: 76px; background: linear-gradient(160deg,#0a3d20,#051a10); border: 2px solid #baff00; border-radius: 4px 4px 38px 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 20px #8dff0055; font-size: 18px; color: #baff00; text-align: center; }
.shield-icon small { font-size: 8px; line-height: 1.2; color: #baff00; font-weight: 700; }
.warning-card { background: linear-gradient(145deg,#2a0d18,#1a0810); border: 1px solid #ff4d7055; border-radius: 14px; padding: 18px 20px; box-shadow: 0 0 20px #ff244444; }
.warning-card h2 { color: #ff6b88; font-size: 16px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.warning-card ul { padding-left: 0; list-style: none; }
.warning-card li { color: #ffccd4; font-size: 13px; line-height: 1.5; padding: 4px 0; display: flex; align-items: flex-start; gap: 7px; }
.warning-card li::before { content: 'o'; color: #ff6b88; flex-shrink: 0; font-size: 9px; margin-top: 5px; }
.info-card { background: linear-gradient(145deg,#0c1e30cc,#091526ee); border: 1px solid #1e5a7a55; border-radius: 14px; padding: 18px; box-shadow: 0 0 22px #062e4433; }
.info-card-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: #e0f4ff; margin-bottom: 14px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.info-item { background: linear-gradient(135deg,#0e2535,#091b28); border: 1px solid #1a4a62; border-radius: 9px; padding: 9px 10px; display: flex; align-items: center; gap: 9px; }
.info-item-icon { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.icon-blue{background:#1a3f5c} .icon-green{background:#1a3d20} .icon-teal{background:#0f3535} .icon-yellow{background:#3d3400} .icon-purple{background:#2d1a4a}
.info-item-text strong { display: block; color: #dff4ff; font-size: 12px; font-weight: 700; }
.info-item-text small { display: block; color: #6fa8c0; font-size: 10px; }
.create-btn-wrap { margin-top: 2px; }
.create-btn { width: 100%; padding: 14px; background: linear-gradient(100deg,#4cae00,#baff00); border: none; border-radius: 11px; color: #061200; font-family: 'Orbitron',sans-serif; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 0 22px #8cff0077; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 7px; }
.create-btn:hover { transform: translateY(-2px); box-shadow: 0 0 36px #baff00aa; }
.safe-note { text-align: center; color: #6aad82; font-size: 12px; margin-top: 7px; }
.right-panel { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.right-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: linear-gradient(145deg,#0c1e30cc,#091526ee); border: 1px solid #1e5a7a55; border-radius: 14px; box-shadow: 0 0 28px #062e4433; }
.right-close { width: 26px; height: 26px; border: 1px solid #4dc8e0; border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: #9af0ff; font-size: 15px; box-shadow: 0 0 8px #30d8ff33; transition: all .2s; }
.right-close:hover { transform: rotate(90deg); }
.form-card { background: linear-gradient(145deg,#0c1e30cc,#091526ee); border: 1px solid #1e5a7a55; border-radius: 16px; padding: 22px 24px; box-shadow: 0 0 32px #062e4433; }
.form-card-title { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.form-card-icon { width: 40px; height: 40px; background: linear-gradient(135deg,#1a3a5c,#0e2540); border: 1px solid #2a6888; border-radius: 11px; display: grid; place-items: center; font-size: 19px; color: #5ad0f0; flex-shrink: 0; }
.form-card-title h2 { font-size: 17px; color: #eafeff; font-weight: 700; margin-bottom: 2px; }
.form-card-title p { color: #7ab8cc; font-size: 12px; }
.king-alert { margin: 10px 0; padding: 9px 12px; border: 1px solid #ff587d; border-radius: 7px; background: #3a1020; color: #ffb6c6; font-size: 12px; }
.success-card { margin: 10px 0; padding: 10px 12px; border: 1px solid #80ff9c; border-radius: 7px; background: #092d2b; color: #b6ffc4; font-size: 12px; }
.king-form { display: grid; gap: 0; }
.field-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #1a3a4a33; }
.field-row.field-error { border-left: 3px solid #ff587d; padding-left: 7px; }
.field-row.field-error .field-label, .field-row.field-error .field-icon { color: #ff8ca3; }
.field-row.field-error input, .field-row.field-error select { border-color: #ff587d; box-shadow: 0 0 8px #ff587d33; }
.field-row:last-of-type { border-bottom: none; }
.step-num { width: 24px; height: 24px; background: #baff00; border-radius: 50%; display: grid; place-items: center; color: #051200; font-weight: 800; font-size: 11px; flex-shrink: 0; box-shadow: 0 0 9px #8bff0077; }
.field-icon { width: 30px; height: 30px; background: linear-gradient(135deg,#1a3a5c,#0e2540); border: 1px solid #2a5a7a44; border-radius: 7px; display: grid; place-items: center; font-size: 14px; color: #5ac8e8; flex-shrink: 0; }
.field-label { min-width: 150px; color: #cce8f4; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.field-input { flex: 1; min-width: 0; }
.field-input input, .field-input select { width: 100%; background: #071e30; border: 1px solid #1e4d65; border-radius: 7px; color: #dff4ff; padding: 8px 11px; font-size: 13px; font-family: inherit; outline: none; transition: border-color .2s, box-shadow .2s; }
.field-input input:focus, .field-input select:focus { border-color: #baff00; box-shadow: 0 0 10px #a0ff0033; }
.field-input select option { background: #071e30; }
.verify-wrap { display: flex; gap: 5px; }
.verify-wrap input { flex: 1; min-width: 0; }
.verify-btn { background: linear-gradient(135deg,#0e4228,#0a5535); border: 1px solid #30d060; border-radius: 7px; color: #70ff90; padding: 0 13px; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; transition: all .2s; }
.verify-btn:hover { box-shadow: 0 0 10px #30d06055; }
.check-btn { background: linear-gradient(135deg,#0e3055,#0a3a6a); border: 1px solid #3080d0; color: #80c0ff; }
.check-btn:hover { box-shadow: 0 0 10px #3080d055; }
.verify-status { display: block; font-size: 11px; color: #5a8898; margin-top: 2px; }
.verify-status.success{color:#70ff90} .verify-status.error{color:#ff8ca3}
.pass-wrap { display: flex; gap: 5px; }
.pass-wrap input { flex: 1; min-width: 0; }
.eye-btn { background: transparent; border: 1px solid #2a5a7a; border-radius: 7px; color: #6aacbc; padding: 0 9px; cursor: pointer; font-size: 14px; }
.password-hint { display: block; font-size: 11px; color: #5a8898; margin-top: 2px; }
.password-hint.success{color:#70ff90} .password-hint.error{color:#ff8ca3}
.radio-row { display: flex; gap: 18px; padding: 3px 0; }
.radio-row label { display: flex; align-items: center; gap: 6px; color: #b8d8e8; font-size: 13px; cursor: pointer; }
.radio-row input[type=radio] { accent-color: #baff00; width: 15px; height: 15px; }
.terms-row { display: flex; align-items: center; gap: 8px; color: #a8c8d8; font-size: 13px; }
.terms-row input[type=checkbox] { accent-color: #baff00; width: 14px; height: 14px; }
.form-submit-wrap { margin-top: 12px; }
.status-card { background: linear-gradient(145deg,#0c1e30cc,#091526ee); border: 1px solid #1e5a7a55; border-radius: 14px; padding: 16px 22px; box-shadow: 0 0 22px #062e4433; }
.status-card-title { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: 14px; font-weight: 700; color: #d8f4ff; }
.status-steps { display: flex; align-items: center; justify-content: center; gap: 14px; }
.status-step { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.step-circle { width: 46px; height: 46px; border: 2px solid #2a5a70; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #5a8a9a; }
.step-circle.active{border-color:#baff00;color:#baff00;box-shadow:0 0 16px #8dff0066}
.step-circle.done{border-color:#30c870;color:#30c870;box-shadow:0 0 14px #30c87055}
.step-circle.pend{border-color:#e0a020;color:#e0a020;box-shadow:0 0 14px #e0a02055}
.status-step strong{color:#cce8f0;font-size:12px} .status-step small{color:#6a9aaa;font-size:10px}
.step-arrow{color:#3a6a80;font-size:20px}
.face-card { background: linear-gradient(145deg,#1a1238,#0e2040); border: 1px solid #6a3aaa44; border-radius: 14px; padding: 16px 20px; box-shadow: 0 0 22px #7030c033; display: flex; align-items: center; gap: 18px; }
.face-card-content{flex:1}
.face-card-content h3{color:#d8c8ff;font-size:14px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.face-card-content ol{padding-left:15px;color:#baaae0;font-size:12px;line-height:1.7}
.face-btn { background: linear-gradient(135deg,#2a1a60,#1a2878); border: 1px solid #70aaff; border-radius: 9px; color: #a0d0ff; padding: 9px 16px; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; transition: all .2s; margin-top: 10px; }
.face-btn:hover{box-shadow:0 0 14px #70aaff55}
.face-avatar{width:66px;height:66px;background:#0e1a30;border:1px solid #5a3a9044;border-radius:12px;display:grid;place-items:center;font-size:34px;flex-shrink:0;color:#c0a0ff}
.tip-bar{background:linear-gradient(145deg,#1a2a18,#101e0e);border:1px solid #3a6a2a44;border-radius:11px;padding:11px 16px;color:#a0c888;font-size:12px;display:flex;align-items:center;gap:7px}
.switch-link{text-align:center;color:#6a9aaa;font-size:13px}
.switch-link a{color:#baff00;text-decoration:none;font-weight:600}
.login-page{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{background:linear-gradient(145deg,#0d1e32,#091526);border:1px solid #1e5a7a66;border-radius:20px;padding:38px;width:min(455px,100%);box-shadow:0 0 55px #062e5555}
.login-header-logo{display:flex;align-items:center;gap:11px;margin-bottom:28px;text-decoration:none}
.login-header-logo b{font-family:'Orbitron',sans-serif;font-size:15px;color:#baff00;text-shadow:0 0 14px #8eff00aa;display:block}
.login-header-logo small{display:block;color:#7ac8e0;font-size:10px;margin-top:2px}
.login-kicker{color:#50d8f0;font:700 9px 'Orbitron',sans-serif;letter-spacing:2px}
.login-card h1{font:700 24px 'Orbitron',sans-serif;color:#eafeff;margin:7px 0}
.login-card > p{color:#7ab8cc;font-size:13px;margin-bottom:20px}
.login-form{display:grid;gap:13px}
.login-form label{display:grid;gap:5px;color:#bcd8e4;font-size:12px;font-weight:600}
.login-form input{padding:11px;background:#071e30;border:1px solid #1e4d65;border-radius:7px;color:#dff4ff;font-size:13px;font-family:inherit;outline:none;transition:border-color .2s}
.login-form input:focus{border-color:#baff00;box-shadow:0 0 10px #a0ff0033}
.login-btn{padding:13px;background:linear-gradient(100deg,#4cae00,#baff00);border:none;border-radius:9px;color:#061200;font-family:'Orbitron',sans-serif;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 0 20px #8cff0066;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:7px}
.login-btn:hover{transform:translateY(-2px);box-shadow:0 0 34px #baff00aa}
.admin-login-page .login-card{border-color:#a855f766;box-shadow:0 0 55px #4c1d9555}
.admin-login-page .login-header-logo b{color:#d8b4fe;text-shadow:0 0 14px #a855f7aa}
.admin-login-page .login-kicker{color:#d8b4fe}
.admin-login-page .login-btn{background:linear-gradient(100deg,#7c3aed,#c084fc);color:#17052d;box-shadow:0 0 20px #a855f766}
.admin-login-page .login-btn:hover{box-shadow:0 0 34px #c084fccc}
.login-page:not(.admin-login-page) .login-header-logo b{color:#baff00}
@media(max-width:900px){.reg-page{flex-direction:column}.left-panel{width:100%}}
@media(max-width:560px){.reg-page{padding:10px}.field-label{min-width:90px;font-size:12px}.radio-row{flex-wrap:wrap}}