/* ROOT SE · DESIGN SYSTEM 2026-09-26
   Target: dark premium glass/metal, thin cyan contour, restrained blue glow.
   One visual language across ROOT, profile, work, admin, Cifra, SE Pay and music. */

:root{
  --se-page:#02070b;
  --se-page-2:#051017;
  --se-glass:rgba(7,18,26,.76);
  --se-glass-strong:rgba(7,17,24,.90);
  --se-glass-soft:rgba(11,25,35,.58);
  --se-line:rgba(var(--skin-accent-rgb),.18);
  --se-line-strong:rgba(var(--skin-accent-rgb),.38);
  --se-highlight:rgba(255,255,255,.055);
  --se-shadow:0 18px 44px rgba(0,0,0,.26);
  --se-card-density:58%;
  --se-card-density-strong:73%;
  --se-user-blur:18px;
  --se-wallpaper-dim-top:.249;
  --se-wallpaper-dim-bottom:.406;
  --se-wallpaper-menu-dim:.586;
  --se-user-glow-alpha:.086;
  --se-user-glow-size:20px;
  --se-text-shadow-alpha:.49;
  --se-glow:0 0 var(--se-user-glow-size) rgba(var(--skin-accent-rgb),var(--se-user-glow-alpha));
  --se-radius-xl:18px;
  --se-radius-lg:18px;
  --se-radius-md:14px;
  --se-gap:12px;
}
html,body{background:var(--skin-bg,var(--se-page))!important;color:var(--skin-text,#edf8ff)!important}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[data-theme] #appShell,
html[data-theme] #chatScreen,
html[data-theme] #directChatScreen,
html[data-theme] #systemChatScreen{
  background-color:var(--skin-bg)!important;
  color:var(--skin-text)!important;
}

/* CHROME */
html[data-theme] #appShell>.topbar,
html[data-theme] #appShell>.nav,
html[data-theme] .chatHead,
html[data-theme] .composer,
html[data-theme] .sideDrawer,
html[data-theme] .masterAppHeader{
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--skin-surface-strong) var(--se-card-density-strong),transparent),
      color-mix(in srgb,var(--skin-bg) var(--se-card-density-strong),transparent)
    )!important;
  border-color:var(--se-line)!important;
  color:var(--skin-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 30px rgba(0,0,0,.18)!important;
  -webkit-backdrop-filter:blur(var(--se-user-blur)) saturate(135%)!important;
  backdrop-filter:blur(var(--se-user-blur)) saturate(135%)!important;
}
html[data-theme] #appShell>.topbar{border-bottom:1px solid var(--se-line)!important}
html[data-theme] #appShell>.nav{border-top:1px solid var(--se-line)!important}
html[data-theme] .topTitle,
html[data-theme] .drawerBrand,
html[data-theme] .sectionTitle,
html[data-theme] .chatHeadTitle{
  color:var(--skin-text)!important;
  text-shadow:none!important;
}
html[data-theme] .statusDot{
  background:var(--skin-accent)!important;
  box-shadow:0 0 10px rgba(var(--skin-accent-rgb),.46)!important;
}

/* UNIVERSAL PROFILE-LIKE CARD */
html[data-theme] :is(
  .card,.settingsGroup,.rowCard,.heroAction,.homeHero,.homePublication,.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
){
  box-sizing:border-box!important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--skin-card2) var(--se-card-density),rgba(255,255,255,.035)),
      color-mix(in srgb,var(--skin-bg) var(--se-card-density-strong),rgba(255,255,255,.012))
    )!important;
  border:1px solid var(--se-line)!important;
  border-radius:var(--se-radius-xl)!important;
  color:var(--skin-text)!important;
  box-shadow:
    inset 0 1px 0 var(--se-highlight),
    var(--se-shadow),
    var(--se-glow)!important;
  -webkit-backdrop-filter:blur(var(--se-user-blur)) saturate(128%)!important;
  backdrop-filter:blur(var(--se-user-blur)) saturate(128%)!important;
}
html[data-theme] :is(.rowCard,.musicTrack,.musicPlaylist,.cifraRow,.cifraDoc,.sePayMethod,.sePayTx,.adminUser,.adminInvite,.auditRow,.chatRequestCard,.notificationSummary){
  transition:transform .12s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease!important;
}
html[data-theme] :is(.rowCard,.musicTrack,.musicPlaylist,.cifraRow,.cifraDoc,.sePayMethod,.sePayTx,.adminUser,.adminInvite,.auditRow,.chatRequestCard,.notificationSummary):active{
  transform:scale(.992)!important;
  border-color:var(--se-line-strong)!important;
}
html[data-theme] :is(.settingsGroup,.profileHubMenu,.conversationFilters,.adminHomeWorkspace){overflow:hidden!important}

/* PROFILE IS THE VISUAL BASELINE */
.profileHubHero{
  padding:16px!important;
  gap:14px!important;
  margin:10px 0 14px!important;
}
.profileHubAvatar{
  width:68px!important;height:68px!important;flex:0 0 68px!important;
  border:1px solid var(--se-line-strong)!important;
  background:color-mix(in srgb,var(--skin-card2) 86%,black)!important;
  box-shadow:0 0 20px rgba(var(--skin-accent-rgb),.10)!important;
}
.profileHubHero h2{font-size:22px!important;margin:0 0 3px!important}
.profileHubMenu{border-radius:var(--se-radius-lg)!important}
.profileHubItem{
  min-height:58px!important;
  padding:12px 14px!important;
  grid-template-columns:38px minmax(0,1fr) 20px!important;
  gap:10px!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--skin-border) 46%,transparent)!important;
  background:transparent!important;
  color:var(--skin-text)!important;
}
.profileHubItem:last-child{border-bottom:0!important}
.profileHubIcon{color:var(--skin-accent)!important;text-shadow:none!important}
.profileHubArrow{color:color-mix(in srgb,var(--skin-muted) 72%,transparent)!important}

/* TEXT HIERARCHY */
html[data-theme] :is(.sectionSub,.small,.sub,.rowPreview,.rowMeta,.profileHubItem small,.settingRow .small){
  color:var(--skin-muted)!important;
}
html[data-theme] :is(.sectionTitle,.rowTitle,.profileHubItem b,.settingRow b,.adminStat b,.adminUser b){
  color:var(--skin-text)!important;
}
.sectionTitle{letter-spacing:-.015em!important}
.sectionSub{line-height:1.45!important}

