/* CyberAuth neon purple variant (mirrors cyberlogin look) */
.cyberlogin.neon-purple { --bg:#0b0b10; --panel:rgba(15,10,22,.72); --text:#efe7ff; --muted:#cdb8ff; --neon:#BC13FE; --neon2:#7c3aed; color:var(--text) }
.cyberlogin.neon-purple .cyberlogin-card, .cyberlogin.neon-purple .cybergreet { border:1px solid rgba(188,19,254,.35); border-radius:14px; background:
  radial-gradient(900px 200px at -10% -10%, rgba(188,19,254,.08), transparent 60%),
  radial-gradient(900px 200px at 110% 110%, rgba(188,19,254,.08), transparent 60%),
  var(--panel);
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 24px rgba(188,19,254,.14);
  padding:14px 16px; }

/* Wide layout for main-top position */
.cyberauth-wide .cyberlogin-card,
.cyberauth-wide .cybergreet {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.cyberauth-wide .registration-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.cyberauth-wide .registration-form .field {
    min-width: 0; /* Prevent grid blowout */
}

.cyberauth-wide .registration-form .field-full-width {
    grid-column: 1 / -1; /* Span all columns */
}
.cyberlogin.neon-purple .cyberlogin-header .title { font-family:"Bruno Ace SC", system-ui, sans-serif; font-weight:700; letter-spacing:.06em; color:#fff; text-shadow:0 0 14px rgba(188,19,254,.45); margin-bottom:8px }
.cyberlogin.neon-purple .field { margin-bottom:10px }
.cyberlogin.neon-purple .field label { display:block; font-size:.85rem; color:var(--muted); margin-bottom:4px; letter-spacing:.03em }
.cyberlogin.neon-purple .field input { width:100%; border-radius:10px; border:1px solid rgba(188,19,254,.35); background:#0f0a16; color:var(--text); padding:8px 10px; box-shadow: inset 0 0 10px rgba(0,0,0,.45); transition:border-color .18s ease, box-shadow .18s ease }
.cyberlogin.neon-purple .field input:focus { outline:none; border-color: var(--neon); box-shadow: 0 0 0 2px rgba(188,19,254,.25) }
.cyberlogin.neon-purple .options { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:6px 0 10px }
.cyberlogin.neon-purple .options .remember { display:flex; gap:6px; align-items:center; font-size:.9rem; color:var(--muted) }
.cyberlogin.neon-purple .options .links a { color:#e7dbff; opacity:.9; margin-left:10px; text-decoration:none }
.cyberlogin.neon-purple .options .links a:hover { color:#fff; text-decoration:underline }
.cyberlogin.neon-purple .actions { display:flex; justify-content:flex-start }
.cyberlogin.neon-purple .btn.neon { --bg:linear-gradient(180deg, rgba(188,19,254,.98), rgba(124,58,237,.96)); --bg2:linear-gradient(180deg, rgba(188,19,254,1), rgba(124,58,237,1)); background:var(--bg); color:#0c0712; font-weight:800; letter-spacing:.08em; border:0; border-radius:30px; padding:9px 18px; box-shadow:0 3px 14px rgba(188,19,254,.35), 0 0 0 1px rgba(188,19,254,.3) inset; transition:transform .08s ease, filter .16s ease, box-shadow .16s ease }
.cyberlogin.neon-purple .btn.neon:hover { background:var(--bg2); transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 6px 18px rgba(188,19,254,.45), 0 0 0 1px rgba(188,19,254,.35) inset }
.cyberlogin.neon-purple .btn.neon:active { transform:translateY(0) }
.cyberlogin.neon-purple .greeting { font-family:"Bruno Ace SC", system-ui, sans-serif; letter-spacing:.05em; margin-bottom:8px; color:#fff; text-shadow:0 0 12px rgba(188,19,254,.45) }

/* Password requirements styling */
.password-requirements {
    margin: 8px 0;
    padding: 8px;
    border-radius: 8px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(188,19,254,0.15);
}

.password-requirements .req {
    margin: 4px 0;
    transition: color 0.3s ease;
}

#password-match {
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.3s ease;
}

/* Style for matched requirements */
.req[style*="color: rgb(76, 175, 80)"],
#password-match[style*="color: rgb(76, 175, 80)"] {
    text-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
}

/* Knob-style stat radio buttons - animated design */
.stat-knob {
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.stat-knob input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.stat-knob .knob-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(15, 20, 52, 0.6);
    border: 2px solid rgba(56, 189, 248, 0.3);
    color: #9bb4d8;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: hidden;
}

.stat-knob .knob-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #38bdf8 0%, #a78bfa 100%);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
    z-index: -1;
}

.stat-knob input[type="radio"]:checked + .knob-btn {
    border-color: #38bdf8;
    color: #fff;
    box-shadow: 
        0 0 15px rgba(56, 189, 248, 0.6),
        0 0 30px rgba(167, 139, 250, 0.4),
        inset 0 0 15px rgba(56, 189, 248, 0.2);
    transform: scale(1.15);
}

.stat-knob input[type="radio"]:checked + .knob-btn::before {
    width: 100%;
    height: 100%;
}

.stat-knob:hover .knob-btn {
    border-color: rgba(56, 189, 248, 0.6);
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.stat-knob input[type="radio"]:checked:hover + .knob-btn {
    transform: scale(1.2);
    box-shadow: 
        0 0 20px rgba(56, 189, 248, 0.8),
        0 0 40px rgba(167, 139, 250, 0.5);
}

/* Avatar dropzone */
.avatar-dropzone {
    transition: all 0.3s ease;
}

.avatar-dropzone:hover {
    border-color: rgba(56, 189, 248, 0.7) !important;
    background: rgba(15, 20, 52, 0.5) !important;
}

.avatar-dropzone.drag-over {
    border-color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.1) !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
}

#avatar-preview {
    display: block;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Policy links modal styling */
.policy-link {
    color: #38bdf8;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}

.policy-link:hover {
    color: #7c3aed;
}

.policy-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.policy-modal-content {
    position: relative;
    background: linear-gradient(180deg, rgba(15, 10, 22, 0.95), rgba(11, 11, 16, 0.95));
    margin: 5% auto;
    padding: 30px;
    border: 1px solid rgba(188, 19, 254, 0.35);
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(188, 19, 254, 0.2);
}

.policy-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.policy-modal-close:hover,
.policy-modal-close:focus {
    color: #38bdf8;
}

.policy-modal h2 {
    color: #38bdf8;
    margin-top: 0;
    font-family: "Bruno Ace SC", system-ui, sans-serif;
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.policy-modal-body {
    color: #efe7ff;
    line-height: 1.6;
}