/* Real controls over separate decorative materials. Never a flattened titlebar. */
body .titlebar {position:relative;isolation:isolate;z-index:30;-webkit-app-region:drag !important;user-select:none;}
/* The actions flex item fills the last grid track: only the actual buttons,
 * not its empty leading space or gaps, may exclude native dragging. */
body .titlebar .window-actions {-webkit-app-region:drag !important;}
body .titlebar :is(.global-search,button,input,kbd),
body .titlebar button * {-webkit-app-region:no-drag !important;}
/* Decorative pseudo-elements must not add a second drag region over buttons. */
body .titlebar::before,body .titlebar::after {-webkit-app-region:none !important;}
body .titlebar .brand-lockup,body .titlebar .brand-lockup > img {-webkit-app-region:drag !important;}
body .settings-header {-webkit-app-region:drag !important;user-select:none;}
body .settings-header :is(button,a,input,select,textarea),body .settings-header .settings-window-actions * {-webkit-app-region:no-drag !important;}
/* Electron includes full-size decorative pseudo-elements in native hit testing,
 * even when they ignore DOM pointer events. Paint the settings rim on its bar,
 * just like the main titlebar, and keep the real controls outside the drag area. */
body.theme-style-active #settingsOverlay .settings-header {
 border-image:var(--skin-nine-frame) 22% / 12px / 0 stretch !important;
}
body #settingsOverlay .settings-header::before,
body #settingsOverlay .settings-header::after,
body.theme-style-active #settingsOverlay .settings-header::before,
body.theme-style-active #settingsOverlay .settings-header::after {
 content:none !important;display:none !important;pointer-events:none !important;
 -webkit-app-region:none !important;
}
body #settingsOverlay :is(.settings-header-actions,.settings-window-actions) {
 position:relative;z-index:6;-webkit-app-region:no-drag !important;
}
body #settingsOverlay .settings-window-button,
body #settingsOverlay .settings-window-button * {
 pointer-events:auto !important;-webkit-app-region:no-drag !important;
}
body .titlebar :is(.window-actions,.global-search,.brand-lockup) {position:relative;z-index:2;}
body .titlebar button {pointer-events:auto !important;cursor:pointer;}
body .titlebar::before,body .titlebar::after {pointer-events:none !important;}
body.theme-style-active .titlebar {background:var(--skin-header) !important;border:1px solid var(--skin-frame) !important;box-shadow:var(--skin-bevel) !important;border-radius:var(--skin-radius);}
body.theme-style-active .titlebar::after {content:none !important;display:none !important;}
body.theme-style-active :is(.profile-quick-controls > button,.titlebar .icon-button,.titlebar .window-button,.settings-window-button,.small-action,.hub-tab,[data-hub-platform],.streaming-watch-button,.streaming-load-more) {
 background:linear-gradient(180deg,var(--skin-button-top),var(--skin-button-bottom)) !important;color:var(--skin-button-text) !important;
 border:1px solid var(--skin-frame) !important;border-radius:var(--skin-button-radius) !important;box-shadow:var(--skin-bevel),0 1px 2px #0003 !important;
 transition:filter .12s,box-shadow .12s;isolation:isolate;
}
body.theme-style-active :is(.profile-quick-controls > button,.titlebar button,.small-action,.hub-tab,[data-hub-platform]):hover {filter:brightness(1.1);}
body.theme-style-active :is(.profile-quick-controls > button,.titlebar button,.small-action,.hub-tab,[data-hub-platform]):active {box-shadow:inset 0 2px 4px #0005 !important;filter:brightness(.94);}
body.theme-style-active :is(.profile-quick-controls > button,.titlebar .icon-button,.titlebar .window-button)::after {border-image:none !important;pointer-events:none !important;}
body.theme-style-active .profile-quick-controls > button :is(svg,[data-icon]) {color:inherit !important;opacity:1 !important;filter:none !important;}
body.theme-style-active .profile-quick-controls > button:is(.active,[aria-pressed="true"]) {background:linear-gradient(180deg,color-mix(in srgb,var(--skin-accent) 35%,#73273b),#431827) !important;color:#fff5f5 !important;border-color:color-mix(in srgb,var(--skin-accent) 45%,#f195a5) !important;}
body.theme-style-active :is(.hub-tab.active,[data-hub-platform].active) {background:linear-gradient(var(--skin-primary-top),var(--skin-primary-bottom)) !important;color:var(--skin-primary-text) !important;}
body.theme-style-active :is(.global-search,.home-friend-search,.live-add-form,.hub-search-form) {background:var(--skin-deep) !important;border:1px solid var(--skin-frame) !important;box-shadow:inset 0 1px 3px #0004 !important;color:var(--skin-muted) !important;}
body.theme-style-active :is(.global-search,.home-friend-search)::after {display:none !important;}
body.theme-style-active :is(.global-search,.home-friend-search,.live-add-form,.hub-search-form) input {background:transparent !important;color:var(--skin-text) !important;}
body[data-skin-atlas="metal-lcd"] .app-sidebar .rail-item b {color:#f2f6fa !important;text-shadow:0 1px 2px #000;}
body.theme-style-active .section-page > .hub-header {color:var(--skin-text) !important;background-color:var(--skin-panel) !important;}
body.theme-style-active :is(#hubView,#friendsView,#activityView,#searchView,#messagesView,#pluginsView,#havocAiView) > .hub-header :is(h1,h2,span) {color:var(--skin-text) !important;opacity:1 !important;}
body.theme-style-active :is(#hubView,#friendsView,#activityView,#searchView,#messagesView,#pluginsView,#havocAiView) > .hub-header :is(p,small) {color:var(--skin-muted) !important;opacity:1 !important;}
/* A catalogue of streams, not a second oversized copy of the first card. */
body #hubView #streamingStage {display:none !important;}
body #hubView.section-page {grid-template-rows:auto minmax(0,1fr);}
body #hubView .streaming-browser {flex:1;min-height:0;margin-top:0;}
body #hubView .live-feed {align-content:start;}
body #hubView .live-card .live-preview {aspect-ratio:16/9;height:auto;}
/* New event skins use their own scalable, text-free housings and ornaments. */
body.theme-style-active[data-skin-renderer="native"] {--skin-nine-frame:var(--skin-native-frame);--skin-material-art:none;}
body.theme-style-active[data-skin-renderer="native"] :is(.app-sidebar,.approved-panel,.approved-metrics > div,.hub-panel,.streaming-browser,.settings-card) {background-image:var(--skin-ornament),var(--skin-texture) !important;background-position:right bottom,center !important;background-size:120px 56px,auto !important;background-repeat:no-repeat,repeat !important;background-color:var(--skin-panel) !important;}
body.theme-style-active[data-skin-renderer="native"] :is(.app-sidebar,.approved-panel,.approved-metrics > div,.approved-home-hero,.hub-panel,.streaming-browser,.settings-card)::after {border:0 solid transparent !important;border-image:var(--skin-native-frame) 30 / 18px / 0 stretch !important;pointer-events:none !important;z-index:0 !important;}
body.theme-style-active[data-skin-renderer="native"] :is(.approved-panel > header,.approved-panel-body,.approved-home-copy,.approved-live-strip,.approved-server-grid) {position:relative;z-index:1;}
body.theme-style-active[data-skin-renderer="native"] .app-sidebar {overflow:hidden;}
body.theme-style-active[data-skin-renderer="native"] .app-sidebar > * {position:relative;z-index:1;}
body[data-theme-id="new-year"].theme-style-active .rail-item.active {border-block:1px solid #d5bc7f !important;box-shadow:inset 4px 0 #e4c88c,inset -4px 0 #e4c88c !important;letter-spacing:.04em;}
body[data-theme-id="carnival"].theme-style-active .rail-item.active {background:linear-gradient(125deg,#774499,#351747) !important;box-shadow:inset 4px 0 #45daca,inset 0 1px #f4c97577 !important;color:#fff4da !important;}
body[data-theme-id="valentine"].theme-style-active .rail-item.active {background:linear-gradient(120deg,#82465f,#452139) !important;box-shadow:inset 4px 0 #f2a7b7,inset 0 1px #ffe6dc55 !important;}
body[data-theme-id="epiphany"].theme-style-active .rail-item.active {background:linear-gradient(120deg,#354b80,#18264b) !important;box-shadow:inset 4px 0 #efd39a,inset 0 1px #d9e7ff55 !important;}
body[data-theme-id="default"] :is(.titlebar,.brand-lockup,.brand-logo) {background-image:none !important;}
body[data-theme-id="default"] .brand-logo {background:transparent !important;}
/* Connected accounts are compact rows, not legacy oversized gradient pills. */
#settingsOverlay .settings-social-list {display:grid;gap:12px;}
#settingsOverlay .settings-social-list .social-row {display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:84px;padding:14px;background:#091827;border:1px solid var(--settings-line);border-radius:10px;}
#settingsOverlay .settings-social-list .social-icon {display:grid;place-items:center;width:44px;height:44px;grid-column:1;}
#settingsOverlay .settings-social-list .social-row > div:nth-child(2) {display:flex;flex-direction:column;gap:5px;min-width:0;}
#settingsOverlay .settings-social-list .social-row strong {font-size:14px;}
#settingsOverlay .settings-social-list .social-row span {font-size:12px;color:var(--settings-muted);}
#settingsOverlay .settings-social-list .hub-action-row {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;grid-column:3;}
body.theme-style-active #settingsOverlay :is(.social-row.connected,.social-row,.voice-control-group,.settings-section-tabs,.settings-group-title > span) {background:var(--skin-deep) !important;color:var(--skin-text) !important;border-color:var(--skin-frame) !important;border-radius:var(--skin-button-radius) !important;}
body.theme-style-active #settingsOverlay :is(.small-action,.invite-button,.settings-section-tabs button,.theme-preview-button,.theme-favorites) {background:linear-gradient(180deg,var(--skin-button-top),var(--skin-button-bottom)) !important;color:var(--skin-button-text) !important;border:1px solid var(--skin-frame) !important;border-radius:var(--skin-button-radius) !important;box-shadow:var(--skin-bevel),0 1px 2px #0003 !important;}
body.theme-style-active #settingsOverlay :is(.invite-button,.settings-section-tabs button.active,.theme-preview-button.selected) {background:linear-gradient(180deg,var(--skin-primary-top),var(--skin-primary-bottom)) !important;color:var(--skin-primary-text) !important;}
body.theme-style-active #settingsOverlay .toggle-row {border-color:var(--skin-frame) !important;}
@media(max-width:1100px){#settingsOverlay .settings-social-list .social-row{grid-template-columns:44px minmax(0,1fr);}#settingsOverlay .settings-social-list .hub-action-row{grid-column:1/-1;justify-content:flex-start;}}
/* The old tablet stylesheet assigns two aside columns and a full-row news
 * panel. All renderers share the same readable one-column app shell. */
@media(min-width:768px){
 body.home-view-active #nowView .approved-home-aside {grid-template-columns:minmax(0,1fr) !important;}
 body.home-view-active #nowView .approved-home-aside > * {grid-column:1 !important;}
}
@media(min-width:1024px) and (max-width:1199px){
 body.home-view-active {--home-aside-width:222px;}
 body.home-view-active #nowView {grid-template-columns:minmax(0,1fr) var(--home-aside-width);}
 body .app-sidebar .profile-chip > .avatar,body .app-sidebar .profile-chip > div:nth-child(2) {display:block !important;}
 body .app-sidebar .profile-chip > .avatar {display:grid !important;}
}
@media(prefers-reduced-motion:reduce){body .titlebar button,body .profile-quick-controls > button{transition:none !important;}}
/* Shared interface typography: skins change the artwork, not the legibility of
 * names, labels and actions. Display lettering is reserved for the large hero. */
body.theme-style-active{--skin-ui-font:"Segoe UI",Arial,system-ui,sans-serif;font-family:var(--skin-ui-font) !important;}
body.theme-style-active :is(.rail-item b,.approved-panel h2,.approved-news-row,.approved-server-card,.approved-friend-row,.now-actions > button,.section-page,.server-modal,.notification-center,.compact-info-modal){font-family:var(--skin-ui-font) !important;}
body.theme-style-active :is(.approved-panel h2,.rail-item b){font-weight:600;line-height:1.3;letter-spacing:0;}
body.theme-style-active #nowView .approved-panel > header{min-height:36px;height:auto;gap:8px;}
body.theme-style-active #nowView .approved-panel > header h2{min-width:0;overflow-wrap:normal;}
body.theme-style-active #nowView .approved-panel > header button{flex:none;line-height:1.4;}
body.theme-style-active :is(.approved-news-row strong,.approved-server-card strong,.approved-friend-row strong){font-weight:600;font-size:13px;line-height:1.4;}
body.theme-style-active #nowView .approved-live-card strong{font-size:13px;font-weight:600;line-height:1.35;}
body.theme-style-active #nowView .approved-news-row small{line-height:1.5;}
body #nowView .approved-news-panel{container-type:inline-size;}
@container(max-width:350px){
 body #nowView .approved-news-panel .approved-news-row{min-height:62px;padding-block:6px;}
 body #nowView .approved-news-panel .approved-news-row > span:nth-child(2){gap:3px;}
 body.theme-style-active #nowView .approved-news-panel .approved-news-row strong{line-height:1.35;}
 body.theme-style-active #nowView .approved-news-panel .approved-news-row small{font-size:11px;line-height:1.4;}
}
body.theme-style-active :is(.section-page,.server-modal,.notification-center,.compact-info-modal){line-height:1.45;}
body.theme-style-active .section-page :is(h2,h3){line-height:1.35;}
body.theme-style-active #settingsOverlay :is(.field-label,.settings-note,.toggle-row strong,.settings-group-title p){font-size:12px;line-height:1.5;}
body.theme-style-active #settingsOverlay :is(.settings-input,.settings-select,.settings-textarea){font-size:13px;line-height:1.4;}
/* Native holiday frames need the same protected inner area as raster atlases. */
body.theme-style-active[data-skin-renderer="native"] #nowView .approved-panel{--skin-native-edge:18px;}
body.theme-style-active[data-skin-renderer="native"] #nowView .approved-panel > header{margin:12px var(--skin-native-edge) 0;padding-inline:4px;}
body.theme-style-active[data-skin-renderer="native"] #nowView .approved-panel > :is(.approved-panel-body,.approved-live-strip,.approved-server-grid){margin:0 var(--skin-native-edge) var(--skin-native-edge);padding:8px 4px 6px;min-width:0;}
body.theme-style-active[data-skin-renderer="native"] #nowView .home-friend-search{margin-inline:calc(var(--skin-native-edge) + 4px);}
body.theme-style-active[data-skin-renderer="native"] #nowView .approved-home-aside > .approved-panel{background-size:64px auto,auto !important;background-position:right 10px bottom 6px,center !important;}
/* One structural frame, not an SVG on top of another CSS outline. */
body.theme-style-active[data-skin-renderer="native"] :is(.app-sidebar,.approved-panel,.approved-metrics > div,.approved-home-hero,.hub-panel,.streaming-browser,.settings-card){border:0 !important;box-shadow:none !important;}
body.theme-style-active[data-skin-renderer="native"] #nowView :is(.approved-panel,.approved-metrics > div,.approved-home-hero),body.theme-style-active[data-skin-renderer="native"] #settingsOverlay .settings-card{border:0 !important;box-shadow:none !important;}
body.theme-style-active[data-skin-renderer="native"] :is(.profile-chip,#settingsOverlay .settings-nav,#settingsOverlay .settings-header)::after{content:none !important;display:none !important;}
body[data-skin-atlas] #serverCreateForm{padding:14px;}
body.theme-style-active #serverCreateForm > header,body.theme-style-active #serverCreateForm .server-create-footer{background:var(--skin-header);color:var(--skin-text);border-color:var(--skin-frame);}
body.theme-style-active #serverCreateForm :is(.server-create-mode-card,.server-create-paid-note){background:var(--skin-deep);color:var(--skin-text);border-color:var(--skin-frame);}
body.theme-style-active #serverCreateForm .server-create-mode-card.active{background:var(--skin-raised);border-color:var(--skin-accent);box-shadow:inset 3px 0 var(--skin-accent);}
body.theme-style-active #serverCreateForm :is(small,p,.section-field > span){color:var(--skin-muted);font-size:12px;line-height:1.5;}
@media(min-width:768px){
 /* Reserve actual text height before assigning the remaining area to artwork. */
 body #nowView .approved-live-card{grid-template-rows:minmax(54px,1fr) auto;}
 body #nowView .approved-live-cover{aspect-ratio:auto !important;height:100%;}
 body #nowView .approved-live-card > div:last-child{flex:none;overflow:visible;gap:2px;}
 body #nowView .approved-live-card :is(strong,small){flex:none;line-height:1.3;}
 body #nowView .approved-live-tags{flex:none;}
 body .main-panel:not(.alt-view){grid-template-rows:minmax(104px,auto) minmax(0,1fr);}
 body .room-header{min-height:96px;height:auto;padding:14px;gap:12px;}
 body .room-header .room-identity{display:flex;flex:1;align-items:center;gap:12px;min-width:0;}
 body .room-header .room-title-row h1{font-size:20px;line-height:1.3;letter-spacing:-.015em;}
 body .room-header .room-identity p{margin:4px 0 0;font-size:12px;line-height:1.4;}
 body .room-header .room-actions{flex:none;gap:8px;}
 body .room-header .quality-pill{padding:6px 8px;font-size:12px;}
}
/* Approved component chrome. Keep the real materials rather than replacing
 * every skin with the same flat gradient. All decorative layers ignore input. */
body[data-skin-atlas].theme-style-active :is(.titlebar,.global-search,.home-friend-search,.profile-quick-controls > button,.titlebar .icon-button,.titlebar .window-button,.settings-window-button){
 border:0 !important;box-shadow:none !important;
}
body[data-skin-atlas].theme-style-active :is(.titlebar .brand-lockup,.titlebar .icon-button,.titlebar .window-button,.settings-window-button)[data-skin-atlas-component]::after,
body[data-skin-atlas].theme-style-active :is(.global-search,.home-friend-search)[data-skin-atlas-component]::after,
body[data-skin-atlas].theme-style-active .profile-quick-controls > button[data-skin-atlas-component]::after{
 content:"" !important;display:block !important;position:absolute !important;inset:0 !important;pointer-events:none !important;z-index:-1 !important;
 border:0 solid transparent !important;border-image:var(--atlas-frame) var(--atlas-slice) / var(--atlas-width) / 0 stretch !important;
 background:none !important;box-shadow:none !important;opacity:1 !important;
}
/* Paint the housing on the bar itself. A full-size decorative pseudo-element
 * becomes a native hit-test region in Electron, even with pointer-events:none. */
body[data-skin-atlas].theme-style-active .titlebar[data-skin-atlas-component]{border-image:var(--atlas-frame) var(--atlas-slice) / var(--atlas-width) / 0 stretch !important;}
body[data-skin-atlas].theme-style-active .titlebar[data-skin-atlas-component]::after{display:none !important;content:none !important;}
body[data-skin-atlas].theme-style-active .titlebar .brand-lockup[data-skin-atlas-component]{height:100%;padding:5px 15px;}
body[data-skin-atlas].theme-style-active #nowView .approved-panel > header{
 background-color:var(--skin-panel) !important;position:relative;overflow:visible;
}
body[data-skin-atlas].theme-style-active #nowView .approved-panel > header::after{
 content:"";position:absolute;inset:auto -4px -3px;height:9px;background:var(--atlas-header-rule) center/100% 100% no-repeat;pointer-events:none;
}
body[data-skin-atlas].theme-style-active #nowView .approved-panel > header :is(h2,button){position:relative;z-index:1;}
body[data-skin-atlas="metal-lcd"].theme-style-active #nowView .approved-panel > header{background-color:#c3cdd3 !important;}
body[data-skin-atlas="halloween"].theme-style-active :is(.rail-item b,.approved-panel h2,.now-actions > button){font-family:Georgia,"Times New Roman",serif !important;font-weight:700;}
body[data-skin-atlas="halloween"].theme-style-active #nowView .approved-home-copy h1{font-family:Georgia,"Times New Roman",serif !important;font-weight:700;}
body[data-skin-atlas="halloween"].theme-style-active #nowView .approved-home-copy h1 :is(strong,span){font-family:"Segoe UI",Arial,sans-serif;font-weight:800;}
body[data-skin-atlas="halloween"].theme-style-active .app-sidebar .rail-item.active{filter:drop-shadow(0 0 4px #ff791c50);}
body[data-skin-atlas="halloween"].theme-style-active .titlebar{background-image:linear-gradient(#0006,#0006),url('/themes/halloween/assets/walnut.png') !important;background-size:auto,600px auto !important;background-repeat:repeat !important;}
body[data-skin-atlas="halloween"].theme-style-active .titlebar .brand-lockup{background-image:none !important;}
body[data-skin-atlas].theme-style-active #nowView .approved-metrics > div[data-skin-atlas-decor="metric"]::before{content:"" !important;display:block !important;}
body[data-skin-atlas].theme-style-active .profile-quick-controls > button:is(.active,[aria-pressed="true"]){color:#ff7184 !important;filter:brightness(1.2);}
body[data-skin-atlas="metal-lcd"].theme-style-active :is(.titlebar button,.profile-quick-controls > button,.settings-window-button){color:#eef4ff !important;}
body:is([data-skin-atlas="studio-glass"],[data-skin-atlas="spring-bloom"]).theme-style-active [data-skin-atlas-component="control"]::after{clip-path:inset(0 round 18px);}
body:is([data-skin-atlas="studio-glass"],[data-skin-atlas="spring-bloom"]).theme-style-active [data-skin-atlas-component="control"]{border-radius:18px !important;}
body[data-skin-atlas="halloween"].theme-style-active #nowView .now-actions > button:first-child{filter:drop-shadow(0 0 5px #f884234f) !important;}
@media(min-width:1200px){
 body[data-skin-atlas="halloween"] .titlebar{grid-template-columns:minmax(255px,22vw) minmax(320px,38vw) minmax(0,1fr);padding-left:0;}
 body[data-skin-atlas="halloween"] .titlebar .brand-lockup{width:100%;}
}