/* SETTINGS / LISTS */
.settingRow{
  min-height:58px!important;
  padding:11px 14px!important;
  gap:12px!important;
  border-bottom:1px solid color-mix(in srgb,var(--skin-border) 44%,transparent)!important;
}
.settingRow:last-child{border-bottom:0!important}
.content>.list{display:grid!important;gap:9px!important}
.rowCard{padding:13px 14px!important;border-radius:var(--se-radius-lg)!important}
.rowTitle{font-weight:720!important}
.rowPreview{margin-top:3px!important}

/* BUTTONS */
html[data-theme] button{
  -webkit-tap-highlight-color:transparent;
}
html[data-theme] :is(.primary,.secondary,.ghost,.iconBtn,.round,.choice,.adminTab,.workspaceTab,.cifraTab){
  border-radius:var(--se-radius-md)!important;
}
html[data-theme] .primary{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--skin-accent) 88%,white),
    color-mix(in srgb,var(--skin-accent2) 78%,var(--skin-accent))
  )!important;
  color:#031018!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px rgba(var(--skin-accent-rgb),.12)!important;
}
html[data-theme] :is(.secondary,.ghost,.iconBtn,.round){
  background:color-mix(in srgb,var(--skin-card2) 78%,transparent)!important;
  color:var(--skin-text)!important;
  border:1px solid var(--se-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
html[data-theme] :is(.secondary,.ghost,.iconBtn,.round):active{border-color:var(--se-line-strong)!important}

/* INPUTS */
html[data-theme] :is(input,textarea,select,.input){
  background:color-mix(in srgb,var(--skin-bg) 86%,rgba(255,255,255,.02))!important;
  color:var(--skin-text)!important;
  border:1px solid var(--se-line)!important;
  border-radius:13px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-theme] :is(input,textarea,select,.input):focus{
  outline:none!important;
  border-color:var(--se-line-strong)!important;
  box-shadow:0 0 0 3px rgba(var(--skin-accent-rgb),.075)!important;
}

/* TABS */
html[data-theme] :is(.adminTab,.workspaceTab,.cifraTab,.seg button,.conversationFilters button){
  background:color-mix(in srgb,var(--skin-card2) 78%,transparent)!important;
  border:1px solid var(--se-line)!important;
  color:var(--skin-muted)!important;
  box-shadow:none!important;
}
html[data-theme] :is(.adminTab.on,.workspaceTab.on,.cifraTab.on,.seg button.on,.conversationFilters button.on){
  background:rgba(var(--skin-accent-rgb),.09)!important;
  border-color:var(--se-line-strong)!important;
  color:var(--skin-accent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}

/* DRAWER */
html[data-theme] .sideDrawer{
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--skin-bg2) 90%,transparent),
      color-mix(in srgb,var(--skin-bg) 94%,transparent)
    )!important;
  border-right:1px solid var(--se-line)!important;
}
html[data-theme] .drawerHead{
  background:linear-gradient(145deg,rgba(var(--skin-accent-rgb),.075),rgba(255,255,255,.018))!important;
  border:1px solid var(--se-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
html[data-theme] .drawerNav>button{
  background:transparent!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
}
html[data-theme] .drawerNav>button.on{
  background:rgba(var(--skin-accent-rgb),.075)!important;
  border-color:var(--se-line)!important;
  color:var(--skin-accent)!important;
  box-shadow:none!important;
}
html[data-theme] .drawerIcon{color:var(--skin-accent)!important;text-shadow:none!important}

/* CHAT — restrained, not nightclub glow */
#chatScreen #messages,
#directChatScreen #directMessages{padding-left:16px!important;padding-right:16px!important}
html[data-theme] #chatScreen #messages>.bubble,
html[data-theme] #directChatScreen #directMessages>.bubble,
html[data-theme] #systemChatScreen #systemMessages>.bubble{
  max-width:min(82%,680px)!important;
  padding:12px 15px 10px!important;
  border-radius:20px!important;
  color:var(--skin-text)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.20)!important;
  filter:none!important;
}
html[data-theme] #chatScreen #messages>.bubble.user,
html[data-theme] #directChatScreen #directMessages>.bubble.user{
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--skin-accent2) 34%,var(--skin-card2)),
    color-mix(in srgb,var(--skin-bg2) 84%,var(--skin-accent2))
  )!important;
  border:1px solid rgba(var(--skin-accent-rgb),.34)!important;
}
html[data-theme] #chatScreen #messages>.bubble.assistant,
html[data-theme] #directChatScreen #directMessages>.bubble.assistant{
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--skin-card2) 92%,rgba(255,255,255,.025)),
    color-mix(in srgb,var(--skin-bg) 94%,var(--skin-accent3))
  )!important;
  border:1px solid color-mix(in srgb,var(--skin-border) 76%,transparent)!important;
}
html[data-theme] #chatScreen #messages>.bubble::before,
html[data-theme] #chatScreen #messages>.bubble::after,
html[data-theme] #directChatScreen #directMessages>.bubble::before,
html[data-theme] #directChatScreen #directMessages>.bubble::after{display:none!important}

/* ADMIN / WORK / CIFRA / SE PAY */
.adminGrid,.playlistGrid{gap:10px!important}
.adminStat,.cifraStat{padding:14px!important}
.adminStat strong,.cifraStat strong{color:var(--skin-accent)!important;text-shadow:none!important}
.adminUser,.adminInvite,.auditRow{border-radius:var(--se-radius-lg)!important}
.workspacePanel,.cifraCard,.sePayCard,.igCard{padding:15px!important}
html[data-theme] :is(.adminHomeMenu>button,.adminToolbar button,.adminThemeCard,.masterAppAction,.masterAppBack){
  background:color-mix(in srgb,var(--skin-card2) 80%,transparent)!important;
  border:1px solid var(--se-line)!important;
  color:var(--skin-text)!important;
  box-shadow:none!important;
}
html[data-theme] :is(.adminHomeMenu>button.on,.adminThemeCard.on){
  border-color:var(--se-line-strong)!important;
  color:var(--skin-accent)!important;
  box-shadow:0 0 22px rgba(var(--skin-accent-rgb),.08)!important;
}

