/* Shared HabboUtils palette and controls, applied after the legacy styles. */
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url('/brand/fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url('/brand/fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url('/brand/fonts/poppins-latin-600-normal.woff2') format('woff2'); }

:root {
    --primary: #6f91bb;
    --secondary: #7aa2d2;
    --accent: #5b98ff;
    --background: #00081a;
    --panel: #10172a;
    --item: #20263a;
    --surface: var(--item);
    --text: #d7dce6;
    --border: #404458;
    --success: #4caf50;
    --error: #d63031;
    --hover: #88b2e6;
    --text-muted: #b8b8b8;
    --muted: var(--text-muted);
    --line: rgba(111,145,187,.22);
    --input-background: var(--item);
    --placeholder: #9e9e9e;
    --button-background: #496c96;
    --button-border: #789dca;
    --button-hover: #5277a2;
    --ht-primary: var(--primary);
    --ht-secondary: var(--secondary);
    --ht-accent: var(--accent);
    --ht-background: var(--background);
    --ht-panel: var(--panel);
    --ht-item: var(--item);
    --ht-text: var(--text);
    --ht-muted: var(--text-muted);
    --ht-placeholder: var(--placeholder);
    --ht-border: var(--border);
    --ht-line: var(--line);
    --ht-input: var(--input-background);
    --ht-hover: var(--hover);
    --ht-success: var(--success);
    --ht-error: var(--error);
}

