.account-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.account-area form { margin: 0; }

.header-link,
.account-name,
.role-badge {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.header-link {
    color: #dce6f8;
    border: 1px solid rgba(132,153,195,.35);
    background: rgba(9,15,29,.28);
}

.header-link.primary {
    color: white;
    border-color: #5377b6;
    background: #304f82;
}

.header-button {
    font-family: inherit;
    cursor: pointer;
}

.account-name {
    color: #ffe877;
    background: rgba(7,12,24,.25);
}

.role-badge {
    min-height: 25px;
    padding: 3px 8px;
    font-size: 10px;
    letter-spacing: .5px;
}

.role-badge.admin {
    color: #ffe877;
    border: 1px solid #7c6727;
    background: #3b3219;
}

.role-badge.mod {
    color: #bfe4ff;
    border: 1px solid #3f6685;
    background: #20384d;
}

.role-badge.static { margin: 0 auto 12px; }

.flash {
    max-width: 1180px;
    margin: 0 auto 12px;
    padding: 10px 13px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 650;
}

.flash.success {
    color: #c9f6dc;
    border: 1px solid #316548;
    background: #193728;
}

.auth-page,
.profile-page,
.admin-page {
    width: 100%;
    min-height: calc(100vh - 180px);
}

.auth-page {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 38px 12px;
}

.auth-card {
    width: min(100%, 470px);
    padding: 28px;
}

.auth-card h1,
.profile-card h1,
.public-profile-card h1,
.admin-hero h1 {
    margin: 0;
    color: white;
}

.auth-intro {
    margin: 7px 0 24px;
    color: #97a6c1;
    line-height: 1.5;
}

.auth-form {
    display: grid;
    gap: 8px;
}

.auth-form label,
.profile-form > label,
.profile-section > label {
    margin-top: 7px;
}

.auth-form input[type="password"],
.auth-form input[type="email"],
.auth-form input[type="text"],
.profile-form input[type="date"],
.profile-form input[type="url"],
.profile-form textarea {
    min-height: 38px;
    width: 100%;
    padding: 7px 10px;
    color: white;
    background: #121829;
    border: 1px solid #46536f;
    border-radius: 3px;
    outline: none;
    font-family: inherit;
    font-size: 14px;
}

.profile-form textarea {
    resize: vertical;
    min-height: 115px;
}

.field-error {
    color: #ff9f9f;
    font-size: 12px;
    line-height: 1.35;
}

.field-hint,
.section-note,
.profile-email {
    color: #7f8ca7;
    font-size: 12px;
}

.inline-check,
.social-public-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #c8d3e7;
    font-size: 13px;
}

.auth-submit {
    width: 100%;
    margin-top: 12px;
}

.auth-footer {
    margin-top: 20px;
    color: #8d9bb6;
    text-align: center;
    font-size: 13px;
}

.auth-footer a,
.public-socials a {
    color: #8bb7ff;
    text-decoration: none;
}

.profile-page {
    padding: 22px 0;
}

.profile-card,
.public-profile-card {
    width: min(100%, 900px);
    margin: 0 auto;
    padding: 24px;
}

.profile-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #303b56;
}

.profile-kicker {
    color: #8193b6;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
}

.profile-public-link { text-decoration: none; }

.profile-form {
    margin-top: 20px;
}

.profile-section {
    padding: 19px 0;
    border-bottom: 1px solid #2d3852;
}

.profile-section h2 {
    margin: 0 0 13px;
    color: #e9eef9;
    font-size: 17px;
}

.bio-counter {
    margin-top: 4px;
    text-align: right;
    color: #75839e;
    font-size: 11px;
}

.social-grid {
    display: grid;
    gap: 11px;
    margin-top: 14px;
}

.social-row {
    display: grid;
    grid-template-columns: 110px minmax(180px, 1fr) 145px;
    align-items: center;
    gap: 10px;
}

.social-row > label:first-child { margin: 0; }
.social-public-check { margin: 0; }
.social-error { grid-column: 2 / -1; }

.profile-save { margin-top: 20px; min-width: 170px; }

.public-profile-card {
    max-width: 650px;
    text-align: center;
}

.public-profile-avatar {
    width: 86px;
    height: 86px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffe45a;
    background: linear-gradient(145deg, #344565, #182136);
    border: 2px solid #506387;
    font-size: 34px;
    font-weight: 900;
}

.public-bio {
    max-width: 520px;
    margin: 17px auto;
    color: #c4cee0;
    line-height: 1.6;
    white-space: pre-line;
}

.public-socials {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.public-socials a {
    padding: 7px 10px;
    border: 1px solid #3d5277;
    border-radius: 5px;
    background: #1d2a42;
}

.ownership-checkbox {
    width: 17px;
    height: 17px;
    accent-color: #5d8fe0;
    cursor: pointer;
}

.ownership-login {
    color: #7f90ad;
    text-decoration: none;
    font-size: 20px;
}

.ownership-unavailable { color: #59657d; }

.admin-page { padding: 10px 0 30px; }

.admin-hero {
    padding: 22px;
    margin-bottom: 12px;
}

.admin-hero p { margin-bottom: 0; color: #9aa8c2; }

.admin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.admin-card { padding: 18px; }
.admin-card h2 { margin: 0 0 8px; color: white; font-size: 17px; }
.admin-card p { min-height: 60px; color: #9ba9c1; line-height: 1.45; }

.admin-state {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.admin-state.ready { color: #bdf0d2; background: #1d4730; }
.admin-state.next { color: #d3def1; background: #29364d; }

@media (max-width: 850px) {
    .account-area { margin-top: 7px; }
    .main-header { align-items: center; }
    .social-row { grid-template-columns: 1fr; }
    .social-error { grid-column: 1; }
    .admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .main-header { flex-direction: column; align-items: flex-start; }
    .account-area { justify-content: flex-start; }
    .profile-heading { align-items: flex-start; flex-direction: column; }
    .profile-card, .public-profile-card { padding: 17px; }
}