/* MUSIC */
.musicNote,.musicPlaylistIcon,.musicPlayerArtwork{
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--skin-accent2) 68%,var(--skin-card2)),
    color-mix(in srgb,var(--skin-accent3) 52%,var(--skin-card2))
  )!important;
  box-shadow:none!important;
}
.musicTrack.active{border-color:var(--se-line-strong)!important;background:rgba(var(--skin-accent-rgb),.055)!important}

/* BACKGROUND ART SHOULD BE FELT, NOT READ */
html[data-theme] #appShell,
html[data-theme] #chatScreen,
html[data-theme] #directChatScreen,
html[data-theme] #systemChatScreen{
  background-image:
    linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.34)),
    var(--se-scene-image,none)!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
html[data-theme] .sideDrawer{
  background-image:
    linear-gradient(110deg,rgba(0,0,0,.58),rgba(0,0,0,.30)),
    var(--se-menu-image,none)!important;
  background-size:cover!important;
  background-position:center!important;
}
html[data-theme] .masterAppMount{
  background-image:
    linear-gradient(155deg,rgba(0,0,0,.26),rgba(0,0,0,.46)),
    var(--se-admin-image,none)!important;
  background-size:cover!important;
  background-position:center!important;
}

/* ROLE / SYSTEM STATES */
.drawerAdminMark,.userAdminMark{box-shadow:none!important}
html[data-theme] :is(.unread,.drawerUnreadBadge,.badge){
  background:var(--skin-accent)!important;
  color:#031018!important;
  box-shadow:0 0 12px rgba(var(--skin-accent-rgb),.28)!important;
}
html[data-theme] :is(.danger,.dangerBtn,.ghost.danger,.adminKill,.adminDelete,.cifraDanger){
  color:#44c7ff!important;
  border-color:rgba(54,199,255,.24)!important;
  background:rgba(6,100,150,.20)!important;
}

/* PERFORMANCE / MOTION */
html[data-theme] .rowCard,
html[data-theme] .settingsGroup,
html[data-theme] .bubble,
html[data-theme] .nav button,
html[data-theme] .drawerNav button{animation:none!important}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}
@media(max-width:620px){
  :root{--se-radius-xl:18px;--se-radius-lg:16px}
  .profileHubHero{padding:14px!important}
  .profileHubAvatar{width:62px!important;height:62px!important;flex-basis:62px!important}
  html[data-theme] #chatScreen #messages>.bubble,
  html[data-theme] #directChatScreen #directMessages>.bubble{max-width:86%!important}
}

/* PROFILE STRUCTURE — migrated from the retired profile stylesheet */
.profileHubHero{display:flex!important;align-items:center!important}
.profileHubAvatar{border-radius:50%!important;overflow:hidden!important;display:grid!important;place-items:center!important;font-size:26px!important;font-weight:800!important}
.profileHubAvatar img{width:100%!important;height:100%!important;object-fit:cover!important}
.profileHubHero h2{margin:0 0 3px!important}
.profileHubHero span{color:var(--skin-muted)!important}
.profileHubMenu{overflow:hidden!important}
.profileHubItem{width:100%!important;display:grid!important;align-items:center!important;text-align:left!important}
.profileHubItem:active{background:rgba(var(--skin-accent-rgb),.05)!important}
.profileHubIcon{font-size:21px!important;text-align:center!important}
.profileHubItem b{display:block!important;font-size:14px!important}
.profileHubItem small{display:block!important;margin-top:3px!important;font-size:11px!important}
.profileHubArrow{font-size:22px!important}
.profileHubBack{margin:0 0 12px!important;padding:0!important;border:0!important;background:none!important;color:var(--skin-accent)!important;font-size:16px!important}
.profileSectionEmpty{margin-top:16px!important;padding:24px 16px!important;text-align:center!important}

/* MIGRATED SMALL STRUCTURAL RULES FROM RETIRED VISUAL FILES */
#adminBody .adminVoiceLabRow>.grow{flex:1 1 auto!important;min-width:0!important;width:auto!important}
#adminBody .adminVoiceLabRow #adminVoiceOpen{width:auto!important;max-width:220px;flex:0 0 auto}
.contactAdminMark{margin-top:2px!important}.shareAdminMark{margin-top:1px!important;font-size:9px!important}
.drawerRole{color:var(--skin-muted)!important}
.userSearchHint{margin:12px 0 4px;padding:13px 14px;border:1px solid var(--se-line)!important;border-radius:14px;background:var(--se-glass-soft)!important;color:var(--skin-muted)!important;font-size:12px;line-height:1.45}
.seThemeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.seThemeChoice{min-height:92px;text-align:left;border:1px solid var(--se-line)!important;border-radius:16px;background:var(--se-glass)!important;color:var(--skin-text)!important;padding:12px;box-shadow:none!important}
.seThemeChoice i{display:block;width:34px;height:8px;border-radius:8px;background:var(--theme-accent);margin-bottom:10px}
.seThemeChoice b,.seThemeChoice span{display:block}.seThemeChoice span{font-size:11px;opacity:.62;margin-top:4px}.seThemeChoice.on{border-color:var(--se-line-strong)!important;box-shadow:0 0 20px rgba(var(--skin-accent-rgb),.08)!important}
#chatScreen .thinking.thoughtStream.thoughtComplete{opacity:.90!important}
#chatScreen .thinking.thoughtStream.thoughtComplete .thoughtLine{color:#777e8f!important}
@media(max-width:560px){.seThemeGrid{grid-template-columns:1fr}}

