body {
    background-color: var(--bg-primary);
    cursor: url('../images/default.cur?v=eacf2ceb94e4'), auto;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-primary) url('../images/main_bg.avif?v=cf1da2a43369') no-repeat center center / cover;
    z-index: -1;
    pointer-events: none;
}

.header { backdrop-filter: blur(8px); }
.header-inner { height: 50px; }
.header-logo img { height: 32px; }
.header-logo-text { font-size: 1.15rem; }

.account-page-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(34, 48, 63, .95);
}

.account-page-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.account-page-header .breadcrumb { margin-bottom: 12px; }
.account-page-header h1 { margin: 0; font-size: 1.5rem; line-height: 1.25; }
.account-page-header p { margin: 7px 0 0; color: var(--text-secondary); font-size: .9rem; }
.account-page-body { padding: 20px; }

.profile-sections { display: grid; gap: 20px; }
.profile-sections[hidden], .profile-delete-confirmation[hidden] { display: none !important; }
.profile-section { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.profile-section:last-child { padding-bottom: 0; border-bottom: 0; }
.profile-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.profile-section h2 { margin: 0; font-size: 1rem; }
.profile-section-lead { margin: 4px 0 0; color: var(--text-muted); font-size: .8rem; }
.profile-readonly-value { margin: 0; color: var(--text-primary); font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }

.profile-overview { display: flex; align-items: center; gap: 14px; padding: 13px; border: 1px solid var(--border); border-radius: 7px; background: rgba(24, 33, 43, .56); }
.profile-overview-avatar { width: 62px; height: 62px; border: 1px solid rgba(201, 168, 76, .55); border-radius: 50%; background: var(--bg-primary); object-fit: contain; }
.profile-overview-details { display: grid; align-content: center; align-self: stretch; transform: translateY(-2px); }
.profile-overview-name { display: block; color: var(--text-primary); font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.profile-overview-registration { display: block; margin-top: 4px; color: var(--text-muted); font-size: .75rem; }

.avatar-picker { display: grid; gap: 12px; }
.avatar-picker-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: .78rem; }
.avatar-picker-meta span:last-child { color: var(--text-secondary); }
.avatar-scroll { box-sizing: border-box; width: 100%; max-width: 100%; padding: 4px 6px 8px; overflow-x: auto; overflow-y: hidden; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-inline: contain; touch-action: pan-y; user-select: none; }
.avatar-scroll::-webkit-scrollbar { display: none; }
.avatar-scroll.is-dragging { cursor: grabbing; }
.avatar-grid { display: flex; flex-wrap: nowrap; width: max-content; gap: 10px; }
.avatar-option { position: relative; flex: 0 0 auto; width: 58px; height: 58px; padding: 3px; overflow: visible; border: 1px solid var(--border); border-radius: 50%; background: rgba(24, 33, 43, .56); cursor: url('../images/text.cur?v=f75453a5744d'), pointer; }
.avatar-option:hover { border-color: rgba(201, 168, 76, .75); transform: translateY(-1px); }
.avatar-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.avatar-option.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(201, 168, 76, .22); }
.avatar-option.is-selected::after { content: '✓'; position: absolute; right: -5px; bottom: -5px; display: grid; width: 18px; height: 18px; place-items: center; border: 2px solid var(--bg-primary); border-radius: 50%; background: var(--accent); color: #1a1a1a; font-size: .72rem; font-weight: 800; line-height: 1; }
.avatar-option img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.avatar-option.has-load-error { opacity: .35; cursor: not-allowed; }
.avatar-picker-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.avatar-picker-actions .profile-message { margin: 0; }
.avatar-picker .profile-submit:disabled { cursor: url('../images/text.cur?v=f75453a5744d'), pointer; opacity: .58; }

.profile-form { display: grid; gap: 11px; max-width: 460px; }
.profile-field { display: grid; gap: 5px; color: var(--text-secondary); font-size: .8rem; }
.profile-field input { min-height: 38px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; outline: none; background: var(--bg-primary); color: var(--text-primary); font: inherit; }
.profile-field input:focus { border-color: var(--accent); }
.profile-submit {
    justify-self: start;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: .8rem;
    font-weight: 400;
}

.profile-submit:hover:not(:disabled) { border-color: var(--accent); color: var(--text-primary); }
.profile-message { min-height: 1.4em; margin: 8px 0 0; color: var(--text-muted); font-size: .8rem; }
.profile-message.is-error { color: #e59696; }
.profile-message.is-success { color: #9dc99b; }
.profile-section-danger h2 { color: #ecb1b1; }
.profile-delete-actions { display: flex; align-items: center; }
.profile-submit-danger { border-color: rgba(207, 91, 91, .72); background: rgba(143, 52, 52, .88); color: #fff; }
.profile-submit-danger:hover:not(:disabled) { border-color: #ef9a9a; background: rgba(173, 58, 58, .96); color: #fff; }
.profile-delete-confirmation { max-width: 460px; margin-top: 13px; padding: 13px; border: 1px solid rgba(207, 91, 91, .42); border-radius: 6px; background: rgba(99, 41, 41, .2); }
.profile-delete-confirmation > p { margin: 0 0 11px; color: var(--text-secondary); font-size: .8rem; line-height: 1.45; }
.profile-delete-confirmation-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.profile-text-button { padding: 0; border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: .8rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.profile-text-button:hover:not(:disabled) { color: var(--text-primary); }
.profile-text-button:disabled { cursor: default; opacity: .62; }

.account-page-guest { padding: 26px 20px; border: 1px dashed var(--border); border-radius: 7px; color: var(--text-secondary); text-align: center; }
.account-page-guest h2 { margin: 0; color: var(--text-primary); font-size: 1.1rem; }
.account-page-guest p { margin: 7px 0 0; font-size: .88rem; }

.my-builds-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.my-builds-toolbar p { margin: 0; color: var(--text-secondary); font-size: .85rem; }
.my-builds-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.my-builds-actions .profile-submit { font-family: inherit; line-height: 1.2; }
.my-builds-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-bottom: 16px; padding: 5px; border: 1px solid var(--border); border-radius: 7px; background: rgba(14, 25, 34, .72); }
.my-builds-tab { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 6px 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text-secondary); font: inherit; font-size: .82rem; cursor: pointer; }
.my-builds-tab:hover { color: var(--text-primary); }
.my-builds-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.my-builds-tab.is-active { border-color: rgba(201, 168, 76, .45); background: rgba(55, 72, 83, .74); color: var(--text-primary); box-shadow: inset 0 0 0 1px rgba(201, 168, 76, .12); }
.my-builds-tab-count { display: inline-flex; flex: 0 0 auto; align-items: center; color: var(--text-muted); font-size: .78rem; }
.my-builds-tab-count::before { content: '·'; margin-right: 7px; color: var(--text-muted); }
.my-builds-tab.is-active .my-builds-tab-count { color: var(--accent); font-weight: 700; }
.my-builds-button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-primary); color: var(--text-secondary); font: inherit; font-size: .8rem; text-decoration: none; }
.my-builds-button:hover:not(:disabled) { border-color: var(--accent); color: var(--text-primary); }
.my-builds-button.is-primary { border-color: var(--accent); background: var(--accent); color: #1a1a1a; font-weight: 700; }
.my-builds-button.is-danger:hover { border-color: rgba(225, 120, 120, .7); color: #e59696; }
.my-builds-button:disabled { opacity: .65; cursor: default; }
.my-builds-list { display: grid; gap: 9px; }
.my-build-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px; border: 1px solid var(--border); border-radius: 7px; background: rgba(24, 33, 43, .56); }
.my-build-card h2 { margin: 0; color: var(--text-primary); font-size: .98rem; line-height: 1.4; overflow-wrap: anywhere; }
.my-build-meta { margin: 4px 0 0; color: var(--text-muted); font-size: .76rem; }
.my-build-comment { margin: 7px 0 0; color: var(--text-secondary); font-size: .82rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.my-build-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.my-builds-empty { margin: 0; padding: 22px; border: 1px dashed var(--border); border-radius: 7px; color: var(--text-muted); font-size: .86rem; text-align: center; }

@media (max-width: 520px) {
    .account-page-body { padding: 16px; }
    .avatar-grid { gap: 9px; }
    .avatar-option { width: 54px; height: 54px; }
    .my-builds-tabs { gap: 3px; padding: 3px; }
    .my-builds-tab { gap: 5px; padding: 5px; font-size: .75rem; }
    .my-builds-tab-count::before { margin-right: 5px; }
    .my-build-card { grid-template-columns: 1fr; }
    .my-build-card-actions { justify-content: flex-start; }
}