/* ROOT SE restored artwork and clear glass — 2026-10-06. */
:root{
 --root-lighthouse-image:url("/static/root-brand/root-wallpaper.webp?v=20261006-clear1");
 --root-glass-cyan:116,218,250;
 --root-glass-blue:47,120,255;
 --root-glass-violet:143,72,255;
 --root-glass-radius:24px;
 --root-glass-fill:rgba(10,25,40,.40);
 --root-glass-line:rgba(123,214,255,.40);
 --root-glass-shadow:inset 0 1px 2px rgba(209,242,255,.26),inset 0 -1px 2px rgba(93,167,255,.13),0 8px 24px rgba(0,0,0,.22),0 0 22px rgba(31,134,255,.19),0 0 44px rgba(106,51,228,.10);
 --rx-surface:rgba(12,25,43,.40);
 --rx-surface-2:rgba(16,30,51,.30);
}
html[data-theme] body :is(#appShell,#chatScreen,#directChatScreen,#systemChatScreen,#authScreen,#lockScreen):is(.shell,.chatScreen,.screen){
 background-color:#02080c!important;
 background-image:linear-gradient(180deg,rgba(1,7,12,.26),rgba(0,4,10,.48)),var(--root-lighthouse-image)!important;
 background-position:center,center!important;background-size:cover,cover!important;
 background-repeat:no-repeat!important;background-attachment:scroll!important;
}
html[data-theme] body :is(#chatScreen,#directChatScreen,#systemChatScreen)::before,
html[data-theme] body :is(#chatScreen,#directChatScreen,#systemChatScreen)::after{display:none!important}
html[data-theme] body :is(#mainContent,.messages,.masterAppMount,.masterAppShell){background:transparent!important}
html[data-theme] body .authSurface{background:transparent!important}
html[data-theme] body :is(#appShell>.topbar,#appShell>.nav,.chatHead,.composer,.secureNote,.masterAppHeader,.authTopbar){
 background:linear-gradient(180deg,rgba(3,12,21,.40),rgba(2,10,18,.30))!important;
 border-color:rgba(131,217,255,.18)!important;
 box-shadow:0 6px 24px rgba(0,0,0,.16)!important;
 -webkit-backdrop-filter:blur(12px) saturate(130%)!important;backdrop-filter:blur(12px) saturate(130%)!important;
}
/* Translucent shared surfaces: home, profile, settings, work, music and administration. */
html[data-theme] body.adminClient .adminCard,
html[data-theme] body .adminOnlyCards button,
html[data-theme] body .content .rowCard[data-cid],
html[data-theme] body .content .rowCard[data-did],
html[data-theme] body :is(#authScreen,#lockScreen) :is(.authCard,.authPanel,.lockCard),
html[data-theme] body :is(
 .card,.settingsGroup,.rowCard,.heroAction,.homeHero,.homePublication,.homePlaceholder,.broadcastCard,
 .workspacePanel,.wsBoardCard,.workHero,.otherUserRow,
 .profileHubHero,.profileHubMenu,.profileSectionEmpty,
 .musicHero,.musicTrack,.musicPlaylist,.musicPlayerDock,.musicEqSheet,
 .cifraCard,.cifraStat,.cifraRow,.cifraDoc,.cifraChat,.sePayCard,.sePayMethod,.sePayTx,
 .adminStat,.adminUser,.adminInvite,.adminHomeWorkspace,.adminPreviewSetting,.auditRow,
 .igHero,.igCard,.igModelBox,.igResult,.chatRequestCard,.seShareContact,
 .notificationSummary,.notificationRecipient,.conversationSearch,.conversationFilters,.sheet,
 .adminCard,.ameCard,.ameWelcome,.ameSetting,.adminOnlyContextBar,.adminOpenCodeCard,
 .authPanel,.authCard,.authGlass,.authForm,.lockCard
){
 background:linear-gradient(145deg,rgba(86,156,224,.10),rgba(10,25,45,.47) 45%,rgba(20,12,41,.40))!important;
 border:1px solid var(--root-glass-line)!important;border-radius:var(--root-glass-radius)!important;
 box-shadow:var(--root-glass-shadow)!important;color:#edf6ff!important;
 -webkit-backdrop-filter:blur(8px) saturate(115%)!important;backdrop-filter:blur(8px) saturate(115%)!important;
 clip-path:none!important;animation:none!important;
}
html[data-theme] body .homeHero::after{display:none!important}
html[data-theme] body :is(.settingRow,.profileHubItem){
 background:transparent!important;border-color:rgba(159,215,255,.13)!important;
}
html[data-theme] body :is(.sectionTitle,.rowTitle,.settingRow b,.profileHubItem b){color:#edf6ff!important}
html[data-theme] body :is(.sectionSub,.small,.sub,.rowMeta,.rowPreview,.settingRow .small){color:#a6bdce!important}
/* Sapphire outgoing messages and violet incoming messages, matching the reference. */
html[data-theme] body :is(#chatScreen,#directChatScreen,#systemChatScreen).chatScreen :is(#messages,#directMessages,#systemMessages)>.bubble{
 border-radius:26px!important;clip-path:none!important;border:1px solid rgba(134,195,255,.64)!important;
 background:linear-gradient(145deg,rgba(100,53,197,.34),rgba(40,16,84,.36) 48%,rgba(17,15,52,.41))!important;
 color:#eef3ff!important;
 box-shadow:inset 0 1px 3px rgba(224,205,255,.37),inset 0 -1px 3px rgba(98,116,255,.22),0 0 20px rgba(137,55,255,.31),0 0 42px rgba(43,112,255,.13),0 8px 24px rgba(0,0,0,.20)!important;
 -webkit-backdrop-filter:blur(7px) saturate(135%)!important;backdrop-filter:blur(7px) saturate(135%)!important;
}
html[data-theme] body :is(#chatScreen,#directChatScreen,#systemChatScreen).chatScreen :is(#messages,#directMessages,#systemMessages)>.bubble.user{
 background:linear-gradient(145deg,rgba(44,135,255,.45),rgba(0,51,142,.40) 48%,rgba(5,31,80,.42))!important;
 border-color:rgba(120,200,255,.76)!important;
 box-shadow:inset 0 1px 3px rgba(207,242,255,.45),inset 0 -1px 3px rgba(105,192,255,.25),0 0 20px rgba(32,131,255,.34),0 0 44px rgba(127,49,242,.18),0 8px 24px rgba(0,0,0,.20)!important;
}
html[data-theme] body :is(#chatScreen,#directChatScreen,#systemChatScreen).chatScreen :is(#messages,#directMessages,#systemMessages)>.bubble::before,
html[data-theme] body :is(#chatScreen,#directChatScreen,#systemChatScreen).chatScreen :is(#messages,#directMessages,#systemMessages)>.bubble::after{display:none!important}
html[data-theme] body :is(#chatScreen,#directChatScreen,#systemChatScreen).chatScreen :is(#messages,#directMessages,#systemMessages)>.bubble :is(.directTime,.messageTime){
 color:#c4cce7!important;opacity:.85!important;
}
html[data-theme] body :is(#chatScreen,#directChatScreen) .bubbleTools{
 border-top-color:rgba(188,218,255,.19)!important;gap:6px!important;
}
/* Icons float directly on glass; focus remains visible for keyboard use. */
html[data-theme] body :is(#chatScreen,#directChatScreen) .bubbleTools :is(button,.actionIcon,.mini),
html[data-theme] body .chatHead :is(.chatMenuButton,.chatHeaderAction,.chatDeleteButton,.iconBtn,.ghost),
html[data-theme] body :is(.menuSystemButton,.menuToggle,.iconBtn){
 background:transparent!important;border:0!important;border-radius:50%!important;
 box-shadow:none!important;color:#84ddfa!important;
}
html[data-theme] body :is(#chatScreen,#directChatScreen) .bubbleTools :is(button,.actionIcon,.mini){
 min-width:36px!important;min-height:36px!important;width:36px!important;height:36px!important;padding:7px!important;
}
html[data-theme] body :is(.bubbleTools,.chatHead) button svg{
 stroke-linecap:round!important;stroke-linejoin:round!important;
 filter:drop-shadow(0 3px 6px rgba(72,190,250,.25));
}
html[data-theme] body :is(.bubbleTools,.chatHead) button:hover{
 background:rgba(113,213,255,.09)!important;
}
html[data-theme] body :is(.bubbleTools,.chatHead,.drawerNav) button:focus-visible{
 outline:2px solid #8ce5ff!important;outline-offset:3px!important;
}
/* Cyan line icons with a soft light below, like the supplied menu. */
html[data-theme] body #drawerLayer #sideDrawer.sideDrawer{
 background:linear-gradient(160deg,rgba(2,12,18,.86),rgba(2,12,20,.74))!important;
 border-color:rgba(126,210,247,.16)!important;
 -webkit-backdrop-filter:blur(18px) saturate(130%)!important;backdrop-filter:blur(18px) saturate(130%)!important;
}
html[data-theme] body #drawerLayer #sideDrawer .drawerNav>button{
 border:0!important;background:transparent!important;box-shadow:none!important;border-radius:20px!important;
 color:#a7bac7!important;font-weight:500!important;
 gap:16px!important;min-height:48px!important;
}
html[data-theme] body #drawerLayer #sideDrawer .drawerNav>button:is(.on,.active,:hover){
 background:rgba(57,170,211,.10)!important;color:#f0faff!important;
}
html[data-theme] body #drawerLayer #sideDrawer .drawerIcon,
html[data-theme] body #appShell>.nav .nicon{
 position:relative!important;isolation:isolate!important;overflow:visible!important;
 background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
 color:#7bdcf7!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html[data-theme] body #drawerLayer #sideDrawer .drawerIcon::after,
html[data-theme] body #appShell>.nav .nicon::after{
 content:"";position:absolute;z-index:-1;pointer-events:none;
 left:50%;bottom:-6px;width:28px;height:12px;transform:translateX(-50%);
 background:radial-gradient(ellipse,rgba(69,201,241,.28),transparent 70%);filter:blur(3px);
}
html[data-theme] body #drawerLayer #sideDrawer .drawerIcon svg{
 width:25px!important;height:25px!important;min-width:25px!important;min-height:25px!important;
 max-width:25px!important;max-height:25px!important;
 fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;
 stroke-linecap:round!important;stroke-linejoin:round!important;
}
html[data-theme] body #appShell>.nav .nicon svg{
 color:#7bdcf7!important;stroke-linecap:round!important;stroke-linejoin:round!important;
}
html[data-theme] body #appShell>.nav>button:is(.on,.active){
 background:rgba(57,170,211,.08)!important;box-shadow:none!important;
}
html[data-theme] body :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea,select,.input){
 background:rgba(7,16,30,.14)!important;color:#f0f7ff!important;
 border-color:rgba(129,201,242,.24)!important;
}
html[data-theme] body :is(.composer .round,#chatScreen #rootComposer #rootAttach,#chatScreen #rootComposer #micBtn){
 background:rgba(28,41,65,.36)!important;border:0!important;border-radius:50%!important;
 box-shadow:none!important;color:#aadef1!important;
}
html[data-theme] body #chatScreen #rootComposer #sendBtn{
 background:linear-gradient(145deg,#9870f4,#5f39df)!important;
 border:0!important;border-radius:50%!important;color:white!important;
 box-shadow:0 0 22px rgba(131,69,247,.32)!important;
}
@media(max-width:600px){
 :root{--root-glass-radius:22px}
 html[data-theme] body :is(#chatScreen,#directChatScreen,#systemChatScreen).chatScreen :is(#messages,#directMessages,#systemMessages)>.bubble{border-radius:24px!important}
}
@media(prefers-reduced-motion:reduce){
 html[data-theme] body :is(.card,.rowCard,.bubble,.drawerNav>button){transition:none!important}
}

html[data-theme] body .composerScrollControls button{border:0!important;border-radius:50%!important;background:rgba(18,36,55,.35)!important;box-shadow:none!important;color:#90dff5!important}

html[data-theme] body :is(.adminOnlyShell,#adminMasterAuth){background-color:#02080c!important;background-image:linear-gradient(180deg,rgba(1,7,12,.26),rgba(0,4,10,.48)),var(--root-lighthouse-image)!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}
html[data-theme] body :is(.adminOnlyHeader,.adminOnlyBottom){background:rgba(3,12,21,.59)!important;border-color:rgba(131,217,255,.18)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important}
html[data-theme] body .adminOnlyNavBtn{border:0!important;box-shadow:none!important}
html[data-theme] body .adminOnlyNavBtn svg{color:#7bdcf7!important;stroke-linecap:round!important;stroke-linejoin:round!important}
html[data-theme] body #directChatScreen.chatScreen #directMessages>.bubble.attachmentOnly:has(.stickerAttachment){background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

html[data-theme] body :is(#authScreen,#lockScreen) .authField .authInput{
 background:transparent!important;border:0!important;box-shadow:none!important;outline:none!important;
}
html[data-theme] body :is(#authScreen,#lockScreen) .authField:focus-within{
 border-color:#80dffd!important;box-shadow:0 0 0 2px rgba(91,209,255,.14)!important;
}

/* Clear artwork on tall screens; retain the complete portrait artwork on wide screens. */
html[data-theme] body :is(#appShell,#chatScreen,#directChatScreen,#systemChatScreen,#authScreen,#lockScreen):is(.shell,.chatScreen,.screen){image-rendering:auto!important;filter:none!important}
@media(min-aspect-ratio:1/1){
 html[data-theme] body :is(#appShell,#chatScreen,#directChatScreen,#systemChatScreen,#authScreen,#lockScreen):is(.shell,.chatScreen,.screen),
 html[data-theme] body :is(.adminOnlyShell,#adminMasterAuth){background-size:cover,contain!important}
}
html[data-theme] body :is(#authScreen,#lockScreen).screen::before{background:linear-gradient(180deg,rgba(0,4,10,.04),rgba(0,4,10,.15))!important}
html[data-theme] body :is(#authScreen,#lockScreen) .authCard{
 background:rgba(5,16,30,.24)!important;border-color:rgba(146,224,255,.27)!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 box-shadow:inset 0 1px 0 rgba(224,246,255,.09),0 0 24px rgba(39,158,240,.10)!important;
}
html[data-theme] body :is(#authScreen,#lockScreen) .authField{
 background:rgba(4,14,27,.09)!important;border-color:rgba(143,225,252,.23)!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;
}
html[data-theme] body :is(#authScreen,#lockScreen) .authField .authInput{
 background:transparent!important;border:0!important;box-shadow:none!important;color:#f7fcff!important;
}
html[data-theme] body :is(#authScreen,#lockScreen) .authInput::placeholder{color:rgba(218,236,250,.74)!important}
html[data-theme] body :is(#authScreen,#lockScreen) .authBrandLogo{
 image-rendering:auto!important;filter:none!important;object-fit:contain!important;transform:none!important;
}
html[data-theme] body .authSuccessVideo{image-rendering:auto!important;filter:none!important;object-fit:contain!important}

html[data-theme] body .adminOnlyViewport{background:transparent!important}

/* Soft text light keeps lettering crisp on the lightly frosted panels. */
html[data-theme] body :is(.card,.settingsGroup,.rowCard,.heroAction,.homePublication,.workspacePanel,.profileHubHero,.profileHubMenu,.adminCard,.ameCard,.ameWelcome,.ameSetting,.authCard,.bubble){
 text-shadow:0 1px 3px rgba(0,0,0,.88),0 0 9px rgba(170,220,255,.20)!important;
}
html[data-theme] body :is(.sectionTitle,.rowTitle,.settingRow b,.rootMessageIdentity,.chatHeadTitle){
 text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 10px rgba(128,209,255,.25)!important;
}
html[data-theme] body :is(#authScreen,#lockScreen) .authCard{backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important}
html[data-theme] body #chatScreen.chatScreen #messages>.bubble,
html[data-theme] body #systemChatScreen.chatScreen #systemMessages>.bubble{
 background:linear-gradient(145deg,rgba(100,53,197,.14),rgba(40,16,84,.16) 48%,rgba(17,15,52,.20))!important;
 backdrop-filter:blur(2px) saturate(115%)!important;-webkit-backdrop-filter:blur(2px) saturate(115%)!important;
}
html[data-theme] body #chatScreen.chatScreen #messages>.bubble.user,
html[data-theme] body #systemChatScreen.chatScreen #systemMessages>.bubble.user{
 background:linear-gradient(145deg,rgba(44,135,255,.19),rgba(0,51,142,.17) 48%,rgba(5,31,80,.21))!important;
}
html[data-theme] body :is(.chatBrandAvatar,.systemChatAvatar,.rootMessageIdentity img,#directAvatar img,.contactAvatar img){
 object-fit:cover!important;object-position:50% 28%!important;border-radius:50%!important;
}