/* DESIGN COMPLETION · 2026-09-26 */
#appShell>.nav .nicon svg,
#sideDrawer .drawerNav .drawerIcon svg{
  fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;overflow:visible!important;
}
#appShell>.nav .nicon svg *,#sideDrawer .drawerNav .drawerIcon svg *{vector-effect:non-scaling-stroke}
html[data-theme] .content>.list{
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html[data-theme] .personalChatGroup>.list{
  overflow:hidden!important;background:var(--se-glass)!important;border:1px solid var(--se-line)!important;
  border-radius:var(--se-radius-lg)!important;box-shadow:var(--se-shadow),var(--se-glow)!important;
}
html[data-theme] .personalChatGroup>.list .rowCard{
  border-radius:0!important;box-shadow:none!important;background:transparent!important;
}
html[data-theme] .personalChatGroup>.list .rowCard:not(:last-child){border-bottom:1px solid var(--se-line)!important}
html[data-theme] :is(.profileHubTile,.profilePublicCard,.profilePlaceholder,.publicationPreviewCard,.internalShareCard,
  .voiceNodeCard,.voiceNodePairBox,.voiceNodeWebBridgeCard,.vkConnectCard,.vkApiAccessCard,.vkCapabilityPanel,
  .vkStatusCard,.vkCommunityCard,.masterTerminalCard,.iconChoice,.skinChoice,.themeBtn){
  border:1px solid var(--se-line)!important;border-radius:var(--se-radius-lg)!important;
  background:var(--se-glass)!important;color:var(--skin-text)!important;
  box-shadow:inset 0 1px 0 var(--se-highlight),var(--se-shadow),var(--se-glow)!important;
}
html[data-theme] :is(.wsFileRow,.playlistTrackChoice,.wsSidePanel){
  border:1px solid var(--se-line)!important;border-radius:var(--se-radius-lg)!important;
  background:var(--se-glass)!important;color:var(--skin-text)!important;
  box-shadow:inset 0 1px 0 var(--se-highlight),0 10px 28px rgba(0,0,0,.18)!important;
}
html[data-theme] :is(.wsFileRow,.playlistTrackChoice,.profileHubTile):active{
  border-color:var(--se-line-strong)!important;transform:scale(.992)!important;
}
html[data-theme] :is(.profileHubIcon,.chatStateIcon,.homePublicationFileIcon,.internalShareIcon){
  border:1px solid var(--se-line)!important;border-radius:13px!important;
  background:rgba(var(--skin-accent-rgb),.075)!important;color:var(--skin-accent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
html[data-theme] :is(.chatStateIcon,.profileHubIcon){min-width:0!important;overflow:hidden!important}
html[data-theme] :is(.adminHomeMenu>button,.adminToolbar button,.adminThemeCard,.masterAppAction,.masterAppBack){
  border-radius:var(--se-radius-md)!important;
}
html[data-theme] :is(.chatRequests,.directAttachmentPreview,.voiceNodeWebState,.voiceNodeWebTranscript){
  border-radius:var(--se-radius-lg)!important;
}
html[data-theme] #chatScreen :is(.composer,.bubbleTools,.attachmentDownload) svg,
html[data-theme] #directChatScreen :is(.composer,.bubbleTools,.attachmentDownload,.genericFile) svg,
html[data-theme] :is(.liveVoiceBtn,.liveVoiceCore) svg{
  fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}
html[data-theme] :is(.attachmentDownload,.messageExpand,.back,.profileBack,.profileHubBack){
  border-radius:var(--se-radius-md)!important;
}
html[data-theme] :is(.homePublicationFile,.homePublicationAudio,.publicationDraftAudio,.publicationDraftFile,.internalShareTrack,
  .voiceNodeMeta span,.voiceNodeWebState,.voiceNodeWebTranscript){
  border-color:var(--se-line)!important;background:var(--se-glass-soft)!important;color:var(--skin-text)!important;
}
html[data-theme] :is(.homePublicationFile,.homePublicationAudio,.publicationDraftAudio,.publicationDraftFile,.internalShareTrack){
  border-radius:var(--se-radius-md)!important;
}
html[data-theme] :is(.iconChoice img,.profileHubAvatar img,.drawerHead img,.drawerBrand img){display:block!important}

/* PERSONAL CHAT GLASS — 2026-09-26 */
html[data-theme] #directChatScreen{
  --dm-out-a:color-mix(in srgb,var(--skin-accent2) 84%,#061022);
  --dm-out-b:color-mix(in srgb,var(--skin-accent) 38%,var(--skin-bg2));
  --dm-in-a:color-mix(in srgb,var(--skin-accent3) 58%,var(--skin-bg2));
  --dm-in-b:color-mix(in srgb,var(--skin-bg2) 82%,var(--skin-bg));
  --dm-edge-out:color-mix(in srgb,var(--skin-accent) 76%,white 10%);
  --dm-edge-in:color-mix(in srgb,var(--skin-accent3) 62%,white 8%);
  --dm-glow-out:color-mix(in srgb,var(--skin-accent2) 48%,transparent);
  --dm-glow-in:color-mix(in srgb,var(--skin-accent3) 42%,transparent);
}
html[data-theme] #directChatScreen #directMessages{
  padding:18px 20px 22px!important;gap:14px!important;
}
html[data-theme] #directChatScreen #directMessages>.bubble{
  position:relative!important;isolation:isolate!important;overflow:hidden!important;
  max-width:min(82%,640px)!important;padding:17px 18px 12px!important;
  border-radius:30px!important;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif!important;
  font-size:17px!important;line-height:1.34!important;letter-spacing:-.012em!important;
  backdrop-filter:blur(var(--se-user-blur)) saturate(1.28)!important;-webkit-backdrop-filter:blur(var(--se-user-blur)) saturate(1.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.20),0 12px 34px rgba(0,0,0,.30)!important;
}

html[data-theme] #directChatScreen #directMessages>.bubble.user{
  margin-left:auto!important;margin-right:0!important;
  background:
    linear-gradient(142deg,rgba(255,255,255,.15),transparent 34%),
    linear-gradient(154deg,var(--dm-out-a),var(--dm-out-b) 58%,color-mix(in srgb,var(--skin-accent3) 34%,#080a16))!important;
  border:1px solid var(--dm-edge-out)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 1px 0 0 rgba(255,255,255,.10),
    0 0 0 1px color-mix(in srgb,var(--skin-accent) 18%,transparent),
    0 0 20px var(--dm-glow-out),0 18px 42px rgba(0,0,0,.34)!important;
}
html[data-theme] #directChatScreen #directMessages>.bubble.assistant{
  margin-left:0!important;margin-right:auto!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.11),transparent 33%),
    linear-gradient(154deg,var(--dm-in-a),var(--dm-in-b) 62%,color-mix(in srgb,var(--skin-bg) 88%,#000))!important;
  border:1px solid var(--dm-edge-in)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 1px 0 0 rgba(255,255,255,.08),
    0 0 0 1px color-mix(in srgb,var(--skin-accent3) 14%,transparent),
    0 0 18px var(--dm-glow-in),0 18px 40px rgba(0,0,0,.32)!important;
}
html[data-theme] #directChatScreen #directMessages>.bubble::after{
  content:""!important;display:block!important;position:absolute!important;inset:1px 1px auto 1px!important;height:42%!important;
  border-radius:29px 29px 55% 55%!important;pointer-events:none!important;z-index:-1!important;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.015) 68%,transparent)!important;
  mix-blend-mode:screen!important;opacity:.78!important;
}

