*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg-deep:     #06101f;
    --bg-surface:  #0d1f38;
    --bg-input:    #060f1c;
    --border:      #1a3560;
    --border-focus:#2e6fd4;
    --accent:      #1a5fb4;
    --accent-light:#2e86de;
    --text-primary:#c8ddff;
    --text-muted:  #4a6a99;
    --text-hint:   #2c4a72;
    --link:        #2e6fd4;
    --link-hover:  #6baeff;
    --error:       #e05555;
    --error-bg:    rgba(224,85,85,0.08);
    --error-border:rgba(224,85,85,0.3);
}

html, body { min-height: 100%; background: var(--bg-deep); font-family: 'Sora', sans-serif; color: var(--text-primary); }

body {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 100vh; padding: 2.5rem 1rem;
    position: relative; overflow-x: hidden;
}

body::before, body::after {
    content: ''; position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
}
body::before { width: 600px; height: 600px; top: -200px; left: -200px; background: radial-gradient(circle, rgba(29,78,154,0.3) 0%, transparent 65%); }
body::after  { width: 500px; height: 500px; bottom: -150px; right: -150px; background: radial-gradient(circle, rgba(14,50,105,0.25) 0%, transparent 65%); }

.grid-overlay {
    position: fixed; inset: 0; z-index: 0;
    background-image: linear-gradient(rgba(29,78,154,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(29,78,154,0.04) 1px, transparent 1px);
    background-size: 48px 48px; pointer-events: none;
}

.wrapper {
    position: relative; z-index: 1;
    width: 100%; max-width: 440px;
    animation: fadeUp 0.5s ease both;
}
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* Brand */
.brand { display:flex; align-items:center; gap:11px; justify-content:center; margin-bottom:2rem; }
.brand-icon {
    width:40px; height:40px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius:12px; display:flex; align-items:center; justify-content:center;
    box-shadow: 0 4px 20px rgba(26,95,180,0.4);
}
.brand-icon svg { width:20px; height:20px; fill:none; stroke:#e8f2ff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.brand-name { font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:500; color:var(--text-primary); letter-spacing:-0.5px; }

/* Tabs */
.tabs { display:flex; background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; padding:5px; margin-bottom:1.6rem; }
.tab-btn {
    flex:1; padding:10px 0; border:none; border-radius:10px; cursor:pointer;
    font-family:'Sora',sans-serif; font-size:13.5px; font-weight:500;
    color:var(--text-muted); background:transparent; letter-spacing:0.01em;
    transition: background .2s, color .2s, box-shadow .2s;
}
.tab-btn.active { background:var(--accent); color:#dceeff; box-shadow:0 2px 12px rgba(26,95,180,0.5); }
.tab-btn:not(.active):hover { color:var(--text-primary); }

/* Card */
.card { background:var(--bg-surface); border:1px solid var(--border); border-radius:20px; padding:2.2rem 2rem 2.4rem; }
.card-title { font-size:21px; font-weight:600; color:var(--text-primary); margin-bottom:5px; letter-spacing:-0.5px; }
.card-sub { font-size:13px; color:var(--text-muted); margin-bottom:1.8rem; line-height:1.5; }

/* Panel toggle */
.panel { display:none; }
.panel.active { display:block; }

/* Fields */
.field { margin-bottom:1.1rem; }
.field label {
    display:block; font-size:11px; font-weight:500; color:var(--text-muted);
    letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px;
}
.input-wrap { position:relative; }
.input-wrap .icon {
    position:absolute; left:13px; top:50%; transform:translateY(-50%);
    width:15px; height:15px; color:var(--text-hint); pointer-events:none;
    display:flex; align-items:center; justify-content:center;
}
.input-wrap .icon svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.input-wrap input, .input-wrap select {
    width:100%; background:var(--bg-input); border:1px solid var(--border);
    border-radius:11px; padding:12px 14px 12px 40px;
    font-family:'Sora',sans-serif; font-size:14px; color:var(--text-primary);
    outline:none; transition:border-color .2s, box-shadow .2s;
    appearance: none;
}
.input-wrap input::placeholder { color:var(--text-hint); }
.input-wrap input:focus, .input-wrap select:focus {
    border-color:var(--border-focus); box-shadow:0 0 0 3px rgba(46,111,212,0.15);
}
.input-wrap select option { background: var(--bg-surface); color: var(--text-primary); }

.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Password toggle */
.eye-btn {
    position:absolute; right:13px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; color:var(--text-hint);
    display:flex; align-items:center; padding:2px; transition:color .2s;
}
.eye-btn:hover { color:var(--text-muted); }
.eye-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Forgot */
.forgot-row { display:flex; justify-content:flex-end; margin-top:-2px; margin-bottom:1.4rem; }
.forgot { font-size:12px; color:var(--link); text-decoration:none; transition:color .2s; }
.forgot:hover { color:var(--link-hover); }

/* Role toggle */
.role-toggle { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:1.3rem; }
.role-option { position:relative; }
.role-option input[type="radio"] { position:absolute; opacity:0; width:0; height:0; }
.role-label {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:7px; padding:14px 10px;
    background:var(--bg-input); border:1px solid var(--border); border-radius:12px;
    cursor:pointer; transition:all .2s; text-align:center;
}
.role-label:hover { border-color:var(--border-focus); }
.role-option input:checked + .role-label {
    background:rgba(26,95,180,0.15); border-color:var(--accent-light);
    box-shadow:0 0 0 1px var(--accent-light);
}
.role-icon { font-size:22px; line-height:1; }
.role-name { font-size:13px; font-weight:500; color:var(--text-primary); }
.role-desc { font-size:11px; color:var(--text-muted); line-height:1.4; }

/* Strength meter */
.strength-bar { display:flex; gap:5px; margin-top:7px; }
.strength-seg { height:3px; flex:1; border-radius:99px; background:var(--border); transition:background .3s; }
.strength-seg.weak   { background:#c0392b; }
.strength-seg.medium { background:#c4930d; }
.strength-seg.strong { background:#1a9b4e; }
.strength-label { font-size:11.5px; color:var(--text-hint); margin-top:5px; }

/* Section label */
.section-label {
    font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--text-hint); margin-bottom:10px; margin-top:4px;
}

/* Error messages */
.errorlist { list-style:none; margin-top:5px; }
.errorlist li {
    font-size:12px; color:var(--error); padding:5px 10px;
    background:var(--error-bg); border:1px solid var(--error-border);
    border-radius:7px; margin-top:4px;
}
.non-field-errors {
    background:var(--error-bg); border:1px solid var(--error-border);
    border-radius:10px; padding:10px 14px; margin-bottom:1rem;
}
.non-field-errors li { font-size:13px; color:var(--error); }

/* Primary button */
.btn-primary {
    width:100%;
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    border:none; border-radius:12px; padding:14px;
    font-family:'Sora',sans-serif; font-size:14px; font-weight:600;
    color:#e8f2ff; cursor:pointer; letter-spacing:0.02em;
    transition:opacity .2s, transform .15s, box-shadow .2s;
    margin-top:0.4rem; margin-bottom:1rem;
    box-shadow:0 4px 20px rgba(26,95,180,0.35);
}
.btn-primary:hover { opacity:.88; transform:translateY(-1px); box-shadow:0 6px 24px rgba(26,95,180,0.45); }
.btn-primary:active { transform:scale(0.98); opacity:1; }

/* Divider */
.divider { display:flex; align-items:center; gap:12px; margin-bottom:1rem; }
.divider-line { flex:1; height:1px; background:var(--border); }
.divider-text { font-size:12px; color:var(--text-hint); white-space:nowrap; }

/* Footer */
.footer-note { text-align:center; margin-top:1.8rem; font-size:12px; color:var(--text-hint); }
.footer-note a { color:var(--link); text-decoration:none; }
.footer-note a:hover { color:var(--link-hover); }

/* Hidden field Django uses for role */
#id_role { display:none; }

.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--text-muted); }
.btn-ghost:hover { border-color:var(--border-focus); color:var(--text-primary); }