/* Shared final layer: flat Kavare palette, controls and viewport contracts. */
:root {
    color-scheme: dark;
    --h-background: #000; --h-foreground: #fff; --h-surface: #111; --h-surface-2: #1b1b1b;
    --h-surface-3: #292929; --h-overlay: #111; --h-muted: #b0b0b0; --h-separator: #303030;
    --h-default: #1b1b1b; --h-default-hover: #292929; --h-accent: #0060ff; --h-primary: #0060ff;
    --h-accent-hover: #2476ff; --h-primary-hover: #2476ff; --h-accent-soft: #0060ff24;
    --bg: #000; --surface: #111; --surface-2: #1b1b1b; --surface-3: #292929;
    --surface-raised: #1b1b1b; --surface-soft: #ffffff0d; --text: #fff; --text-soft: #e0e0e0;
    --text-faint: #b0b0b0; --muted: #b0b0b0; --line: #303030; --line-strong: #484848;
    --primary: #0060ff; --primary-strong: #2476ff; --brand: #0060ff; --brand-2: #8ab4ff; --cyan: #8ab4ff;
    --marketing-bg: #000; --marketing-panel: #111; --marketing-panel-2: #1b1b1b;
    --marketing-blue: #0060ff; --marketing-blue-hover: #2476ff; --marketing-blue-soft: #0060ff24;
    --marketing-white: #fff; --marketing-muted: #b0b0b0; --marketing-line: #303030;
    --success: #17c964; --green: #17c964; --warning: #f5a524; --danger: #f31260;
    font-family: 'Baloo Bhaijaan 2', Tahoma, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-block: 84px; }
