/* Secondary pages use the same fixed shell and visual language as Home. */
body.secondary-view-active { font-family: "Segoe UI",Inter,ui-sans-serif,system-ui,sans-serif; }
body.secondary-view-active .main-panel.alt-view { height: 100%; min-height: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; }
.section-page, #havocAiView, #serverModal { --section-line: #23415a; --section-muted: #96afce; --section-surface: #0a1827; }
.section-page :is(h1,h2,h3,h4,strong,b), #havocAiView :is(h1,h2,h3,h4,strong,b), #serverModal :is(h1,h2,h3,strong,b) { font-family: "Segoe UI",Inter,ui-sans-serif,system-ui,sans-serif; }
.section-page :is(button,input,select,textarea), #havocAiView :is(button,input,select,textarea), #serverModal :is(button,input,select,textarea) { font: inherit; }
.section-page svg, #havocAiView svg, #serverModal svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.section-page :is(button,a,input,select,textarea):focus-visible, #havocAiView :is(button,a,input,select,textarea):focus-visible, #serverModal :is(button,input,select,textarea):focus-visible { outline: 2px solid #38d7ff; outline-offset: 3px; }
body .section-page { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; max-width: none; padding: 0 !important; gap: 14px; background: transparent !important; overflow: hidden; }
body .section-page > .hub-header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 24px; min-height: 92px; height: auto; padding: 13px 22px !important; margin: 0; border: 1px solid var(--section-line); border-radius: 12px; background: linear-gradient(115deg,#10233a,#0a1523 70%); }
body .section-page > .hub-header > div:first-child { min-width: 0; }
body .section-page > .hub-header span:first-child { color: #759dc9; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
body .section-page > .hub-header h1 { margin: 5px 0 0; font-size: 27px !important; line-height: 1.1; letter-spacing: -.025em; }
body .section-page > .hub-header p { margin: 7px 0 0; max-width: 620px; color: #a6bdd9; font-size: 12px; line-height: 1.5; }
.section-page .settings-input, .section-page .settings-select, .section-page .settings-textarea, #havocAiView .settings-input, #havocAiView .settings-select, #havocAiView .settings-textarea, #serverModal :is(.settings-input,.settings-select,.settings-textarea) { min-width: 0; min-height: 38px; height: 38px; padding: 8px 11px; border: 1px solid #2b4862; border-radius: 7px; color: #e4f0ff; background: #071320; font-size: 12px; line-height: 1.4; box-shadow: none; }
.section-page :is(.settings-input,.settings-textarea)::placeholder { color: #7590ae; }
.section-page .settings-textarea, #havocAiView .settings-textarea, #serverModal .settings-textarea { height: 88px; min-height: 88px; resize: vertical; }
.section-page .invite-button, #havocAiView .invite-button, #serverModal .invite-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 38px; padding: 8px 15px; border: 1px solid #7261f0; border-radius: 7px; background: linear-gradient(110deg,#a31de7,#364dff); color: #fff; font-size: 12px; font-weight: 650; text-decoration: none; line-height: 1.35; cursor: pointer; }
.section-page .small-action, #havocAiView .small-action, #serverModal .small-action { min-height: 33px; padding: 7px 12px; border: 1px solid #2b4a67; border-radius: 7px; background: #102338; color: #bed7f4; font-size: 11px; line-height: 1.4; text-decoration: none; cursor: pointer; }
.section-page :is(.invite-button,.small-action):hover, #havocAiView :is(.invite-button,.small-action):hover { filter: brightness(1.16); }
.section-page .hub-panel { min-width: 0; min-height: 0; padding: 0; border: 1px solid var(--section-line); border-radius: 12px; background: linear-gradient(140deg,#0b1b2c,#07131e); box-shadow: none; }
.section-page .hub-panel h2 { font-size: 15px; margin: 0; color: #eef5ff; }
.section-toolbar { display: flex; flex: none; align-items: center; justify-content: space-between; flex-wrap: wrap; min-width: 0; gap: 12px; padding: 12px 15px; border: 1px solid var(--section-line); border-radius: 10px; background: #0a1928; }
.section-tabs { display: flex; align-items: center; min-width: 0; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.section-tabs button { flex: none; min-height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #91abc9; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.section-tabs button:hover { background: #132b40; color: #f3f7ff; }
.section-tabs button.active { border-color: #3c527e; background: linear-gradient(105deg,#33264e,#15344b); color: #fff; }
.section-search { display: flex; align-items: center; gap: 9px; height: 36px; width: min(270px,100%); padding: 0 11px; border: 1px solid #29465f; border-radius: 7px; background: #071320; color: #83a2c7; }
.section-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #e1efff; font-size: 12px; }
.section-search:focus-within { border-color: #30c8f0; }
.section-count { flex: none; padding: 9px 13px; border: 1px solid #215448; border-radius: 8px; background: #0a2c2c; color: #52e2b3 !important; font-size: 11px !important; letter-spacing: 0 !important; }
.section-muted { color: var(--section-muted); font-size: 11px; }
.section-feature-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #3d416c; border-radius: 12px; background: linear-gradient(140deg,#302253,#10304b); color: #93a3ff; }
.section-feature-icon svg { width: 25px; height: 25px; }
.section-empty-state { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; padding: 32px 20px; gap: 12px; text-align: center; }
.section-empty-state > span { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid #233c58; border-radius: 18px; background: #102235; color: #7f98c4; }
.section-empty-state svg { width: 31px; height: 31px; }
.section-empty-state > strong { color: #dce9ff; font-size: 16px; font-weight: 600; }
.section-empty-state p { max-width: 350px; margin: 0; color: #8fa8c6; font-size: 12px; line-height: 1.65; }
.section-page :is(.friend-list,.activity-feed-list,.server-result-grid,.library-content,.hub-live-grid), #havocAiView :is(.ai-guide-panel,.ai-preview-panel), #serverModal .server-create-body { scrollbar-width: thin; scrollbar-color: #294761 transparent; overscroll-behavior: contain; }

/* Friends: the list scrolls; search and adding a friend stay in place. */
.friends-layout { display: grid; grid-template-columns: minmax(0,1fr) 290px; flex: 1; min-height: 0; gap: 14px; }
.friends-main-panel { display: flex; flex-direction: column; overflow: hidden; }
.friends-main-panel .section-toolbar { border-width: 0 0 1px; border-radius: 0; background: #0c1c2d; }
#friendsView .friend-list { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding: 12px; gap: 8px; }
#friendsView .friend-list > .section-empty-state { flex: 1; }
#friendsView .friend-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto 30px; align-items: center; gap: 13px; min-height: 78px; padding: 13px; border: 1px solid #233f57; border-radius: 9px; background: #0c1c2b; box-shadow: none; }
#friendsView .friend-row:hover { border-color: #44658d; background: #10243a; }
#friendsView .friend-row > div { min-width: 0; }
#friendsView .friend-row strong { font-size: 13px; font-weight: 650; }
#friendsView .friend-row .status-label { display: block; margin-top: 4px; font-size: 11px; }
#friendsView .friend-row .friend-game-status { display: block; margin-top: 5px; color: #8ca8c8; font-size: 10px; }
#friendsView .friend-row .avatar { width: 40px; height: 40px; }
#friendsView .friend-row .icon-button { width: 30px; height: 30px; min-width: 0; padding: 7px; border: 1px solid #294159; border-radius: 7px; background: #101e2c; color: #9caac4; }
#friendsView .friend-row .icon-button:hover { color: #ff7a9b; border-color: #71324b; }
#friendsView .friends-add-panel { display: flex; flex-direction: column; align-self: start; align-items: flex-start; gap: 15px; padding: 22px; }
.friends-add-panel h2 { font-size: 18px !important; line-height: 1.4; }
.friends-add-panel p { margin: 0; color: #a1b8d2; font-size: 12px; line-height: 1.7; }
#friendsView .friend-form { display: grid; grid-template-columns: 1fr; width: 100%; gap: 10px; margin: 0; }
.friends-add-panel small { padding-top: 12px; border-top: 1px solid #24394e; color: #7894b3; font-size: 11px; line-height: 1.6; }
#friendsView .pending-request-section { grid-column: 1/-1; width: 100%; border: 1px solid #564877; border-radius: 9px; background: #1a1c36; padding: 14px; }
#friendsView .pending-request-card { border-color: #374263; padding: 12px 0; background: transparent; font-size: 12px; }

/* Personal activity: no administrative information is exposed to normal users. */
#activityView > .hub-panel { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
#activityView .hub-panel > .section-tabs { flex: none; min-height: 59px; padding: 10px 15px; border-bottom: 1px solid #253e56; }
#activityView .activity-feed-list { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 18px; gap: 9px; }
#activityView .activity-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); flex: none; gap: 12px; margin: 0 0 9px; }
#activityView .activity-summary > div { display: flex; align-items: center; grid-column: auto; gap: 12px; padding: 15px; border: 1px solid #29425d; border-radius: 9px; background: linear-gradient(120deg,#142742,#0b1b2a); }
.activity-summary strong { font-size: 23px; color: #a091ff; }
.activity-summary span { color: #98b4d5; font-size: 12px; }
#activityView .activity-feed-item { grid-template-columns: 38px minmax(0,1fr) auto; gap: 14px; padding: 16px; border: 1px solid #203a52; border-radius: 9px; background: #0a1b2a; }
#activityView .activity-feed-item > span { display: grid; place-items: center; width: 38px; height: 38px; padding: 9px; border: 1px solid #34476b; border-radius: 9px; background: #19284a; color: #94a9ff; }
#activityView .activity-feed-item strong { font-size: 13px; }
#activityView .activity-feed-item p { margin: 5px 0 0; color: #91abc9; font-size: 12px; line-height: 1.5; }
#activityView .activity-feed-item em { color: #7791b0; font-size: 10px; white-space: nowrap; font-style: normal; }

/* Community discovery. */
#searchView > .hub-header > .invite-button { flex: 0 0 auto; width: auto; }
#searchView > .section-toolbar > input { width: min(380px,100%); }
#serverSearchResults { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); grid-auto-rows: max-content; align-content: start; flex: 1; min-height: 0; overflow-y: auto; padding: 0 2px 8px; gap: 14px; }
#serverSearchResults > article.server-result-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 1px solid #29445e; border-radius: 11px; background: #0a1928; overflow: hidden; }
.server-result-cover { position: relative; display: flex; align-items: center; min-height: 108px; padding: 19px; background: radial-gradient(ellipse at 95% 0,#35306b,transparent 70%),linear-gradient(120deg,#0b3851,#162243); border-bottom: 1px solid #2b4260; }
.server-result-cover .server-emblem { width: 55px; height: 55px; border-radius: 13px; font-size: 24px; }
.server-result-cover > span { align-self: end; margin-left: auto; padding: 4px 8px; border: 1px solid #678bb44a; border-radius: 5px; background: #081a2f90; color: #c2daf4; font-size: 9px; }
#serverSearchResults > article.server-result-card > div:not(.server-result-cover) { padding: 16px 17px 12px; }
#serverSearchResults > article.server-result-card strong { font-size: 16px; font-weight: 650; color: #edf4ff; }
#serverSearchResults > article.server-result-card p { min-height: 35px; margin: 8px 0; color: #9bb2cd; font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#serverSearchResults > article.server-result-card > div > span { font-size: 10px; color: #7ba9cf; }
#serverSearchResults > article.server-result-card > .small-action { margin: auto 17px 15px; background: #15304a; border-color: #36567c; }
#serverSearchResults .server-result-favorite { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; padding: 6px; border: 1px solid #6e7dba70; border-radius: 7px; background: #0a1428c0; color: #c5daf7; }
#serverSearchResults .server-result-favorite.active { color: #ffc75a; }
#serverSearchResults .server-result-favorite.active svg { fill: #ffc75a20; }
#serverSearchResults .global-search-group { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 15px; border: 1px solid #203c55; border-radius: 10px; background: #0a1928; }
#serverSearchResults .global-search-group h2 { grid-column: 1/-1; font-size: 14px; }
#serverSearchResults .global-search-group .server-result-card { min-width: 0; padding: 12px; border-radius: 7px; text-align: left; background: #102337; color: #d8e8ff; }

/* Live center: the stage is compact and the discovery panel owns its scroll. */
#hubView { gap: 14px; }
#hubView .streaming-status-pill { min-height: 34px; padding: 8px 13px; font-size: 11px; background: #36162b; border: 1px solid #64334b; }
#hubView .streaming-stage { display: grid !important; grid-template-columns: minmax(0,1fr) 285px; flex: 0 0 clamp(225px,30dvh,310px); min-height: 0 !important; border-radius: 12px !important; border: 1px solid #29445f; overflow: hidden; }
#hubView .streaming-featured, #hubView .streaming-featured-card, #hubView .streaming-featured-empty { height: 100%; min-height: 0 !important; }
#hubView .streaming-featured-card { display: flex; align-items: center; padding: 26px !important; background-size: cover; background-position: center; cursor: pointer; }
#hubView .streaming-featured-copy { width: min(620px,75%); }
#hubView .streaming-featured-copy h2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 600px; font-size: clamp(22px,2vw,32px) !important; line-height: 1.15 !important; letter-spacing: -.025em; margin: 13px 0; }
#hubView .streaming-featured-live { font-size: 9px; letter-spacing: .06em; }
#hubView .streaming-featured-creator strong { font-size: 12px; }
#hubView .streaming-featured-copy p { margin: 7px 0 12px; font-size: 11px; color: #adc6e5; }
#hubView .streaming-watch-button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 13px; border: 1px solid #b9caff; border-radius: 7px; background: #eff4ff; color: #102040; font-size: 12px; font-weight: 650; }
#hubView .streaming-featured-empty { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 24px !important; background: radial-gradient(ellipse at 100% 0,#25235b,transparent 70%),#0c1b30; }
#hubView .streaming-featured-empty > span { color: #869aff; }
#hubView .streaming-featured-empty h2 { margin: 0; font-size: 25px !important; }
#hubView .streaming-featured-empty p { margin: 0; font-size: 12px; color: #9eb7d8; }
#hubView .streaming-featured-empty > div { display: flex; gap: 9px; }
#hubView .streaming-rail { min-width: 0; padding: 17px !important; background: #0b1a2b; border-left: 1px solid #29425c; overflow: hidden; }
#hubView .streaming-rail > header { margin-bottom: 12px; }
#hubView .streaming-rail h2 { font-size: 14px; }
#hubView .streaming-rail header span { font-size: 8px; color: #3ddaff; }
#hubView .streaming-rail-more { color: #749fff; font-size: 10px; }
#hubView .streaming-rail-list { display: flex; flex-direction: column; height: calc(100% - 39px); gap: 10px; overflow-y: auto; scrollbar-width: thin; }
#hubView .streaming-rail-item { display: grid; grid-template-columns: 62px minmax(0,1fr) 24px; gap: 9px; align-items: center; min-height: 46px; cursor: pointer; }
#hubView .streaming-rail-thumb { width: 62px; height: 38px; border-radius: 6px; background-size: cover; background-position: center; }
#hubView .streaming-rail-item strong { font-size: 12px; }
#hubView .streaming-rail-item :is(span,small) { font-size: 10px; }
#hubView .streaming-browser { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 15px !important; margin: 0 !important; border-radius: 12px !important; border: 1px solid #29425c; background: #0a1928; overflow: hidden; }
#hubView .streaming-browser-head { display: flex; flex: none; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 11px; }
#hubView .streaming-browser-head > div > span { display: none; }
#hubView .streaming-browser-head h2 { font-size: 16px; margin: 0; }
#hubView .streaming-browser-head p { margin: 5px 0 0; font-size: 10px; color: #91accb; }
#hubView .hub-tabs { display: flex; gap: 4px; margin: 0; }
#hubView .hub-tab, #hubView .hub-platform { min-height: 32px; padding: 0 11px; border: 1px solid #2d4664; border-radius: 6px; background: #0c1c2e; color: #a8bfdc; font-size: 11px; }
#hubView .hub-tab.active, #hubView .hub-platform.active { border-color: #796bc0; background: #30264b; color: #f5efff; box-shadow: none; }
#hubView .hub-tab::after { display: none; }
#hubView .hub-live-toolbar { display: block; flex: none; margin-bottom: 12px; }
#hubView .hub-live-tools { display: grid; grid-template-columns: 1fr 1fr auto; gap: 9px; width: 100%; align-items: center; }
#hubView .hub-streamer-search { width: 100%; min-width: 0; height: 35px; border: 1px solid #29465f; border-radius: 7px; padding: 0 8px; background: #071320; }
#hubView .hub-streamer-search input { min-width: 0; flex: 1; width: 100%; font-size: 11px; }
#hubView .hub-streamer-search button { min-height: 26px; padding: 4px 8px; border: 1px solid #315471; border-radius: 5px; background: #19354a; color: #d1e9ff; font-size: 10px; }
#hubView .hub-platform-filters { display: flex; gap: 4px; }
#hubView .hub-category-filters { grid-column: 1/-1; }
#hubView .hub-live-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: max-content; align-content: start; gap: 12px !important; padding: 2px; overflow-y: auto; }
#hubView .hub-live-card { min-width: 0; padding: 0; border: 1px solid #28445f; border-radius: 9px; background: #071320; overflow: hidden; box-shadow: none; }
#hubView .hub-live-thumb { min-height: 0; height: auto; aspect-ratio: 16/9; background-position: center; background-size: cover; }
#hubView .live-badge { top: 8px; left: 8px; min-height: 18px; font-size: 9px; padding: 3px 6px; line-height: 1.2; background: #f73275; }
#hubView .live-viewers { display: flex; align-items: center; top: 8px; right: 8px; bottom: auto; left: auto; gap: 4px; font-size: 9px; background: #030a16d9; padding: 3px 6px; border-radius: 14px; }
#hubView .live-viewers svg { width: 12px; height: 12px; }
#hubView .hub-live-body { padding: 11px; }
#hubView .hub-live-creator strong { font-size: 12px; }
#hubView .hub-live-body p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 7px 0; color: #cfddf0; font-size: 11px; line-height: 1.4; }
#hubView .hub-live-body small { padding: 0; border: 0; background: transparent; color: #85a5c8; font-size: 10px; }
#hubView .hub-live-category-group { grid-column: 1/-1; }
#hubView .hub-live-category-group .hub-live-grid { overflow: visible; }

/* Library: persistent categories, a compact featured shelf, one catalog scroller. */
#pluginsView .plugin-header-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
#pluginsView .plugin-header-actions .search-input { width: 260px; }
#pluginsView .library-shell { display: grid; grid-template-columns: 180px minmax(0,1fr); grid-template-rows: minmax(0,1fr); align-items: stretch; flex: 1; min-height: 0; gap: 14px; margin: 0; overflow: hidden; }
#pluginsView .library-sidebar { min-height: 0; padding: 16px !important; border: 1px solid #29435b; border-radius: 12px !important; background: #0b1a2a; overflow-y: auto; }
#pluginsView .library-sidebar-label { color: #729cbe; font-size: 9px; letter-spacing: .13em; }
#pluginsView .library-categories { display: flex; flex-direction: column; gap: 5px; margin: 12px 0 24px; }
#pluginsView .library-categories button { display: grid; grid-template-columns: 19px 1fr 23px; gap: 9px; align-items: center; min-height: 39px; padding: 7px 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #93accb; text-align: left; }
#pluginsView .library-categories button b { font-size: 12px; font-weight: 600; }
#pluginsView .library-categories button small { font-size: 10px; background: #23314b; border-radius: 6px; padding: 3px; text-align: center; }
#pluginsView .library-categories button.active { color: #f3f5ff; background: linear-gradient(105deg,#32234f,#152d42); border-color: #6653ad; box-shadow: inset 2px 0 #32d4fb; }
#pluginsView .library-sidebar-card { padding: 13px; border: 1px solid #29405a; border-radius: 8px; background: #11253a; }
#pluginsView .library-sidebar-card > span { color: #8697ff; background: #253157; border-radius: 8px; padding: 7px; }
#pluginsView .library-sidebar-card strong { display: block; margin: 13px 0 7px; font-size: 12px; }
#pluginsView .library-sidebar-card p { font-size: 10px; color: #93b0d0; line-height: 1.6; }
#pluginsView .library-content { display: grid; grid-template-columns: 1fr; grid-auto-rows: max-content; align-content: start; min-height: 0; height: 100%; max-height: 100%; gap: 14px; overflow-y: auto; padding-right: 3px; }
#pluginsView :is(.library-featured-section,.library-catalog-section) { min-height: 0; padding: 16px !important; margin: 0; border: 1px solid #28425c; border-radius: 12px !important; background: #0a1827 !important; }
#pluginsView .library-section-title { align-items: center; gap: 10px; margin-bottom: 14px !important; }
#pluginsView .library-section-title h2 { margin: 4px 0 0; font-size: 16px; }
#pluginsView .library-section-title :is(span,p) { font-size: 10px; color: #88a4c6; }
#pluginsView .plugin-featured-list { display: grid; grid-template-columns: 1fr 1fr !important; gap: 12px; }
#pluginsView .plugin-result-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 12px; }
#pluginsView .plugin-market-card { position: relative; display: grid; grid-template-columns: 45px minmax(0,1fr); align-items: start; gap: 12px; min-height: 0 !important; padding: 15px; border: 1px solid #2a4560; border-radius: 10px; background: linear-gradient(145deg,#102034,#091522); box-shadow: none; overflow: hidden; }
#pluginsView .plugin-market-card.is-featured { grid-template-columns: 63px minmax(0,1fr); padding: 18px; background: radial-gradient(ellipse at 100% 0,#392863aa,transparent 80%),#111e32; }
#pluginsView .plugin-market-card.is-featured:nth-child(2) { background: radial-gradient(ellipse at 100% 0,#15556b99,transparent 80%),#102134; }
#pluginsView .plugin-card-glow { display: none; }
#pluginsView .plugin-market-icon { width: 45px; height: 45px; padding: 4px; border-radius: 11px; border: 1px solid #3e597e; background: #122942; }
#pluginsView .is-featured .plugin-market-icon { width: 63px; height: 63px; }
#pluginsView .plugin-market-icon img { width: 100%; height: 100%; object-fit: contain; }
#pluginsView .plugin-market-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 7px; }
#pluginsView .plugin-market-meta :is(span,em) { font-size: 8px; line-height: 1.4; }
#pluginsView .plugin-coming-soon-badge { padding: 3px 5px; color: #7bdcdb; border: 1px solid #2b6a6a; background: #0c3339; border-radius: 5px; }
#pluginsView .plugin-market-copy h2, #pluginsView .plugin-market-card.is-featured .plugin-market-copy h2 { font-size: 15px; line-height: 1.25; margin: 0 0 7px; }
#pluginsView .plugin-market-card.is-featured .plugin-market-copy h2 { font-size: 19px; }
#pluginsView .plugin-market-copy p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 35px; margin: 0; color: #9bb2cd; font-size: 11px; line-height: 1.6; }
#pluginsView .plugin-market-copy > small { display: block; margin-top: 8px; color: #93b9e4; font-size: 9px; }
#pluginsView .plugin-market-card > .invite-button { grid-column: 1/-1; width: 100%; min-height: 32px; font-size: 10px; background: #1b304b; border-color: #35557a; }
#pluginsView .plugin-market-card.is-featured > .invite-button { background: linear-gradient(105deg,#7833cd,#3651da); border-color: #8368e7; }
#pluginsView .library-shell.plugin-detail-mode { grid-template-columns: 1fr; }
#pluginsView .plugin-detail-mode .library-sidebar, #pluginsView .plugin-detail-mode .library-catalog-section > .library-section-title { display: none; }
#pluginsView .plugin-detail-mode .plugin-result-list { display: block; }
#pluginsView .plugin-detail-mode .library-content { display: block; padding: 0 3px 0 0; }
#pluginsView .plugin-detail-mode .library-catalog-section { min-height: 100%; }

/* Events retain their real enrollment and check-in controls. */
.events-overview { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; border: 1px solid #3f446b; border-radius: 11px; background: radial-gradient(ellipse at 100% 0,#37276488,transparent 70%),linear-gradient(110deg,#12213a,#0b2435); }
.events-overview > div:first-child { min-width: 0; }
.events-overview h2 { font-size: 23px; margin: 15px 0 8px; }
.events-overview p { margin: 0; color: #a4b9d4; font-size: 12px; }
.events-overview-actions { display: flex; flex-direction: column; flex: none; gap: 9px; }
#pluginsView .event-plugin-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
#pluginsView .event-plugin-summary > div { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; padding: 15px; border: 1px solid #2b4260; border-radius: 9px; background: #102238; }
#pluginsView .event-plugin-summary strong { font-size: 24px; color: #aa99ff; }
#pluginsView .event-plugin-summary span { font-size: 11px; color: #9eb5d4; }
#pluginsView .lfg-event-list { display: grid; gap: 12px; margin-top: 14px; }
#pluginsView .lfg-event-card { display: grid; grid-template-columns: 60px minmax(0,1fr) auto; gap: 16px; padding: 17px; border: 1px solid #2c4763; border-radius: 10px; background: #0d2033; }
#pluginsView .lfg-event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; min-height: 67px; border: 1px solid #634d74; border-radius: 9px; background: #302141; }
#pluginsView .lfg-event-date strong { font-size: 25px; }
#pluginsView .lfg-event-date span { color: #b8a9ce; font-size: 10px; }
#pluginsView .lfg-event-copy h3 { font-size: 18px; margin: 5px 0; }
#pluginsView .lfg-event-copy :is(span,small) { color: #8dabca; font-size: 11px; }
#pluginsView .lfg-event-actions, #pluginsView .lfg-post-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
#pluginsView .lfg-composer { display: flex; flex-direction: column; gap: 18px; padding: 20px; margin: 16px 0; border: 1px solid #564786; border-radius: 10px; background: #111e32; text-align: left; }
#pluginsView .lfg-composer h2 { font-size: 19px; }
#pluginsView .lfg-composer-heading { width: 100%; }
#pluginsView .lfg-composer-heading span { color: #829dd4; font-size: 9px; }
#pluginsView .lfg-composer-actions { justify-content: flex-start; }
#pluginsView .lfg-form-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
#pluginsView .lfg-field { min-width: 0; }
#pluginsView .lfg-field-wide { grid-column: 1/-1; }
#pluginsView .lfg-field > span { font-size: 11px; color: #afc4de; }

/* Server creation: no blurred wizard behind the free/AI choice. */
#havocAiView { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 14px; height: 100%; min-height: 0; padding: 0; overflow: hidden; background: transparent; }
#havocAiView .ai-main-card { display: grid; grid-template-rows: auto auto auto minmax(0,1fr) auto; gap: 15px; min-height: 0; padding: 20px; border: 1px solid #29435d; border-radius: 12px; background: #0a1929; box-shadow: none; }
#havocAiView :is(.ai-builder-header,.ai-config-head,.ai-builder-actions) { display: flex; flex-direction: row; align-items: center; gap: 14px; }
#havocAiView .ai-builder-header h1 { font-size: 24px; }
#havocAiView .ai-builder-header > div { flex: 1; min-width: 0; text-align: left; }
#havocAiView .ai-builder-header p { font-size: 11px; color: #90accd; }
#havocAiView .ai-builder-header #aiBackButton { width: 30px; height: 32px; flex: none; border: 1px solid #324b66; border-radius: 7px; background: #142b40; color: #c2d8f2; }
#havocAiView .ai-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
#havocAiView .ai-steps button { min-height: 49px; grid-template-columns: 27px minmax(0,1fr); padding: 7px; border: 1px solid #2a405b; border-radius: 7px; background: #102034; box-shadow: none; }
#havocAiView .ai-steps button b { width: 27px; height: 27px; font-size: 12px; }
#havocAiView .ai-steps button small { font-size: 10px; }
#havocAiView .ai-steps button.active { border-color: #7b65bf; background: #292446; }
#havocAiView .ai-hero { display: none; }
#havocAiView .ai-config-head h3 { font-size: 16px; }
#havocAiView .ai-config-head p { font-size: 11px; color: #93afd0; }
#havocAiView .ai-guide-panel.active { min-height: 0; align-content: start; overflow-y: auto; padding: 1px 5px 5px 0; }
#havocAiView .ai-field { gap: 7px; }
#havocAiView .ai-field > span { font-size: 12px; color: #bed0e7; }
#havocAiView .ai-field small { font-size: 10px; color: #8ca6c5; }
#havocAiView .ai-template-grid { margin: 15px 0; gap: 8px; }
#havocAiView .ai-template-grid button { min-height: 36px; padding: 9px 10px; border: 1px solid #2d4969; border-radius: 7px; background: #11273a; color: #acc6e6; font-size: 11px; }
#havocAiView .ai-template-grid button.active { border-color: #7965ba; background: #30264a; color: #fff; }
#havocAiView .ai-privacy-grid { gap: 10px; }
#havocAiView .ai-privacy-grid button { padding: 14px; border-radius: 9px; background: #11283c; border-color: #31506e; box-shadow: none; }
#havocAiView .ai-privacy-grid button.active { border-color: #4ab8de; background: #153748; }
#havocAiView :is(.ai-option-grid,.ai-feature-grid) { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
#havocAiView :is(.ai-option-grid,.ai-feature-grid) > button { display: grid; grid-template-columns: 26px minmax(0,1fr); grid-template-rows: auto auto auto; align-items: start; align-content: start; min-width: 0; min-height: 130px; gap: 10px; padding: 15px; border: 1px solid #354d6c; border-radius: 9px; background: #13283b; text-align: left; }
#havocAiView :is(.ai-option-grid,.ai-feature-grid) > button.active { border-color: #7a61bc; background: #292347; }
#havocAiView :is(.ai-option-grid,.ai-feature-grid) > button > span { grid-row: 1; grid-column: 1; width: 24px; height: 24px; color: #ac90ff; }
#havocAiView :is(.ai-option-grid,.ai-feature-grid) > button > strong { grid-row: 1; grid-column: 2; align-self: center; font-size: 13px; line-height: 1.4; }
#havocAiView :is(.ai-option-grid,.ai-feature-grid) > button > small { grid-row: 2; grid-column: 1/-1; color: #a5bbd8; font-size: 11px; line-height: 1.6; }
#havocAiView .ai-option-grid > button > em { grid-row: 3; grid-column: 1/-1; justify-self: start; max-width: 100%; font-size: 9px; }
#havocAiView .ai-builder-actions { padding-top: 13px; border-top: 1px solid #29425c; }
#havocAiView .ai-preview-panel { display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow-y: auto; padding: 19px; border: 1px solid #29435d; border-radius: 12px; background: #0a1928; box-shadow: none; }
#havocAiView .ai-preview-panel h2 { font-size: 15px; }
#havocAiView .ai-preview-panel h3 { font-size: 13px; }
#havocAiView .ai-preview-card { padding: 15px; border-color: #35446c; border-radius: 9px; background: #14213b; }
#havocAiView .ai-preview-channel-list p { font-size: 11px; }
#havocAiView #aiConfigSummary li { padding: 7px 0; color: #9eb5d1; font-size: 11px; }
#havocAiView #aiConfigSummary b { color: #c6b9ff; }
#havocAiView .ai-help-box { display: none; }
#havocAiView.locked { display: block; overflow-y: auto; }
#havocAiView.locked > :is(.ai-main-card,.ai-preview-panel) { display: none; }
#havocAiView .ai-lock-overlay { position: static; display: block; width: 100%; min-height: 100%; padding: 30px; background: radial-gradient(ellipse at 90% 10%,#29245155,transparent 60%),#071320; border: 1px solid #29435d; border-radius: 12px; backdrop-filter: none; }
.create-choice-heading { max-width: 960px; margin: 0 auto 26px; }
.create-choice-heading > span { color: #769dc7; font-size: 9px; letter-spacing: .18em; }
.create-choice-heading h1 { font-size: 30px; margin: 12px 0; letter-spacing: -.025em; }
.create-choice-heading p { margin: 0; color: #96afcf; font-size: 13px; line-height: 1.6; }
#havocAiView .ai-create-choice-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 960px; margin: 0 auto; }
#havocAiView .ai-create-choice-card { display: flex; flex-direction: column; align-items: flex-start; gap: 19px; padding: 27px; border: 1px solid #3a5070; border-radius: 13px; background: linear-gradient(140deg,#132940,#0d1a2b); box-shadow: none; }
#havocAiView .ai-create-choice-card.locked { border-color: #6b4d8f; background: radial-gradient(ellipse at 100% 0,#40295d88,transparent 70%),#172139; opacity: 1; filter: none; }
#havocAiView .ai-create-choice-card > span { display: grid; place-items: center; width: 58px; height: 58px; padding: 14px; border: 1px solid #466292; border-radius: 14px; background: #213454; color: #8ebaff; }
#havocAiView .ai-create-choice-card > span svg { width: 29px; height: 29px; }
#havocAiView .ai-create-choice-card strong { font-size: 21px; }
#havocAiView .ai-create-choice-card p { margin: 11px 0; color: #9fb7d5; font-size: 12px; line-height: 1.8; }
#havocAiView .ai-create-choice-card ul { display: grid; gap: 11px; padding-left: 17px; margin: 20px 0 5px; color: #bad0eb; font-size: 12px; }
#havocAiView .ai-create-choice-card > button { margin-top: auto; width: 100%; }
#serverModal { z-index: 1300; padding: 20px; background: #030914c9; backdrop-filter: blur(9px); font-family: "Segoe UI",Inter,system-ui,sans-serif; }
#serverCreateForm { display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 0; width: min(700px,100%); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #35516d; border-radius: 14px; background: #0a1929; overflow: hidden; }
#serverCreateForm > header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 19px 23px; margin: 0; border-bottom: 1px solid #2a435c; background: #0e2035; }
#serverCreateForm > header span { color: #80a5cc; font-size: 9px; letter-spacing: .16em; }
#serverCreateForm h2 { margin: 6px 0 0; font-size: 22px; }
#serverCreateForm .settings-close { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 7px; }
.server-create-body { min-height: 0; overflow-y: auto; padding: 21px 23px; }
#serverCreateForm .server-create-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#serverCreateForm .server-create-mode-card { display: grid; grid-template-columns: 25px 1fr; align-content: start; min-height: 95px; gap: 8px; padding: 13px; border: 1px solid #2d4866; border-radius: 9px; background: #10263b; color: #c2d9f2; box-shadow: none; }
#serverCreateForm .server-create-mode-card > span { grid-row: 1/3; width: 23px; height: 23px; color: #8d9eff; }
#serverCreateForm .server-create-mode-card strong { font-size: 13px; }
#serverCreateForm .server-create-mode-card small { font-size: 10px; line-height: 1.55; color: #8faacb; }
#serverCreateForm .server-create-mode-card.active { border-color: #7965bc; background: #292345; }
#serverCreateForm .server-create-paid-note { padding: 12px; margin: 12px 0 18px; border: 1px solid #4a4265; border-radius: 8px; background: #231e35; }
#serverCreateForm .server-create-paid-note strong { font-size: 11px; }
#serverCreateForm .server-create-paid-note p { margin: 6px 0 0; color: #a59dbb; font-size: 10px; line-height: 1.6; }
.server-create-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.section-field { display: grid; gap: 7px; min-width: 0; }
.section-field > span { color: #b3cae5; font-size: 11px; }
.section-field-wide { grid-column: 1/-1; }
#serverCreateForm .file-input { padding: 7px; height: 41px; }
.server-create-footer { display: flex; justify-content: flex-end; padding: 14px 23px; border-top: 1px solid #2e4563; background: #102035; }

@media(max-width:1279px) and (min-width:768px) {
  .friends-layout { grid-template-columns: minmax(0,1fr) 250px; }
  #friendsView .friends-main-panel .section-toolbar { flex-direction: column; align-items: stretch; }
  #friendsView .section-search { width: 100%; }
  #friendsView .friend-row { gap: 9px; padding: 11px; }
  #pluginsView .plugin-featured-list { grid-template-columns: 1fr !important; }
  #pluginsView .library-shell { grid-template-columns: 155px minmax(0,1fr); }
  #pluginsView .library-sidebar { padding: 12px !important; }
  #pluginsView .library-categories button { grid-template-columns: 17px 1fr 20px; gap: 5px; padding: 7px; }
  #hubView .streaming-stage { grid-template-columns: minmax(0,1fr) 240px; }
  #hubView .streaming-rail { padding: 12px !important; }
  #hubView .hub-live-tools { grid-template-columns: 1fr 1fr; }
  #hubView .hub-platform-filters { grid-column: 1/-1; }
  #hubView .hub-live-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #havocAiView { grid-template-columns: minmax(0,1fr) 240px; }
  #havocAiView .ai-main-card { padding: 15px; gap: 12px; }
  #havocAiView .ai-preview-panel { padding: 15px; }
  #havocAiView :is(.ai-option-grid,.ai-feature-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:1000px) and (min-width:768px) {
  .friends-layout { grid-template-columns: 1fr; overflow-y: auto; }
  #friendsView .friends-add-panel { grid-row: 1; display: grid; grid-template-columns: 42px 1fr; padding: 16px; gap: 10px; }
  #friendsView .friends-add-panel h2 { font-size: 15px !important; }
  .friends-add-panel > :is(p,small) { display: none; }
  #friendsView .friend-form { grid-column: 1/-1; grid-template-columns: 1fr auto; }
  .friends-main-panel { min-height: 320px !important; }
  #hubView .streaming-stage { grid-template-columns: 1fr; flex-basis: 230px; }
  #hubView .streaming-rail { display: none; }
}
@media(max-width:767px) {
  body .section-page { gap: 10px; height: 100%; padding: 10px 12px 12px !important; overflow: hidden !important; }
  body .section-page > .hub-header { align-items: flex-start; min-height: 85px; padding: 14px !important; gap: 12px; }
  body .section-page > .hub-header h1 { font-size: 24px !important; }
  body .section-page > .hub-header p { font-size: 11px; line-height: 1.5; }
  body .section-page > .hub-header > .invite-button { min-height: 32px; padding: 7px 9px; font-size: 10px; }
  .section-toolbar { padding: 9px; gap: 9px; }
  .section-tabs button { min-height: 32px; padding: 0 10px; font-size: 11px; }
  .section-count { padding: 7px 8px; font-size: 9px !important; white-space: nowrap; }
  .friends-layout { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
  #friendsView .friends-add-panel { order: -1; display: grid; grid-template-columns: 35px 1fr; gap: 8px 10px; width: 100%; padding: 13px; }
  #friendsView .friends-add-panel .section-feature-icon { width: 35px; height: 35px; padding: 7px; border-radius: 8px; }
  #friendsView .friends-add-panel h2 { align-self: center; font-size: 14px !important; }
  #friendsView .friends-add-panel > :is(p,small) { display: none; }
  #friendsView .friend-form { grid-column: 1/-1; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  #friendsView .friend-form .invite-button { padding-inline: 10px; font-size: 11px; }
  #friendsView .friends-main-panel { flex: 1 0 auto; min-height: 350px; }
  #friendsView .friends-main-panel .section-toolbar { flex-direction: column; align-items: stretch; }
  #friendsView .section-search { width: 100%; }
  #friendsView .friend-list { padding: 9px; overflow-y: visible; }
  #friendsView .friend-row { grid-template-columns: 34px minmax(0,1fr) auto 25px; gap: 8px; padding: 9px; min-height: 72px; }
  #friendsView .friend-row .avatar { width: 34px; height: 34px; }
  #friendsView .friend-row .small-action { padding: 6px 7px; font-size: 10px; }
  #friendsView .friend-row .icon-button { width: 25px; height: 28px; padding: 5px; }
  #friendsView .friend-row .friend-game-status { display: none; }
  #friendsView .pending-request-card { flex-wrap: wrap; }
  .section-empty-state { min-height: 220px; padding: 22px 14px; }
  .section-empty-state > strong { font-size: 14px; }
  .section-empty-state p { font-size: 11px; }
  #activityView .activity-feed-list { padding: 10px; }
  #activityView .activity-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  #activityView .activity-summary > div { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; }
  .activity-summary strong { font-size: 20px; }
  .activity-summary span { font-size: 10px; }
  #activityView .activity-feed-item { grid-template-columns: 31px minmax(0,1fr); gap: 10px; padding: 12px; }
  #activityView .activity-feed-item > span { width: 31px; height: 31px; padding: 7px; }
  #activityView .activity-feed-item em { grid-column: 2; }
  #serverSearchResults { grid-template-columns: 1fr; }
  #searchView > .section-toolbar > input { width: 100%; }
  #serverSearchResults .global-search-group { grid-template-columns: 1fr; }
  #pluginsView .plugin-header-actions { flex-direction: column; align-items: flex-end; margin: 0; gap: 7px; }
  #pluginsView .plugin-header-actions .search-input { width: 130px; min-width: 0; }
  #pluginsView .library-shell { display: flex !important; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
  #pluginsView .library-sidebar { flex: none; width: 100%; padding: 9px !important; overflow: hidden; border-radius: 9px !important; }
  #pluginsView .library-sidebar-label, #pluginsView .library-sidebar-card { display: none; }
  #pluginsView .library-categories { display: flex !important; flex-direction: row; gap: 5px; overflow-x: auto !important; padding: 0; margin: 0; }
  #pluginsView .library-categories button { display: flex; width: auto; flex: none !important; gap: 6px; min-height: 34px; padding: 7px 9px; }
  #pluginsView .library-categories button b { font-size: 11px; }
  #pluginsView .library-categories button small { font-size: 9px; padding: 2px 5px; }
  #pluginsView .library-content { display: grid; flex: 1; min-height: 0; overflow-y: auto; gap: 10px; padding: 0; }
  #pluginsView .plugin-featured-list { grid-template-columns: 1fr !important; gap: 10px; }
  #pluginsView .plugin-result-list { grid-template-columns: 1fr !important; gap: 10px; }
  #pluginsView :is(.library-featured-section,.library-catalog-section) { padding: 12px !important; }
  #pluginsView .library-section-title p { display: none; }
  #pluginsView .plugin-market-card, #pluginsView .plugin-market-card.is-featured { grid-template-columns: 48px minmax(0,1fr) !important; padding: 13px !important; gap: 10px; }
  #pluginsView .plugin-market-icon, #pluginsView .is-featured .plugin-market-icon { width: 48px; height: 48px; }
  #pluginsView .plugin-market-card.is-featured .plugin-market-copy h2 { font-size: 17px; }
  #pluginsView .library-shell.plugin-detail-mode .library-content { display: block; }
  #pluginsView .library-shell.plugin-detail-mode .library-sidebar { display: none; }
  #pluginsView .plugin-detail-mode .plugin-result-list { display: block !important; }
  .events-overview { flex-direction: column; align-items: stretch; gap: 16px; padding: 17px; }
  .events-overview h2 { font-size: 21px; }
  .events-overview p { font-size: 11px; line-height: 1.6; }
  .events-overview-actions { flex-direction: row; flex-wrap: wrap; }
  #pluginsView .event-plugin-summary { gap: 7px; }
  #pluginsView .event-plugin-summary > div { display: block; padding: 10px; }
  #pluginsView .event-plugin-summary strong { display: block; font-size: 21px; margin-bottom: 5px; }
  #pluginsView .event-plugin-summary span { font-size: 9px; }
  #pluginsView .lfg-event-card { grid-template-columns: 48px minmax(0,1fr); gap: 11px; padding: 12px; }
  #pluginsView .lfg-event-date { width: 48px; min-height: 58px; }
  #pluginsView .lfg-event-actions, #pluginsView .lfg-post-actions { grid-column: 1/-1; justify-content: flex-start; }
  #pluginsView .lfg-event-copy h3 { font-size: 16px; }
  #pluginsView .lfg-event-copy :is(small,span) { font-size: 10px; }
  #pluginsView .lfg-form-grid { grid-template-columns: 1fr; }
  #pluginsView .lfg-composer { padding: 14px; }
  #pluginsView .lfg-composer-actions { flex-wrap: wrap; gap: 8px; }
  #hubView { overflow-y: auto !important; }
  #hubView .streaming-stage { display: block !important; flex: none; height: 260px; min-height: 260px !important; }
  #hubView .streaming-featured-card { padding: 19px !important; }
  #hubView .streaming-featured-copy { width: 90%; }
  #hubView .streaming-featured-copy h2 { font-size: 23px !important; }
  #hubView .streaming-rail { display: none; }
  #hubView .streaming-browser { flex: none; overflow: visible; padding: 12px !important; }
  #hubView .streaming-browser-head { flex-direction: column; align-items: stretch; gap: 12px; }
  #hubView .streaming-browser-head h2 { font-size: 15px; }
  #hubView .hub-tabs { display: flex; }
  #hubView .hub-live-tools { display: grid !important; grid-template-columns: 1fr !important; gap: 8px; }
  #hubView .hub-platform-filters { display: flex !important; }
  #hubView .hub-live-grid { grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; gap: 8px !important; }
  #hubView .hub-live-body { padding: 8px; }
  #hubView .hub-live-body p { font-size: 10px; }
  #hubView .hub-live-creator strong { font-size: 11px; }
  #havocAiView { grid-template-columns: 1fr; padding: 10px 12px 12px; gap: 10px; }
  #havocAiView .ai-preview-panel { display: none; }
  #havocAiView .ai-main-card { min-height: 0; padding: 13px; gap: 12px; }
  #havocAiView .ai-builder-header { flex-wrap: wrap; gap: 9px; }
  #havocAiView .ai-builder-header h1 { font-size: 21px; }
  #havocAiView .ai-builder-header > div { flex: 1; min-width: 0; }
  #havocAiView .ai-builder-header > .small-action { margin-left: 37px; }
  #havocAiView .ai-steps { gap: 5px; }
  #havocAiView .ai-steps button { grid-template-columns: 1fr; justify-items: center; gap: 5px; padding: 7px 3px; min-height: 64px; }
  #havocAiView .ai-steps small { text-align: center; font-size: 9px; }
  #havocAiView .ai-config-head { flex-wrap: wrap; gap: 8px; }
  #havocAiView .ai-config-head h3 { font-size: 14px; }
  #havocAiView .ai-config-head p { font-size: 10px; }
  #havocAiView :is(.ai-option-grid,.ai-feature-grid) { grid-template-columns: 1fr; }
  #havocAiView .ai-lock-overlay { padding: 20px 15px; }
  #havocAiView .ai-create-choice-panel { grid-template-columns: 1fr; gap: 13px; }
  #havocAiView .ai-create-choice-card { padding: 20px; gap: 15px; }
  .create-choice-heading h1 { font-size: 26px; }
  .create-choice-heading p { font-size: 12px; }
  #serverModal { padding: 12px; }
  #serverCreateForm { max-height: calc(100dvh - 24px); }
  #serverCreateForm > header { padding: 16px; }
  #serverCreateForm h2 { font-size: 20px; }
  .server-create-body { padding: 16px; }
  #serverCreateForm .server-create-mode-grid { grid-template-columns: 1fr; }
  .server-create-fields { grid-template-columns: 1fr; }
  .server-create-footer { padding: 12px 16px; }
}