.account-lab { max-width: 1220px; }
.account-lab [hidden] { display: none !important; }
.al-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.al-sidebar { position: sticky; top: 20px; background: #202020; border: 1px solid #333; border-radius: 10px; padding: 16px; }
.al-own-account { display: flex; gap: 11px; align-items: center; width: 100%; padding: 0 0 17px; border: 0; border-bottom: 1px solid #383838; background: transparent; color: white; text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.al-own-account span { min-width: 0; }
.al-own-account strong { display: block; overflow-wrap: anywhere; font-size: 14px; }
.al-own-account small { display: block; color: #aaa; margin-top: 4px; font-size: 11px; }
.al-mini-avatar { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; border: 1px solid #555; background: #171717; flex: none; }
.al-nav { display: grid; gap: 6px; margin: 16px 0 20px; }
.al-tab { color: #ccc; background: #191919; border: 1px solid #303030; border-radius: 6px; padding: 10px; cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.al-tab.active { color: white; background: #ff3b3b; border-color: #ff3b3b; }
.al-field-label { display: block; color: #bbb; font-size: 13px; margin: 16px 0 8px; }
.al-input { display: block; width: 100%; min-width: 0; color: #eee; background: #161616; border: 1px solid #414141; border-radius: 6px; padding: 10px 12px; font: inherit; font-size: 14px; color-scheme: dark; }
textarea.al-input { resize: vertical; line-height: 1.5; }
.al-player-list { max-height: 300px; overflow-y: auto; margin-top: 9px; }
.al-player { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 5px; background: transparent; color: #ddd; border: 0; border-radius: 5px; text-align: left; cursor: pointer; font: inherit; font-size: 12px; }
.al-player .al-mini-avatar { width: 28px; height: 28px; }
.al-player span { overflow: hidden; text-overflow: ellipsis; }
.al-player:hover, .al-player[aria-current="page"] { background: #333; }
.al-lab-note { color: #888; line-height: 1.5; font-size: 11px; margin: 18px 0 0; }
.al-main { min-width: 0; }
.al-status { color: #aaa; font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.al-status:empty { display: none; }
.al-hero { position: relative; display: flex; align-items: center; gap: 22px; padding: 28px; border: 1px solid #373737; border-radius: 10px; background: #222 url('../images/acc-bg.png') right center / cover no-repeat; }
.al-avatar { width: 112px; height: 112px; object-fit: cover; border-radius: 50%; border: 3px solid #555; background: #181818; flex: none; }
.al-hero-text { min-width: 0; flex: 1; }
.al-role { display: inline-block; background: #3c2525; color: #ffa7a7; border: 1px solid #714141; border-radius: 5px; padding: 4px 7px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.al-hero h2 { margin: 9px 0 8px; font-size: 30px; overflow-wrap: anywhere; }
.al-hero p { color: #ccc; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; line-height: 1.5; }
.al-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; color: #999; font-size: 12px; }
.al-button { display: inline-block; border: 1px solid #4b4b4b; border-radius: 6px; padding: 10px 13px; color: white; background: #303030; font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.al-button:hover { background: #3b3b3b; }
.al-button.primary { border-color: #ff3b3b; background: #ff3b3b; }
.al-button:disabled { cursor: wait; opacity: .55; }
.al-edit-button { align-self: flex-start; white-space: nowrap; }
.al-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.al-stats > div { border: 1px solid #333; background: #1c1c1c; border-radius: 8px; padding: 17px 9px; text-align: center; }
.al-stats strong { display: block; font-size: 26px; color: #ff7171; }
.al-stats span { display: block; font-size: 12px; color: #aaa; margin-top: 6px; }
.al-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.al-card { min-width: 0; padding: 20px; border-radius: 8px; border: 1px solid #333; background: #202020; }
.al-card h3 { margin: 0 0 15px; font-size: 18px; }
.al-entry { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid #333; }
.al-entry strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.al-entry small { display: block; margin-top: 6px; color: #aaa; font-size: 11px; }
.al-entry a { color: #ff9595; font-size: 12px; white-space: nowrap; text-decoration: none; }
.al-entry a:hover { text-decoration: underline; }
.al-entry .al-level-link { display: block; color: #eee; font-size: 13px; font-weight: bold; white-space: normal; overflow-wrap: anywhere; }
.al-entry .al-level-link:hover { color: #ff9595; }
.al-empty { color: #999; font-size: 13px; line-height: 1.5; }
.al-avatar-settings { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
.al-avatar-actions { display: flex; align-items: flex-start; flex-direction: column; gap: 10px; }
.al-text-button { padding: 0; color: #ff9898; background: transparent; border: 0; font: inherit; font-size: 12px; cursor: pointer; }
.al-hint { color: #999; font-size: 11px; line-height: 1.5; }
.al-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.al-file-input:focus-visible + * { outline: 2px solid #ff3b3b; }
.al-avatar-actions:focus-within label { outline: 2px solid #ff3b3b; outline-offset: 3px; }
.al-form-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 14px 0; }
.account-lab button:focus-visible, .account-lab a:focus-visible, .al-input:focus-visible { outline: 2px solid #ff3b3b; outline-offset: 3px; }
.al-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.al-text-link { display: inline-block; color: #ff9898; margin-top: 12px; font-size: 12px; text-decoration: none; }
.al-tab { text-decoration: none; }
.al-player { text-decoration: none; }
.al-logout { margin-top: 20px; width: 100%; }
.al-submission { padding: 16px 0; border-top: 1px solid #333; overflow-wrap: anywhere; }
.al-submission h4 { margin: 0 0 7px; font-size: 15px; }
.al-submission p { font-size: 13px; color: #bbb; line-height: 1.5; margin: 6px 0; white-space: pre-wrap; }
.al-submission a { color: #ff9898; font-size: 12px; }
@media (max-width: 920px) {
    .al-layout { grid-template-columns: 190px minmax(0,1fr); gap: 16px; }
    .al-hero { flex-wrap: wrap; padding: 20px; gap: 16px; }
    .al-hero-text { min-width: 160px; }
    .al-hero h2 { font-size: 26px; }
    .al-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .al-auth-grid { grid-template-columns: 1fr; }
    .al-layout { grid-template-columns: 1fr; }
    .al-sidebar { position: static; }
    .al-nav { grid-template-columns: 1fr 1fr; }
    .al-player-list { max-height: 140px; }
    .al-hero { flex-direction: column; align-items: flex-start; }
    .al-stats { grid-template-columns: 1fr 1fr; }
    .al-avatar-settings { flex-direction: column; align-items: flex-start; }
}