body.versionFive { font-family: Poppins, sans-serif; font-size: 14px; color: var(--text); background: var(--background); font-synthesis: none; }
body.versionFive :is(button, input, select, textarea) { font-family: inherit; }
body.versionFive :is(h1, h2, h3, h4) { color: var(--text); }
body.versionFive a { color: inherit; }
body.versionFive a:hover { color: #fff; }
body.versionFive :focus-visible { outline: 2px solid var(--hover); outline-offset: 3px; }
body.versionFive ::selection { background: var(--primary); color: var(--background); }

body.versionFive :is(.button, .btn-primary, .account-add-button, .discord-connect) {
    border-radius: 10px; border: 1px solid var(--button-border); background: var(--button-background);
    color: #fff; min-height: 44px; padding: 10px 18px;
}
body.versionFive :is(.button, .btn-primary, .account-add-button, .discord-connect):hover:not(:disabled) { background: var(--button-hover); border-color: var(--hover); color: #fff; }
body.versionFive :is(.button-secondary, .btn-secondary) { background: var(--item); border-color: var(--border); color: var(--text); border-radius: 12px; }
body.versionFive :is(.button-secondary, .btn-secondary):hover:not(:disabled) { background: var(--panel); border-color: var(--primary); }
body.versionFive .button-danger { background: #452638; border-color: #865363; color: #ffe0e0; }
body.versionFive .button-danger:hover:not(:disabled) { background: #683448; border-color: #f18187; }

body.versionFive :is(.form-field, .admin-surface, .filterComboMenu) :is(input:not([type='checkbox'], [type='radio']), textarea, select),
body.versionFive :is(.select-trigger, .filterComboTrigger) {
    background: var(--item); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
}
body.versionFive :is(input, textarea)::placeholder { color: var(--placeholder); }
body.versionFive :is(.select-trigger, .filterComboTrigger):hover { background: var(--item); border-color: var(--primary); }
body.versionFive :is(.options-popover, .filterComboMenu) {
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
    padding: 7px; box-shadow: 0 18px 45px rgba(0,0,0,.38);
}
body.versionFive :is(.options-list button, .filterComboOption) { color: var(--text); padding: 11px 12px; border-radius: 9px; }
body.versionFive :is(.options-list button, .filterComboOption):is(:hover, :focus-visible, .is-highlighted, [aria-selected='true']) { background: var(--item); color: #fff; }
body.versionFive .filterComboSearch { background: var(--item); color: var(--text); border-color: var(--border); border-radius: 9px; }

body.versionFive #navigation .navBg { background: var(--panel); border-color: var(--line); }
body.versionFive #navigation nav ul.navi > li > :is(a, span) { color: var(--text); }
body.versionFive :is(#navigation nav ul.navi > li.has-sub, #quickbar .topBarNav .profilNav) .sub { padding: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 45px rgba(0,0,0,.38); list-style: none; width: 230px; max-width: calc(100vw - 24px); transition: opacity .15s ease, visibility .15s ease; }
body.versionFive :is(#navigation nav ul.navi > li.has-sub, #quickbar .topBarNav .profilNav) .sub li { background: transparent; border: 0; list-style: none; }
body.versionFive :is(#navigation nav ul.navi > li.has-sub, #quickbar .topBarNav .profilNav) .sub li > a { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 11px 12px; border-radius: 9px; background: transparent; color: var(--text); font-size: 13px; line-height: 1.4; transition: background-color .15s, color .15s; }
body.versionFive :is(#navigation nav ul.navi > li.has-sub, #quickbar .topBarNav .profilNav) .sub li > a:is(:hover, :focus-visible) { background: var(--item); color: #fff; }
body.versionFive #navigation .sub .logout > a { color: #fa7279; }
body.versionFive #navigation .sub .logout > a:hover { color: #ff9da2; }

body.versionFive :is(.panel, .box, .admin-surface .table-wrap, .admin-modal, .account-identity, .discord-entry, .passkey-list li) { background: var(--panel); color: var(--text); border-radius: 14px; }
body.versionFive :is(.admin-surface .data-table thead, .notice, .alert) { background: var(--item); color: var(--text); }
body.versionFive :is(.account-identity, .discord-entry, .passkey-list li) { min-height: 76px; height: auto; padding: 12px 16px; border-radius: 10px; }
body.versionFive .account-identity { padding-block: 6px; }
body.versionFive .account-identity img { height: 64px; width: 54px; }
body.versionFive :is(.account-identity-copy, .discord-entry-copy, .passkey-data) { min-width: 0; overflow-wrap: anywhere; }
body.versionFive .account-identity:hover { background: var(--item); }
body.versionFive :is(.account-identity-copy strong, .discord-entry-copy strong, .passkey-data strong) { color: var(--text); }
body.versionFive :is(.account-caption, .description) { color: var(--text-muted); margin: 12px 0 20px; line-height: 1.6; }
body.versionFive .page-heading p { color: var(--text-muted); margin-top: 8px; line-height: 1.6; }
body.versionFive :is(.muted, .field-hint, .option-status) { color: var(--text-muted); }
body.versionFive :is(.discord-settings, .account-recovery, .disclosure) { border-color: var(--line); }
body.versionFive #footer .footerInfo { background: var(--panel); color: var(--text); }
body.versionFive #footer .footerInfo :is(a, .sulakeText) { color: var(--text); }
body.versionFive #footer .footerInfo a:hover { color: #fff; }
body.versionFive #footer .footerInfo .sulakeText { color: var(--text-muted); }
body.versionFive :is(.text-primary, .text-info, .link-primary, .link-info) { color: var(--text) !important; }

body.versionFive :is(.filterSelects, #popUpFurni .popUpBox, .item-detail-visual, .item-card, .furniVoting) { background-color: var(--panel); border-color: var(--line); border-radius: 14px; }
body.versionFive .item-image { background: transparent; }
body.versionFive .item-detail-visual .item-image { background-color: var(--panel); background-image: url('/assets/images/extras/bg.png'); background-position: center; background-repeat: no-repeat; }
body.versionFive :is(.voting-notice, .lastNews) { background: var(--item); color: var(--text); border-color: var(--line); }
body.versionFive .voting-notice { border-radius: 14px; }
body.versionFive .nav :is(.nav-link:hover, .nav-link.active) { background: var(--item); color: var(--text); border-color: var(--line); }
body.versionFive .furni-admin-tabs :is(button[aria-pressed='true'], a[aria-current='page']) { background: var(--item); border-color: var(--primary); color: var(--text); }
body.versionFive .furni-admin-tabs a:hover { background: var(--item); }
body.versionFive :is(.field-error, .notice-error) { color: #ffb2b2; }

/* The legacy Bootstrap buttons have higher specificity than a plain .btn-primary. */
body.versionFive .btn.btn-primary, body.versionFive .btn.btn-success { background: var(--button-background); border-color: var(--button-border); color: #fff; }
body.versionFive .btn.btn-primary:is(:hover, :focus), body.versionFive .btn.btn-success:is(:hover, :focus) { background: var(--button-hover); border-color: var(--hover); color: #fff; }
body.versionFive #navigation nav ul.navi > li > a:is(:hover, :focus-visible, [aria-current='page']) { background: var(--item); color: var(--text); }
body.versionFive #quickbar #navToggle { background: var(--item); border-color: var(--line); }
body.versionFive #quickbar #navToggle:hover { background: var(--panel); }
body.versionFive #content .utils-pagination a { color: var(--text); }
body.versionFive #content .utils-pagination a:is(:hover, :focus-visible) { color: #fff; }

@media (min-width: 1200px) {
    body.versionFive #navigation nav { display: flex; flex-wrap: nowrap; width: 100%; margin-inline: auto; gap: 12px; }
    body.versionFive #navigation nav ul.navi.naviLeft { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; flex-wrap: nowrap; }
    body.versionFive #navigation nav ul.navi.naviRight { flex: 0 0 auto; width: auto; max-width: none; margin-left: auto; }
    body.versionFive #navigation nav ul.navi > li { flex: 0 0 auto; }
    body.versionFive #navigation .navLogin { white-space: nowrap; }
}

@media (max-width: 500px) {
    body.versionFive :is(.discord-entry, .passkey-list li) { padding: 12px; }
    body.versionFive .account-identity { padding-inline: 12px; }
}

/* Widen page shells only; nested grids and dialogs keep their own sizing. */
@media (min-width: 1600px) {
    body.versionFive #content > :is(.row, .container),
    body.versionFive #content > .newsContainer > .row,
    body.versionFive #navigation nav {
        width: calc(100% - 64px); max-width: 1680px; margin-inline: auto;
    }
    body.versionFive #content > .getFurniList > .giant-3 {
        flex: 0 0 20%; max-width: 20%;
    }
}

/* Shared type scale and action sizing across public pages, editors and dialogs. */
body.versionFive { line-height: 1.5; }
body.versionFive main#content h1 { font-size: 26px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
body.versionFive main#content h2 { font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
body.versionFive main#content h3 { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
body.versionFive .admin-surface .page-heading h1 { display: flex; align-items: center; gap: 10px; }
body.versionFive .admin-surface .page-heading h1 .habbo-icon { width: 22px; height: 22px; flex: 0 0 22px; }
body.versionFive :is(#content, #navigation, #quickbar, .admin-modal, .furniFilters) :is(.button, .btn),
body.versionFive :is(.filterApply, .filterReset) {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-sizing: border-box; height: auto; min-height: 42px; padding: 10px 16px;
    border-radius: 10px; font: 500 14px/20px Poppins, sans-serif;
    text-transform: none; letter-spacing: 0; white-space: normal; text-decoration: none;
}
body.versionFive :is(#content, .admin-modal) :is(.button, .btn):disabled { opacity: .5; }
body.versionFive :is(#content, .admin-modal) :is(.button, .btn) .habbo-icon { flex: 0 0 18px; width: 18px; height: 18px; }
body.versionFive :is(#content, .admin-modal) :is(.button, .btn):not(.button-secondary, .btn-secondary, .button-danger, .btn-danger) { background: var(--button-background); border: 1px solid var(--button-border); color: #fff; }
body.versionFive :is(#content, .admin-modal) :is(.button, .btn):not(.button-secondary, .btn-secondary, .button-danger, .btn-danger):hover:not(:disabled) { background: var(--button-hover); border-color: var(--hover); }
body.versionFive :is(#content, .admin-modal) :is(.button-secondary, .btn-secondary) { background: var(--item); border: 1px solid var(--border); color: var(--text); }
body.versionFive :is(#content, .admin-modal) :is(.button-secondary, .btn-secondary):hover:not(:disabled) { background: var(--panel); border-color: var(--primary); color: #fff; }
body.versionFive #content .article-editor-toolbar :is(.btn, .editor-heading) { min-height: 36px; height: 36px; padding: 6px 9px; font-size: 13px; }
body.versionFive #content .article-editor-toolbar .editor-icon-button { width: 36px; flex-basis: 36px; padding: 6px; }
body.versionFive #content .article-editor-toolbar button[aria-pressed='true'] { background: var(--button-background); color: #fff; }
body.versionFive :is(#content, .admin-modal) .utils-pagination :is(a, button, input, form) { height: 42px; min-height: 42px; }
body.versionFive .admin-surface :is(.stack, .two-column, .form-grid) > .button { justify-self: start; align-self: start; }
body.versionFive .admin-modal-header h2 { font-size: 20px; font-weight: 600; letter-spacing: 0; }
body.versionFive .admin-surface legend { font-size: 16px; font-weight: 500; color: var(--text); }