:root{--bg:#f6f7fb;--card:#ffffff;--text:#1a1f2c;--muted:#667085;--border:#e5e7eb;--primary:#2563eb;--danger:#dc2626;--danger-soft:#fef3f2;--success:#027a48;--success-soft:#ecfdf3;}
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text);}
a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:24px auto;padding:0 16px;}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(16,24,40,.06);}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;}
.col-6{grid-column:span 6} .col-12{grid-column:span 12} .col-4{grid-column:span 4} .col-8{grid-column:span 8}
table{width:100%;border-collapse:collapse} th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
th{color:var(--muted);font-weight:600}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:white;font-size:14px}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer;font-weight:600}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--primary);border-color:var(--primary);color:white}
.btn-danger{background:var(--danger);border-color:var(--danger);color:white}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border);color:var(--muted)}
.badge-off{background:#fff1f2;color:#9f1239;border-color:#fecdd3}
.badge-on{background:#ecfdf3;color:#027a48;border-color:#abefc6}
.notice{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;margin-bottom:12px}
.notice.err{border-color:#fecaca;background:#fff1f2}
.notice.ok{border-color:#bbf7d0;background:#f0fdf4}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tab{padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:white;font-weight:600;font-size:13px}
.tab.active{background:var(--primary);border-color:var(--primary);color:white}
.small{font-size:12px;color:var(--muted)}

.btn-row{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.btn-row .btn{white-space:nowrap}
@media (max-width:900px){.btn-row{flex-wrap:wrap}}

.toggle-password{min-width:118px}
.toggle-password__icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:inherit}
.toggle-password__icon svg{width:18px;height:18px;display:block}
.toggle-password__icon--hide{display:none}
.toggle-password.is-visible{border-color:var(--primary);color:var(--primary);background:#eff6ff}
.toggle-password.is-visible .toggle-password__icon--show{display:none}
.toggle-password.is-visible .toggle-password__icon--hide{display:inline-flex}

.password-requirements{margin:10px 0 14px;padding:12px 14px;border:1px solid #dbe4ff;border-radius:12px;background:#f8fbff}
.password-requirements__title{font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#344054;margin-bottom:10px}
.password-requirements__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.password-rule{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:700;color:var(--danger)}
.password-rule__status{width:18px;height:18px;border-radius:999px;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;margin-top:1px}
.password-rule__status::before{content:"•";font-size:14px;line-height:1}
.password-rule.is-valid{color:var(--success)}
.password-rule.is-valid .password-rule__status{background:var(--success-soft);border-color:var(--success)}
.password-rule.is-valid .password-rule__status::before{content:"✓";font-size:12px;font-weight:800}
.password-rule.is-invalid{color:var(--danger)}
.password-rule.is-invalid .password-rule__status{background:var(--danger-soft);border-color:var(--danger)}
.password-rule.is-invalid .password-rule__status::before{content:"✕";font-size:11px;font-weight:800}

.password-match{min-height:18px;margin-top:4px;font-size:12px;font-weight:800}
.password-match.match-ok{color:var(--success)}
.password-match.match-bad{color:var(--danger)}