body.register-page { position: relative; }
body.register-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(var(--dot) 1.2px, transparent 1.3px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
body.register-page .app { position: relative; z-index: 1; }
#id_introHeading_div { flex: 1; min-height: calc(100vh - 76px); display: grid; place-items: center; padding: 56px 20px 80px; }
.register-shell { width: min(100%, 460px); }
.register-heading { margin-bottom: 22px; text-align: center; }.register-heading h1, #id_createUser_form, #id_link { font-family: var(--font-ui); }
.register-heading h1 { margin: 0; font: 600 32px/1.15 var(--font-brand); letter-spacing: -0.02em; }
.register-heading p { margin: 10px auto 0; max-width: 42ch; color: var(--muted); }
#id_createUserMain_div { padding: 22px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--green); border-radius: var(--radius-card); box-shadow: 0 8px 26px rgba(12, 40, 30, 0.06); }
#id_createUser_form { display: grid; gap: 16px; }
#id_createUser_form .field { display: grid; gap: 6px; }
#id_createUser_form label { display: block; margin: 0; color: var(--text); font: 600 14px var(--font-ui); }
#id_createUser_form input[type="text"], #id_createUser_form input[type="email"], #id_createUser_form input[type="password"] { width: 100%; height: 44px; margin-top: 6px; padding: 0 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-control); font: inherit; }
#id_createUser_form input:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
#id_passwordErResp_p, #id_emailErResp_p, #id_usernameErResp_p { min-height: 16px; margin: 2px 0 0; color: var(--danger); font-size: 13px; }
.input-with-icon { position: relative; }
.input-with-icon input { padding-right: 46px !important; }
#id_checkbox_label { position: absolute; top: 6px; right: 0; width: 44px; height: 44px; display: grid; place-items: center; margin: 0; padding: 0; color: var(--muted); cursor: pointer; text-indent: 0; }
#id_checkbox_label svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#id_checkbox_in, #eye_slash { width: auto; height: auto; margin: 0; padding: 0; position: static; }
#id_link { margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
#id_link a { color: var(--green-ink); }
#id_Register_button { width: 100%; margin-top: 8px; }
.register-nav { display: flex; align-items: center; gap: 10px; }
.register-nav .btn { min-height: 40px; }
.register-footer { padding: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; text-align: center; }
.loading-overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(23, 33, 29, .28); }
.loader { width: 42px; height: 42px; border: 3px solid var(--green-line); border-top-color: var(--green); border-radius: 50%; animation: register-spin .8s linear infinite; }
@keyframes register-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { #id_introHeading_div { padding: 32px 16px 48px; }.register-shell { width: 100%; }#id_createUserMain_div { padding: 20px; }.brand { font-size: 26px; }.register-nav .btn { padding: 0 12px; } }