html[data-theme] #directChatScreen .bubble .messageText{display:block!important;position:relative!important;z-index:1!important}
html[data-theme] #directChatScreen .bubble .directTime{
  display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:5px!important;
  margin-top:5px!important;color:color-mix(in srgb,var(--skin-text) 70%,transparent)!important;
  font:500 12px/1.15 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif!important;
  letter-spacing:.01em!important;
}
html[data-theme] #directChatScreen .bubble .delivery{font-size:13px!important;color:color-mix(in srgb,var(--skin-accent) 88%,white 12%)!important;text-shadow:0 0 10px var(--dm-glow-out)!important}
html[data-theme] #directChatScreen .bubble.locked{
  background:linear-gradient(145deg,color-mix(in srgb,var(--skin-card2) 90%,#000),color-mix(in srgb,var(--skin-bg) 92%,#000))!important;
  border-color:color-mix(in srgb,var(--skin-muted) 24%,transparent)!important;box-shadow:0 10px 28px rgba(0,0,0,.30)!important;
}
html[data-theme] #directChatScreen .bubble.locked::after{opacity:.24!important}
html[data-theme] #directChatScreen .chatHead{
  background:linear-gradient(180deg,color-mix(in srgb,var(--skin-surface-strong) 90%,transparent),color-mix(in srgb,var(--skin-bg) 84%,transparent))!important;
  border-bottom:1px solid color-mix(in srgb,var(--skin-accent) 22%,var(--skin-border))!important;
  box-shadow:0 10px 30px rgba(0,0,0,.24),0 0 26px color-mix(in srgb,var(--skin-accent2) 10%,transparent)!important;
}
html[data-theme] #directChatScreen .secureNote{
  background:color-mix(in srgb,var(--skin-bg) 82%,transparent)!important;color:var(--skin-muted)!important;
  border-bottom:1px solid color-mix(in srgb,var(--skin-border) 76%,transparent)!important;
  backdrop-filter:blur(var(--se-user-blur))!important;-webkit-backdrop-filter:blur(var(--se-user-blur))!important;
}

html[data-theme] #directChatScreen .composer{
  padding:10px 14px calc(10px + var(--safe-b))!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--skin-surface-strong) 84%,transparent),color-mix(in srgb,var(--skin-bg) 96%,transparent))!important;
  border-top:1px solid color-mix(in srgb,var(--skin-accent) 24%,var(--skin-border))!important;
  box-shadow:0 -10px 32px rgba(0,0,0,.26),0 -4px 24px color-mix(in srgb,var(--skin-accent2) 10%,transparent)!important;
  backdrop-filter:blur(var(--se-user-blur)) saturate(1.25)!important;-webkit-backdrop-filter:blur(var(--se-user-blur)) saturate(1.25)!important;
}
html[data-theme] #directChatScreen .composer textarea{
  min-height:48px!important;border-radius:24px!important;padding:13px 16px!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--skin-input) 92%,transparent),color-mix(in srgb,var(--skin-card2) 72%,transparent))!important;
  border:1px solid color-mix(in srgb,var(--skin-accent) 28%,var(--skin-border))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.18)!important;
  caret-color:var(--skin-accent)!important;color:var(--skin-text)!important;
}
html[data-theme] #directChatScreen .composer textarea:focus{
  border-color:var(--skin-border-active)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px color-mix(in srgb,var(--skin-accent) 30%,transparent),0 0 24px color-mix(in srgb,var(--skin-accent2) 24%,transparent)!important;
}
html[data-theme] #directChatScreen .composer .round{
  width:48px!important;height:48px!important;border-radius:18px!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--skin-card2) 90%,transparent),color-mix(in srgb,var(--skin-surface) 84%,transparent))!important;
  border:1px solid color-mix(in srgb,var(--skin-accent) 24%,var(--skin-border))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.20)!important;color:var(--skin-text)!important;
}
html[data-theme] #directChatScreen .composer .round.send{background:linear-gradient(145deg,var(--skin-accent2),var(--skin-accent3))!important;box-shadow:0 0 20px var(--dm-glow-out),0 10px 26px rgba(0,0,0,.26)!important}

html[data-theme] #directChatScreen ::selection{background:color-mix(in srgb,var(--skin-accent2) 54%,transparent)!important;color:#fff!important}
html[data-theme] #directChatScreen .directAttachmentPreview,
html[data-theme] #directChatScreen .directReplyNotice,
html[data-theme] #directChatScreen .directEditNotice{
  background:color-mix(in srgb,var(--skin-card2) 86%,transparent)!important;
  border-color:color-mix(in srgb,var(--skin-accent) 28%,var(--skin-border))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.22)!important;
}
@media(max-width:700px){
  html[data-theme] #directChatScreen #directMessages{padding:14px 14px 18px!important;gap:12px!important}
  html[data-theme] #directChatScreen #directMessages>.bubble{max-width:88%!important;padding:15px 16px 11px!important;border-radius:26px!important;font-size:16px!important}
  html[data-theme] #directChatScreen #directMessages>.bubble::after{border-radius:25px 25px 52% 52%!important}
  html[data-theme] #directChatScreen .composer{padding-left:10px!important;padding-right:10px!important}
  html[data-theme] #directChatScreen .composer .round{width:46px!important;height:46px!important;border-radius:17px!important}
  html[data-theme] #directChatScreen .composer textarea{min-height:46px!important;border-radius:23px!important}
}
@media(prefers-reduced-motion:reduce){
  html[data-theme] #directChatScreen #directMessages>.bubble{transition:none!important;animation:none!important}
}

