/* Shared UI. Loaded after page CSS; game artwork, rarity colours and chat layout stay local. */
.site-ui {
    --ui-radius: 18px;
    --ui-radius-small: 12px;
    --ui-focus: #e5cc98;
    --ui-raised: #181818;
    --ui-border: #343434;
    --ui-danger: #ff8080;
}
.site-ui :is(button,input,select,textarea) { font-family: inherit; }
.site-ui :is(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.site-ui :is(button,.btn):disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.site-ui .modern-nav-link { color: var(--text-muted); }
.site-ui .modern-nav-link:hover { color: var(--text-main); background: #181818; }
.site-ui .modern-nav-link.active { color: var(--accent); background: var(--accent-light); }
.site-ui:not(.messages-page) :is(.card,.streamer-card,.sub-card-box,.modern-post-card,.stat-metric-card,.genshin-uid-card,.trophy-case-card,.edit-card) {
    border-radius: var(--ui-radius) !important;
    border-color: var(--border);
}
/* Explicit button roles override legacy profile rules, rather than every button. */
.site-ui[data-user-id] :is(.btn,.btn-action,.ui-button) {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 10px 18px; border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-small); font-size: .9rem; font-weight: 600;
    line-height: 1.3; text-decoration: none; cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.site-ui[data-user-id] :is(.btn-outline,.btn-edit,.ui-button-secondary) {
    background: #181818 !important; color: var(--text-main) !important; border: 1px solid var(--ui-border) !important;
}
.site-ui[data-user-id] :is(.btn-solid,.ui-button-primary) {
    background: var(--accent) !important; color: #16120b !important; border: 1px solid var(--accent) !important;
}
.site-ui[data-user-id] :is(.btn-delete,.ui-button-danger) {
    background: #251313 !important; color: var(--ui-danger) !important; border: 1px solid #663333 !important;
}
.site-ui[data-user-id] :is(.btn,.btn-action,.ui-button):hover { transform: none !important; box-shadow: none !important; }
.site-ui[data-user-id] :is(.btn-outline,.btn-edit,.ui-button-secondary):hover { background: #242424 !important; border-color: #555 !important; }
.site-ui[data-user-id] :is(.btn-solid,.ui-button-primary):hover { background: #f0dcb4 !important; }
.site-ui[data-user-id] :is(.btn-delete,.ui-button-danger):hover { background: #3b1c1c !important; }
.site-ui:not(.messages-page) :is(.modern-input,.custom-select) {
    min-height: 42px; box-sizing: border-box; border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-small); background: #080808; color: var(--text-main);
    padding: 10px 12px; font-size: .95rem; max-width: 100%;
}
.site-ui:not(.messages-page) :is(.modern-input,.custom-select):focus-visible { border-color: var(--accent); }
.site-ui :is(.modern-input,textarea)::placeholder { color: var(--text-muted); opacity: 1; }
.site-ui:not(.messages-page) :is(.modal-content,.modern-modal-content,.modern-modal-card) {
    border-radius: 20px !important; border: 1px solid var(--ui-border);
    background-color: var(--surface); color: var(--text-main);
}
.site-ui .btn-close-modal { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border-radius: 12px; }
.site-ui :is(.showcase-tab-btn,.banner-nav-tab,.q-filter-chip,.sb-rarity-tab) { border-radius: 12px; transition: background-color .16s ease, border-color .16s ease; }
.site-ui :is(.showcase-tab-btn,.banner-nav-tab,.q-filter-chip,.sb-rarity-tab).active { color: var(--accent); border-color: var(--accent); background-color: var(--accent-light); }
/* Compact home header; personal and game backgrounds retain their artwork. */
.site-ui .hero-modern { padding: 30px 24px; border-radius: 20px; margin-bottom: 24px; }
.site-ui .hero-title { font-size: clamp(1.65rem,3vw,2.25rem); margin: 0 0 10px; }
.site-ui .hero-subtitle { font-size: 1rem; }
.site-ui :is(.hero-glow-1,.hero-glow-2) { opacity: .06; background: var(--accent); }
.site-ui .btn-queue-trigger { min-height: 44px; padding: 10px 18px; font-size: .9rem; font-weight: 600; border-radius: 12px; }
.site-ui .home-randomizer { background: #181818 !important; border-color: var(--ui-border) !important; color: var(--text-main) !important; text-decoration: none; }
.site-ui .profile-main-card { border-radius: 20px; }
.site-ui .stats-summary-grid { gap: 12px; }
/* Fixed notices never participate in the page/chat flex layout. */
.site-ui .ui-notices { position: fixed; z-index: 15000; right: max(16px,env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 8px; width: min(380px,calc(100vw - 32px)); pointer-events: none; }
.site-ui .ui-notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: 14px; color: var(--text-main); background: #181818; box-shadow: 0 8px 28px #0009; pointer-events: auto; animation: ui-appear .16s ease-out; }
.site-ui .ui-notice-text { flex: 1; white-space: pre-wrap; overflow-wrap: anywhere; }
.site-ui .ui-notice-close { flex: none; border: 0; color: var(--text-muted); background: transparent; font-size: 24px; line-height: 1; min-width: 32px; min-height: 32px; cursor: pointer; }
.site-ui .ui-confirm { box-sizing: border-box; width: min(440px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; margin: auto; padding: 24px; border: 1px solid var(--ui-border); border-radius: 20px; color: var(--text-main); background: #101010; box-shadow: 0 20px 70px #0009; animation: ui-appear .16s ease-out; }
.site-ui .ui-confirm::backdrop { background: #000a; }
.site-ui .ui-confirm-title { margin: 0 0 12px; font-size: 1.2rem; }
.site-ui .ui-confirm-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-muted); line-height: 1.55; margin: 0 0 24px; }
.site-ui .ui-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
@keyframes ui-appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:700px) {
    .site-ui:not(.messages-page) .main-content > .container { padding-inline: 14px; }
    .site-ui .hero-modern { padding: 24px 16px; border-radius: 18px; margin-bottom: 20px; }
    .site-ui .hero-subtitle { font-size: .9rem; }
    .site-ui[data-user-id] :is(.btn,.btn-action,.ui-button) { min-height: 44px; }
    .site-ui .ui-confirm { padding: 20px; }
    .site-ui .ui-confirm-actions > button { flex: 1; width: auto; }
    .site-ui:not(.messages-page) :is(.modal-content,.modern-modal-content,.modern-modal-card) { box-sizing: border-box; max-width: calc(100vw - 24px); }
    .site-ui .inbox-page-head { gap: 12px; flex-wrap: wrap; }
    .site-ui #flash-container { right: 14px !important; left: 14px; max-width: 440px; margin-left: auto; }
    .site-ui .flash-msg { min-width: 0 !important; }
}
@media(prefers-reduced-motion:reduce) {
    .site-ui *, .site-ui *::before, .site-ui *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Shared utility controls outside the illustrated game banners. */
.site-ui :is(.search-btn,.btn-save-tw) {
    border-radius: 12px; min-height: 44px; font-size: .9rem; font-weight: 600;
    background: var(--accent); color: #16120b;
}
.site-ui :is(.btn-equip-sm,.btn-unequip-sm,.btn-upgrade-sm) {
    border-radius: 10px; border-color: var(--ui-border); background: #181818; color: var(--text-main);
}
.site-ui :is(.btn-equip-sm,.btn-unequip-sm,.btn-upgrade-sm):hover {
    background: var(--accent-light); border-color: var(--accent); color: var(--accent);
}
.site-ui .btn-recycle-sm { border-radius: 10px; }
@media(max-width:700px) {
    .site-ui :is(.showcase-tab-btn,.banner-nav-tab,.sb-rarity-tab) { min-height: 44px; }
}

/* Preserve page-specific font sizes and compact inventory controls. */
.site-ui .banner-nav-tab.active {
    background: var(--accent-light) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.site-ui :is(.art-wish-btn,.wish-action-btn) {
    min-height: 52px; border-radius: 14px; line-height: 1.2;
    background: #181818; color: var(--text-main); border-color: var(--ui-border);
    box-shadow: none;
}
.site-ui :is(.art-wish-btn,.wish-action-btn):hover {
    background: #242424; transform: none; box-shadow: none;
}
.site-ui :is(.art-wish-btn.gold,.wish-action-btn.purple-btn) {
    background: var(--accent); color: #16120b; border-color: var(--accent);
}
.site-ui :is(.art-wish-btn.gold,.wish-action-btn.purple-btn):hover {
    background: #f0dcb4; box-shadow: none;
}
.site-ui .post-footer { flex-wrap: wrap; row-gap: 10px; }
.site-ui .post-footer > div { flex-wrap: wrap; }
.site-ui .post-footer :is(.btn-action,.btn-icon-action) {
    width: 36px !important; height: 36px !important; min-width: 36px; min-height: 36px;
    padding: 0 !important; border-radius: 10px !important; flex: 0 0 36px;
}
.site-ui .post-footer :is(.btn-action,.btn-icon-action) svg { width: 16px; height: 16px; flex: none; }
@media(max-width:700px) {
    .site-ui .post-footer :is(.btn-action,.btn-icon-action) {
        width: 40px !important; height: 40px !important; min-width: 40px; min-height: 40px; flex-basis: 40px;
    }
}

/* Keep the inventory toolbar compact and consistent. */
.site-ui .art-inv-actions :is(.btn-strongbox,.btn-select-mode,.btn-mass-recycle) {
    box-sizing: border-box; min-height: 32px; height: 32px;
    padding: 4px 10px; border-radius: 8px; font-size: .78rem;
    font-weight: 600; line-height: 1.25; gap: 5px; justify-content: center;
}
.site-ui .art-inv-actions .btn-strongbox:hover { transform: none; }
@media(max-width:700px) {
    .site-ui .art-inv-actions :is(.btn-strongbox,.btn-select-mode,.btn-mass-recycle) {
        min-height: 40px; height: 40px;
    }
}