body { margin: 0; color: var(--text); background-color: var(--bg); font-family: 'Baloo Bhaijaan 2', Tahoma, sans-serif; }
:where(main, section, article, aside, header, footer, nav, form, label, fieldset, details) { min-width: 0; }
:where(p, h1, h2, h3, h4, small, strong, label, code, output) { overflow-wrap: anywhere; }
:where(input, textarea, p, code, pre, .message-text, .dm-bubble, .member-profile-bio, .global-profile-bio) { -webkit-user-select: text; user-select: text; }
:where(a) { color: #8ab4ff; text-underline-offset: 3px; }
:where(img, video, canvas) { max-width: 100%; }
/* Crop geometry is calculated in image pixels; never constrain the source image. */
.crop-viewport > img { max-width: none; }
:where(button, input, select, textarea) { font: inherit; }
:where(button, [role=button], summary, a, input, textarea, select) { touch-action: manipulation; }
:where(button) { min-height: 44px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--surface-raised); cursor: pointer; }
:where(button):hover { background-color: var(--surface-3); }
:where(button):disabled { opacity: .5; cursor: not-allowed; }
:where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), textarea, select) { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--surface-raised); }
textarea { max-width: 100%; resize: vertical; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0; flex-shrink: 0; margin: 0; accent-color: #0060ff; cursor: pointer; }
input[type=range] { min-width: 0; min-height: 24px; padding: 0 !important; border: 0 !important; accent-color: #0060ff; cursor: pointer; box-shadow: none !important; }
input[type=color] { width: 100%; min-height: 44px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
input[type=file] { font-size: 14px; }
input[type=file]::file-selector-button { min-height: 36px; margin-inline-end: 10px; padding: 6px 12px; border: 0; border-radius: 8px; background: #0060ff; color: #fff; font: inherit; cursor: pointer; }
input[type=date] { color-scheme: dark; }
input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; }
input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px #1b1b1b inset !important; caret-color: #fff; }
input[readonly] { color: #b0b0b0 !important; background: #151515 !important; }
:focus-visible { outline: 2px solid #8ab4ff !important; outline-offset: 3px !important; }
.toggle-list label:focus-within > i { outline: 2px solid #8ab4ff; outline-offset: 3px; }
[hidden] { display: none !important; }
::selection { color: #fff; background: #0060ff; }
* { scrollbar-width: thin; scrollbar-color: #545454 #111; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #545454; border: 2px solid #111; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #0060ff; }

/* All select controls share one component, including long scrollable lists. */
[data-custom-select] { min-width: 0; }
.select-trigger { min-height: 46px !important; color: #fff !important; background: #1b1b1b !important; border-color: #303030 !important; }
.select-trigger:hover { background: #292929 !important; }
.select-trigger-value { font-size: 14px; color: #e0e0e0; }
.select-popover { background: #111; border-color: #484848; scrollbar-color: #0060ff #111; max-width: calc(100vw - 24px); }
.select-popover[popover] { position: fixed; inset: auto; margin: 0; direction: rtl; }
.select-popover::-webkit-scrollbar-track { background: #111; }
.select-popover::-webkit-scrollbar-thumb { background: #0060ff; border-color: #111; }
.select-option { min-height: 44px; font-size: 14px; }
.select-option[aria-selected=true] { color: #fff; background: #0060ff30; }
.select-option:hover, .select-option:focus-visible { background: #292929; }
.select-option .selected-mark { color: #8ab4ff; }
.admin-select .select-popover { min-width: 0; }

/* Backgrounds are flat. User-uploaded photos/banners keep their own imagery. */
.marketing-page, .community-page, .auth-page, .lobby-hub, .room-page, .admin-page, .forbidden-page, .nitro-page { background: #000; }
.marketing-glow, .marketing-noise, .ambient { display: none; }
.marketing-page::before, .experience-panel::before { display: none; }
.hub-sidebar, .sidebar, .chat-area, .server-member-panel, .control-panel, .voice-workspace, .voice-workspace > header { background: #111 !important; }
.site-header, .site-footer, .community-nav, .admin-nav, .site-nav { background-color: #000 !important; }
.hero-strip, .community-hero, .admin-hero, .final-cta, .experience-panel, .nitro-hero, .bento-card, .settings-card, .category-card, .nitro-feature, .nitro-section, .nitro-admin-card { background: #111 !important; }
.server-avatar, .mini-avatar, .community-avatar, .social-avatar, .person-avatar, .chat-room-avatar, .profile-preview-avatar, .global-profile-avatar, .member-profile-avatar, .mini-brand { background-color: #0060ff; }
.global-profile-banner, .member-profile-banner, .profile-preview-banner, .profile-banner, .server-cover { background-color: #0060ff; }
[data-profile-theme=midnight] { background: #080808 !important; }
[data-profile-theme=aurora] { background: #09172b !important; }
[data-profile-theme=neon] { background: #061229 !important; border-color: #0060ff !important; }
[data-profile-frame=gaming] :is(.global-profile-avatar,.member-profile-avatar,.profile-preview-avatar) { box-shadow: 0 0 0 3px #0060ff, 0 0 0 7px #0060ff33 !important; }
.hero-copy h1 em { color: #8ab4ff; text-shadow: none; }
.hub-nav a.active, .channel-link.active, .server-settings-nav button.active { background: #0060ff24 !important; color: #fff !important; }
.primary-btn, .nitro-button:not(.secondary), .auth-submit, .send-button { background: #0060ff !important; color: #fff !important; }
.dm-bubble.mine, .message.own .message-content { background-color: #0060ff24; border-color: #0060ff60; }
.audio-waveform i { background: #8ab4ff; }
.audio-timeline-row input { background: #484848 !important; }
.crop-grid { background: transparent; pointer-events: none; box-shadow: inset 0 0 0 1px #ffffff50; }
.crop-grid::before, .crop-grid::after { content: ''; position: absolute; inset: 33.333% 0; border-block: 1px solid #ffffff45; }
.crop-grid::after { inset: 0 33.333%; border-block: 0; border-inline: 1px solid #ffffff45; }

/* Content must wrap rather than widening the viewport with a URL or identifier. */
.search-results > a > div, .forum-thread header > div, .person-card > span, .friend-list article > span, .token-reveal > div, .integration-list span, .admin-user-main > div, .admin-room-title > div, .hub-account > span { min-width: 0; }
.search-results p, .forum-thread > p, .forum-replies p, .api-doc code, .token-reveal code, .admin-event-list p, .member-profile-bio, .global-profile-bio { overflow-wrap: anywhere; word-break: normal; }
.api-doc pre { max-width: 100%; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.people-grid { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
.server-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.field-grid, .role-identity, .permission-fields, .admin-form-grid { min-width: 0; }
.field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.permission-fields { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.channel-setting { grid-template-columns: 42px minmax(0,1fr) 140px minmax(0,1fr) auto; }
.integration-list > div, .token-reveal, .report-card header, .audit-item { min-width: 0; }
.community-nav-actions { flex-wrap: wrap; }
.hub-utility-menu { display: none; position: relative; }
.hub-utility-menu summary { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #303030; border-radius: 12px; background: #1b1b1b; cursor: pointer; list-style: none; }
.hub-utility-menu summary::-webkit-details-marker { display: none; }
.hub-utility-menu nav { position: absolute; z-index: 100; top: 52px; left: 0; width: min(250px, calc(100vw - 32px)); padding: 8px; border: 1px solid #484848; border-radius: 14px; background: #111; box-shadow: 0 16px 40px #000a; }
.hub-utility-menu a { min-height: 44px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border-radius: 8px; }
.hub-utility-menu a:hover { background: #0060ff24; }

/* Top-layer popups remain reachable in portrait, landscape and zoomed layouts. */
dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: auto; overflow-y: auto; overscroll-behavior: contain; color: #fff; }
dialog::backdrop { background: #000b; }
.hub-dialog, .crop-dialog, .global-profile-dialog, .profile-dialog, .report-dialog, .stream-start-dialog { max-height: calc(100dvh - 24px); }
.hub-dialog > form, .crop-card { min-width: 0; }
.crop-viewport.avatar, .crop-viewport.room { width: min(100%, 420px, 45dvh); border-radius: 16px; }
.crop-viewport.banner { width: 100%; aspect-ratio: 10 / 3; }
.crop-controls { flex-wrap: wrap; }
.crop-controls > div { gap: 6px; }
.crop-controls button { width: 44px; height: 44px; border-radius: 10px; }
.crop-card footer, .hub-dialog footer { gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.crop-card footer button, .hub-dialog footer button { min-height: 44px; }
.confirmation-dialog { width: min(430px, calc(100vw - 24px)); padding: 24px; background: #111; border: 1px solid #484848; border-radius: 20px; }
.confirmation-dialog h2 { margin: 0 0 12px; font-size: 22px; }
.confirmation-dialog p { margin: 0 0 24px; color: #e0e0e0; line-height: 1.9; }
.confirmation-dialog footer { display: flex; justify-content: flex-end; gap: 8px; }
.confirmation-dialog .confirm-accept { background: #ba1744; border-color: #ba1744; color: #fff; }
.room-page:not(.channel-voice) .control-panel { display: flex !important; }

@media (max-width: 1180px) {
    .admin-nav { flex-wrap: wrap; padding-block: 10px; gap: 10px; }
    .admin-nav nav { max-width: 100%; flex-wrap: wrap; }
    .channel-setting { grid-template-columns: 42px minmax(0,1fr) 130px auto; }
    .channel-topic { grid-column: 2 / 4; }
    .channel-setting-actions { grid-column: 4; grid-row: 1 / 3; align-self: center; }
}
@media (max-width: 900px) {
    .hub-sidebar { height: calc(78px + env(safe-area-inset-bottom)); }
    .hub-nav { grid-template-columns: repeat(5, minmax(0,1fr)); }
    .hub-content { padding-bottom: calc(106px + env(safe-area-inset-bottom)); }
    .hub-utility-menu { display: block; }
    .community-nav { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
    .admin-nav nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding: 4px 0; }
    .admin-nav nav > * { flex: 0 0 auto; }
    .settings-create { position: static; }
    .developer-tabs { position: static; }
    .developer-tabs button { flex: 0 0 auto; }
    .settings-index { max-width: 100%; }
}
@media (max-width: 720px) {
    .server-settings-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px !important; }
    .server-settings-head { min-height: 66px; padding: 10px 14px; }
    .server-settings-head h2 { font-size: 20px; }
    .server-settings-layout { display: flex; flex-direction: column; }
    .server-settings-nav { min-height: 70px; height: 70px; flex: 0 0 70px; }
    .server-settings-nav button { flex-shrink: 0; min-width: 80px; }
    .server-settings-content { flex: 1; min-height: 0; height: auto; }
    .settings-tab { padding: 16px; }
    .channel-settings-list form { grid-template-columns: minmax(0,1fr) 44px 44px; align-items: center; }
    .channel-settings-list form > input, .channel-settings-list form > [data-custom-select] { grid-column: 1; }
    .channel-settings-list form > button { grid-row: 1 / 3; min-height: 44px; }
    .channel-settings-list form > button:first-of-type { grid-column: 2; }
    .channel-settings-list form > button:last-of-type { grid-column: 3; }
    .channel-setting { grid-template-columns: 36px minmax(0,1fr); }
    .channel-setting label, .channel-topic { grid-column: 2; }
    .channel-setting-actions { grid-column: 1 / -1; grid-row: auto; flex-direction: row; justify-content: flex-end; }
    .social-layout { min-height: 0; }
    .conversation-panel { max-height: 250px; overflow-y: auto; }
    .direct-panel { height: max(380px, 65dvh); min-height: 0; }
    .dm-list { max-height: none; }
    .dm-composer { gap: 4px; margin: 8px; padding: 5px; }
    .dm-composer textarea { min-width: 0; width: 0; padding-inline: 6px; font-size: 16px; }
    .dm-composer > button { width: 44px; min-width: 44px; height: 44px; padding: 0; flex-shrink: 0; }
    .dm-emoji-panel { width: min(360px, calc(100vw - 48px)); max-height: min(420px, calc(100dvh - 170px)); overflow-y: auto; }
    .dm-bubble { max-width: 92%; min-width: 0; }
    .dm-bubble:has(.dm-media) { min-width: 0; width: min(360px, 92%); }
    .kabare-audio-player { min-width: 0; width: 100%; }
    .audio-timeline-row { grid-template-columns: 34px minmax(0,1fr) 34px; gap: 3px; }
    .dm-media-viewer { padding: 10px; }
    .report-card header, .report-card footer, .token-reveal { flex-wrap: wrap; }
}
@media (max-width: 600px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), textarea { font-size: 16px !important; }
    .field-grid, .media-pickers, .account-info, .settings-create, .two-fields { grid-template-columns: minmax(0,1fr); }
    .field-grid .wide { grid-column: auto; }
    .settings-card, .category-card, .nitro-admin-card { padding: 16px; }
    .settings-card label, .channel-setting label, .settings-card p, .settings-heading p { font-size: 14px; }
    .community-shell, .admin-main { width: calc(100% - 24px); padding-top: 20px; }
    .hero-strip h2, .community-hero h1 { font-size: clamp(24px,8vw,36px); }
    .hero-actions { flex-wrap: wrap; }
    .hero-actions > * { min-width: 120px; }
    .tool-row, .section-title, .admin-section-head { flex-wrap: wrap; gap: 12px; }
    .friend-list article { grid-template-columns: 44px minmax(0,1fr); }
    .friend-list article > div { grid-column: 2; }
    .person-card { grid-template-columns: 44px minmax(0,1fr); }
    .person-card > div, .person-card > form { grid-column: 2; }
    .room-image-editor, .server-image-field { gap: 10px; padding: 10px; align-items: flex-start; }
    .room-image-editor .server-avatar, .server-image-field > span { width: 56px; height: 56px; flex-basis: 56px; }
    .room-image-editor label, .room-image-editor button, .server-image-field button, .settings-upload-button, .media-pickers label, .media-pickers button { min-height: 44px; }
    .crop-controls { gap: 8px; }
    .crop-controls > label { width: 100%; }
    .crop-controls > input { width: 100%; flex-basis: 100%; }
    .crop-controls > div { width: 100%; justify-content: center; }
    .crop-card footer > button, .hub-dialog footer > button { flex: 1; }
    .admin-card-actions, .admin-card-actions form:first-child, .admin-form-grid { grid-template-columns: minmax(0,1fr); }
    .admin-user-main, .admin-room-title { flex-wrap: wrap; }
    .admin-meta { width: 100%; flex-wrap: wrap; }
    .admin-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-stats article { padding: 12px; gap: 8px; }
    .admin-stats article > i { width: 30px; height: 30px; flex-shrink: 0; }
    .admin-nav nav button { width: auto; min-width: 44px; font-size: 13px; padding: 0 10px; }
    .admin-system-grid, .developer-analytics { grid-template-columns: minmax(0,1fr); }
    .nitro-admin-card form, .nitro-admin-card label { flex-wrap: wrap; }
    .audit-item { grid-template-columns: 34px minmax(0,1fr); }
    .audit-item > time { grid-column: 2; }
    .permission-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .role-identity { grid-template-columns: minmax(0,1fr) 70px; }
    .role-identity > label:last-child { grid-column: 1 / -1; }
    .role-actions { flex-wrap: wrap; }
    .new-lfg { grid-template-columns: minmax(0,1fr); }
    .lfg-card { flex-wrap: wrap; }
    .global-profile-card { min-height: 0; }
    .global-profile-body, .member-profile-body { padding-inline: 18px; }
    .room-page .chat-header { padding-inline: 8px; gap: 6px; }
    .room-page .header-actions { gap: 4px; }
    .room-page .header-actions .icon-button { width: 36px; height: 44px; padding: 0; flex-shrink: 0; }
    .room-page .chat-room-avatar { width: 34px; height: 34px; flex-shrink: 0; }
    .room-page .chat-room-meta h1 { max-width: 28vw; }
    .room-page .owner-chip, .room-page .text-channel-chip { display: none; }
    .room-page .composer { gap: 3px; padding: 4px; }
    .room-page .composer textarea { min-width: 0; width: 0; }
    .room-page .composer > button, .room-page .chat-extras { flex-shrink: 0; }
    .room-page .chat-extras-panel { bottom: calc(200px + env(safe-area-inset-bottom)); max-height: max(160px, calc(100dvh - 280px)); }
    .room-page .video-stage.active { min-height: 100px; height: min(35dvh,320px); }
    .room-page .video-stage .stream-row { min-height: 0; }
}
@media (max-height: 500px) {
    .auth-layout { padding-block: 24px; min-height: 100dvh; }
    .room-page .video-stage.active { height: 110px; min-height: 80px; }
    .room-page .stage-head { display: none; }
    .room-page .chat-header { min-height: 48px; height: 48px; }
    .room-page .my-info { min-height: 32px; padding-bottom: 4px; }
    .room-page .control-panel { padding: 6px 10px; }
    .room-page .chat-extras-panel { max-height: calc(100dvh - 36px); bottom: 18px; z-index: 100; }
    .crop-viewport.avatar, .crop-viewport.room { width: min(100%, 180px); }
    .hub-utility-menu nav { max-height: calc(100dvh - 180px); overflow-y: auto; }
}
@media (pointer: coarse) {
    .icon-button, .icon-action, .person-card button, .friend-list button, .friend-list a, .member-more { min-width: 44px; min-height: 44px; }
    .identity-badge { width: 44px; height: 44px; }
}
@media (pointer: coarse) and (max-width: 380px) {
    .room-page .chat-room-avatar { display: none; }
    .room-page .chat-room-meta { gap: 4px; }
    .room-page .chat-room-meta h1 { max-width: 25vw; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; animation-iteration-count: 1 !important; }
}