/* MASTER PHARAOH STATUS — exclusive MASTER badge */
html[data-theme] .masterPharaohMark{
  display:inline-flex!important;
  align-items:center!important;
  width:max-content!important;
  max-width:100%!important;
  padding:3px 8px!important;
  border:1px solid rgba(27,199,255,.72)!important;
  border-radius:8px!important;
  background:#030305!important;
  color:#1dc7ff!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  line-height:1!important;
  text-shadow:0 0 6px rgba(29,199,255,.78)!important;
  box-shadow:
    inset 0 0 10px rgba(18,199,255,.12),
    0 0 7px rgba(64,178,255,.62),
    0 0 16px rgba(35,125,255,.34)!important;
}
html[data-theme] .masterPharaohMark.hidden{display:none!important}
html[data-theme] .drawerAdminMark.masterPharaohMark{
  background:#020204!important;
  color:#1dc7ff!important;
  border-color:rgba(27,199,255,.76)!important;
  box-shadow:inset 0 0 10px rgba(18,199,255,.13),0 0 8px rgba(72,186,255,.68),0 0 18px rgba(35,125,255,.38)!important;
}

/* THEME PHOTO WALLPAPERS — 2026-09-26 */
html[data-theme] #appShell,
html[data-theme] #chatScreen,
html[data-theme] #directChatScreen,
html[data-theme] #systemChatScreen{
  background-color:var(--skin-bg)!important;
  background-image:
    linear-gradient(145deg,color-mix(in srgb,var(--skin-accent2) 10%,transparent),transparent 46%,color-mix(in srgb,var(--skin-accent3) 8%,transparent)),
    linear-gradient(180deg,rgba(0,0,0,var(--se-wallpaper-dim-top)),rgba(0,0,0,var(--se-wallpaper-dim-bottom))),
    var(--se-theme-wallpaper,none)!important;
  background-position:center,center,center!important;
  background-size:cover,cover,cover!important;
  background-repeat:no-repeat,no-repeat,no-repeat!important;
  background-attachment:scroll!important;
}
html[data-theme] .sideDrawer{
  background-color:var(--skin-bg2)!important;
  background-image:
    linear-gradient(110deg,rgba(0,0,0,var(--se-wallpaper-menu-dim)),rgba(0,0,0,var(--se-wallpaper-dim-bottom))),
    var(--se-theme-wallpaper,none)!important;
  background-position:center,center!important;
  background-size:cover,cover!important;
  background-repeat:no-repeat,no-repeat!important;
}

html[data-theme] .masterAppShell,
html[data-theme] .masterAppMount{
  background-color:var(--skin-bg)!important;
  background-image:
    linear-gradient(150deg,color-mix(in srgb,var(--skin-accent2) 12%,transparent),rgba(0,0,0,var(--se-wallpaper-dim-bottom))),
    var(--se-theme-wallpaper,none)!important;
  background-position:center,center!important;
  background-size:cover,cover!important;
  background-repeat:no-repeat,no-repeat!important;
}
html[data-theme="light-neon"] #appShell,
html[data-theme="light-neon"] #chatScreen,
html[data-theme="light-neon"] #directChatScreen{
  background-image:linear-gradient(180deg,rgba(12,31,56,var(--se-wallpaper-dim-top)),rgba(7,25,47,var(--se-wallpaper-dim-bottom))),var(--se-theme-wallpaper,none)!important;
}
html[data-theme="sys-crimson"] :is(#appShell,#chatScreen,#directChatScreen,#systemChatScreen,.masterAppMount){
  background-image:linear-gradient(155deg,rgba(0,100,150,.26),rgba(0,0,0,var(--se-wallpaper-dim-bottom))),var(--se-theme-wallpaper,none)!important;
}
html[data-theme="sys-gold"] :is(#appShell,#chatScreen,#directChatScreen,#systemChatScreen,.masterAppMount){
  background-image:linear-gradient(155deg,rgba(95,65,5,.22),rgba(0,0,0,var(--se-wallpaper-dim-bottom))),var(--se-theme-wallpaper,none)!important;
}

/* THEME TUNING SLIDERS — 2026-09-26 */
.skinTunePanel{
  padding:14px 14px 10px!important;
  border-top:1px solid var(--se-line)!important;
  background:color-mix(in srgb,var(--skin-bg) 34%,transparent)!important;
}
.skinTuneTitle{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:12px!important;margin-bottom:8px!important;
}
.skinTuneTitle>span{display:grid!important;gap:3px!important;min-width:0!important}
.skinTuneTitle b{font-size:14px!important}
.skinTuneTitle small{font-size:11px!important;color:var(--skin-muted)!important;line-height:1.35!important}
.skinTuneTitle .ghost{min-height:34px!important;padding:7px 10px!important;font-size:11px!important}
.skinTuneRow{
  padding:12px 0 10px!important;
  border-top:1px solid color-mix(in srgb,var(--skin-border) 65%,transparent)!important;
}
.skinTuneHead{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important}
.skinTuneHead>span{display:grid!important;gap:2px!important;min-width:0!important}
.skinTuneHead b{font-size:13px!important}
.skinTuneHead small{font-size:10px!important;line-height:1.3!important;color:var(--skin-muted)!important}
.skinTuneHead output{
  flex:0 0 auto!important;min-width:52px!important;text-align:right!important;
  color:var(--skin-accent)!important;font:750 12px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif!important;
}

