:root {
    --account-accent: #023e73;
    --account-accent-bright: #045ac5;
    --account-accent-soft: #edf5fb;
    --account-ink: #23384b;
    --account-muted: #718398;
    --account-border: #dce6ed;
    --account-success: #16845b;
    --account-danger: #b93b4c;
}

.account-avatar {
    align-items: center;
    background: linear-gradient(145deg, #0967a8, #023e73);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 700;
    justify-content: center;
    overflow: hidden;
    text-transform: uppercase;
}
.account-avatar img { height: 100%; object-fit: cover; width: 100%; }
.account-avatar--header { border: 2px solid rgba(255,255,255,.9); box-shadow: 0 3px 10px rgba(0,28,58,.25); font-size: 15px; height: 40px; width: 40px; }
.account-avatar--menu { font-size: 21px; height: 56px; width: 56px; }
.account-avatar--large { border: 4px solid rgba(255,255,255,.84); box-shadow: 0 8px 24px rgba(0,22,46,.22); font-size: 34px; height: 104px; width: 104px; }
.account-avatar--list { font-size: 16px; height: 42px; width: 42px; }

.topbar .top-navbar .navbar-nav > .nav-item > .account-menu__trigger { align-items:center; display:flex; gap:10px; line-height:1.2; min-height:70px; padding:8px 13px; }
.account-menu__trigger::after { display:none; }
.account-menu__trigger-text { color:#fff; max-width:190px; text-align:left; }
.account-menu__trigger-text strong,.account-menu__trigger-text small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-menu__trigger-text strong { font-size:12px; font-weight:600; }
.account-menu__trigger-text small { font-size:10px; margin-top:2px; opacity:.78; }
.account-menu__chevron { color:rgba(255,255,255,.78); font-size:10px; transition:transform .2s; }
.account-menu.show .account-menu__chevron { transform:rotate(180deg); }
.topbar .account-menu__dropdown { border:1px solid var(--account-border); border-radius:13px; box-shadow:0 16px 38px rgba(25,49,69,.2); margin-top:0; overflow:hidden; padding:0; width:330px; }
.account-menu__summary { align-items:center; background:linear-gradient(135deg,#f2f8fc,#fff); display:flex; gap:13px; padding:20px; }
.account-menu__summary-text { min-width:0; }
.account-menu__summary-text strong,.account-menu__summary-text small,.account-menu__summary-text span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-menu__summary-text strong { color:var(--account-ink); font-size:14px; }
.account-menu__summary-text small { color:var(--account-muted); font-size:11px; margin:3px 0 7px; }
.account-menu__summary-text span { color:var(--account-accent); font-size:10px; font-weight:700; text-transform:uppercase; }
.account-menu__actions { padding:8px; }
.account-menu__action { align-items:center; background:transparent; border:0; border-radius:9px; color:var(--account-ink); cursor:pointer; display:flex; gap:11px; padding:10px; text-align:left; width:100%; }
.account-menu__action:hover,.account-menu__action:focus { background:var(--account-accent-soft); color:var(--account-accent); outline:0; }
.account-menu__action-icon { align-items:center; background:#eef4f8; border-radius:8px; display:flex; flex:0 0 34px; height:34px; justify-content:center; }
.account-menu__action > span:nth-child(2) { flex:1; min-width:0; }
.account-menu__action strong,.account-menu__action small { display:block; }
.account-menu__action strong { font-size:12px; }
.account-menu__action small { color:var(--account-muted); font-size:9px; margin-top:2px; }
.account-menu__action-arrow { color:#a5b2bd; font-size:9px; }
.account-menu__footer { background:#f7fafc; border-top:1px solid #e7edf2; padding:10px 14px; }
.account-menu__footer form { margin:0; }
.account-menu__logout { background:transparent; border:0; color:#a42d3d; cursor:pointer; font-size:12px; font-weight:600; padding:7px; text-align:left; width:100%; }
.account-menu__logout:focus { box-shadow:0 0 0 3px rgba(2,62,115,.15); outline:0; }

.account-required-password { align-items:flex-start; display:flex; gap:12px; }
.account-required-password div span { display:block; margin-top:2px; }
.account-profile { color:var(--account-ink); margin-bottom:30px; }
.account-profile__hero { align-items:center; background:linear-gradient(125deg,#023e73 0%,#075c9b 62%,#0b78b8 100%); border-radius:16px; box-shadow:0 12px 30px rgba(2,62,115,.18); color:#fff; display:flex; gap:24px; margin-bottom:20px; min-height:190px; overflow:hidden; padding:30px; position:relative; }
.account-profile__hero::after { border:1px solid rgba(255,255,255,.1); border-radius:50%; content:""; height:260px; position:absolute; right:-90px; top:-115px; width:260px; }
.account-profile__photo-form { align-items:center; display:flex; flex-direction:column; gap:7px; position:relative; z-index:1; }
.account-profile__photo-form small { color:rgba(255,255,255,.72); font-size:9px; }
.account-photo-picker { cursor:pointer; margin:0; position:relative; }
.account-photo-picker input { height:1px; opacity:0; overflow:hidden; position:absolute; width:1px; }
.account-photo-picker__icon { align-items:center; background:#fff; border:2px solid #dbe9f4; border-radius:50%; bottom:1px; color:var(--account-accent); display:flex; height:29px; justify-content:center; position:absolute; right:-2px; transition:transform .18s; width:29px; }
.account-photo-picker:hover .account-photo-picker__icon,.account-photo-picker:focus-within .account-photo-picker__icon { transform:scale(1.08); }
.account-photo-picker:focus-within .account-avatar { box-shadow:0 0 0 4px rgba(255,255,255,.35); }
.account-photo-save { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.38); border-radius:999px; color:#fff; cursor:pointer; font-size:10px; font-weight:600; padding:5px 10px; }
.account-photo-save:hover,.account-photo-save:focus { background:#fff; color:var(--account-accent); outline:0; }
.account-profile__identity { flex:1; min-width:0; position:relative; z-index:1; }
.account-profile__eyebrow { font-size:10px; font-weight:700; letter-spacing:.1em; opacity:.8; text-transform:uppercase; }
.account-profile__identity h1 { color:#fff; font-size:27px; margin:5px 0 3px; overflow-wrap:anywhere; }
.account-profile__identity p { margin:0 0 12px; opacity:.82; overflow-wrap:anywhere; }
.account-status { align-items:center; border-radius:999px; display:inline-flex; font-size:10px; font-weight:700; gap:5px; padding:5px 9px; }
.account-status--active { background:#e8f8f0; color:var(--account-success); }
.account-status--inactive { background:#fdecef; color:var(--account-danger); }
.account-profile__actions { position:relative; z-index:1; }
.account-button { border:0; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:600; justify-content:center; min-height:40px; padding:9px 14px; }
.account-button--hero { background:#fff; color:var(--account-accent); }
.account-button--hero:hover,.account-button--hero:focus { background:#e9f4fb; color:var(--account-accent); outline:0; }
.account-button--secondary { background:var(--account-accent-soft); border:1px solid #cfe0ed; color:var(--account-accent); }
.account-button--secondary:hover,.account-button--secondary:focus { background:#dcecf7; color:#012f58; outline:0; }
.account-profile__grid { display:grid; gap:20px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.account-panel { background:#fff; border:1px solid var(--account-border); border-radius:14px; box-shadow:0 8px 24px rgba(30,56,75,.05); padding:22px; }
.account-panel--wide { grid-column:1/-1; }
.account-panel__heading { align-items:flex-start; border-bottom:1px solid #e8eef3; display:flex; gap:12px; margin-bottom:16px; padding-bottom:15px; }
.account-panel__icon { align-items:center; background:var(--account-accent-soft); border-radius:9px; color:var(--account-accent); display:flex; flex:0 0 38px; height:38px; justify-content:center; }
.account-panel__heading h2 { color:var(--account-ink); font-size:16px; margin:0 0 3px; }
.account-panel__heading p { color:var(--account-muted); font-size:11px; margin:0; }
.account-details { margin:0; }
.account-details__row { align-items:flex-start; border-bottom:1px solid #edf1f4; display:flex; gap:15px; justify-content:space-between; padding:10px 0; }
.account-details__row:last-child { border-bottom:0; }
.account-details dt { color:var(--account-muted); font-size:11px; font-weight:500; }
.account-details dd { color:var(--account-ink); font-size:11px; font-weight:600; margin:0; max-width:65%; overflow-wrap:anywhere; text-align:right; }
.account-role-list { display:flex; flex-direction:column; gap:9px; }
.account-role { align-items:center; background:#f8fafc; border:1px solid #e0e8ee; border-radius:10px; display:grid; gap:10px; grid-template-columns:30px minmax(0,1fr) auto; padding:10px; }
.account-role > span { align-items:center; background:#e7f5ee; border-radius:50%; color:var(--account-success); display:flex; height:28px; justify-content:center; width:28px; }
.account-role strong,.account-role code { display:block; }
.account-role strong { font-size:12px; }
.account-role code { color:var(--account-muted); font-size:9px; margin-top:2px; }
.account-role small { color:var(--account-muted); font-size:9px; text-align:right; }
.account-panel__empty { color:var(--account-muted); font-size:11px; margin:0; padding:12px; text-align:center; }
.account-security-row { align-items:center; display:flex; gap:15px; justify-content:space-between; }
.account-security-row strong,.account-security-row span { display:block; }
.account-security-row strong { font-size:12px; }
.account-security-row span { color:var(--account-muted); letter-spacing:.15em; margin-top:4px; }

.password-field { position:relative; }
.form-material .password-field__input { padding-right:42px; }
.password-field__toggle { align-items:center; background:transparent; border:0; bottom:1px; color:#657888; cursor:pointer; display:flex; justify-content:center; padding:0; position:absolute; right:0; top:0; width:40px; z-index:2; }
.password-field__toggle:hover { color:var(--account-accent); }
.password-field__toggle:focus { box-shadow:0 0 0 3px rgba(2,62,115,.14); color:var(--account-accent); outline:0; }

.user-directory-identity { align-items:center; display:flex; gap:11px; min-width:220px; }
.user-directory-identity__text { min-width:0; }
.user-directory-identity__text a,.user-directory-identity__text small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-directory-identity__text a { color:var(--account-ink); font-size:12px; font-weight:700; }
.user-directory-identity__text small { color:var(--account-muted); font-size:10px; margin-top:2px; }
.account-role-chip { background:var(--account-accent-soft); border:1px solid #d3e4f0; border-radius:999px; color:var(--account-accent); display:inline-block; font-size:9px; font-weight:600; margin:2px; padding:4px 7px; }
.account-state-chip { border-radius:999px; display:inline-block; font-size:9px; font-weight:700; padding:5px 8px; }
.account-state-chip--active { background:#e8f8f0; color:var(--account-success); }
.account-state-chip--inactive { background:#fdecef; color:var(--account-danger); }

.account-editor { margin-bottom:30px; }
.account-editor__hero { align-items:center; background:#fff; border:1px solid var(--account-border); border-radius:14px; display:flex; gap:14px; margin-bottom:18px; padding:20px; }
.account-editor__hero h1 { color:var(--account-ink); font-size:21px; margin:0 0 4px; }
.account-editor__hero p { color:var(--account-muted); margin:0; }
.account-editor__grid { display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.account-editor__section { background:#fff; border:1px solid var(--account-border); border-radius:13px; padding:20px; }
.account-editor__section--wide { grid-column:1/-1; }
.account-editor__section h2 { color:var(--account-ink); font-size:15px; margin:0 0 4px; }
.account-editor__section > p { color:var(--account-muted); font-size:10px; margin:0 0 16px; }
.account-editor__fields { display:grid; gap:15px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.account-editor__field label { color:var(--account-ink); font-size:11px; font-weight:700; }
.account-editor__field .form-control { border:1px solid #cad7e1; border-radius:8px; min-height:42px; }
.account-editor__field .form-control:focus { border-color:var(--account-accent); box-shadow:0 0 0 3px rgba(2,62,115,.12); }
.account-editor__errors,.account-editor__errors ul { color:#b5293d; font-size:10px; list-style:none; margin:5px 0 0; padding:0; }
.account-editor__roles { display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.account-editor-role { align-items:flex-start; border:1px solid #dbe5ec; border-radius:10px; cursor:pointer; display:flex; gap:10px; padding:13px; transition:.18s; }
.account-editor-role:hover { border-color:#78a8ca; }
.account-editor-role:focus-within { box-shadow:0 0 0 3px rgba(2,62,115,.15); }
.account-editor-role--selected { background:#eff7fc; border-color:var(--account-accent); }
.account-editor-role input { margin-top:4px; }
.account-editor-role strong,.account-editor-role code,.account-editor-role small { display:block; }
.account-editor-role strong { font-size:12px; }
.account-editor-role code { color:var(--account-muted); font-size:9px; margin:2px 0 5px; }
.account-editor-role small { color:var(--account-muted); font-size:10px; }
.account-editor__actions { align-items:center; display:flex; gap:9px; justify-content:flex-end; margin-top:18px; }
.account-role-assignment-list { display:flex; flex-direction:column; gap:10px; }
.account-role-assignment { align-items:center; border:1px solid #dce6ed; border-radius:11px; display:grid; gap:18px; grid-template-columns:minmax(0,1.7fr) minmax(220px,.7fr); padding:13px; }
.account-role-assignment--selected { background:#f3f9fd; border-color:#78a8ca; }
.account-role-assignment__choice { align-items:flex-start; cursor:pointer; display:flex; gap:11px; margin:0; }
.account-role-assignment__choice input { margin-top:5px; }
.account-role-assignment__choice strong,.account-role-assignment__choice code,.account-role-assignment__choice small { display:block; }
.account-role-assignment__choice strong { font-size:12px; }
.account-role-assignment__choice code { color:var(--account-muted); font-size:9px; margin:2px 0 4px; }
.account-role-assignment__choice small { color:var(--account-muted); font-size:10px; }
.account-role-assignment .account-editor__field { margin:0; }

@media (max-width: 767px) {
    .topbar .account-menu__dropdown { max-width:calc(100vw - 20px); width:320px; }
    .front-wrapper .account-menu__trigger-name { display:none; }
    .front-wrapper .menu-profile .btn-profile { background:transparent; border:0; box-shadow:none; max-width:none; padding:0; }
    .front-wrapper .menu-profile .btn-profile .account-avatar { margin-right:0 !important; }
    .account-profile__hero { align-items:flex-start; flex-direction:column; padding:22px; }
    .account-profile__actions { width:100%; }
    .account-profile__actions .account-button { width:100%; }
    .account-profile__grid,.account-editor__grid,.account-editor__fields,.account-editor__roles { grid-template-columns:1fr; }
    .account-panel--wide,.account-editor__section--wide { grid-column:auto; }
    .account-security-row { align-items:stretch; flex-direction:column; }
    .account-role { grid-template-columns:30px minmax(0,1fr); }
    .account-role small { grid-column:2; text-align:left; }
    .account-details__row { display:block; }
    .account-details dd { margin-top:4px; max-width:none; text-align:left; }
    .account-editor__actions { align-items:stretch; flex-direction:column; }
    .account-editor__actions .btn { width:100%; }
    .account-role-assignment { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .account-menu__chevron,.account-photo-picker__icon,.account-editor-role { transition:none; }
}