.skinTuneRow input[type="range"]{
  width:100%!important;height:24px!important;margin:8px 0 0!important;padding:0!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
  accent-color:var(--skin-accent)!important;cursor:pointer!important;
  -webkit-appearance:none!important;appearance:none!important;
}
.skinTuneRow input[type="range"]::-webkit-slider-runnable-track{
  height:5px!important;border-radius:999px!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--skin-accent) 70%,var(--skin-accent2)),color-mix(in srgb,var(--skin-border) 75%,transparent))!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.34)!important;
}
.skinTuneRow input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none!important;appearance:none!important;
  width:20px!important;height:20px!important;margin-top:-7.5px!important;border-radius:50%!important;
  border:1px solid color-mix(in srgb,var(--skin-accent) 78%,white 12%)!important;
  background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--skin-accent) 38%,var(--skin-accent2) 100%)!important;
  box-shadow:0 0 0 4px rgba(var(--skin-accent-rgb),.10),0 0 15px rgba(var(--skin-accent-rgb),.32)!important;
}
.skinTuneRow input[type="range"]::-moz-range-track{
  height:5px!important;border-radius:999px!important;background:color-mix(in srgb,var(--skin-border) 75%,transparent)!important;
}
.skinTuneRow input[type="range"]::-moz-range-progress{
  height:5px!important;border-radius:999px!important;background:var(--skin-accent)!important;
}
.skinTuneRow input[type="range"]::-moz-range-thumb{
  width:20px!important;height:20px!important;border-radius:50%!important;border:1px solid var(--skin-accent)!important;
  background:var(--skin-accent)!important;box-shadow:0 0 14px rgba(var(--skin-accent-rgb),.30)!important;
}
/* TOP MENU v2 · 2026-09-26 */
:root{--app-fixed-topbar-height:48px;--ios-header:48px}
#appShell>.topbar{
  height:48px!important;min-height:48px!important;
  padding:2px max(12px,var(--safe-r)) 2px max(12px,var(--safe-l))!important;
  gap:10px!important;align-items:center!important;
}
#appShell .menuSystemButton{
  position:relative!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;
  height:36px!important;min-height:36px!important;margin:0!important;padding:0 2px!important;
  display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  overflow:visible!important;color:var(--skin-accent)!important;
}
#appShell .menuSystemButton::before,#appShell .menuSystemButton::after{display:none!important;content:none!important}
#appShell .menuSystemButton:active{transform:translateY(1px) scale(.96)!important}
#appShell .menuSystemButton[aria-expanded="true"]{transform:none!important}
#appShell .menuLabel{
  position:relative!important;z-index:1!important;
  color:var(--skin-accent)!important;font:600 15px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:.035em!important;
}
#appShell .menuGlyph{
  position:relative!important;z-index:1!important;
  width:24px!important;height:18px!important;flex:0 0 24px!important;
  display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:3px!important;
}
#appShell .menuGlyph i{
  display:block!important;width:2px!important;height:15px!important;flex:0 0 2px!important;
  margin:0!important;border:0!important;border-radius:2px!important;
  background:var(--skin-accent)!important;box-shadow:0 0 7px rgba(var(--skin-accent-rgb),.30)!important;
  transform:rotate(27deg)!important;transform-origin:center!important;
}
#appShell .menuGlyph i:nth-child(2){opacity:.82!important}
#appShell .menuGlyph i:nth-child(3){opacity:.64!important}
#appShell>.topbar>.statusDot{border-radius:50%!important}
@supports(-webkit-touch-callout:none){
  #appShell>.topbar{
    height:48px!important;min-height:48px!important;
    padding:2px 12px!important;
  }
  #mainContent.content{top:48px!important}
}
@media(max-width:390px){
  #appShell>.topbar{height:46px!important;min-height:46px!important;padding:1px 10px!important;gap:8px!important}
  #appShell .menuSystemButton{height:34px!important;min-height:34px!important;gap:7px!important}
  #appShell .menuGlyph{width:22px!important;flex-basis:22px!important}
  #appShell .menuGlyph i{height:14px!important}
  #mainContent.content{top:46px!important}
}

/* ADMIN global theme background editor */
.adminThemeBackgroundEditor{margin-top:18px;padding:16px;border:1px solid var(--skin-border);border-radius:18px;background:var(--skin-card);box-shadow:var(--skin-shadow)}
.adminThemeBackgroundEditor .adminInnerHeading{margin-bottom:12px}
.adminThemeBackgroundPreview{min-height:180px;border:1px solid var(--skin-border);border-radius:16px;overflow:hidden;background:var(--skin-card2);display:grid;place-items:center}
.adminThemeBackgroundPreview img{display:block;width:100%;height:clamp(180px,34vw,360px);object-fit:cover}
.adminThemeBackgroundEditor .publicationEditorActions{margin-top:12px;justify-content:flex-start}
@media(max-width:620px){.adminThemeBackgroundPreview img{height:220px}.adminThemeBackgroundEditor{padding:12px}}

/* iOS music player · volumetric glass */
html[data-theme] .musicHero,
html[data-theme] .musicTrack,
html[data-theme] .musicPlaylist,
html[data-theme] .musicPlayerDock{
  background:
    linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035) 42%,rgba(var(--skin-accent-rgb),.055) 100%)!important;
  border:1px solid rgba(var(--skin-accent-rgb),.22)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 14px 36px rgba(0,0,0,.30),
    0 0 28px rgba(var(--skin-accent-rgb),.07)!important;
  backdrop-filter:blur(24px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(145%)!important;
}
html[data-theme] .musicPlayerDock{
  border-radius:24px!important;
  overflow:hidden!important;
}
html[data-theme] .musicPlayerDock::before{
  content:"";
  position:absolute;
  left:7%;right:7%;top:1px;height:38%;
  border-radius:999px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));
  opacity:.72;
}
html[data-theme] .musicNote,
html[data-theme] .musicPlaylistIcon,
html[data-theme] .musicPlayerArtwork{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(var(--skin-accent-rgb),.30)!important;
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.34),transparent 34%),
    linear-gradient(145deg,rgba(var(--skin-accent-rgb),.34),rgba(var(--skin-accent2-rgb),.16))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 8px 22px rgba(0,0,0,.24),
    0 0 20px rgba(var(--skin-accent-rgb),.16)!important;
  backdrop-filter:blur(18px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%)!important;
}
html[data-theme] .musicPlay,
html[data-theme] .musicControl,
html[data-theme] .musicPlaylistActions button{
  border:1px solid rgba(var(--skin-accent-rgb),.24)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.045) 48%,rgba(var(--skin-accent-rgb),.07))!important;
  color:var(--skin-text)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 7px 18px rgba(0,0,0,.24),
    0 0 14px rgba(var(--skin-accent-rgb),.06)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
}
html[data-theme] .musicPlay,
html[data-theme] .musicControl{
  border-radius:999px!important;
}
html[data-theme] .musicControl.main{
  transform:translateY(-1px);
  background:
    radial-gradient(circle at 34% 22%,rgba(255,255,255,.48),transparent 30%),
    linear-gradient(145deg,rgba(var(--skin-accent-rgb),.82),rgba(var(--skin-accent2-rgb),.78))!important;
  color:var(--skin-bg)!important;
  border-color:rgba(255,255,255,.28)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    0 10px 26px rgba(0,0,0,.30),
    0 0 24px rgba(var(--skin-accent-rgb),.30)!important;
}
html[data-theme] .musicPlay:active,
html[data-theme] .musicControl:active,
html[data-theme] .musicPlaylistActions button:active{
  transform:translateY(1px) scale(.97);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.20)!important;
}
html[data-theme] .musicFloat{
  width:68px!important;
  height:68px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.24)!important;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.48),transparent 28%),
    linear-gradient(145deg,rgba(var(--skin-accent-rgb),.32),rgba(var(--skin-accent2-rgb),.17) 55%,rgba(5,10,20,.38))!important;
  color:var(--skin-text)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -5px 14px rgba(0,0,0,.16),
    0 14px 32px rgba(0,0,0,.36),
    0 0 30px rgba(var(--skin-accent-rgb),.24)!important;
  backdrop-filter:blur(24px) saturate(170%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(170%)!important;
}
html[data-theme] .musicFloat::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
}
html[data-theme] .musicFloat span{
  position:relative;
  z-index:1;
  font-size:29px!important;
  line-height:1;
  text-shadow:0 0 18px rgba(var(--skin-accent-rgb),.55);
  transform:translateY(-1px);
}
html[data-theme] .musicTimeline input[type="range"],
html[data-theme] .musicVolume input[type="range"]{
  accent-color:var(--skin-accent);
}
@media(max-width:620px){
  html[data-theme] .musicPlayerDock{border-radius:22px!important;padding:12px 13px 11px!important}
  html[data-theme] .musicFloat{width:64px!important;height:64px!important}
}

html[data-theme] .musicHeroActions :is(.primary,.secondary),
html[data-theme] :is(.musicShare,.musicDelete){
  border:1px solid rgba(var(--skin-accent-rgb),.22)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035),rgba(var(--skin-accent-rgb),.055))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 7px 18px rgba(0,0,0,.20)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
}

/* iOS MUSIC GLASS v2 · native player surfaces · 2026-09-28 */
@supports(-webkit-touch-callout:none){
  html[data-theme] .musicPlayerDock{
    isolation:isolate!important;
    background:
      radial-gradient(circle at 22% 0%,rgba(255,255,255,.18),transparent 34%),
      linear-gradient(145deg,rgba(255,255,255,.115),rgba(255,255,255,.032) 48%,rgba(var(--skin-accent-rgb),.09))!important;
    border:1px solid rgba(255,255,255,.16)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -12px 28px rgba(0,0,0,.13),
      0 18px 46px rgba(0,0,0,.38),
      0 0 32px rgba(var(--skin-accent-rgb),.12)!important;
    -webkit-backdrop-filter:blur(30px) saturate(175%)!important;
    backdrop-filter:blur(30px) saturate(175%)!important;
  }
  html[data-theme] .musicPlayerDock::before{
    left:5%!important;right:5%!important;top:0!important;height:46%!important;
    background:linear-gradient(180deg,rgba(255,255,255,.21),rgba(255,255,255,.035) 45%,transparent)!important;
    opacity:.78!important;
  }
  html[data-theme] .musicFloat{
    width:74px!important;height:74px!important;
    transform:translateZ(0);
    border:1px solid rgba(255,255,255,.30)!important;
    background:
      radial-gradient(circle at 30% 20%,rgba(255,255,255,.72) 0 7%,rgba(255,255,255,.26) 8% 23%,transparent 38%),
      radial-gradient(circle at 72% 76%,rgba(var(--skin-accent-rgb),.28),transparent 46%),
      linear-gradient(145deg,rgba(var(--skin-accent-rgb),.42),rgba(var(--skin-accent2-rgb),.20) 56%,rgba(4,7,14,.45))!important;
    box-shadow:
      inset 0 2px 2px rgba(255,255,255,.50),
      inset 0 -10px 20px rgba(0,0,0,.22),
      0 18px 40px rgba(0,0,0,.42),
      0 0 34px rgba(var(--skin-accent-rgb),.30)!important;
    -webkit-backdrop-filter:blur(30px) saturate(190%)!important;
    backdrop-filter:blur(30px) saturate(190%)!important;
  }
  html[data-theme] .musicFloat::before{
    content:"";position:absolute;inset:4px 9px auto 9px;height:24px;border-radius:999px;
    background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));
    filter:blur(.2px);pointer-events:none;
  }
  html[data-theme] .musicFloat::after{
    inset:8px!important;
    border:1px solid rgba(255,255,255,.19)!important;
    box-shadow:inset 0 0 18px rgba(255,255,255,.055)!important;
  }
  html[data-theme] .musicFloat span{
    font-size:31px!important;
    text-shadow:0 1px 0 rgba(255,255,255,.26),0 0 20px rgba(var(--skin-accent-rgb),.65)!important;
  }
  html[data-theme] .musicControl,
  html[data-theme] .musicPlay{
    min-width:42px;min-height:42px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -5px 10px rgba(0,0,0,.10),
      0 8px 20px rgba(0,0,0,.27)!important;
  }
  html[data-theme] .musicControl.main{
    min-width:54px!important;min-height:54px!important;
    font-size:20px!important;
    box-shadow:
      inset 0 2px 1px rgba(255,255,255,.60),
      inset 0 -7px 14px rgba(0,0,0,.13),
      0 12px 30px rgba(0,0,0,.34),
      0 0 30px rgba(var(--skin-accent-rgb),.34)!important;
  }
  html[data-theme] .musicHero,
  html[data-theme] .musicTrack,
  html[data-theme] .musicPlaylist{
    -webkit-backdrop-filter:blur(26px) saturate(165%)!important;
    backdrop-filter:blur(26px) saturate(165%)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.19),
      inset 0 -1px 0 rgba(255,255,255,.03),
      0 12px 30px rgba(0,0,0,.29)!important;
  }
  html[data-theme] .musicFloat:active{
    transform:translateY(2px) scale(.96)!important;
    box-shadow:inset 0 7px 18px rgba(0,0,0,.20),0 8px 20px rgba(0,0,0,.30)!important;
  }
  @media(max-width:390px){
    html[data-theme] .musicFloat{width:68px!important;height:68px!important}
  }
}