/* Everlight — MOBILE PROFILE / DISCORD-LIKE FIX
   Add this AFTER all existing enhancements.css rules.
*/

@media (max-width: 660px) {
  /* The profile screen owns the viewport. The normal bottom dock must not
     sit on top of profile content or its buttons. */
  body:has(.profile-view[aria-hidden="false"]) .mobile-dock,
  body:has(.profile-view:not([aria-hidden="true"])) .mobile-dock {
    display: none !important;
  }

  body:has(.profile-view[aria-hidden="false"]) {
    overflow: hidden !important;
    height: 100dvh !important;
  }

  .profile-view {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: env(safe-area-inset-top) 0 0 !important;
    margin: 0 !important;
    overflow: hidden auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: #000 !important;
    z-index: 5000 !important;
  }

  .profile-view-inner {
    width: 100% !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important;
  }

  /* Discord-like profile card: clean cover, overlapping avatar, compact
     identity block, then readable profile information. */
  .profile-view-cover {
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .profile-view-card {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin: 0 12px 24px !important;
    padding: 74px 20px 28px !important;
    border-radius: 0 0 18px 18px !important;
    box-sizing: border-box !important;
    background: #080b0c !important;
  }

  .profile-view-identity {
    display: block !important;
    position: relative !important;
    margin: 0 !important;
  }

  .profile-view-avatar,
  .profile-view .avatar {
    width: 112px !important;
    height: 112px !important;
    position: absolute !important;
    top: -130px !important;
    left: 0 !important;
    z-index: 5 !important;
    border: 6px solid #000 !important;
  }

  .profile-view-name {
    margin: 0 !important;
    font-size: 38px !important;
    line-height: 1.05 !important;
  }

  .profile-view-handle {
    margin-top: 8px !important;
    font-size: 15px !important;
  }

  /* Sections behave like Discord profile panels instead of one long loose
     text block. */
  .profile-view-card > section,
  .profile-view-section,
  .profile-view-meta,
  .profile-customize-card {
    margin-top: 22px !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--line) !important;
  }

  .profile-view-card h3,
  .profile-view-card .section-title {
    font-size: 11px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
  }

  .profile-view-card p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Settings/customization card must never be hidden behind a fixed element. */
  .profile-customize-card,
  .profile-customizer-launch,
  .profile-customize-button {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .profile-customize-button {
    min-height: 52px !important;
    margin-top: 14px !important;
  }

  /* If the profile view has its own bottom action, keep it in normal flow.
     Do not use position:fixed here — that was causing the content to move
     underneath the viewport/dock on mobile. */
  .profile-view-card .profile-customize-button,
  .profile-view-card .profile-customize-card button {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }

  /* Remove the pale/white home-indicator-looking artifact from the app UI. */
  .profile-view::after,
  .profile-view-inner::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 380px) {
  .profile-view-card {
    width: calc(100% - 16px) !important;
    margin-inline: 8px !important;
    padding-inline: 16px !important;
  }

  .profile-view-name {
    font-size: 34px !important;
  }
}


/* =========================================================
   HEADER FINAL — CENTER BRAND TOGGLES BLUE / GOLD
   ========================================================= */

.topbar{
  position:sticky !important;
  top:0 !important;
  z-index:3000 !important;
  height:72px !important;
  min-height:72px !important;
  width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:14px !important;
  padding:0 clamp(16px,3vw,42px) !important;
  overflow:visible !important;
  isolation:isolate !important;
}

.topbar .domain{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:start !important;
  min-width:0 !important;
  max-width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}

.topbar .domain a{
  flex:0 1 auto !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.topbar .header-logo{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:center !important;
  align-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  width:max-content !important;
  height:52px !important;
  padding:0 6px !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  color:inherit !important;
  cursor:pointer !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  position:relative !important;
  z-index:30 !important;
}

.topbar .header-logo-image{
  width:29px !important;
  height:29px !important;
  min-width:29px !important;
  min-height:29px !important;
  max-width:29px !important;
  max-height:29px !important;
  object-fit:contain !important;
  display:block !important;
}

.topbar .logo-word{
  font:600 24px/1 "Playfair Display",serif !important;
  white-space:nowrap !important;
  color:var(--accent) !important;
  transition:color .18s ease !important;
}

.topbar .hub-nav{
  grid-column:3 !important;
  grid-row:1 !important;
  justify-self:end !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:7px !important;
  min-width:0 !important;
  white-space:nowrap !important;
  position:relative !important;
  z-index:40 !important;
}

.topbar .hub-nav-item{white-space:nowrap !important;flex:0 0 auto !important}

.topbar .topbar-theme-toggle{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  transform:none !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  flex:0 0 38px !important;
  margin:0 0 0 2px !important;
  padding:3px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}

.theme-split-switch{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  border-radius:50% !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

.theme-switch-half{
  width:50% !important;
  flex:0 0 50% !important;
  height:100% !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  font:500 12px/1 Arial,sans-serif !important;
}

.theme-switch-aqua{background:#8BADCC !important;color:#071015 !important}
.theme-switch-gold{background:#C77D02 !important;color:#160d00 !important}

body:not(.sun-mode) .header-logo-image{filter:none !important}
body.sun-mode .header-logo-image{filter:none !important}

@media(max-width:960px){
  .topbar{
    height:66px !important;
    min-height:66px !important;
    padding-inline:14px !important;
  }
  .topbar .header-logo-image{width:26px !important;height:26px !important;min-width:26px !important;min-height:26px !important}
  .topbar .logo-word{font-size:21px !important}
  .topbar .topbar-theme-toggle{width:36px !important;height:36px !important;min-width:36px !important;min-height:36px !important;flex-basis:36px !important}
}

@media(max-width:660px){
  .topbar{
    position:sticky !important;
    top:0 !important;
    height:62px !important;
    min-height:62px !important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    padding:0 9px !important;
    gap:6px !important;
  }

  .topbar .domain{
    grid-column:1 !important;
    grid-row:1 !important;
    max-width:100% !important;
    gap:4px !important;
    font-size:7px !important;
  }

  .topbar .domain a{
    max-width:105px !important;
  }

  .topbar .domain a:last-of-type{
    max-width:46px !important;
  }

  .topbar .header-logo{
    grid-column:2 !important;
    grid-row:1 !important;
    width:max-content !important;
    max-width:none !important;
    height:48px !important;
    gap:5px !important;
  }

  .topbar .header-logo-image{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    min-height:24px !important;
  }

  .topbar .logo-word{font-size:19px !important}

  .topbar .hub-nav{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
    gap:5px !important;
  }

  .topbar .hub-nav-item{
    display:none !important;
  }

  .topbar .account-wrap{display:none !important}

  .topbar .topbar-theme-toggle{
    display:grid !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    flex-basis:34px !important;
  }
}

@media(max-width:380px){
  .topbar .domain a{max-width:84px !important}
  .topbar .domain a:last-of-type{max-width:40px !important}
  .topbar .logo-word{font-size:17px !important}
  .topbar .header-logo-image{width:22px !important;height:22px !important;min-width:22px !important;min-height:22px !important}
  .topbar .topbar-theme-toggle{width:32px !important;height:32px !important;min-width:32px !important;min-height:32px !important;flex-basis:32px !important}
}


/* =========================================================
   EVERLIGHT — MOBILE HEADER + MESSAGES FIX
   ========================================================= */

/* Global hard stop for horizontal overflow. */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

/* ---------------------------------------------------------
   MOBILE HEADER
   --------------------------------------------------------- */

@media (max-width:660px){

  .topbar{
    position:sticky !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
    height:64px !important;
    min-height:64px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    align-items:center !important;
    padding:0 10px !important;
    gap:6px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    isolation:isolate !important;
  }

  .topbar .domain{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:start !important;
    min-width:0 !important;
    width:100% !important;
    max-width:none !important;
    display:flex !important;
    gap:5px !important;
    align-items:center !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }

  .topbar .domain a{
    display:block !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:8px !important;
  }

  .topbar .domain a:first-of-type{
    flex:1 1 auto !important;
  }

  .topbar .domain a:last-of-type{
    flex:0 0 auto !important;
    max-width:56px !important;
  }

  .topbar .domain span{
    flex:0 0 auto !important;
  }

  /* The centered brand is independent of the domain and right controls. */
  .topbar .header-logo{
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:center !important;
    align-self:center !important;
    width:max-content !important;
    max-width:128px !important;
    height:64px !important;
    margin:0 !important;
    padding:0 !important;
    gap:4px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    z-index:20 !important;
  }

  .topbar .header-logo-image{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    min-height:24px !important;
    max-width:24px !important;
    max-height:24px !important;
    flex:0 0 24px !important;
  }

  .topbar .logo-word{
    font-size:18px !important;
    line-height:1 !important;
  }

  /* Right side: only the theme switch remains on mobile. */
  .topbar .hub-nav{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  .topbar .hub-nav > .hub-nav-item,
  .topbar .hub-nav > .account-wrap{
    display:none !important;
  }

  .topbar .topbar-theme-toggle{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    flex:0 0 36px !important;
    margin:0 !important;
    padding:3px !important;
    border-radius:50% !important;
  }

  .topbar .theme-split-switch{
    width:100% !important;
    height:100% !important;
  }

  .topbar .theme-switch-half{
    width:50% !important;
    flex:0 0 50% !important;
    height:100% !important;
    font-size:11px !important;
  }

  /* -------------------------------------------------------
     MESSAGES VIEW — REAL MOBILE CHAT
     ------------------------------------------------------- */

  .messages-view{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:100vw !important;
    max-height:100dvh !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    overscroll-behavior:contain !important;
    background:#000 !important;
    z-index:5000 !important;
  }

  .messages-view-inner{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    overflow:hidden !important;
  }

  .messages-view-header{
    height:auto !important;
    min-height:66px !important;
    padding:10px 14px !important;
    padding-top:calc(10px + env(safe-area-inset-top)) !important;
    box-sizing:border-box !important;
    background:#000 !important;
    border-bottom:1px solid #202729 !important;
  }

  .messages-view-header h1{
    margin:0 !important;
    font-size:21px !important;
    line-height:1.1 !important;
  }

  .messages-view-header .eyebrow{
    font-size:8px !important;
  }

  .messages-close{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border-radius:10px !important;
  }

  .messages-layout{
    min-height:0 !important;
    width:100% !important;
    height:auto !important;
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    grid-template-columns:1fr !important;
    overflow:hidden !important;
  }

  /* Contacts become a compact, horizontally scrollable conversation bar. */
  .message-contacts{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    max-height:92px !important;
    padding:9px 10px !important;
    border-right:0 !important;
    border-bottom:1px solid #202729 !important;
    background:#050707 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .message-contacts-title{
    margin:0 0 6px !important;
    font-size:8px !important;
  }

  .message-contacts-list{
    display:flex !important;
    gap:7px !important;
    width:max-content !important;
    min-width:100% !important;
    overflow:visible !important;
  }

  .message-contact{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:120px !important;
    max-width:180px !important;
    min-height:38px !important;
    padding:6px 9px !important;
    border:1px solid #273132 !important;
    border-radius:9px !important;
    background:#080b0c !important;
  }

  .message-contact.active{
    border-color:rgba(139,173,204,.5) !important;
    background:rgba(139,173,204,.08) !important;
  }

  .message-contact .avatar{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
  }

  .message-contact-copy strong{
    font-size:9px !important;
  }

  .message-contact-copy small{
    font-size:7px !important;
  }

  .message-chat{
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    overflow:hidden !important;
    background:#000 !important;
  }

  .message-chat-header{
    min-height:58px !important;
    padding:10px 14px !important;
    border-bottom:1px solid #202729 !important;
  }

  .message-chat-header span{
    font-size:7px !important;
  }

  .message-chat-header h2{
    margin:4px 0 0 !important;
    font-size:17px !important;
  }

  .dm-list{
    min-height:0 !important;
    height:auto !important;
    padding:14px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }

  /* The recipient MUST remain visible so a new conversation can be started. */
  .message-compose{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 42px !important;
    gap:7px !important;
    align-items:center !important;
    width:100% !important;
    min-height:62px !important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    border-top:1px solid #202729 !important;
    background:#050707 !important;
  }

  .message-compose #dmRecipient{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    height:42px !important;
    padding:0 10px !important;
    border:1px solid #293334 !important;
    border-radius:9px !important;
    background:#080b0c !important;
    color:#e8e7df !important;
    font:9px "DM Mono",monospace !important;
  }

  .message-compose #dmBody{
    width:100% !important;
    min-width:0 !important;
    height:42px !important;
    padding:0 10px !important;
    border:1px solid #293334 !important;
    border-radius:9px !important;
    background:#080b0c !important;
    color:#e8e7df !important;
    font:10px Manrope,sans-serif !important;
  }

  .message-compose button{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    border-radius:9px !important;
  }

  .chat-empty{
    min-height:140px !important;
    display:grid !important;
    place-items:center !important;
    text-align:center !important;
    padding:20px !important;
  }

  /* Fullscreen messages own the screen; do not let the global dock overlap it. */
  body.messages-view-open .mobile-dock,
  body.messages-view-open .site-footer{
    display:none !important;
  }
}

/* Small phones: stack message composer fields vertically to avoid squeezing. */
@media(max-width:390px){
  .topbar{
    padding-inline:8px !important;
  }

  .topbar .domain{
    gap:4px !important;
  }

  .topbar .domain a{
    font-size:7px !important;
  }

  .topbar .header-logo{
    max-width:118px !important;
  }

  .topbar .header-logo-image{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    max-width:22px !important;
    max-height:22px !important;
    flex-basis:22px !important;
  }

  .topbar .logo-word{
    font-size:17px !important;
  }

  .topbar .topbar-theme-toggle{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    flex-basis:34px !important;
  }

  .message-compose{
    grid-template-columns:minmax(0,1fr) 42px !important;
  }

  .message-compose #dmRecipient{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  .message-compose #dmBody{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  .message-compose button{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
  }
}


/* =========================================================
   MOBILE HEADER — TRUE VIEWPORT TOP FIX
   ========================================================= */

@media (max-width:660px){

  html{
    min-height:100% !important;
    overflow-x:hidden !important;
    background:#000 !important;
  }

  body{
    min-height:100dvh !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    overflow-x:hidden !important;
    background:#000 !important;
  }

  /* The header must belong to the viewport, not the scrolling document. */
  .topbar{
    position:fixed !important;
    top:env(safe-area-inset-top, 0px) !important;
    left:0 !important;
    right:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    height:64px !important;
    min-height:64px !important;
    margin:0 !important;
    padding:0 10px !important;
    box-sizing:border-box !important;
    z-index:99999 !important;
    transform:none !important;
    will-change:transform !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    contain:layout paint style !important;
    overflow:hidden !important;
  }

  /* Reserve the exact header space in the normal page. */
  .layout{
    padding-top:calc(64px + env(safe-area-inset-top, 0px)) !important;
  }

  main#feed{
    padding-top:0 !important;
  }

  /* Never let a scrolling ancestor clip the fixed header. */
  .grain{
    pointer-events:none !important;
  }

  /* The fixed header is not part of mobile fullscreen views. */
  .messages-view,
  .profile-view,
  .profile-customizer{
    z-index:100000 !important;
  }

  body.messages-view-open .topbar,
  body.profile-view-open .topbar,
  body.profile-customizer-open .topbar{
    display:none !important;
  }

  /* Prevent the browser from using scroll chaining / elastic movement
     as the only way to reveal the header. */
  .layout,
  main,
  body{
    overscroll-behavior-y:none !important;
  }

  /* iOS Safari safe area: keep visible content below the status area. */
  @supports (-webkit-touch-callout:none){
    .topbar{
      top:env(safe-area-inset-top, 0px) !important;
    }

    .layout{
      padding-top:calc(64px + env(safe-area-inset-top, 0px)) !important;
    }
  }
}

@media (max-width:390px){
  .topbar{
    height:60px !important;
    min-height:60px !important;
  }

  .layout{
    padding-top:calc(60px + env(safe-area-inset-top, 0px)) !important;
  }
}


/* =========================================================
   MOBILE — REMOVE WHITE GAP + FIX AI TEXT BELOW DOCK
   ========================================================= */

@media (max-width:660px){

  /* The floating island is the only visual bottom control. */
  .mobile-dock{
    position:fixed !important;
    left:14px !important;
    right:14px !important;
    bottom:calc(34px + env(safe-area-inset-bottom, 0px)) !important;
    width:auto !important;
    height:56px !important;
    min-height:56px !important;
    margin:0 !important;
    background:#050707 !important;
    border:1px solid rgba(139,173,204,.16) !important;
    border-radius:17px !important;
    box-shadow:0 10px 30px rgba(0,0,0,.55) !important;
    z-index:1600 !important;
  }

  /* Kill every possible strip/background under the island. */
  html,
  body,
  .layout,
  main,
  .right-rail,
  .site-footer{
    background:#000 !important;
  }

  .site-footer{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:auto !important;
    min-height:28px !important;
    margin:0 !important;
    padding:0 16px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    border:0 !important;
    border-top:0 !important;
    background:#000 !important;
    color:#4f5957 !important;
    text-align:center !important;
    font:7px/1.35 "DM Mono",monospace !important;
    letter-spacing:.045em !important;
    z-index:1590 !important;
    box-shadow:none !important;
    pointer-events:none !important;
  }

  .site-footer p{
    margin:0 !important;
    padding:0 !important;
    color:#4f5957 !important;
  }

  /* Make the footer sit directly below the floating island. */
  .site-footer{
    transform:none !important;
  }

  /* No extra body padding that visually becomes a white/grey band. */
  body{
    padding-bottom:0 !important;
  }

  /* Keep feed/content above the bottom controls without painting a strip. */
  #feed,
  .layout{
    padding-bottom:96px !important;
  }

  /* On fullscreen screens there is no dock or AI footer. */
  body.messages-view-open .mobile-dock,
  body.profile-view-open .mobile-dock,
  body.profile-customizer-open .mobile-dock,
  body.messages-view-open .site-footer,
  body.profile-view-open .site-footer,
  body.profile-customizer-open .site-footer{
    display:none !important;
  }
}

@media(max-width:390px){
  .mobile-dock{
    bottom:calc(31px + env(safe-area-inset-bottom, 0px)) !important;
    height:54px !important;
    min-height:54px !important;
  }

  .site-footer{
    min-height:25px !important;
    font-size:6.5px !important;
    line-height:1.25 !important;
  }

  #feed,
  .layout{
    padding-bottom:90px !important;
  }
}


/* =========================================================
   MOBILE PROFILE SETTINGS — NO WHITE FLASH / REAL OPEN STATE
   ========================================================= */

.profile-customizer{
  background:#000 !important;
  color:#e8e7df !important;
}

.profile-customizer[aria-hidden="true"]{
  display:none !important;
}

.profile-customizer[aria-hidden="false"],
.profile-customizer.open{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

.profile-customizer-backdrop{
  background:#000 !important;
  opacity:1 !important;
}

.profile-customizer-dialog{
  position:relative !important;
  z-index:2 !important;
  background:#000 !important;
  color:#e8e7df !important;
}

@media(max-width:660px){
  .profile-customizer{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:100vw !important;
    max-height:100dvh !important;
    overflow:hidden !important;
    background:#000 !important;
    z-index:99999 !important;
    margin:0 !important;
    padding:0 !important;
  }

  .profile-customizer-dialog{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    background:#000 !important;
  }

  .profile-customizer-header{
    position:relative !important;
    z-index:10 !important;
    background:#000 !important;
    border-bottom:1px solid #202729 !important;
    padding-top:calc(12px + env(safe-area-inset-top,0px)) !important;
  }

  .profile-customizer-body{
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    background:#000 !important;
  }

  .profile-customizer-footer{
    position:relative !important;
    z-index:10 !important;
    background:#050707 !important;
    border-top:1px solid #202729 !important;
    padding-bottom:calc(9px + env(safe-area-inset-bottom,0px)) !important;
  }

  /* No mobile dock or page footer over the editor. */
  body.profile-customizer-open .mobile-dock,
  body.profile-customizer-open .site-footer{
    display:none !important;
  }

  body.profile-customizer-open{
    background:#000 !important;
    overflow:hidden !important;
    height:100dvh !important;
  }
}


/* =========================================================
   MOBILE MESSAGES — SOLID FULLSCREEN / NO FLASH FIX
   ========================================================= */

.messages-view{
  background:#000 !important;
  color:#e8e7df !important;
}

.messages-view[aria-hidden="true"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.messages-view.open,
.messages-view[aria-hidden="false"]{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:100vw !important;
  max-height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  z-index:99998 !important;
  overflow:hidden !important;
  background:#000 !important;
}

@media(max-width:660px){

  body.messages-view-open{
    overflow:hidden !important;
    width:100% !important;
    height:100dvh !important;
    background:#000 !important;
  }

  body.messages-view-open .topbar{
    display:none !important;
  }

  .messages-view.open .messages-view-inner,
  .messages-view[aria-hidden="false"] .messages-view-inner{
    position:relative !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    overflow:hidden !important;
    background:#000 !important;
  }

  .messages-view.open .messages-view-header,
  .messages-view[aria-hidden="false"] .messages-view-header{
    position:relative !important;
    z-index:10 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    width:100% !important;
    min-height:66px !important;
    height:auto !important;
    margin:0 !important;
    padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px !important;
    box-sizing:border-box !important;
    border-bottom:1px solid #202729 !important;
    background:#000 !important;
  }

  .messages-view-header h1{
    margin:0 !important;
    font-size:20px !important;
    line-height:1.1 !important;
  }

  .messages-view-header .eyebrow{
    margin:0 0 5px !important;
    font-size:8px !important;
  }

  .messages-close{
    display:grid !important;
    place-items:center !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border:1px solid #293334 !important;
    border-radius:9px !important;
    background:#080b0c !important;
    color:#e8e7df !important;
    font-size:22px !important;
  }

  .messages-layout{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    overflow:hidden !important;
  }

  .message-contacts{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    max-height:90px !important;
    padding:8px 10px !important;
    box-sizing:border-box !important;
    border-right:0 !important;
    border-bottom:1px solid #202729 !important;
    background:#050707 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .message-contacts-title{
    margin:0 0 6px !important;
    font-size:8px !important;
  }

  .message-contacts-list{
    display:flex !important;
    gap:7px !important;
    width:max-content !important;
    min-width:100% !important;
    overflow:visible !important;
  }

  .message-chat{
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
    background:#000 !important;
  }

  .message-chat-header{
    min-height:58px !important;
    padding:10px 14px !important;
    box-sizing:border-box !important;
    border-bottom:1px solid #202729 !important;
    background:#000 !important;
  }

  .message-chat-header span{
    font-size:7px !important;
  }

  .message-chat-header h2{
    margin:4px 0 0 !important;
    font-size:17px !important;
  }

  .dm-list{
    min-width:0 !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:14px !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    background:#000 !important;
  }

  .message-compose{
    width:100% !important;
    min-height:62px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) 42px !important;
    gap:7px !important;
    align-items:center !important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px)) !important;
    box-sizing:border-box !important;
    border-top:1px solid #202729 !important;
    background:#050707 !important;
    position:relative !important;
    bottom:auto !important;
  }

  .message-compose #dmRecipient,
  .message-compose #dmBody{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    height:42px !important;
    box-sizing:border-box !important;
    border:1px solid #293334 !important;
    border-radius:9px !important;
    background:#080b0c !important;
    color:#e8e7df !important;
    padding:0 10px !important;
  }

  .message-compose #dmRecipient{
    font:9px "DM Mono",monospace !important;
  }

  .message-compose #dmBody{
    font:10px Manrope,sans-serif !important;
  }

  .message-compose button{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    border-radius:9px !important;
    display:grid !important;
    place-items:center !important;
  }

  body.messages-view-open .mobile-dock,
  body.messages-view-open .site-footer{
    display:none !important;
  }
}

@media(max-width:390px){
  .message-compose{
    grid-template-columns:minmax(0,1fr) 42px !important;
  }

  .message-compose #dmRecipient{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  .message-compose #dmBody{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  .message-compose button{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
  }
}

/* =========================================================
   HEADER / TIME BAR — FINAL ALIGNMENT + MODE SWITCH
   ========================================================= */

/* Right-side mode control: no mysterious speech bubble. */
.topbar .topbar-theme-toggle{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  width:76px !important;
  height:36px !important;
  min-width:76px !important;
  min-height:36px !important;
  padding:3px 6px !important;
  border:1px solid rgba(139,173,204,.24) !important;
  border-radius:999px !important;
  background:#070909 !important;
  box-shadow:none !important;
  overflow:hidden !important;
  color:#8BADCC !important;
}

.topbar .theme-mode-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:100% !important;
  padding:0 3px !important;
  color:#7f8986 !important;
  font:8px/1 "DM Mono",monospace !important;
  letter-spacing:.12em !important;
  pointer-events:none !important;
}

.topbar .theme-split-switch{
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
  display:flex !important;
  overflow:hidden !important;
  border-radius:50% !important;
  pointer-events:none !important;
}

.topbar .theme-switch-half{
  width:50% !important;
  flex:0 0 50% !important;
  height:100% !important;
  display:grid !important;
  place-items:center !important;
  font:500 10px/1 Arial,sans-serif !important;
}

.topbar .theme-switch-aqua{background:#8BADCC !important;color:#071015 !important}
.topbar .theme-switch-gold{background:#C77D02 !important;color:#140c00 !important}

.topbar .topbar-theme-toggle.is-sun{
  border-color:rgba(199,125,2,.34) !important;
}

.topbar .topbar-theme-toggle.is-sun .theme-mode-label{
  color:#C77D02 !important;
}

/* The central Everlight button is the same single switch as the right mode control. */
.topbar .header-logo{
  color:#8BADCC !important;
}

body.sun-mode .topbar .header-logo,
body.sun-mode .topbar .header-logo .logo-word{
  color:#C77D02 !important;
}

body:not(.sun-mode) .topbar .header-logo,
body:not(.sun-mode) .topbar .header-logo .logo-word{
  color:#8BADCC !important;
}

/* Date / clock row must start below the header instead of hiding underneath it. */
.time-lockup{
  position:relative !important;
  z-index:1 !important;
  margin-top:28px !important;
  padding-top:6px !important;
}

@media(min-width:661px){
  .time-lockup{
    margin-top:34px !important;
  }
}

/* Mobile: header has its own 64px row and the time/date starts below it. */
@media(max-width:660px){
  .topbar{
    height:64px !important;
    min-height:64px !important;
  }

  .layout{
    padding-top:0 !important;
  }

  main#feed{
    padding-top:0 !important;
  }

  .time-lockup{
    margin-top:22px !important;
    padding-top:4px !important;
    z-index:1 !important;
  }

  .topbar .topbar-theme-toggle{
    width:66px !important;
    min-width:66px !important;
    height:34px !important;
    min-height:34px !important;
    padding:3px 5px !important;
    gap:4px !important;
  }

  .topbar .theme-mode-label{
    font-size:7px !important;
  }

  .topbar .theme-split-switch{
    width:26px !important;
    height:26px !important;
    flex-basis:26px !important;
  }

  .topbar .header-logo{
    gap:4px !important;
  }

  .topbar .header-logo-image{
    width:23px !important;
    height:23px !important;
    min-width:23px !important;
    min-height:23px !important;
    max-width:23px !important;
    max-height:23px !important;
    flex-basis:23px !important;
  }

  .topbar .logo-word{
    font-size:18px !important;
  }
}

/* =========================================================
   FINAL — HEADER / CLOCK / VIEWS
   ========================================================= */

/* ---------- Central brand: text only ---------- */
.topbar .header-logo{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  cursor:pointer !important;
  color:#8BADCC !important;
}

.topbar .header-logo .logo-word{
  display:block !important;
  font:600 24px/1 "Playfair Display",serif !important;
  letter-spacing:-.035em !important;
  color:#8BADCC !important;
  margin:0 !important;
}

body.sun-mode .topbar .header-logo .logo-word{
  color:#C77D02 !important;
}

.topbar .header-logo-image,
.topbar .header-logo .logo-mark{
  display:none !important;
}

/* ---------- Right switch: icon only ---------- */
.topbar .topbar-theme-toggle{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  padding:3px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(139,173,204,.24) !important;
  background:#070909 !important;
  box-shadow:none !important;
}

.topbar .theme-mode-label{
  display:none !important;
}

.topbar .theme-split-switch{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  overflow:hidden !important;
  border-radius:50% !important;
  pointer-events:none !important;
}

.topbar .theme-switch-half{
  width:50% !important;
  flex:0 0 50% !important;
  height:100% !important;
  display:grid !important;
  place-items:center !important;
  font:500 11px/1 Arial,sans-serif !important;
}

.topbar .theme-switch-aqua{
  background:#8BADCC !important;
  color:#071015 !important;
}
.topbar .theme-switch-gold{
  background:#C77D02 !important;
  color:#140c00 !important;
}

.topbar .topbar-theme-toggle.is-sun{
  border-color:rgba(199,125,2,.36) !important;
}

/* ---------- Clock/date row: below header, never hidden under it ---------- */
.time-lockup{
  position:relative !important;
  z-index:1 !important;
  margin:0 !important;
  padding:28px 0 0 !important;
  display:flex !important;
  align-items:baseline !important;
  justify-content:space-between !important;
  gap:12px !important;
}

@media(min-width:661px){
  .time-lockup{
    padding-top:34px !important;
  }
}

@media(max-width:660px){
  .time-lockup{
    padding-top:34px !important;
    margin:0 !important;
  }
}

/* ---------- Fullscreen views: solid black, no white flash ---------- */
.messages-view[aria-hidden="true"],
.profile-view[aria-hidden="true"],
.profile-customizer[aria-hidden="true"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.messages-view.open,
.messages-view[aria-hidden="false"],
.profile-view.open,
.profile-view[aria-hidden="false"],
.profile-customizer.open,
.profile-customizer[aria-hidden="false"]{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  background:#000 !important;
}

/* ---------- Message window ---------- */
.messages-view.open,
.messages-view[aria-hidden="false"]{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  z-index:99990 !important;
  overflow:hidden !important;
  background:#000 !important;
}

.messages-view-inner{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
  background:#000 !important;
}

.messages-view-header{
  position:relative !important;
  z-index:5 !important;
  background:#000 !important;
}

.messages-layout{
  background:#000 !important;
}

/* ---------- Profile window ---------- */
.profile-view.open,
.profile-view[aria-hidden="false"]{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  z-index:99990 !important;
  overflow:auto !important;
  background:#000 !important;
}

.profile-view-inner{
  min-height:100dvh !important;
  background:#000 !important;
}

/* ---------- Mobile ---------- */
@media(max-width:660px){

  .topbar{
    height:64px !important;
    min-height:64px !important;
    position:fixed !important;
    top:env(safe-area-inset-top,0px) !important;
    left:0 !important;
    right:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    z-index:99999 !important;
    overflow:hidden !important;
  }

  .layout{
    padding-top:calc(64px + env(safe-area-inset-top,0px)) !important;
  }

  .topbar .header-logo{
    height:64px !important;
    min-height:64px !important;
    width:max-content !important;
    max-width:none !important;
    padding:0 !important;
  }

  .topbar .header-logo .logo-word{
    font-size:18px !important;
  }

  .topbar .topbar-theme-toggle{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
  }

  .time-lockup{
    padding-top:30px !important;
    margin:0 !important;
  }

  /* Remove the old mobile footer/dock from fullscreen views. */
  body.messages-view-open .mobile-dock,
  body.messages-view-open .site-footer,
  body.profile-view-open .mobile-dock,
  body.profile-view-open .site-footer,
  body.profile-customizer-open .mobile-dock,
  body.profile-customizer-open .site-footer{
    display:none !important;
  }

  .messages-view-header{
    padding-top:calc(10px + env(safe-area-inset-top,0px)) !important;
  }

  .profile-view-header{
    padding-top:calc(12px + env(safe-area-inset-top,0px)) !important;
  }
}

/* ---------- Never leave an accidental pale layer around views ---------- */
.messages-view::before,
.messages-view::after,
.profile-view::before,
.profile-view::after,
.profile-customizer::before,
.profile-customizer::after{
  background:transparent !important;
}

/* =========================================================
   FINAL — RIGHT LOGO = MODE SWITCH
   ========================================================= */

/* Central Everlight is text-only. */
.topbar .header-logo-image,
.topbar .header-logo .logo-mark{
  display:none !important;
}

.topbar .header-logo .logo-word{
  display:block !important;
  color:#8BADCC !important;
  font:600 24px/1 "Playfair Display",serif !important;
  letter-spacing:-.035em !important;
}

body.sun-mode .topbar .header-logo .logo-word{
  color:#C77D02 !important;
}

/* Right side contains the real logo.png and acts as the mode toggle. */
.topbar .topbar-theme-toggle{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  padding:5px !important;
  margin:0 !important;
  border-radius:50% !important;
  border:1px solid rgba(139,173,204,.28) !important;
  background:#070909 !important;
  box-shadow:none !important;
  overflow:hidden !important;
  cursor:pointer !important;
}

.topbar .theme-toggle-logo{
  width:29px !important;
  height:29px !important;
  min-width:29px !important;
  min-height:29px !important;
  max-width:29px !important;
  max-height:29px !important;
  object-fit:contain !important;
  display:block !important;
  pointer-events:none !important;
}

body.sun-mode .topbar .topbar-theme-toggle{
  border-color:rgba(199,125,2,.42) !important;
  background:rgba(199,125,2,.07) !important;
}

/* The central brand remains clickable and uses the same toggle function. */
.topbar .header-logo{
  cursor:pointer !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

@media(max-width:660px){
  .topbar .header-logo .logo-word{
    font-size:18px !important;
  }

  .topbar .topbar-theme-toggle{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    padding:4px !important;
  }

  .topbar .theme-toggle-logo{
    width:25px !important;
    height:25px !important;
    min-width:25px !important;
    min-height:25px !important;
    max-width:25px !important;
    max-height:25px !important;
  }
}


/* =========================================================
   EVERLIGHT — FINAL THEME + MOBILE DOCK / VIEWS FIX
   ========================================================= */

/* Theme tokens: aqua <-> sun-yellow. */
body{
  --accent:#8BADCC;
  --accent-soft:rgba(139,173,204,.10);
  --accent-border:rgba(139,173,204,.28);
  --accent-strong:#8BADCC;
}

body.sun-mode{
  --accent:#C77D02;
  --accent-soft:rgba(199,125,2,.10);
  --accent-border:rgba(199,125,2,.30);
  --accent-strong:#C77D02;
}

/* Convert the important literal blue/gold accents to the active theme. */
body .domain a:first-child,
body .logo-word,
body .topbar .header-logo .logo-word,
body .hub-nav-item.active,
body .hub-nav-item:hover,
body .message-chat-header span,
body .profile-view-status-pill,
body .profile-view-identity p,
body .profile-customizer-kicker,
body .profile-customizer-nav.active,
body .profile-customizer-nav:hover{
  color:var(--accent) !important;
}

body .domain a:first-child,
body .hub-nav-item.active,
body .hub-nav-item:hover,
body .profile-customizer-nav.active,
body .profile-customizer-nav:hover{
  border-color:var(--accent-border) !important;
}

body .hub-nav-item.active,
body .hub-nav-item:hover,
body .profile-customizer-nav.active,
body .profile-customizer-nav:hover{
  background:var(--accent-soft) !important;
}

/* Right-side mode button has the SAME button shell as Hub / Üzenetek / Fiók. */
.topbar .topbar-theme-toggle{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  width:52px !important;
  height:34px !important;
  min-width:52px !important;
  min-height:34px !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid var(--line,#202729) !important;
  border-radius:9px !important;
  background:#050707 !important;
  color:var(--accent) !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

.topbar .topbar-theme-toggle:hover,
.topbar .topbar-theme-toggle:focus-visible{
  color:var(--accent) !important;
  border-color:var(--accent-border) !important;
  background:var(--accent-soft) !important;
}

.topbar .theme-toggle-logo{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  object-fit:contain !important;
  display:block !important;
  pointer-events:none !important;
}

.topbar .theme-split-switch,
.topbar .theme-mode-label{
  display:none !important;
}

/* Every major gold/accent surface follows the active accent. */
body .primary,
body .install-button,
body .notification-button:hover,
body .profile-customize-button:hover,
body .profile-customizer-save{
  border-color:var(--accent) !important;
}

body .primary,
body .install-button,
body .profile-customizer-save{
  background:var(--accent) !important;
  color:#071015 !important;
}

body .phone-card .install-button{
  color:#071015 !important;
}

/* =========================================================
   MOBILE DOCK
   ========================================================= */

@media (max-width:660px){
  .mobile-dock{
    position:fixed !important;
    left:14px !important;
    right:14px !important;
    bottom:calc(34px + env(safe-area-inset-bottom,0px)) !important;
    width:auto !important;
    height:56px !important;
    min-height:56px !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    z-index:1600 !important;
    background:#050707 !important;
    border:1px solid #242d2e !important;
    border-radius:17px !important;
    box-shadow:0 10px 30px rgba(0,0,0,.55) !important;
    overflow:hidden !important;
  }

  .mobile-dock-item{
    min-width:0 !important;
    width:100% !important;
    height:100% !important;
    border:0 !important;
    background:transparent !important;
    color:#7f8986 !important;
  }

  .mobile-dock-item.active{
    color:var(--accent) !important;
    background:var(--accent-soft) !important;
  }
}

/* =========================================================
   MOBILE VIEWS — NO WHITE FLASH
   ========================================================= */

.messages-view,
.profile-view{
  background:#000 !important;
  color:var(--text) !important;
}

.messages-view[aria-hidden="true"],
.profile-view[aria-hidden="true"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.messages-view.open,
.messages-view[aria-hidden="false"],
.profile-view.open,
.profile-view[aria-hidden="false"]{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  background:#000 !important;
}

@media (max-width:660px){
  body.messages-view-open,
  body.profile-view-open{
    overflow:hidden !important;
    width:100% !important;
    height:100dvh !important;
    background:#000 !important;
  }

  body.messages-view-open .topbar,
  body.profile-view-open .topbar{
    display:none !important;
  }

  .messages-view.open,
  .messages-view[aria-hidden="false"],
  .profile-view.open,
  .profile-view[aria-hidden="false"]{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:100vw !important;
    max-height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    z-index:99998 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    background:#000 !important;
  }

  .messages-view-inner{
    width:100% !important;
    min-height:100dvh !important;
    background:#000 !important;
  }

  .profile-view-inner{
    width:100% !important;
    min-height:100dvh !important;
    background:#000 !important;
  }

  /* No global dock/footer on fullscreen view. */
  body.messages-view-open .mobile-dock,
  body.profile-view-open .mobile-dock,
  body.messages-view-open .site-footer,
  body.profile-view-open .site-footer{
    display:none !important;
  }
}

/* =========================================================
   SAFE: profile customizer is also solid black
   ========================================================= */

.profile-customizer{
  background:#000 !important;
}

.profile-customizer[aria-hidden="true"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.profile-customizer.open,
.profile-customizer[aria-hidden="false"]{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  background:#000 !important;
}


/* =========================================================
   EVERLIGHT — DESKTOP TYPOGRAPHY / ANTI-PIXEL PASS
   ========================================================= */

/* Keep text crisp and slightly larger across the desktop UI. */
html{
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-rendering:optimizeLegibility !important;
}

body{
  font-size:14px !important;
  line-height:1.55 !important;
}

/* Main desktop navigation */
@media(min-width:661px){
  .topbar .domain{
    font-family:"Manrope",Arial,sans-serif !important;
    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing:.015em !important;
    line-height:1 !important;
  }

  .topbar .domain a{
    font-family:"Manrope",Arial,sans-serif !important;
    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing:.01em !important;
  }

  .topbar .hub-nav{
    gap:8px !important;
  }

  .topbar .hub-nav-item{
    font-family:"Manrope",Arial,sans-serif !important;
    font-size:11px !important;
    font-weight:700 !important;
    letter-spacing:.005em !important;
    line-height:1 !important;
    padding:9px 14px !important;
  }

  .topbar .account-button{
    font-size:11px !important;
  }

  .topbar .logo-word{
    font-family:"Playfair Display",Georgia,serif !important;
    font-size:25px !important;
    font-weight:600 !important;
    letter-spacing:-.025em !important;
  }

  .topbar .theme-toggle-logo{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    min-height:24px !important;
  }

  /* Left rail */
  .left-rail,
  .left-rail nav,
  .left-rail p,
  .left-rail a,
  .left-rail .rail-heading,
  .right-rail,
  .right-rail p,
  .right-rail a,
  .right-rail button{
    text-rendering:optimizeLegibility !important;
  }

  .left-rail nav a{
    font-family:"Manrope",Arial,sans-serif !important;
    font-size:12px !important;
    font-weight:650 !important;
    letter-spacing:.005em !important;
  }

  .rail-heading,
  .eyebrow{
    font-size:10px !important;
    letter-spacing:.12em !important;
    font-weight:700 !important;
  }

  .tagline,
  .signed-out p,
  .loading-copy{
    font-family:"Manrope",Arial,sans-serif !important;
    font-size:12px !important;
    line-height:1.55 !important;
  }

  /* Main feed */
  .time-lockup{
    font-family:"Manrope",Arial,sans-serif !important;
  }

  .time-lockup span{
    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing:.01em !important;
  }

  .time-lockup strong{
    font-size:18px !important;
    font-weight:700 !important;
  }

  .section-heading h1{
    font-family:"Playfair Display",Georgia,serif !important;
    font-size:44px !important;
    line-height:1.02 !important;
    font-weight:600 !important;
    letter-spacing:-.035em !important;
  }

  .section-heading .eyebrow{
    font-family:"DM Mono",monospace !important;
    font-size:10px !important;
    letter-spacing:.14em !important;
  }

  .composer textarea,
  .composer select,
  .composer input,
  .composer button{
    font-family:"Manrope",Arial,sans-serif !important;
  }

  .composer textarea{
    font-size:14px !important;
    line-height:1.6 !important;
  }

  .composer label,
  .composer-tools,
  .composer-footer,
  #counter,
  #imageName{
    font-size:10px !important;
    line-height:1.4 !important;
  }

  .composer select{
    font-size:11px !important;
  }

  .composer-footer .primary{
    font-size:11px !important;
    font-weight:700 !important;
  }

  /* Feed cards */
  .post,
  .post p,
  .post strong,
  .post span,
  .post time,
  .story-label{
    text-rendering:optimizeLegibility !important;
  }

  .post-top strong{
    font-family:"Manrope",Arial,sans-serif !important;
    font-size:12px !important;
    font-weight:750 !important;
  }

  .post-top span,
  .post-top time{
    font-family:"Manrope",Arial,sans-serif !important;
    font-size:10px !important;
    font-weight:500 !important;
  }

  .post p{
    font-family:"Manrope",Arial,sans-serif !important;
    font-size:14px !important;
    line-height:1.7 !important;
    font-weight:450 !important;
  }

  .story-label{
    font-size:9px !important;
    letter-spacing:.12em !important;
    font-weight:700 !important;
  }

  /* Right rail */
  .about-card h2,
  .phone-card h3{
    font-family:"Playfair Display",Georgia,serif !important;
  }

  .about-card h2{
    font-size:27px !important;
    line-height:1.08 !important;
  }

  .about-card p,
  .about-card a,
  .phone-card h3,
  .phone-card button,
  .phone-card p,
  .activity-card,
  .online,
  .note{
    font-family:"Manrope",Arial,sans-serif !important;
  }

  .about-card p{
    font-size:12px !important;
    line-height:1.65 !important;
  }

  .about-card a{
    font-size:11px !important;
    font-weight:700 !important;
  }

  .phone-card h3{
    font-size:21px !important;
  }

  .phone-card p,
  .install-help{
    font-size:10px !important;
    line-height:1.55 !important;
  }

  /* Profile / messages headers */
  .messages-view-header h1,
  .profile-view-header h1{
    font-family:"Playfair Display",Georgia,serif !important;
    font-size:28px !important;
    font-weight:600 !important;
    letter-spacing:-.025em !important;
  }

  .message-chat-header h2{
    font-family:"Playfair Display",Georgia,serif !important;
    font-size:21px !important;
  }

  .message-chat-header span,
  .message-contacts-title{
    font-size:9px !important;
    letter-spacing:.12em !important;
    font-weight:700 !important;
  }

  .message-compose input{
    font-family:"Manrope",Arial,sans-serif !important;
    font-size:12px !important;
  }

  /* Profile view */
  .profile-view-identity h2{
    font-family:"Playfair Display",Georgia,serif !important;
    font-size:40px !important;
  }

  .profile-view-identity p{
    font-family:"Manrope",Arial,sans-serif !important;
    font-size:11px !important;
  }

  .profile-view-about p{
    font-family:"Manrope",Arial,sans-serif !important;
    font-size:14px !important;
    line-height:1.75 !important;
  }

  .profile-view-info-item strong{
    font-size:11px !important;
  }

  .profile-view-settings-card h3{
    font-family:"Playfair Display",Georgia,serif !important;
    font-size:21px !important;
  }

  .profile-view-settings-card p{
    font-family:"Manrope",Arial,sans-serif !important;
    font-size:11px !important;
    line-height:1.6 !important;
  }

  /* Utility text */
  .toast,
  .small-copy,
  .install-help{
    font-size:10px !important;
  }

  /* Slightly rounder, less harsh glyph edges from tiny mono labels. */
  .dm,
  .message-contact-copy,
  .customizer-field,
  .profile-customizer,
  .profile-view{
    text-rendering:optimizeLegibility !important;
  }
}

/* Mobile retains its compact scale but uses the same legible fonts. */
@media(max-width:660px){
  .domain,
  .domain a{
    font-family:"Manrope",Arial,sans-serif !important;
  }

  .topbar .logo-word{
    font-family:"Playfair Display",Georgia,serif !important;
  }

  .mobile-dock-item small{
    font-family:"Manrope",Arial,sans-serif !important;
    font-weight:700 !important;
  }
}


/* =========================================================
   EVERLIGHT — PC X-STYLE CONTENT LAYOUT
   Desktop only. Header + mobile dock remain intact.
   ========================================================= */

@media (min-width: 961px){

  body{
    background:#000 !important;
  }

  /* X-like 3-column shell: narrow rail / focused feed / utility rail. */
  .layout{
    width:min(1220px,calc(100vw - 48px)) !important;
    max-width:1220px !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:220px minmax(560px,680px) 300px !important;
    column-gap:0 !important;
    min-height:calc(100vh - 72px) !important;
    align-items:stretch !important;
  }

  .left-rail{
    min-width:0 !important;
    padding:30px 22px 28px !important;
    border-right:1px solid rgba(139,173,204,.14) !important;
    position:sticky !important;
    top:72px !important;
    height:calc(100vh - 72px) !important;
    overflow:auto !important;
    align-self:start !important;
    background:#000 !important;
  }

  .left-rail .rail-heading{
    margin-bottom:14px !important;
  }

  .left-rail nav{
    gap:3px !important;
  }

  .left-rail nav a{
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    padding:0 13px !important;
    border-radius:10px !important;
    font-size:13px !important;
    font-weight:650 !important;
  }

  .rail-note{
    margin-top:34px !important;
    padding:16px 6px !important;
    border-top:1px solid rgba(139,173,204,.10) !important;
    font-size:12px !important;
  }

  .signed-out{
    margin-top:auto !important;
    padding-top:18px !important;
  }

  main#feed{
    min-width:0 !important;
    width:100% !important;
    padding:26px 36px 80px !important;
    margin:0 !important;
    border-right:1px solid rgba(139,173,204,.14) !important;
    background:#000 !important;
  }

  .time-lockup{
    margin:0 !important;
    padding:0 0 18px !important;
    border-bottom:1px solid rgba(139,173,204,.14) !important;
  }

  .section-heading{
    padding:30px 0 22px !important;
  }

  .section-heading h1{
    font-size:42px !important;
  }

  .composer{
    width:100% !important;
    border-radius:14px !important;
  }

  .feed-list{
    width:100% !important;
  }

  .right-rail{
    min-width:0 !important;
    padding:30px 24px !important;
    border-left:0 !important;
    position:sticky !important;
    top:72px !important;
    height:calc(100vh - 72px) !important;
    overflow:auto !important;
    align-self:start !important;
    background:#000 !important;
  }

  .about-card h2{
    font-size:28px !important;
  }

  /* Keep the header as the existing Everlight header. */
  .topbar{
    width:100% !important;
    max-width:none !important;
  }
}

/* Larger desktop: give the center a little more breathing room. */
@media (min-width: 1300px){
  .layout{
    width:min(1280px,calc(100vw - 64px)) !important;
    max-width:1280px !important;
    grid-template-columns:235px minmax(620px,720px) 315px !important;
  }

  main#feed{
    padding-inline:40px !important;
  }
}

/* Keep the X-style desktop shell away from the tablet breakpoint. */
@media (max-width:960px) and (min-width:661px){
  .layout{
    width:100% !important;
    max-width:none !important;
  }
}

/* Favicon/browser icon support does not alter page layout. */


/* =========================================================
   EVERLIGHT — DESKTOP X-STYLE RAIL V2
   Hub / Csevegés / Profil on the left
   ========================================================= */

@media (min-width: 961px){

  .layout{
    width:min(1240px, calc(100vw - 56px)) !important;
    max-width:1240px !important;
    grid-template-columns:220px minmax(560px,700px) 300px !important;
    margin:0 auto !important;
  }

  .left-rail{
    padding:26px 18px 28px !important;
  }

  .desktop-rail-actions{
    display:grid !important;
    gap:4px !important;
    margin-bottom:24px !important;
    padding-bottom:20px !important;
    border-bottom:1px solid rgba(139,173,204,.12) !important;
  }

  .desktop-rail-action{
    width:100% !important;
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    padding:0 14px !important;
    border:1px solid transparent !important;
    border-radius:10px !important;
    background:transparent !important;
    color:#7f8b88 !important;
    text-decoration:none !important;
    font:700 12px/1 "Manrope",Arial,sans-serif !important;
    text-align:left !important;
    cursor:pointer !important;
  }

  .desktop-rail-action:hover{
    color:var(--accent) !important;
    background:var(--accent-soft) !important;
    border-color:var(--accent-border) !important;
  }

  .desktop-rail-action.active{
    color:var(--accent) !important;
    background:var(--accent-soft) !important;
    border-color:var(--accent-border) !important;
  }

  /* Categories become a secondary section below the 3 main actions. */
  .left-rail > .rail-heading,
  .left-rail > nav:not(.desktop-rail-actions){
    opacity:.82 !important;
  }

  .left-rail > nav:not(.desktop-rail-actions) a{
    min-height:36px !important;
    padding:0 11px !important;
    font-size:11px !important;
  }

  .left-rail .rail-note{
    margin-top:28px !important;
  }

  main#feed{
    padding:28px 38px 80px !important;
    border-right:1px solid rgba(139,173,204,.14) !important;
  }

  .right-rail{
    padding:28px 24px !important;
  }
}

/* Tablet keeps the existing Everlight two-column behavior. */
@media (max-width:960px) and (min-width:661px){
  .desktop-rail-actions{
    display:none !important;
  }
}


/* =========================================================
   FINAL DESKTOP SIDEBAR
   Hub / Csevegés / Kategória / Profil
   + right side external links / share
   ========================================================= */

@media(min-width:961px){
  .desktop-rail-actions{
    margin-bottom:18px !important;
  }

  .desktop-category-block{
    padding-bottom:18px !important;
    border-bottom:1px solid rgba(139,173,204,.12) !important;
  }

  .desktop-category-block .rail-heading{
    margin:0 0 10px !important;
  }

  .desktop-profile-action{
    margin-top:10px !important;
  }

  .desktop-profile-action .desktop-rail-action{
    width:100% !important;
  }

  .right-rail{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }

  .right-link-card,
  .right-share-card{
    padding:0 0 24px !important;
    margin:0 0 24px !important;
    border-bottom:1px solid var(--line) !important;
  }

  .right-link-card .eyebrow,
  .right-share-card .eyebrow{
    margin-bottom:12px !important;
  }

  .right-link{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    padding:14px !important;
    border:1px solid rgba(139,173,204,.13) !important;
    border-radius:11px !important;
    background:rgba(255,255,255,.012) !important;
    text-decoration:none !important;
    transition:border-color .18s ease,background .18s ease,transform .18s ease !important;
  }

  .right-link:hover{
    border-color:var(--accent-border) !important;
    background:var(--accent-soft) !important;
    transform:translateY(-1px) !important;
  }

  .right-link strong{
    color:#e7e6df !important;
    font:700 12px/1.25 "Manrope",Arial,sans-serif !important;
  }

  .right-link span{
    color:#7f8986 !important;
    font:10px/1.45 "Manrope",Arial,sans-serif !important;
  }

  .right-share-card h3{
    margin:0 !important;
    color:#e7e6df !important;
    font:600 20px/1.15 "Playfair Display",Georgia,serif !important;
  }

  .right-share-card p:not(.eyebrow){
    margin:8px 0 14px !important;
    color:#7f8986 !important;
    font:10px/1.5 "Manrope",Arial,sans-serif !important;
  }

  .right-share-button{
    min-height:38px !important;
    width:100% !important;
    border:1px solid var(--accent) !important;
    border-radius:9px !important;
    background:var(--accent) !important;
    color:#071015 !important;
    font:700 10px "Manrope",Arial,sans-serif !important;
    cursor:pointer !important;
  }

  .right-share-button:hover{
    filter:brightness(1.04) !important;
  }
}

/* Hide new desktop-only rail pieces on mobile/tablet. */
@media(max-width:960px){
  .desktop-rail-actions,
  .desktop-category-block,
  .desktop-profile-action,
  .right-link-card,
  .right-share-card{
    display:none !important;
  }
}


/* =========================================================
   DESKTOP LEFT RAIL — ICONS + COLLAPSIBLE CATEGORY
   ========================================================= */

@media(min-width:961px){

  .desktop-rail-actions{
    display:grid !important;
    gap:4px !important;
    margin:0 0 14px !important;
    padding:0 0 14px !important;
    border-bottom:1px solid rgba(139,173,204,.12) !important;
  }

  .desktop-rail-action{
    width:100% !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
    padding:0 12px !important;
    border:1px solid transparent !important;
    border-radius:10px !important;
    background:transparent !important;
    color:#7f8b88 !important;
    font:700 12px/1 "Manrope",Arial,sans-serif !important;
    text-decoration:none !important;
    text-align:left !important;
    cursor:pointer !important;
    transition:background .18s ease,border-color .18s ease,color .18s ease !important;
  }

  .desktop-rail-action:hover,
  .desktop-rail-action.active{
    color:var(--accent) !important;
    background:var(--accent-soft) !important;
    border-color:var(--accent-border) !important;
  }

  .rail-action-icon{
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    display:grid !important;
    place-items:center !important;
    color:currentColor !important;
    font:700 16px/1 Arial,sans-serif !important;
  }

  /* Category accordion */
  .desktop-category-panel{
    padding:0 0 14px !important;
    margin:0 !important;
    border-bottom:1px solid rgba(139,173,204,.12) !important;
  }

  .desktop-category-toggle{
    width:100% !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding:0 12px !important;
    border:1px solid transparent !important;
    border-radius:10px !important;
    background:transparent !important;
    color:#7f8b88 !important;
    font:700 12px/1 "Manrope",Arial,sans-serif !important;
    cursor:pointer !important;
  }

  .desktop-category-toggle:hover,
  .desktop-category-toggle[aria-expanded="true"]{
    color:var(--accent) !important;
    background:var(--accent-soft) !important;
    border-color:var(--accent-border) !important;
  }

  .category-toggle-left{
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
  }

  .category-toggle-arrow{
    width:22px !important;
    height:22px !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid currentColor !important;
    border-radius:6px !important;
    font:600 15px/1 Arial,sans-serif !important;
  }

  .desktop-category-toggle[aria-expanded="true"] .category-toggle-arrow{
    transform:rotate(45deg) !important;
  }

  .desktop-category-menu{
    display:grid !important;
    gap:3px !important;
    padding:7px 0 0 33px !important;
  }

  .desktop-category-menu[hidden]{
    display:none !important;
  }

  .desktop-category-menu a{
    min-height:34px !important;
    display:flex !important;
    align-items:center !important;
    padding:0 10px !important;
    border-radius:8px !important;
    color:#687370 !important;
    text-decoration:none !important;
    font:600 10px/1 "Manrope",Arial,sans-serif !important;
  }

  .desktop-category-menu a:hover,
  .desktop-category-menu a.nav-active{
    color:var(--accent) !important;
    background:var(--accent-soft) !important;
  }

  .desktop-profile-action{
    margin-top:10px !important;
  }

  .desktop-profile-action .desktop-rail-action{
    justify-content:flex-start !important;
  }
}

@media(max-width:960px){
  .desktop-rail-actions,
  .desktop-category-panel,
  .desktop-profile-action{
    display:none !important;
  }
}


/* =========================================================
   X-STYLE ICONS + CLEAN DESKTOP HEADER
   ========================================================= */

@media(min-width:961px){

  /* Hide desktop top-right navigation; keep only the mode button. */
  .topbar .hub-nav > .hub-nav-item,
  .topbar .hub-nav > .account-wrap{
    display:none !important;
  }

  .topbar .hub-nav{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    min-width:52px !important;
  }

  .topbar .topbar-theme-toggle{
    display:grid !important;
    place-items:center !important;
    width:48px !important;
    height:34px !important;
    min-width:48px !important;
    min-height:34px !important;
    padding:0 !important;
    border-radius:9px !important;
    background:#050707 !important;
    border:1px solid var(--line,#202729) !important;
    color:var(--accent) !important;
  }

  .topbar .theme-toggle-logo{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    object-fit:contain !important;
  }

  /* X-like line icons in the left rail. */
  .rail-action-icon{
    position:relative !important;
    width:24px !important;
    height:24px !important;
    flex:0 0 24px !important;
    display:block !important;
    color:currentColor !important;
  }

  /* Home */
  .rail-icon-home::before{
    content:"" !important;
    position:absolute !important;
    left:4px !important;
    top:7px !important;
    width:14px !important;
    height:12px !important;
    border:2px solid currentColor !important;
    border-top:0 !important;
    border-radius:2px !important;
  }
  .rail-icon-home::after{
    content:"" !important;
    position:absolute !important;
    left:5px !important;
    top:3px !important;
    width:12px !important;
    height:12px !important;
    border-left:2px solid currentColor !important;
    border-top:2px solid currentColor !important;
    transform:rotate(45deg) !important;
    border-radius:2px 0 0 0 !important;
  }

  /* Chat bubble */
  .rail-icon-chat::before{
    content:"" !important;
    position:absolute !important;
    left:3px !important;
    top:4px !important;
    width:17px !important;
    height:14px !important;
    border:2px solid currentColor !important;
    border-radius:50% !important;
  }
  .rail-icon-chat::after{
    content:"" !important;
    position:absolute !important;
    right:3px !important;
    bottom:2px !important;
    width:7px !important;
    height:7px !important;
    border-left:2px solid currentColor !important;
    border-bottom:2px solid currentColor !important;
    transform:skewY(-30deg) !important;
  }

  /* Hamburger */
  .rail-icon-menu::before{
    content:"☰" !important;
    position:absolute !important;
    left:0 !important;
    top:-1px !important;
    font:700 21px/24px Arial,sans-serif !important;
    color:currentColor !important;
  }

  /* Profile */
  .rail-icon-profile::before{
    content:"" !important;
    position:absolute !important;
    left:8px !important;
    top:2px !important;
    width:8px !important;
    height:8px !important;
    border:2px solid currentColor !important;
    border-radius:50% !important;
  }
  .rail-icon-profile::after{
    content:"" !important;
    position:absolute !important;
    left:4px !important;
    top:13px !important;
    width:16px !important;
    height:9px !important;
    border:2px solid currentColor !important;
    border-bottom:0 !important;
    border-radius:10px 10px 0 0 !important;
  }

  /* Larger, clearer PC typography */
  .desktop-rail-action{
    min-height:48px !important;
    font-size:13px !important;
    font-weight:750 !important;
  }

  .desktop-category-toggle{
    min-height:48px !important;
    font-size:13px !important;
    font-weight:750 !important;
  }

  .desktop-category-menu a{
    min-height:36px !important;
    font-size:11px !important;
    font-weight:650 !important;
  }

  .topbar .domain,
  .topbar .domain a{
    font-family:"Manrope",Arial,sans-serif !important;
    font-size:12px !important;
    font-weight:650 !important;
    letter-spacing:.01em !important;
  }

  .topbar .logo-word{
    font-family:"Playfair Display",Georgia,serif !important;
    font-size:26px !important;
    font-weight:600 !important;
  }

  .time-lockup span{
    font-size:12px !important;
    font-weight:650 !important;
  }

  .time-lockup strong{
    font-size:20px !important;
    font-weight:750 !important;
  }

  .section-heading .eyebrow{
    font-size:11px !important;
  }

  .section-heading h1{
    font-size:46px !important;
  }

  .composer textarea{
    font-size:15px !important;
    line-height:1.65 !important;
  }

  .composer label,
  .composer-tools,
  .composer-footer{
    font-size:11px !important;
  }

  .composer select{
    font-size:12px !important;
  }

  .right-link strong{
    font-size:13px !important;
  }

  .right-link span{
    font-size:11px !important;
  }

  .right-share-card h3{
    font-size:22px !important;
  }

  .right-share-card p:not(.eyebrow){
    font-size:11px !important;
  }

  .about-card h2{
    font-size:29px !important;
  }

  .about-card p:not(.eyebrow){
    font-size:12px !important;
  }

  .phone-card h3{
    font-size:22px !important;
  }

  .activity-card{
    font-size:12px !important;
  }
}

/* Preserve the existing mobile top/bottom shell. */
@media(max-width:960px){
  .topbar .hub-nav > .hub-nav-item,
  .topbar .hub-nav > .account-wrap{
    display:none !important;
  }
}


/* =========================================================
   FINAL PC MODE BUTTON + TYPOGRAPHY
   ========================================================= */

@media(min-width:961px){

  /* Right-side mode button: same visual language as sidebar buttons,
     but kept compact and always visible. */
  .topbar .hub-nav{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    min-width:60px !important;
    width:auto !important;
    overflow:visible !important;
  }

  .topbar .hub-nav > .hub-nav-item,
  .topbar .hub-nav > .account-wrap{
    display:none !important;
  }

  .topbar .topbar-theme-toggle{
    display:grid !important;
    place-items:center !important;
    position:relative !important;
    width:48px !important;
    height:36px !important;
    min-width:48px !important;
    min-height:36px !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid var(--accent-border,#8BADCC) !important;
    border-radius:9px !important;
    background:var(--accent-soft,rgba(139,173,204,.10)) !important;
    color:var(--accent,#8BADCC) !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    cursor:pointer !important;
  }

  .topbar .theme-toggle-logo{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    max-width:22px !important;
    max-height:22px !important;
    display:block !important;
    object-fit:contain !important;
    opacity:1 !important;
  }

  .topbar .theme-split-switch,
  .topbar .theme-mode-label{
    display:none !important;
  }

  /* Much more readable desktop typography */
  .topbar .domain,
  .topbar .domain a{
    font-size:13px !important;
    font-weight:700 !important;
  }

  .topbar .logo-word{
    font-size:28px !important;
    font-weight:650 !important;
  }

  .desktop-rail-action,
  .desktop-category-toggle{
    min-height:52px !important;
    font-size:15px !important;
    font-weight:750 !important;
  }

  .desktop-category-menu a{
    min-height:40px !important;
    font-size:13px !important;
    font-weight:650 !important;
  }

  .rail-heading{
    font-size:11px !important;
    letter-spacing:.14em !important;
  }

  .time-lockup span{
    font-size:13px !important;
    font-weight:650 !important;
  }

  .time-lockup strong{
    font-size:22px !important;
    font-weight:750 !important;
  }

  .section-heading .eyebrow{
    font-size:12px !important;
  }

  .section-heading h1{
    font-size:50px !important;
    line-height:1.02 !important;
  }

  .composer textarea{
    font-size:16px !important;
    line-height:1.7 !important;
  }

  .composer label,
  .composer-tools,
  .composer-footer,
  #counter,
  #imageName{
    font-size:12px !important;
  }

  .composer select{
    font-size:13px !important;
  }

  .composer-footer .primary{
    font-size:12px !important;
  }

  .post-top strong{
    font-size:13px !important;
  }

  .post-top span,
  .post-top time{
    font-size:11px !important;
  }

  .post p{
    font-size:16px !important;
    line-height:1.75 !important;
  }

  .story-label{
    font-size:10px !important;
  }

  .right-link strong{
    font-size:14px !important;
  }

  .right-link span,
  .right-share-card p:not(.eyebrow){
    font-size:12px !important;
  }

  .right-share-card h3{
    font-size:24px !important;
  }

  .about-card h2{
    font-size:31px !important;
  }

  .about-card p:not(.eyebrow){
    font-size:13px !important;
    line-height:1.75 !important;
  }

  .activity-card,
  .note{
    font-size:13px !important;
  }
}


/* =========================================================
   MOBILE NAV — ABOVE EVERYTHING / FULLSCREEN VIEWS
   ========================================================= */

@media(max-width:660px){

  /* The island is always on top and always clickable. */
  #mobileDock{
    position:fixed !important;
    left:14px !important;
    right:14px !important;
    bottom:calc(34px + env(safe-area-inset-bottom,0px)) !important;
    width:auto !important;
    height:56px !important;
    min-height:56px !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    z-index:2147483000 !important;
    pointer-events:auto !important;
    isolation:isolate !important;
  }

  #mobileDock .mobile-dock-item{
    position:relative !important;
    z-index:2147483001 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    -webkit-user-select:none !important;
    user-select:none !important;
  }

  /* Fullscreen views are above the page, but MUST NOT cover the dock
     before they are actually opened. */
  .messages-view[aria-hidden="true"],
  .profile-view[aria-hidden="true"]{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  .messages-view.open,
  .messages-view[aria-hidden="false"],
  .profile-view.open,
  .profile-view[aria-hidden="false"]{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:100vw !important;
    max-height:100dvh !important;
    overflow:hidden auto !important;
    background:#000 !important;
    z-index:2147482000 !important;
  }

  .messages-view-inner,
  .profile-view-inner{
    width:100% !important;
    min-height:100dvh !important;
    background:#000 !important;
  }

  /* Never show the bottom dock/footer while a fullscreen view is open. */
  body.messages-view-open #mobileDock,
  body.profile-view-open #mobileDock{
    display:none !important;
  }

  body.messages-view-open .site-footer,
  body.profile-view-open .site-footer{
    display:none !important;
  }

  /* Mobile chat layout: no overlay that could block the form. */
  .messages-layout{
    position:relative !important;
    z-index:2 !important;
  }

  .message-chat{
    position:relative !important;
    z-index:3 !important;
  }

  .message-compose{
    position:relative !important;
    z-index:10 !important;
    pointer-events:auto !important;
  }

  .message-compose input,
  .message-compose button{
    pointer-events:auto !important;
  }

  /* Mobile profile content remains interactive. */
  .profile-view-content,
  .profile-view-card,
  .profile-customize-button{
    position:relative !important;
    z-index:3 !important;
    pointer-events:auto !important;
  }

  /* Remove any transparent overlay pseudo-elements that can intercept touches. */
  .messages-view::before,
  .messages-view::after,
  .profile-view::before,
  .profile-view::after{
    pointer-events:none !important;
  }
}


/* =========================================================
   FINAL V3 — MOBILE NO-WHITE-FLASH + DESKTOP TYPE/MODE
   ========================================================= */

/* No global transition on fullscreen/mobile overlays. */
.messages-view,
.profile-view,
.profile-customizer,
.messages-view *,
.profile-view *,
.profile-customizer *{
  transition:none !important;
}

/* Pure black overlay state before/after open. */
.messages-view,
.profile-view,
.profile-customizer{
  background:#000 !important;
  color:#e8e7df !important;
}

.messages-view[aria-hidden="true"],
.profile-view[aria-hidden="true"],
.profile-customizer[aria-hidden="true"]{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  background:#000 !important;
}

.messages-view.open,
.messages-view[aria-hidden="false"],
.profile-view.open,
.profile-view[aria-hidden="false"],
.profile-customizer.open,
.profile-customizer[aria-hidden="false"]{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  background:#000 !important;
}

/* Never let pseudo-elements create a light flash. */
.messages-view::before,
.messages-view::after,
.profile-view::before,
.profile-view::after,
.profile-customizer::before,
.profile-customizer::after{
  content:none !important;
  display:none !important;
}

@media(max-width:660px){

  #mobileDock{
    z-index:2147483000 !important;
  }

  /* Mobile fullscreen views */
  .messages-view.open,
  .messages-view[aria-hidden="false"],
  .profile-view.open,
  .profile-view[aria-hidden="false"]{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:100vw !important;
    max-height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden auto !important;
    -webkit-overflow-scrolling:touch !important;
    background:#000 !important;
    z-index:2147482000 !important;
  }

  .messages-view-inner,
  .profile-view-inner{
    min-height:100dvh !important;
    background:#000 !important;
  }

  /* Profile/Message headers must be black immediately. */
  .messages-view-header,
  .profile-view-header{
    background:#000 !important;
  }

  body.messages-view-open .topbar,
  body.profile-view-open .topbar,
  body.messages-view-open #mobileDock,
  body.profile-view-open #mobileDock,
  body.messages-view-open .site-footer,
  body.profile-view-open .site-footer{
    display:none !important;
  }
}

/* Desktop typography: one clear scale instead of mixed tiny sizes. */
@media(min-width:961px){

  .topbar .domain,
  .topbar .domain a{
    font-size:14px !important;
    font-weight:700 !important;
  }

  .topbar .logo-word{
    font-size:29px !important;
  }

  .desktop-rail-action,
  .desktop-category-toggle{
    min-height:54px !important;
    font-size:15px !important;
    font-weight:750 !important;
  }

  .desktop-category-menu a{
    min-height:40px !important;
    font-size:13px !important;
  }

  .time-lockup span{
    font-size:13px !important;
  }

  .time-lockup strong{
    font-size:22px !important;
  }

  .section-heading .eyebrow,
  .eyebrow{
    font-size:12px !important;
  }

  .section-heading h1{
    font-size:50px !important;
  }

  .composer textarea{
    font-size:17px !important;
    line-height:1.72 !important;
  }

  .composer label,
  .composer-tools,
  .composer-footer{
    font-size:12px !important;
  }

  .post p{
    font-size:17px !important;
    line-height:1.78 !important;
  }

  .right-link strong{
    font-size:14px !important;
  }

  .right-link span{
    font-size:12px !important;
  }

  .right-share-card h3{
    font-size:24px !important;
  }

  .right-share-card p:not(.eyebrow),
  .about-card p:not(.eyebrow){
    font-size:13px !important;
  }

  .activity-card,
  .note{
    font-size:13px !important;
  }

  /* Mode button: exactly the same rectangular language as other buttons. */
  .topbar .topbar-theme-toggle{
    display:grid !important;
    place-items:center !important;
    width:50px !important;
    height:36px !important;
    min-width:50px !important;
    min-height:36px !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid var(--accent-border) !important;
    border-radius:9px !important;
    background:var(--accent-soft) !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  .topbar .theme-toggle-logo{
    display:block !important;
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    max-width:22px !important;
    max-height:22px !important;
    object-fit:contain !important;
  }

  .topbar .theme-split-switch,
  .topbar .theme-mode-label{
    display:none !important;
  }
}

/* =========================================================
   DESKTOP — PROFILE FIRST, CATEGORY UNDER PROFILE
   ========================================================= */
@media (min-width:661px){
  .desktop-profile-action{
    order:20 !important;
  }

  .desktop-category-panel{
    order:30 !important;
    margin-top:8px !important;
  }

  .desktop-category-toggle{
    justify-content:flex-start !important;
  }

  .desktop-category-toggle .category-toggle-arrow{
    display:none !important;
  }
}

/* =========================================================
   EVERLIGHT PROFILE REDESIGN — DISCORD-LIKE / AUTH AWARE
   ========================================================= */
.profile-view{position:fixed!important;inset:0!important;z-index:5200!important;overflow:auto!important;background:radial-gradient(circle at 50% 0%,rgba(139,173,204,.10),transparent 38%),#000!important;color:#f2f4f5!important}
.profile-view-inner{width:min(1120px,100%);min-height:100%;margin:0 auto;padding:clamp(18px,3vw,36px) clamp(16px,3vw,34px) 48px;box-sizing:border-box}
.profile-view-header{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;margin-bottom:18px!important}
.profile-view-header h1{margin:0 0 6px!important;font-size:clamp(28px,3vw,44px)!important;line-height:1.05!important}
.profile-view-header-copy{margin:0!important;color:#9ca7ad!important;font-size:15px!important}
.profile-close{width:46px!important;height:46px!important;flex:0 0 46px!important;border:1px solid #2b3539!important;border-radius:14px!important;background:#0b0f10!important;color:#dbe2e5!important;font-size:28px!important;line-height:1!important;cursor:pointer!important}
.profile-discord-card{position:relative!important;overflow:hidden!important;border:1px solid #273236!important;border-radius:22px!important;background:#090c0d!important;box-shadow:0 24px 70px rgba(0,0,0,.45)!important}
.profile-view-cover{position:relative!important;width:100%!important;height:clamp(180px,23vw,290px)!important;margin:0!important;border-radius:0!important;background:linear-gradient(135deg,#18252a,#273638)!important;background-size:cover!important;background-position:center!important;overflow:hidden!important}
.profile-cover-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.38));pointer-events:none}
.profile-card-body{position:relative!important;padding:0 clamp(18px,3vw,34px) 34px!important}
.profile-avatar-wrap{position:relative!important;width:118px!important;height:118px!important;margin-top:-58px!important;margin-bottom:14px!important;z-index:4!important}
.profile-view-avatar{width:118px!important;height:118px!important;border:7px solid #090c0d!important;box-shadow:0 8px 24px rgba(0,0,0,.45)!important}
.profile-view-avatar img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important}
.profile-online-dot{position:absolute;right:4px;bottom:4px;width:24px;height:24px;border-radius:50%;background:#3fbf75;border:5px solid #090c0d}
.profile-identity-row{display:flex!important;justify-content:space-between!important;gap:22px!important;align-items:flex-start!important}
.profile-identity-main h2{margin:0!important;font-family:"Playfair Display",serif!important;font-size:clamp(34px,4vw,52px)!important;line-height:1!important}
.profile-identity-main>p{margin:8px 0 0!important;color:#8fa0a8!important;font-size:16px!important}
.profile-badges{display:flex;gap:7px;margin-top:12px}
.profile-badges span{min-width:28px;height:28px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:#171d1f;border:1px solid #283236;color:#9fc4e7;font-size:12px;font-weight:800}
.profile-actions{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:10px!important}
.profile-view-status-pill{display:inline-flex!important;align-items:center!important;min-height:34px!important;padding:0 12px!important;border-radius:999px!important;border:1px solid #2c393d!important;background:#111719!important;color:#a9d2f2!important;font-size:13px!important}
.profile-customize-button{min-height:46px!important;padding:0 18px!important;border-radius:12px!important;white-space:nowrap!important}
.profile-tabs{display:flex!important;gap:26px!important;margin-top:28px!important;border-bottom:1px solid #263033!important}
.profile-tabs button{appearance:none;border:0;background:none;color:#7f8b90;padding:0 2px 13px;font:600 14px/1 "Manrope",sans-serif;cursor:pointer}
.profile-tabs button.active{color:#eef2f4;border-bottom:2px solid #8badcc}
.profile-section{padding-top:24px!important;margin-top:4px!important}
.profile-section-title{display:block;color:#7f8c92!important;font:700 11px/1.2 "DM Mono",monospace!important;letter-spacing:.16em!important;margin-bottom:10px!important}
.profile-about-section p{max-width:760px;margin:0!important;color:#e7eaec!important;font-size:17px!important;line-height:1.65!important;white-space:pre-wrap!important}
.profile-info-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin-top:22px!important}
.profile-info-card{padding:16px!important;border:1px solid #242e31!important;border-radius:14px!important;background:#0d1112!important}
.profile-info-card span{display:block;color:#6f7c82;font:700 10px/1.2 "DM Mono",monospace;letter-spacing:.14em;margin-bottom:7px}
.profile-info-card strong{display:block;color:#e6eaec;font-size:14px;overflow-wrap:anywhere}
.profile-customize-section{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;margin-top:24px!important;padding:20px!important;border:1px solid #273236!important;border-radius:16px!important;background:#0c1011!important}
.profile-customize-section h3{margin:0 0 7px!important;font-size:20px!important}
.profile-customize-section p{margin:0!important;max-width:760px!important;color:#8e9a9f!important;line-height:1.55!important;font-size:14px!important}
.profile-login-state{min-height:calc(100dvh - 120px);display:grid;place-items:center}
.profile-login-card{width:min(520px,100%);padding:clamp(24px,4vw,42px);border:1px solid #273236;border-radius:22px;background:#090c0d;box-shadow:0 24px 70px rgba(0,0,0,.42)}
.profile-login-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:#18272b;color:#9fc4e7;font-size:22px;margin-bottom:18px}
.profile-login-card h2{margin:0 0 10px;font-family:"Playfair Display",serif;font-size:clamp(30px,4vw,44px)}
.profile-login-card>p:not(.eyebrow):not(.profile-login-note){color:#9aa6ab;line-height:1.6}
.profile-login-form{display:grid;gap:13px;margin-top:22px}
.profile-login-form label{display:grid;gap:7px;color:#aab4b8;font-size:12px;font-weight:700}
.profile-login-form input{width:100%;box-sizing:border-box;min-height:48px;padding:0 14px;border:1px solid #293437;border-radius:12px;background:#050707;color:#f1f3f4;font:500 15px "Manrope",sans-serif}
.profile-login-form .primary{min-height:50px;margin-top:4px;border-radius:12px}
.profile-login-note{margin:16px 0 0;color:#6f7b80;font-size:12px;line-height:1.5}
@media (max-width:660px){
  body.profile-view-open{overflow:hidden!important;height:100dvh!important}
  .profile-view{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)!important;-webkit-overflow-scrolling:touch!important}
  .profile-view-inner{width:100%!important;padding:0 0 28px!important}
  .profile-view-header{position:sticky!important;top:0!important;z-index:20!important;padding:12px 16px!important;margin:0!important;background:rgba(0,0,0,.92)!important;backdrop-filter:blur(14px)!important;border-bottom:1px solid #1e272a!important}
  .profile-view-header .eyebrow,.profile-view-header-copy{display:none!important}
  .profile-view-header h1{font-size:22px!important;font-family:"Manrope",sans-serif!important;font-weight:800!important}
  .profile-close{width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:12px!important}
  .profile-discord-card{border:0!important;border-radius:0!important;box-shadow:none!important;background:#090c0d!important}
  .profile-view-cover{height:190px!important}
  .profile-card-body{padding:0 18px 34px!important}
  .profile-avatar-wrap{width:104px!important;height:104px!important;margin-top:-52px!important}
  .profile-view-avatar{width:104px!important;height:104px!important;border-width:6px!important}
  .profile-online-dot{width:22px!important;height:22px!important;right:2px!important;bottom:2px!important;border-width:4px!important}
  .profile-identity-row{display:block!important}
  .profile-identity-main h2{font-size:38px!important;line-height:1.02!important}
  .profile-identity-main>p{font-size:14px!important}
  .profile-actions{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;margin-top:16px!important}
  .profile-view-status-pill{font-size:12px!important}
  .profile-customize-button{min-height:44px!important;padding:0 14px!important}
  .profile-tabs{margin-top:22px!important;gap:28px!important}
  .profile-tabs button{padding-bottom:12px!important}
  .profile-about-section p{font-size:16px!important;line-height:1.62!important}
  .profile-info-grid{grid-template-columns:1fr!important;gap:10px!important}
  .profile-customize-section{display:block!important;padding:17px!important;margin-top:20px!important}
  .profile-customize-section h3{font-size:18px!important}
  .profile-customize-section button{width:100%!important;min-height:46px!important;margin-top:14px!important}
  .profile-login-state{min-height:calc(100dvh - 72px)!important;padding:18px!important;box-sizing:border-box!important}
  .profile-login-card{width:100%!important;box-sizing:border-box!important;padding:22px!important;border-radius:18px!important}
  .profile-login-card h2{font-size:34px!important}
}
@media (min-width:661px) and (max-width:900px){
  .profile-identity-row{flex-direction:column!important}
  .profile-actions{align-items:flex-start!important;flex-direction:row!important}
}

/* =========================================================
   DESKTOP SIDEBAR NAVIGATION — CSEVEGÉS PARENT
   Kategória + Profil közvetlenül a Csevegés alatt
   ========================================================= */
@media (min-width: 901px){
  .desktop-sidebar .nav-group-cseveges,
  .sidebar .nav-group-cseveges{
    display:flex !important;
    flex-direction:column !important;
  }

  .desktop-sidebar .nav-group-cseveges > .nav-item,
  .sidebar .nav-group-cseveges > .nav-item{
    margin:0 !important;
  }

  .desktop-sidebar .nav-group-cseveges .nav-subitems,
  .sidebar .nav-group-cseveges .nav-subitems{
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
    margin:4px 0 8px 30px !important;
    padding:0 !important;
  }

  .desktop-sidebar .nav-group-cseveges .nav-subitems .nav-item,
  .sidebar .nav-group-cseveges .nav-subitems .nav-item{
    width:calc(100% - 6px) !important;
    min-height:38px !important;
    margin:0 !important;
  }

  /* If the old standalone category/profile items still exist, don't show them twice. */
  .desktop-sidebar > .nav-item[data-nav="category"],
  .desktop-sidebar > .nav-item[data-nav="categories"],
  .desktop-sidebar > .nav-item[data-nav="profile"],
  .sidebar > .nav-item[data-nav="category"],
  .sidebar > .nav-item[data-nav="categories"],
  .sidebar > .nav-item[data-nav="profile"]{
    display:none !important;
  }
}


/* =========================================================
   FINAL DESKTOP SIDEBAR FIX
   Csevegés alatt: Profil + Kategória
   ========================================================= */
@media (min-width: 961px){
  .desktop-rail-actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:4px !important;
  }

  .desktop-chat-group{
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .desktop-chat-group > .desktop-rail-action,
  .desktop-chat-group > .desktop-category-panel{
    margin:0 !important;
  }

  .desktop-sub-action{
    margin-left:18px !important;
    width:calc(100% - 18px) !important;
  }

  .desktop-chat-group .desktop-category-panel{
    padding:0 0 8px !important;
    border-bottom:0 !important;
  }

  .desktop-chat-group .desktop-category-toggle{
    min-height:42px !important;
    width:100% !important;
    padding:0 14px !important;
    border-radius:10px !important;
    justify-content:space-between !important;
  }

  .desktop-chat-group .desktop-category-menu{
    margin:2px 0 0 34px !important;
    padding:4px 0 !important;
  }

  .desktop-chat-group .desktop-category-menu a{
    display:block !important;
    padding:8px 10px !important;
    border-radius:7px !important;
  }

  /* Never let the old standalone positioning rules affect the new group. */
  .left-rail > .desktop-profile-action,
  .left-rail > .desktop-category-panel{
    display:none !important;
  }

  .nav-group-cseveges,
  .desktop-sidebar .nav-group-cseveges,
  .sidebar .nav-group-cseveges{
    display:none !important;
  }
}

/* =========================================================
   FINAL STYLE PICKER + THEME GRADIENTS
   ========================================================= */
:root{
  --ever-accent:#8badcc;
  --ever-accent-strong:#67e7dd;
  --ever-accent-soft:#c9e2f5;
  --ever-gradient:linear-gradient(135deg,#c9e2f5 0%,#8badcc 48%,#67e7dd 100%);
  --ever-gold:#d7a53a;
  --ever-gold-soft:#ffe9a3;
  --ever-gold-dark:#9b5e08;
  --ever-gold-gradient:linear-gradient(135deg,#fff0ae 0%,#d7a53a 52%,#9b5e08 100%);
}
body.sun-mode{
  --ever-accent:#d7a53a;
  --ever-accent-strong:#9b5e08;
  --ever-accent-soft:#fff0ae;
}
body.mono-mode{
  --ever-accent:#f2f2f2;
  --ever-accent-strong:#c8c8c8;
  --ever-accent-soft:#fff;
}
.topbar .header-logo{
  pointer-events:none !important;
}
.topbar .header-logo-image,
.topbar .logo-word{
  color:var(--ever-accent) !important;
}
.topbar .header-logo-image{
  filter:none !important;
}
.topbar-style-picker{
  grid-column:3 !important;
  grid-row:1 !important;
  justify-self:end !important;
  position:relative !important;
  z-index:5005 !important;
}
.style-picker-trigger{
  min-height:40px !important;
  padding:0 14px !important;
  border:1px solid #27353b !important;
  border-radius:11px !important;
  background:#090d0f !important;
  color:#dce5e8 !important;
  font:600 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  cursor:pointer !important;
}
.style-picker-trigger:hover{
  border-color:var(--ever-accent) !important;
}
.style-picker-chevron{
  color:var(--ever-accent) !important;
  font-size:18px !important;
  line-height:1 !important;
}
.style-picker-menu{
  position:absolute !important;
  right:0 !important;
  top:calc(100% + 8px) !important;
  min-width:190px !important;
  padding:7px !important;
  border:1px solid #27353b !important;
  border-radius:14px !important;
  background:#090d0f !important;
  box-shadow:0 18px 45px rgba(0,0,0,.48) !important;
}
.style-picker-menu[hidden]{display:none !important}
.style-option{
  width:100% !important;
  min-height:40px !important;
  border:0 !important;
  border-radius:9px !important;
  background:transparent !important;
  color:#d8e0e3 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:0 10px !important;
  cursor:pointer !important;
  text-align:left !important;
  font:600 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif !important;
}
.style-option:hover{background:#151d20 !important}
.style-dot{
  width:12px !important;height:12px !important;border-radius:50% !important;display:block !important;flex:none !important;
}
.aqua-dot{background:var(--ever-gradient)}
.sun-dot{background:var(--ever-gold-gradient)}
.mono-dot{background:linear-gradient(135deg,#fff,#777,#111)}
.domain a:first-of-type{
  color:var(--ever-accent) !important;
  text-decoration:none !important;
}
.domain a:last-of-type{
  color:#737c80 !important;
  text-decoration:none !important;
}
.domain > span{
  color:#737c80 !important;
}
/* Replace flat accent colors in the principal UI with theme gradients. */
body:not(.mono-mode) .primary,
body:not(.mono-mode) .hub-nav-item.active,
body:not(.mono-mode) .desktop-rail-action.active,
body:not(.mono-mode) .composer .primary{
  background:var(--ever-gradient) !important;
  color:#081014 !important;
}
body.sun-mode .primary,
body.sun-mode .hub-nav-item.active,
body.sun-mode .desktop-rail-action.active,
body.sun-mode .composer .primary{
  background:var(--ever-gold-gradient) !important;
}
body.mono-mode .primary,
body.mono-mode .hub-nav-item.active,
body.mono-mode .desktop-rail-action.active,
body.mono-mode .composer .primary{
  background:linear-gradient(135deg,#fff,#aaa) !important;
  color:#111 !important;
}
body.sun-mode .profile-view,
body.sun-mode .messages-view{--ever-accent:#d7a53a}
body.mono-mode .header-logo,
body.mono-mode .logo-word,
body.mono-mode .domain a:first-of-type{color:#f2f2f2 !important}

/* Logged-in profile/customization must never render behind the login state. */
#profileLoggedInState[hidden],
#profileSettings[hidden],
#profileCustomizePanel[hidden]{display:none !important}

/* =========================================================
   MOBILE: clean header + style picker
   ========================================================= */
@media(max-width:660px){
  .topbar-style-picker{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
  }
  .style-picker-trigger{
    min-height:36px !important;
    height:36px !important;
    padding:0 9px !important;
    border-radius:10px !important;
    font-size:11px !important;
    gap:5px !important;
  }
  .style-picker-chevron{font-size:15px !important}
  .style-picker-menu{
    right:0 !important;
    min-width:170px !important;
  }
  .topbar .domain{
    max-width:42vw !important;
  }
  .topbar .domain a:first-of-type{
    max-width:30vw !important;
  }
  .topbar .domain a:last-of-type{
    max-width:12vw !important;
  }
}

/* =========================================================
   CHAT WHEN LOGGED OUT
   ========================================================= */
.chat-login-notice{
  margin:16px 0 !important;
  padding:18px !important;
  border:1px solid #27353b !important;
  border-radius:16px !important;
  background:#090d0f !important;
}
.chat-login-notice strong{
  display:block !important;
  margin-bottom:7px !important;
  color:#e8eeee !important;
}
.chat-login-notice p{
  margin:0 !important;
  color:#89959a !important;
  line-height:1.55 !important;
}

/* Final login gate: mobile profile never reveals customization before authentication. */
@media(max-width:660px){
  body:not(.everlight-authenticated) #profileLoggedInState,
  body:not(.everlight-authenticated) #profileLoggedInState *,
  body:not(.everlight-authenticated) #profileSettings,
  body:not(.everlight-authenticated) #profileSettings *{
    display:none !important;
  }
  body.everlight-authenticated #profileLoginState{
    display:none !important;
  }
}


/* =========================================================
   VIEWPORT LAYOUT — ONLY THE CENTER FEED SCROLLS
   ========================================================= */
@media (min-width:661px){
  html, body{
    height:100% !important;
    min-height:100% !important;
    overflow:hidden !important;
  }
  body{
    display:flex !important;
    flex-direction:column !important;
  }
  .topbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    flex:0 0 72px !important;
    z-index:99999 !important;
  }
  .layout{
    width:100% !important;
    max-width:1480px !important;
    height:calc(100dvh - 72px) !important;
    min-height:0 !important;
    margin:72px auto 0 !important;
    overflow:hidden !important;
  }
  .left-rail,
  .right-rail{
    min-height:0 !important;
    height:100% !important;
    overflow:hidden !important;
  }
  main#feed{
    min-height:0 !important;
    height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    scrollbar-gutter:stable !important;
  }
}

/* =========================================================
   MOBILE — FIXED HEADER + FIXED ISLAND, CENTER CONTENT SCROLLS
   ========================================================= */
@media (max-width:660px){
  html, body{
    height:100% !important;
    min-height:100% !important;
    overflow:hidden !important;
  }
  body{
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
  }
  .layout{
    height:100dvh !important;
    min-height:0 !important;
    padding-top:calc(64px + env(safe-area-inset-top,0px)) !important;
    padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important;
    overflow:hidden !important;
  }
  main#feed{
    height:100% !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:calc(110px + env(safe-area-inset-bottom,0px)) !important;
  }
  .mobile-dock{
    position:fixed !important;
    z-index:99998 !important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px)) !important;
    pointer-events:auto !important;
  }
  .mobile-dock-item .rail-action-icon{
    width:26px !important;
    height:26px !important;
    flex:0 0 26px !important;
  }
  .mobile-dock-item small{
    display:none !important;
  }
  .mobile-dock-item{
    gap:0 !important;
    font-size:0 !important;
  }
}


/* =========================================================
   MOBILE DOCK — FORCE VISIBLE ICONS
   A szigeten a Hub / Csevegés / Profil ikonok mindig látszanak.
   ========================================================= */
@media (max-width:660px){
  #mobileDock .mobile-dock-item .rail-action-icon{
    position:relative !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
    flex:0 0 28px !important;
    color:currentColor !important;
    overflow:visible !important;
    font-size:0 !important;
    line-height:1 !important;
  }

  #mobileDock .mobile-dock-item .rail-action-icon::before,
  #mobileDock .mobile-dock-item .rail-action-icon::after{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:none !important;
  }

  /* Hub */
  #mobileDock .rail-icon-home::before{
    content:"" !important;
    position:absolute !important;
    left:5px !important;
    top:10px !important;
    width:18px !important;
    height:14px !important;
    border:2px solid currentColor !important;
    border-top:0 !important;
    border-radius:2px !important;
    box-sizing:border-box !important;
  }
  #mobileDock .rail-icon-home::after{
    content:"" !important;
    position:absolute !important;
    left:6px !important;
    top:4px !important;
    width:16px !important;
    height:16px !important;
    border-left:2px solid currentColor !important;
    border-top:2px solid currentColor !important;
    transform:rotate(45deg) !important;
    border-radius:2px 0 0 0 !important;
    box-sizing:border-box !important;
  }

  /* Csevegés */
  #mobileDock .rail-icon-chat::before{
    content:"" !important;
    position:absolute !important;
    left:3px !important;
    top:4px !important;
    width:21px !important;
    height:17px !important;
    border:2px solid currentColor !important;
    border-radius:50% !important;
    box-sizing:border-box !important;
  }
  #mobileDock .rail-icon-chat::after{
    content:"" !important;
    position:absolute !important;
    left:16px !important;
    top:17px !important;
    width:7px !important;
    height:7px !important;
    border-left:2px solid currentColor !important;
    border-bottom:2px solid currentColor !important;
    transform:skewY(-28deg) !important;
    box-sizing:border-box !important;
  }

  /* Profil */
  #mobileDock .rail-icon-profile::before{
    content:"" !important;
    position:absolute !important;
    left:9px !important;
    top:2px !important;
    width:10px !important;
    height:10px !important;
    border:2px solid currentColor !important;
    border-radius:50% !important;
    box-sizing:border-box !important;
  }
  #mobileDock .rail-icon-profile::after{
    content:"" !important;
    position:absolute !important;
    left:4px !important;
    top:14px !important;
    width:20px !important;
    height:11px !important;
    border:2px solid currentColor !important;
    border-bottom:0 !important;
    border-radius:12px 12px 0 0 !important;
    box-sizing:border-box !important;
  }

  #mobileDock .mobile-dock-item{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:0 !important;
    overflow:visible !important;
  }

  #mobileDock .mobile-dock-item small{
    display:none !important;
  }
}

/* =========================================================
   EVERLIGHT MOBILE ISLAND — iOS/DYNAMIC-ISLAND STYLE
   Compact -> drag upward -> expanded glass bubble.
   Only the middle content scrolls.
   ========================================================= */
@media (max-width:660px){
  #mobileDock{
    left:50% !important;
    right:auto !important;
    bottom:calc(12px + env(safe-area-inset-bottom)) !important;
    width:154px !important;
    height:54px !important;
    padding:5px !important;
    transform:translateX(-50%) !important;
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:2px !important;
    border-radius:28px !important;
    background:rgba(12,15,17,.82) !important;
    border:1px solid rgba(150,190,215,.24) !important;
    box-shadow:0 10px 35px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter:blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(150%) !important;
    transition:
      width .28s cubic-bezier(.22,1,.36,1),
      height .28s cubic-bezier(.22,1,.36,1),
      bottom .28s cubic-bezier(.22,1,.36,1),
      border-radius .28s cubic-bezier(.22,1,.36,1),
      background .28s ease !important;
    touch-action:none !important;
    user-select:none !important;
    -webkit-user-select:none !important;
    will-change:transform,width,height,bottom !important;
  }

  #mobileDock.is-expanded{
    width:190px !important;
    height:76px !important;
    bottom:calc(24px + env(safe-area-inset-bottom)) !important;
    border-radius:34px !important;
    background:rgba(20,24,27,.88) !important;
    box-shadow:0 18px 50px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.11) !important;
  }

  #mobileDock::before{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:4px !important;
    width:34px !important;
    height:3px !important;
    border-radius:3px !important;
    transform:translateX(-50%) !important;
    background:rgba(220,230,235,.30) !important;
    opacity:.7 !important;
    pointer-events:none !important;
  }

  #mobileDock .mobile-dock-item{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    border-radius:22px !important;
    color:#aeb9b7 !important;
    background:transparent !important;
    transition:transform .2s ease, background .2s ease, color .2s ease !important;
  }

  #mobileDock .mobile-dock-item.active{
    color:var(--accent) !important;
    background:rgba(130,180,215,.12) !important;
  }

  #mobileDock.is-expanded .mobile-dock-item{
    border-radius:26px !important;
  }

  #mobileDock .mobile-dock-item:active{
    transform:scale(.90) !important;
  }

  #mobileDock .mobile-dock-item small{
    display:none !important;
  }

  /* Keep the custom icons crisp and centered in both states. */
  #mobileDock .rail-action-icon{
    margin:auto !important;
  }

  /* Do not let the fixed island become part of the scrolling layer. */
  body.messages-view-open #mobileDock,
  body.profile-view-open #mobileDock{
    position:fixed !important;
  }
}

/* =========================================================
   FINAL MOBILE DOMAIN + STYLE SWITCH
   ========================================================= */
@media (max-width:660px){

  /* Domain is a single inline unit: no slash wrapping or drifting. */
  .topbar .domain,
  .topbar .domain a,
  .topbar .domain span,
  .topbar .domain .domain-main,
  .topbar .domain .domain-separator,
  .topbar .domain .domain-muted{
    display:inline-flex !important;
    align-items:center !important;
    vertical-align:middle !important;
    white-space:nowrap !important;
    line-height:1 !important;
    transform:none !important;
    position:static !important;
  }

  .topbar .domain{
    flex-wrap:nowrap !important;
    gap:0 !important;
    overflow:visible !important;
  }

  .topbar .domain .domain-separator{
    margin:0 3px !important;
    padding:0 !important;
    color:#7d8589 !important;
  }

  /* The style switch is its own top-layer control. */
  #themeToggle,
  #themeLogoToggle,
  .topbar .theme-toggle,
  .topbar .style-toggle,
  .topbar .style-switch{
    position:relative !important;
    z-index:2147483600 !important;
    pointer-events:auto !important;
    flex:0 0 auto !important;
  }

  .topbar .theme-toggle,
  .topbar .style-toggle,
  .topbar .style-switch{
    overflow:visible !important;
  }

  /* Remove every arrow/chevron attached to style switching. */
  #themeToggle::before,
  #themeToggle::after,
  #themeLogoToggle::before,
  #themeLogoToggle::after,
  .theme-toggle::before,
  .theme-toggle::after,
  .style-toggle::before,
  .style-toggle::after,
  .style-switch::before,
  .style-switch::after,
  .theme-toggle .arrow,
  .theme-toggle .chevron,
  .style-toggle .arrow,
  .style-toggle .chevron{
    content:none !important;
    display:none !important;
  }

  /* Prevent the island/glass layer from covering the style control. */
  #mobileDock{
    z-index:2147483000 !important;
  }

  .topbar{
    position:relative !important;
    z-index:2147483500 !important;
    isolation:isolate !important;
  }
}

/* No style-switch arrows on desktop either. */
#themeToggle::before,
#themeToggle::after,
#themeLogoToggle::before,
#themeLogoToggle::after,
.theme-toggle .arrow,
.theme-toggle .chevron,
.style-toggle .arrow,
.style-toggle .chevron{
  content:none !important;
  display:none !important;
}

/* =========================================================
   EVERLIGHT LOGO — LARGER
   ========================================================= */
.topbar .logo-word,
.header-logo-text,
.everlight-logo-text{
  font-size:clamp(30px, 2.5vw, 42px) !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:-.035em !important;
}

.topbar .header-logo-image,
.header-logo-image{
  width:52px !important;
  height:52px !important;
  max-width:52px !important;
  max-height:52px !important;
  object-fit:contain !important;
}

@media(max-width:660px){
  .topbar .logo-word,
  .header-logo-text,
  .everlight-logo-text{
    font-size:30px !important;
    line-height:1 !important;
  }

  .topbar .header-logo-image,
  .header-logo-image{
    width:42px !important;
    height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
  }
}

/* =========================================================
   FINAL MOBILE HEADER / ISLAND FIX
   ========================================================= */
@media (max-width:660px){

  /* Dynamic island: tapping does not leave it expanded.
     It expands temporarily and collapses again after interaction. */
  #mobileDock.is-expanded{
    width:190px !important;
    height:76px !important;
    transition:width .24s cubic-bezier(.22,1,.36,1),
               height .24s cubic-bezier(.22,1,.36,1),
               bottom .24s cubic-bezier(.22,1,.36,1),
               border-radius .24s cubic-bezier(.22,1,.36,1) !important;
  }

  /* Domain: force the complete domain into one compact inline group. */
  .topbar .domain,
  .topbar .domain-wrap,
  .topbar .domain-address,
  .header-domain,
  .domain-address{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
    gap:0 !important;
    letter-spacing:0 !important;
    word-spacing:0 !important;
    width:max-content !important;
    max-width:none !important;
  }

  .topbar .domain *,
  .topbar .domain-wrap *,
  .topbar .domain-address *,
  .header-domain *,
  .domain-address *{
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    letter-spacing:0 !important;
    word-spacing:0 !important;
  }

  .topbar .domain .domain-separator,
  .topbar .domain .separator,
  .topbar .domain .slash,
  .domain-address .domain-separator,
  .domain-address .separator{
    display:inline !important;
    margin:0 1px !important;
    padding:0 !important;
    color:#777f83 !important;
    transform:none !important;
  }

  /* Much larger Everlight wordmark on mobile. */
  .topbar .logo-word,
  .header-logo-text,
  .everlight-logo-text{
    font-size:38px !important;
    line-height:.95 !important;
    font-weight:900 !important;
    letter-spacing:-.045em !important;
    white-space:nowrap !important;
  }

  .topbar .header-logo-image,
  .header-logo-image{
    width:50px !important;
    height:50px !important;
    max-width:50px !important;
    max-height:50px !important;
  }
}

/* Larger wordmark on desktop too. */
@media (min-width:661px){
  .topbar .logo-word,
  .header-logo-text,
  .everlight-logo-text{
    font-size:46px !important;
    line-height:.95 !important;
    font-weight:900 !important;
    letter-spacing:-.045em !important;
  }
}

/* =========================================================
   MOBILE ISLAND V2 — LARGER + HIGHER + NO CENTER HANDLE
   ========================================================= */
@media (max-width:660px){
  #mobileDock{
    width:184px !important;
    height:62px !important;
    bottom:calc(30px + env(safe-area-inset-bottom)) !important;
    border-radius:32px !important;
  }

  #mobileDock.is-expanded{
    width:218px !important;
    height:84px !important;
    bottom:calc(42px + env(safe-area-inset-bottom)) !important;
    border-radius:38px !important;
  }

  #mobileDock::before{
    display:none !important;
    content:none !important;
  }

  #mobileDock .mobile-dock-item{
    min-height:50px !important;
  }

  #mobileDock .rail-action-icon{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
  }

  /* Compact domain, but larger and clearly separated into the two domains. */
  .topbar .domain,
  .topbar .domain-wrap,
  .topbar .domain-address,
  .header-domain,
  .domain-address{
    font-size:15px !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    letter-spacing:0 !important;
    word-spacing:0 !important;
  }

  .topbar .domain .domain-main,
  .topbar .domain .domain-separator,
  .topbar .domain .domain-muted,
  .topbar .domain-wrap .domain-main,
  .topbar .domain-wrap .domain-separator,
  .topbar .domain-wrap .domain-muted,
  .topbar .domain-address .domain-main,
  .topbar .domain-address .domain-separator,
  .topbar .domain-address .domain-muted{
    margin:0 !important;
    padding:0 !important;
    letter-spacing:0 !important;
    word-spacing:0 !important;
    transform:none !important;
  }

  .topbar .domain .domain-separator,
  .topbar .domain-wrap .domain-separator,
  .topbar .domain-address .domain-separator{
    margin:0 5px !important;
    color:#777f83 !important;
  }
}

/* Keep the two domain halves visually together on every viewport. */
.domain-separator{
  color:#777f83 !important;
  margin-left:5px !important;
  margin-right:5px !important;
}

/* =========================================================
   MOBILE DOMAIN — TWO LINES
   everlight.nodayy.hu
   // nodayy.hu
   ========================================================= */
@media (max-width:660px){
  .topbar .domain,
  .topbar .domain-wrap,
  .topbar .domain-address,
  .header-domain,
  .domain-address{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    white-space:nowrap !important;
    line-height:1.05 !important;
    font-size:15px !important;
    font-weight:700 !important;
  }

  .topbar .domain .domain-main,
  .topbar .domain-wrap .domain-main,
  .topbar .domain-address .domain-main,
  .header-domain .domain-main{
    display:block !important;
    margin:0 !important;
  }

  .topbar .domain .domain-separator,
  .topbar .domain-wrap .domain-separator,
  .topbar .domain-address .domain-separator,
  .header-domain .domain-separator{
    display:block !important;
    margin:0 !important;
    color:#777f83 !important;
    font-size:13px !important;
    line-height:1 !important;
  }

  .topbar .domain .domain-muted,
  .topbar .domain-wrap .domain-muted,
  .topbar .domain-address .domain-muted,
  .header-domain .domain-muted{
    display:block !important;
    margin:0 !important;
    color:#777f83 !important;
    line-height:1.05 !important;
  }
}

@media (max-width:660px){
  .topbar .domain .domain-separator,
  .topbar .domain-wrap .domain-separator,
  .topbar .domain-address .domain-separator,
  .header-domain .domain-separator{
    font-size:0 !important;
    line-height:1 !important;
    color:#777f83 !important;
  }

  .topbar .domain .domain-separator::after,
  .topbar .domain-wrap .domain-separator::after,
  .topbar .domain-address .domain-separator::after,
  .header-domain .domain-separator::after{
    content:"//" !important;
    font-size:13px !important;
    line-height:1 !important;
    color:#777f83 !important;
  }
}

/* FINAL DOMAIN SEPARATOR OVERRIDE: exactly one visible // */
@media (max-width:660px){
  .topbar .domain .domain-separator,
  .topbar .domain .separator,
  .topbar .domain .slash,
  .topbar .domain-wrap .domain-separator,
  .topbar .domain-wrap .separator,
  .topbar .domain-address .domain-separator,
  .topbar .domain-address .separator,
  .header-domain .domain-separator,
  .header-domain .separator{
    display:none !important;
  }

  .topbar .domain,
  .topbar .domain-wrap,
  .topbar .domain-address,
  .header-domain{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    white-space:nowrap !important;
  }

  .topbar .domain::after,
  .topbar .domain-wrap::after,
  .topbar .domain-address::after,
  .header-domain::after{
    content:"// nodayy.hu" !important;
    display:block !important;
    color:#777f83 !important;
    font-size:13px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
  }

  .topbar .domain .domain-muted,
  .topbar .domain-wrap .domain-muted,
  .topbar .domain-address .domain-muted,
  .header-domain .domain-muted{
    display:none !important;
  }
}

/* =========================================================
   FINAL MOBILE VISUAL PASS
   ========================================================= */
@media (max-width:660px){

  /* --- Dynamic Island: larger, less rounded, slightly higher --- */
  #mobileDock{
    width:205px !important;
    height:68px !important;
    bottom:calc(38px + env(safe-area-inset-bottom)) !important;
    border-radius:22px !important;
    padding:6px !important;
  }

  #mobileDock.is-expanded{
    width:240px !important;
    height:88px !important;
    bottom:calc(50px + env(safe-area-inset-bottom)) !important;
    border-radius:26px !important;
  }

  #mobileDock .mobile-dock-item{
    border-radius:16px !important;
  }

  #mobileDock.is-expanded .mobile-dock-item{
    border-radius:19px !important;
  }

  /* --- Domain: exactly two clean lines, no duplicate separator --- */
  .topbar .domain,
  .topbar .domain-wrap,
  .topbar .domain-address,
  .header-domain{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:3px !important;
    white-space:nowrap !important;
    width:max-content !important;
    line-height:1 !important;
    font-size:16px !important;
  }

  .topbar .domain > a:first-child,
  .topbar .domain-wrap > a:first-child,
  .topbar .domain-address > a:first-child,
  .header-domain > a:first-child{
    display:block !important;
    margin:0 !important;
  }

  /* Hide all existing separator and second-domain nodes;
     the second line is rendered once by ::after. */
  .topbar .domain > span,
  .topbar .domain > .domain-separator,
  .topbar .domain > .separator,
  .topbar .domain > .slash,
  .topbar .domain-wrap > span,
  .topbar .domain-wrap > .domain-separator,
  .topbar .domain-wrap > .separator,
  .topbar .domain-address > span,
  .topbar .domain-address > .domain-separator,
  .topbar .domain-address > .separator,
  .header-domain > span,
  .header-domain > .domain-separator,
  .header-domain > .separator{
    display:none !important;
  }

  .topbar .domain > a:last-child,
  .topbar .domain-wrap > a:last-child,
  .topbar .domain-address > a:last-child,
  .header-domain > a:last-child{
    display:none !important;
  }

  .topbar .domain::after,
  .topbar .domain-wrap::after,
  .topbar .domain-address::after,
  .header-domain::after{
    content:"//  nodayy.hu" !important;
    display:block !important;
    color:#777f83 !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:1 !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* --- Everlight wordmark: substantially larger --- */
  .topbar .logo-word,
  .header-logo-text,
  .everlight-logo-text{
    font-size:44px !important;
    line-height:.92 !important;
    font-weight:900 !important;
    letter-spacing:-.05em !important;
  }
}

/* Larger wordmark on desktop. */
@media (min-width:661px){
  .topbar .logo-word,
  .header-logo-text,
  .everlight-logo-text{
    font-size:54px !important;
    line-height:.92 !important;
    font-weight:900 !important;
    letter-spacing:-.05em !important;
  }
}

.topbar .header-logo-image,
.header-logo-image{
  width:64px !important;
  height:64px !important;
  max-width:64px !important;
  max-height:64px !important;
}

@media (max-width:660px){
  .topbar .header-logo-image,
  .header-logo-image{
    width:56px !important;
    height:56px !important;
    max-width:56px !important;
    max-height:56px !important;
  }
}

/* =========================================================
   MOBILE ISLAND — LONGER + LOWER + EQUAL SCREEN MARGINS
   ========================================================= */
@media (max-width:660px){
  #mobileDock{
    width:230px !important;
    height:68px !important;
    left:50% !important;
    right:auto !important;
    bottom:24px !important;
    transform:translateX(-50%) !important;
    border-radius:22px !important;
  }

  #mobileDock.is-expanded{
    width:264px !important;
    height:88px !important;
    left:50% !important;
    right:auto !important;
    bottom:24px !important;
    transform:translateX(-50%) !important;
    border-radius:26px !important;
  }

  /* Keep the same horizontal and vertical visual inset. */
  #mobileDock{
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* =========================================================
   MOBILE DOMAIN — MATCHED WEIGHT
   Both domain lines use the same font size/weight.
   ========================================================= */
@media (max-width:660px){
  .topbar .domain > a:first-child,
  .topbar .domain::after,
  .topbar .domain-wrap > a:first-child,
  .topbar .domain-wrap::after,
  .topbar .domain-address > a:first-child,
  .topbar .domain-address::after,
  .header-domain > a:first-child,
  .header-domain::after{
    font-family:inherit !important;
    font-size:16px !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    line-height:1 !important;
    -webkit-font-smoothing:antialiased !important;
    text-rendering:geometricPrecision !important;
  }

  .topbar .domain::after,
  .topbar .domain-wrap::after,
  .topbar .domain-address::after,
  .header-domain::after{
    content:"//  nodayy.hu" !important;
  }
}

/* =========================================================
   DOMAIN STATUS LIGHT — MODE DEPENDENT
   Blue in aqua mode, yellow in sun mode.
   ========================================================= */
.topbar .domain{
  position:relative !important;
}

.topbar .domain::before{
  content:"" !important;
  display:inline-block !important;
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  min-height:8px !important;
  margin-right:8px !important;
  border-radius:50% !important;
  background:#82b9e8 !important;
  box-shadow:
    0 0 5px rgba(130,185,232,.95),
    0 0 12px rgba(130,185,232,.72) !important;
  animation:everlight-domain-pulse 1.6s ease-in-out infinite !important;
  vertical-align:middle !important;
}

body.sun-mode .topbar .domain::before{
  background:#f2c45c !important;
  box-shadow:
    0 0 5px rgba(242,196,92,.95),
    0 0 12px rgba(242,196,92,.72) !important;
}

@keyframes everlight-domain-pulse{
  0%,100%{ opacity:.55; transform:scale(.88); }
  50%{ opacity:1; transform:scale(1); }
}

@media(max-width:660px){
  .topbar .domain{
    display:flex !important;
    align-items:flex-start !important;
  }

  .topbar .domain::before{
    width:7px !important;
    height:7px !important;
    min-width:7px !important;
    min-height:7px !important;
    margin-right:7px !important;
    margin-top:4px !important;
  }
}

/* =========================================================
   FINAL MOBILE CLOCK/DATE POSITION
   Directly below the fixed header — no extra gap.
   ========================================================= */
@media (max-width:660px){
  .layout{
    padding-top:calc(64px + env(safe-area-inset-top, 0px)) !important;
  }

  main#feed{
    padding-top:0 !important;
  }

  .time-lockup{
    margin-top:0 !important;
    padding-top:10px !important;
    padding-bottom:14px !important;
    position:relative !important;
    z-index:2 !important;
  }
}

@media (max-width:390px){
  .layout{
    padding-top:calc(60px + env(safe-area-inset-top, 0px)) !important;
  }

  .time-lockup{
    margin-top:0 !important;
    padding-top:8px !important;
  }
}

/* FINAL MOBILE ISLAND / AI / DOMAIN */
@media (max-width:660px){
  #mobileDock,.mobile-dock{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    width:230px !important;
    max-width:calc(100vw - 28px) !important;
    height:68px !important;
    bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
    border-radius:22px !important;
    z-index:2147483000 !important;
  }
  #mobileDock.is-expanded{
    width:250px !important;
    height:84px !important;
    bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important;
    border-radius:26px !important;
  }
  #mobileDock::before,.mobile-dock::before{
    display:none !important;
    content:none !important;
  }

  .topbar .domain,.topbar .domain-wrap,.topbar .domain-address,.header-domain{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:2px !important;
    width:max-content !important;
    max-width:calc(100vw - 110px) !important;
    overflow:visible !important;
    white-space:nowrap !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:700 !important;
  }
  .topbar .domain::before{
    position:absolute !important;
    left:-11px !important;
    top:50% !important;
    width:6px !important;
    height:6px !important;
    min-width:6px !important;
    min-height:6px !important;
    margin:0 !important;
    transform:translateY(-50%) !important;
  }
  .topbar .domain > a:first-child,.topbar .domain-wrap > a:first-child,
  .topbar .domain-address > a:first-child,.header-domain > a:first-child{
    display:block !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:700 !important;
  }
  .topbar .domain::after,.topbar .domain-wrap::after,
  .topbar .domain-address::after,.header-domain::after{
    content:"//  nodayy.hu" !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:700 !important;
    color:#777f83 !important;
  }
}

/* Mode light stays beside the domain on desktop too. */
.topbar .domain{position:relative !important;}
.topbar .domain::before{
  position:absolute !important;
  left:-13px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
}

/* =========================================================
   FINAL MOBILE ISLAND / LOGO / DOMAIN LIGHT
   ========================================================= */
@media (max-width:660px){

  /* Island slightly lower, but still directly above the AI text. */
  #mobileDock,
  .mobile-dock{
    bottom:calc(58px + env(safe-area-inset-bottom,0px)) !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    width:230px !important;
    height:68px !important;
  }

  #mobileDock.is-expanded{
    bottom:calc(58px + env(safe-area-inset-bottom,0px)) !important;
    width:250px !important;
    height:84px !important;
  }

  /* Force all three island icons to remain visible above every overlay. */
  #mobileDock .mobile-dock-item,
  #mobileDock .mobile-dock-item .rail-action-icon{
    visibility:visible !important;
    opacity:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#c7d1d5 !important;
  }

  #mobileDock .mobile-dock-item.active,
  #mobileDock .mobile-dock-item.active .rail-action-icon{
    color:var(--accent) !important;
  }

  #mobileDock .rail-action-icon::before,
  #mobileDock .rail-action-icon::after{
    opacity:1 !important;
    visibility:visible !important;
  }

  /* Domain light: clearly visible, beside the domain, not above it. */
  .topbar .domain::before{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:absolute !important;
    left:-14px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
    min-height:8px !important;
    margin:0 !important;
    border-radius:50% !important;
    background:#82b9e8 !important;
    box-shadow:
      0 0 5px rgba(130,185,232,1),
      0 0 12px rgba(130,185,232,.95),
      0 0 20px rgba(130,185,232,.55) !important;
    z-index:20 !important;
  }

  body.sun-mode .topbar .domain::before{
    background:#f2c45c !important;
    box-shadow:
      0 0 5px rgba(242,196,92,1),
      0 0 12px rgba(242,196,92,.95),
      0 0 20px rgba(242,196,92,.55) !important;
  }

  .topbar .domain{
    overflow:visible !important;
    margin-left:8px !important;
  }

  /* Make the Everlight wordmark clearly larger and keep it visible. */
  .topbar .header-logo .logo-word,
  .topbar .logo-word,
  .header-logo-text,
  .everlight-logo-text{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    font-size:44px !important;
    line-height:.92 !important;
    font-weight:900 !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }

  .topbar .header-logo{
    overflow:visible !important;
    min-width:max-content !important;
  }
}

/* =========================================================
   MOBILE EVERLIGHT WORDMARK — BALANCED SIZE
   Preserve existing typography, reduce only the oversized scale.
   ========================================================= */
@media (max-width:660px){
  .topbar .header-logo .logo-word,
  .topbar .logo-word,
  .header-logo-text,
  .everlight-logo-text{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    font-family:"Playfair Display",serif !important;
    font-size:32px !important;
    line-height:1 !important;
    font-weight:600 !important;
    letter-spacing:-.035em !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }
}

/* =========================================================
   FINAL MOBILE ISLAND — LONGER, LOWER, SAFE SIDE MARGINS
   + REAL ICONS ALWAYS VISIBLE
   ========================================================= */
@media (max-width:660px){
  #mobileDock,
  .mobile-dock{
    left:50% !important;
    right:auto !important;
    width:252px !important;
    max-width:calc(100vw - 32px) !important;
    height:68px !important;
    bottom:calc(38px + env(safe-area-inset-bottom,0px)) !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
    border-radius:22px !important;
    overflow:visible !important;
  }

  #mobileDock.is-expanded{
    width:272px !important;
    max-width:calc(100vw - 28px) !important;
    height:84px !important;
    bottom:calc(38px + env(safe-area-inset-bottom,0px)) !important;
    border-radius:26px !important;
  }

  /* Do not clip the icon drawings inside the island. */
  #mobileDock .mobile-dock-item,
  #mobileDock .mobile-dock-item .rail-action-icon,
  #mobileDock .mobile-dock-item .rail-action-icon::before,
  #mobileDock .mobile-dock-item .rail-action-icon::after{
    visibility:visible !important;
    opacity:1 !important;
    overflow:visible !important;
  }

  #mobileDock .mobile-dock-item{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#c9d3d7 !important;
    background:transparent !important;
  }

  #mobileDock .mobile-dock-item.active,
  #mobileDock .mobile-dock-item.active .rail-action-icon{
    color:var(--accent) !important;
  }

  #mobileDock .rail-action-icon{
    position:relative !important;
    display:block !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    flex:0 0 30px !important;
    font-size:0 !important;
    color:currentColor !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /* Explicit icon drawing, independent of icon font/SVG loading. */
  #mobileDock .rail-icon-home::before{
    content:"" !important;
    position:absolute !important;
    left:5px !important;
    top:11px !important;
    width:20px !important;
    height:15px !important;
    border:2px solid currentColor !important;
    border-top:0 !important;
    border-radius:3px !important;
    box-sizing:border-box !important;
  }
  #mobileDock .rail-icon-home::after{
    content:"" !important;
    position:absolute !important;
    left:7px !important;
    top:4px !important;
    width:16px !important;
    height:16px !important;
    border-left:2px solid currentColor !important;
    border-top:2px solid currentColor !important;
    transform:rotate(45deg) !important;
    border-radius:2px 0 0 0 !important;
    box-sizing:border-box !important;
  }

  #mobileDock .rail-icon-chat::before{
    content:"" !important;
    position:absolute !important;
    left:3px !important;
    top:5px !important;
    width:22px !important;
    height:18px !important;
    border:2px solid currentColor !important;
    border-radius:50% !important;
    box-sizing:border-box !important;
  }
  #mobileDock .rail-icon-chat::after{
    content:"" !important;
    position:absolute !important;
    left:17px !important;
    top:18px !important;
    width:7px !important;
    height:7px !important;
    border-left:2px solid currentColor !important;
    border-bottom:2px solid currentColor !important;
    transform:skewY(-28deg) !important;
    box-sizing:border-box !important;
  }

  #mobileDock .rail-icon-profile::before{
    content:"" !important;
    position:absolute !important;
    left:10px !important;
    top:2px !important;
    width:10px !important;
    height:10px !important;
    border:2px solid currentColor !important;
    border-radius:50% !important;
    box-sizing:border-box !important;
  }
  #mobileDock .rail-icon-profile::after{
    content:"" !important;
    position:absolute !important;
    left:4px !important;
    top:15px !important;
    width:22px !important;
    height:11px !important;
    border:2px solid currentColor !important;
    border-bottom:0 !important;
    border-radius:12px 12px 0 0 !important;
    box-sizing:border-box !important;
  }
}

/* =========================================================
   FINAL HEADER / DOMAIN / MOBILE ISLAND TUNING
   ========================================================= */

/* PC: larger Everlight wordmark */
@media (min-width:661px){
  .topbar .logo-word,
  .header-logo-text,
  .everlight-logo-text{
    font-size:60px !important;
    line-height:.92 !important;
    font-weight:600 !important;
    letter-spacing:-.045em !important;
    white-space:nowrap !important;
  }

  .topbar .header-logo-image,
  .header-logo-image{
    width:68px !important;
    height:68px !important;
    max-width:68px !important;
    max-height:68px !important;
  }

  .topbar .domain{
    font-size:13px !important;
  }
}

/* Mobile: slightly smaller Everlight and domain */
@media (max-width:660px){
  .topbar .logo-word,
  .header-logo-text,
  .everlight-logo-text{
    font-size:30px !important;
    line-height:1 !important;
    font-weight:600 !important;
    letter-spacing:-.035em !important;
  }

  .topbar .header-logo-image,
  .header-logo-image{
    width:50px !important;
    height:50px !important;
    max-width:50px !important;
    max-height:50px !important;
  }

  .topbar .domain,
  .topbar .domain-wrap,
  .topbar .domain-address,
  .header-domain{
    font-size:11px !important;
    line-height:1 !important;
    max-width:calc(100vw - 105px) !important;
  }

  .topbar .domain > a:first-child,
  .topbar .domain-wrap > a:first-child,
  .topbar .domain-address > a:first-child,
  .header-domain > a:first-child{
    font-size:11px !important;
    font-weight:700 !important;
  }

  .topbar .domain::after,
  .topbar .domain-wrap::after,
  .topbar .domain-address::after,
  .header-domain::after{
    font-size:10px !important;
  }

  /* Put the glowing dot exactly before the first domain line. */
  .topbar .domain{
    position:relative !important;
    margin-left:0 !important;
    padding-left:11px !important;
    overflow:visible !important;
  }

  .topbar .domain::before{
    display:block !important;
    position:absolute !important;
    left:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:6px !important;
    height:6px !important;
    min-width:6px !important;
    min-height:6px !important;
    margin:0 !important;
    border-radius:50% !important;
    background:#82b9e8 !important;
    box-shadow:
      0 0 4px rgba(130,185,232,1),
      0 0 10px rgba(130,185,232,.9) !important;
    z-index:30 !important;
  }

  body.sun-mode .topbar .domain::before{
    background:#f2c45c !important;
    box-shadow:
      0 0 4px rgba(242,196,92,1),
      0 0 10px rgba(242,196,92,.9) !important;
  }

  /* Longer island, lower on screen, but with safe equal side margins. */
  #mobileDock,
  .mobile-dock{
    width:270px !important;
    max-width:calc(100vw - 32px) !important;
    height:68px !important;
    left:50% !important;
    right:auto !important;
    bottom:calc(22px + env(safe-area-inset-bottom,0px)) !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  #mobileDock.is-expanded{
    width:292px !important;
    max-width:calc(100vw - 28px) !important;
    height:84px !important;
    bottom:calc(22px + env(safe-area-inset-bottom,0px)) !important;
    border-radius:26px !important;
  }
}

/* =========================================================
   DESKTOP EVERLIGHT WORDMARK — DEFINITIVE SIZE OVERRIDE
   The existing logo typography remains unchanged; only scale.
   ========================================================= */
@media (min-width:661px){
  header .header-logo,
  .topbar .header-logo,
  .site-header .header-logo,
  .header .header-logo{
    display:flex !important;
    align-items:center !important;
    overflow:visible !important;
    min-width:max-content !important;
  }

  header .header-logo *,
  .topbar .header-logo *,
  .site-header .header-logo *,
  .header .header-logo *{
    overflow:visible !important;
  }

  header .header-logo .logo-word,
  header .header-logo .logo-text,
  header .header-logo .brand-name,
  header .header-logo .brand-text,
  .topbar .header-logo .logo-word,
  .topbar .header-logo .logo-text,
  .topbar .header-logo .brand-name,
  .topbar .header-logo .brand-text,
  .site-header .header-logo .logo-word,
  .site-header .header-logo .logo-text,
  .site-header .header-logo .brand-name,
  .site-header .header-logo .brand-text,
  .header .header-logo .logo-word,
  .header .header-logo .logo-text,
  .header .header-logo .brand-name,
  .header .header-logo .brand-text{
    font-size:68px !important;
    line-height:.9 !important;
    font-weight:600 !important;
    letter-spacing:-.045em !important;
    white-space:nowrap !important;
    transform:none !important;
    scale:1 !important;
  }

  /* If Everlight is a plain text node wrapped by the brand link. */
  header a[aria-label*="Everlight" i],
  .topbar a[aria-label*="Everlight" i],
  header .brand,
  .topbar .brand{
    font-size:68px !important;
    line-height:.9 !important;
    font-weight:600 !important;
    letter-spacing:-.045em !important;
    white-space:nowrap !important;
  }
}

/* =========================================================
   MOBILE HEADER — SLIGHTLY SMALLER DOMAIN + WORDMARK
   ========================================================= */
@media (max-width:660px){
  .topbar .domain,
  .topbar .domain-wrap,
  .topbar .domain-address,
  .header-domain{
    font-size:10px !important;
  }

  .topbar .domain > a:first-child,
  .topbar .domain-wrap > a:first-child,
  .topbar .domain-address > a:first-child,
  .header-domain > a:first-child{
    font-size:10px !important;
    line-height:1 !important;
  }

  .topbar .domain::after,
  .topbar .domain-wrap::after,
  .topbar .domain-address::after,
  .header-domain::after{
    font-size:9px !important;
    line-height:1 !important;
  }

  .topbar .logo-word,
  .header-logo-text,
  .everlight-logo-text,
  header .header-logo .logo-word{
    font-size:28px !important;
    line-height:1 !important;
    font-weight:600 !important;
    letter-spacing:-.03em !important;
  }
}

/* =========================================================
   FINAL MOBILE BOTTOM ISLAND + DATE/TIME POSITION
   ========================================================= */
@media (max-width:660px){

  /* Longer bottom island, still safely inside both screen edges. */
  #mobileDock,
  .mobile-dock{
    width:286px !important;
    max-width:calc(100vw - 28px) !important;
    height:68px !important;
    left:50% !important;
    right:auto !important;
    bottom:calc(22px + env(safe-area-inset-bottom,0px)) !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  #mobileDock.is-expanded{
    width:306px !important;
    max-width:calc(100vw - 24px) !important;
    height:84px !important;
    bottom:calc(22px + env(safe-area-inset-bottom,0px)) !important;
    border-radius:26px !important;
  }

  /* Date/time immediately below the fixed top header. */
  .layout{
    padding-top:calc(64px + env(safe-area-inset-top,0px)) !important;
  }

  main#feed{
    padding-top:0 !important;
    margin-top:0 !important;
  }

  .time-lockup{
    margin-top:0 !important;
    padding-top:6px !important;
    padding-bottom:12px !important;
    position:relative !important;
    top:0 !important;
    transform:none !important;
  }

  .time-lockup .date,
  .time-lockup .time,
  .time-lockup .clock,
  .time-lockup .today{
    margin-top:0 !important;
    transform:none !important;
  }
}

@media (min-width:661px){
  header .header-logo .logo-word,.topbar .header-logo .logo-word,.site-header .header-logo .logo-word,.header .header-logo .logo-word,.topbar .logo-word{
    font-size:52px!important;line-height:.95!important;font-weight:600!important;letter-spacing:-.04em!important;transform:none!important;
  }
}
@media (max-width:660px){
  #themeToggle,#themeLogoToggle,.theme-toggle,.style-toggle,.style-switch,[aria-label*="Stílus" i],[title*="Stílus" i]{
    position:relative!important;z-index:2147483647!important;pointer-events:auto!important;touch-action:manipulation!important;transform:none!important;
  }
  .topbar{position:relative!important;z-index:2147483500!important;isolation:isolate!important;overflow:visible!important;}
  #mobileDock,.mobile-dock{z-index:2147483000!important;}
}

/* =========================================================
   AI NOTICE — SLIGHTLY LARGER ON PC + MOBILE
   ========================================================= */
.ai-notice,
.ai-disclosure,
.ai-generated-notice,
.ai-footer-notice,
[class*="ai-notice"],
[class*="ai-disclosure"]{
  font-size:15px !important;
  line-height:1.35 !important;
}

@media (max-width:660px){
  .ai-notice,
  .ai-disclosure,
  .ai-generated-notice,
  .ai-footer-notice,
  [class*="ai-notice"],
  [class*="ai-disclosure"]{
    font-size:14px !important;
    line-height:1.35 !important;
  }
}

/* =========================================================
   FINAL MODE LIGHT + MOBILE STYLE SWITCH
   ========================================================= */
.topbar .domain{
  position:relative !important;
}
.topbar .domain::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:-14px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  min-height:8px !important;
  border-radius:50% !important;
  background:#82b9e8 !important;
  box-shadow:0 0 5px rgba(130,185,232,1),0 0 12px rgba(130,185,232,.9),0 0 20px rgba(130,185,232,.55) !important;
  animation:everlight-domain-pulse 1.45s ease-in-out infinite !important;
  z-index:50 !important;
  pointer-events:none !important;
}
body.sun-mode .topbar .domain::before{
  background:#f2c45c !important;
  box-shadow:0 0 5px rgba(242,196,92,1),0 0 12px rgba(242,196,92,.9),0 0 20px rgba(242,196,92,.55) !important;
}
@keyframes everlight-domain-pulse{
  0%,100%{opacity:.38;transform:translateY(-50%) scale(.82)}
  50%{opacity:1;transform:translateY(-50%) scale(1.12)}
}

/* Mobile: keep the light beside the first domain line and animate it. */
@media(max-width:660px){
  .topbar .domain{
    padding-left:12px !important;
    margin-left:0 !important;
    overflow:visible !important;
  }
  .topbar .domain::before{
    left:0 !important;
    top:50% !important;
    width:7px !important;
    height:7px !important;
    min-width:7px !important;
    min-height:7px !important;
    transform:translateY(-50%) scale(.9) !important;
    animation:everlight-domain-pulse-mobile 1.45s ease-in-out infinite !important;
  }
  @keyframes everlight-domain-pulse-mobile{
    0%,100%{opacity:.35;transform:translateY(-50%) scale(.78)}
    50%{opacity:1;transform:translateY(-50%) scale(1.12)}
  }

  /* Style switch is a real, tappable top-layer control. */
  #themeToggle,#themeLogoToggle,.theme-toggle,.style-toggle,.style-switch{
    position:relative !important;
    z-index:2147483647 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    transform:none !important;
  }
  .topbar{
    z-index:2147483500 !important;
    overflow:visible !important;
  }

  /* If the dropdown is absolutely positioned, keep it inside the viewport. */
  #themeToggle + .theme-menu,
  #themeToggle ~ .theme-menu,
  #themeLogoToggle + .theme-menu,
  .theme-toggle + .theme-menu,
  .style-toggle + .theme-menu,
  .style-switch + .theme-menu,
  .theme-menu{
    z-index:2147483647 !important;
  }
}

/* Mobile island is fixed-size: no drag-to-expand interaction. */
@media (max-width:660px){
  #mobileDock,.mobile-dock{
    touch-action:manipulation !important;
    user-select:none !important;
    -webkit-user-select:none !important;
  }
  #mobileDock.is-expanded{
    width:286px !important;
    max-width:calc(100vw - 28px) !important;
    height:68px !important;
    bottom:calc(22px + env(safe-area-inset-bottom,0px)) !important;
    border-radius:22px !important;
  }
}

/* =========================================================
   DEFINITIVE DESKTOP DOMAIN MODE LIGHT
   ========================================================= */
.topbar .domain{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  overflow:visible !important;
}

.topbar .domain .domain-mode-light{
  display:block !important;
  flex:0 0 8px !important;
  width:8px !important;
  height:8px !important;
  margin-right:7px !important;
  border-radius:50% !important;
  background:#82b9e8 !important;
  box-shadow:
    0 0 4px #82b9e8,
    0 0 9px rgba(130,185,232,.95),
    0 0 17px rgba(130,185,232,.65) !important;
  animation:everlight-desktop-dot-pulse 1.4s ease-in-out infinite !important;
  opacity:1 !important;
  visibility:visible !important;
  position:relative !important;
  z-index:9999 !important;
  pointer-events:none !important;
}

body.sun-mode .topbar .domain .domain-mode-light{
  background:#f2c45c !important;
  box-shadow:
    0 0 4px #f2c45c,
    0 0 9px rgba(242,196,92,.95),
    0 0 17px rgba(242,196,92,.65) !important;
}

@keyframes everlight-desktop-dot-pulse{
  0%,100%{opacity:.35;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.18)}
}

/* Mobile uses the real element too, so the light is exactly beside
   everlight.nodayy.hu instead of being positioned above the domain. */
@media(max-width:660px){
  .topbar .domain .domain-mode-light{
    flex-basis:7px !important;
    width:7px !important;
    height:7px !important;
    margin-right:6px !important;
  }
}

/* =========================================================
   SINGLE DOMAIN MODE LIGHT — REMOVE DUPLICATE PSEUDO DOT
   ========================================================= */
.topbar .domain::before{
  content:none !important;
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  animation:none !important;
  box-shadow:none !important;
  background:transparent !important;
}

.topbar .domain .domain-mode-light{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  animation:everlight-single-dot-pulse 1.4s ease-in-out infinite !important;
  position:relative !important;
  z-index:9999 !important;
  flex:0 0 8px !important;
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  min-height:8px !important;
  margin-right:7px !important;
  border-radius:50% !important;
  background:#82b9e8 !important;
  box-shadow:
    0 0 4px #82b9e8,
    0 0 9px rgba(130,185,232,.95),
    0 0 17px rgba(130,185,232,.65) !important;
}

body.sun-mode .topbar .domain .domain-mode-light{
  background:#f2c45c !important;
  box-shadow:
    0 0 4px #f2c45c,
    0 0 9px rgba(242,196,92,.95),
    0 0 17px rgba(242,196,92,.65) !important;
}

@keyframes everlight-single-dot-pulse{
  0%,100%{opacity:.35;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.18)}
}

@media(max-width:660px){
  .topbar .domain{
    padding-left:0 !important;
    margin-left:0 !important;
  }

  .topbar .domain .domain-mode-light{
    flex:0 0 7px !important;
    width:7px !important;
    height:7px !important;
    min-width:7px !important;
    min-height:7px !important;
    margin-right:6px !important;
  }
}

/* =========================================================
   DOMAIN LIGHT — MOBILE BESIDE DOMAIN + SMOOTH PULSE
   ========================================================= */
.topbar .domain{
  position:relative !important;
  overflow:visible !important;
}

/* Only the real HTML light is used. */
.topbar .domain::before{
  content:none !important;
  display:none !important;
}

.topbar .domain .domain-mode-light{
  position:relative !important;
  display:block !important;
  flex:0 0 8px !important;
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  min-height:8px !important;
  margin-right:7px !important;
  margin-left:0 !important;
  border-radius:50% !important;
  background:#82b9e8 !important;
  box-shadow:
    0 0 4px rgba(130,185,232,.95),
    0 0 10px rgba(130,185,232,.65),
    0 0 16px rgba(130,185,232,.35) !important;
  opacity:.65 !important;
  transform:scale(.9) !important;
  animation:everlight-smooth-pulse 2.2s ease-in-out infinite !important;
  pointer-events:none !important;
  z-index:9999 !important;
}

body.sun-mode .topbar .domain .domain-mode-light{
  background:#f2c45c !important;
  box-shadow:
    0 0 4px rgba(242,196,92,.95),
    0 0 10px rgba(242,196,92,.65),
    0 0 16px rgba(242,196,92,.35) !important;
}

@keyframes everlight-smooth-pulse{
  0%,100%{
    opacity:.45;
    transform:scale(.86);
  }
  50%{
    opacity:1;
    transform:scale(1.08);
  }
}

@media(max-width:660px){
  .topbar .domain{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:0 !important;
    padding-left:0 !important;
    margin-left:0 !important;
    width:max-content !important;
    max-width:calc(100vw - 105px) !important;
    overflow:visible !important;
  }

  .topbar .domain .domain-mode-light{
    position:relative !important;
    flex:0 0 6px !important;
    width:6px !important;
    height:6px !important;
    min-width:6px !important;
    min-height:6px !important;
    margin-right:5px !important;
    margin-left:0 !important;
    align-self:center !important;
  }

  /* The domain itself stays two lines, while the light sits
     beside the whole domain block. */
  .topbar .domain > a:first-of-type{
    display:block !important;
  }

  .topbar .domain::after{
    display:block !important;
  }
}

/* =========================================================
   DOMAIN — FINAL STABLE TWO-LINE LAYOUT + SMOOTH PULSE
   ========================================================= */
.topbar .domain{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-direction:row !important;
  gap:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
  width:max-content !important;
  max-width:none !important;
}
.topbar .domain::before,
.topbar .domain::after{
  content:none !important;
  display:none !important;
  animation:none !important;
}
.topbar .domain-lines{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:3px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.topbar .domain-lines > a{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:inherit !important;
  text-decoration:none !important;
}
.topbar .domain-second{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:5px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.topbar .domain-second span{
  color:#777f83 !important;
  font-size:.9em !important;
  font-weight:700 !important;
}
.topbar .domain-second a{
  color:#777f83 !important;
  text-decoration:none !important;
}

.topbar .domain .domain-mode-light{
  display:block !important;
  flex:0 0 7px !important;
  width:7px !important;
  height:7px !important;
  min-width:7px !important;
  min-height:7px !important;
  margin:0 6px 0 0 !important;
  border-radius:50% !important;
  background:#82b9e8 !important;
  box-shadow:
    0 0 4px rgba(130,185,232,.95),
    0 0 9px rgba(130,185,232,.7) !important;
  opacity:.45 !important;
  transform:scale(.86) !important;
  animation:everlight-smooth-pulse-final 1.8s ease-in-out infinite !important;
  visibility:visible !important;
  pointer-events:none !important;
  z-index:10000 !important;
}
body.sun-mode .topbar .domain .domain-mode-light{
  background:#f2c45c !important;
  box-shadow:
    0 0 4px rgba(242,196,92,.95),
    0 0 9px rgba(242,196,92,.7) !important;
}
@keyframes everlight-smooth-pulse-final{
  0%,100%{opacity:.35;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.08)}
}

@media(max-width:660px){
  .topbar .domain{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:max-content !important;
    max-width:calc(100vw - 105px) !important;
    overflow:visible !important;
  }
  .topbar .domain-lines{
    gap:3px !important;
  }
  .topbar .domain-lines > a{
    font-size:10px !important;
    line-height:1 !important;
    font-weight:700 !important;
  }
  .topbar .domain-second{
    gap:4px !important;
  }
  .topbar .domain-second span,
  .topbar .domain-second a{
    font-size:9px !important;
    line-height:1 !important;
  }
  .topbar .domain .domain-mode-light{
    flex-basis:6px !important;
    width:6px !important;
    height:6px !important;
    min-width:6px !important;
    min-height:6px !important;
    margin-right:5px !important;
  }
}

/* =========================================================
   MOBILE DOMAIN — FULLY VISIBLE + REAL SMOOTH PULSE
   ========================================================= */
@media (max-width:660px){
  .topbar .domain{
    flex:0 1 auto !important;
    width:auto !important;
    max-width:calc(100vw - 72px) !important;
    min-width:0 !important;
    overflow:visible !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 !important;
    gap:0 !important;
  }

  .topbar .domain-lines{
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  .topbar .domain-lines > a{
    display:block !important;
    max-width:100% !important;
    overflow:visible !important;
    white-space:nowrap !important;
    font-size:9.5px !important;
    letter-spacing:-.015em !important;
    line-height:1.05 !important;
  }

  .topbar .domain-second{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
    gap:3px !important;
  }

  .topbar .domain-second span,
  .topbar .domain-second a{
    font-size:8.5px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }

  /* Dot is a real element, inline before the domain text. */
  .topbar .domain .domain-mode-light{
    position:relative !important;
    flex:0 0 6px !important;
    width:6px !important;
    height:6px !important;
    min-width:6px !important;
    min-height:6px !important;
    margin:0 4px 0 0 !important;
    align-self:center !important;
    opacity:.45 !important;
    transform:scale(.82) !important;
    animation:everlight-mobile-pulse 1.8s ease-in-out infinite !important;
    animation-fill-mode:both !important;
    will-change:opacity,transform,box-shadow !important;
    background:#82b9e8 !important;
    border-radius:50% !important;
    box-shadow:0 0 3px rgba(130,185,232,.9),0 0 8px rgba(130,185,232,.55) !important;
    display:block !important;
    visibility:visible !important;
  }

  body.sun-mode .topbar .domain .domain-mode-light{
    background:#f2c45c !important;
    box-shadow:0 0 3px rgba(242,196,92,.9),0 0 8px rgba(242,196,92,.55) !important;
  }

  @keyframes everlight-mobile-pulse{
    0%,100%{
      opacity:.28;
      transform:scale(.78);
      box-shadow:0 0 2px rgba(130,185,232,.55),0 0 5px rgba(130,185,232,.3);
    }
    50%{
      opacity:1;
      transform:scale(1.18);
      box-shadow:0 0 5px rgba(130,185,232,1),0 0 12px rgba(130,185,232,.8),0 0 18px rgba(130,185,232,.4);
    }
  }

  body.sun-mode .topbar .domain .domain-mode-light{
    animation-name:everlight-mobile-pulse-sun !important;
  }

  @keyframes everlight-mobile-pulse-sun{
    0%,100%{
      opacity:.28;
      transform:scale(.78);
      box-shadow:0 0 2px rgba(242,196,92,.55),0 0 5px rgba(242,196,92,.3);
    }
    50%{
      opacity:1;
      transform:scale(1.18);
      box-shadow:0 0 5px rgba(242,196,92,1),0 0 12px rgba(242,196,92,.8),0 0 18px rgba(242,196,92,.4);
    }
  }
}

/* =========================================================
   DEFINITIVE DOMAIN DOT PULSE + DESKTOP DOMAIN TEXT
   ========================================================= */

/* Make the pulse independent of any previous pseudo-element rules. */
.topbar .domain .domain-mode-light{
  animation: everlight-dot-breathe 1.65s cubic-bezier(.45,0,.25,1) infinite !important;
  animation-play-state:running !important;
  will-change:opacity,transform,box-shadow !important;
  transform-origin:center !important;
}

@keyframes everlight-dot-breathe{
  0%,100%{
    opacity:.22 !important;
    transform:scale(.72) !important;
    box-shadow:0 0 1px rgba(130,185,232,.35),0 0 4px rgba(130,185,232,.18) !important;
  }
  45%{
    opacity:.72 !important;
    transform:scale(.94) !important;
    box-shadow:0 0 3px rgba(130,185,232,.8),0 0 8px rgba(130,185,232,.5) !important;
  }
  55%{
    opacity:1 !important;
    transform:scale(1.18) !important;
    box-shadow:0 0 5px rgba(130,185,232,1),0 0 12px rgba(130,185,232,.8),0 0 18px rgba(130,185,232,.4) !important;
  }
}

body.sun-mode .topbar .domain .domain-mode-light{
  animation-name:everlight-dot-breathe-sun !important;
}

@keyframes everlight-dot-breathe-sun{
  0%,100%{
    opacity:.22 !important;
    transform:scale(.72) !important;
    box-shadow:0 0 1px rgba(242,196,92,.35),0 0 4px rgba(242,196,92,.18) !important;
  }
  45%{
    opacity:.72 !important;
    transform:scale(.94) !important;
    box-shadow:0 0 3px rgba(242,196,92,.8),0 0 8px rgba(242,196,92,.5) !important;
  }
  55%{
    opacity:1 !important;
    transform:scale(1.18) !important;
    box-shadow:0 0 5px rgba(242,196,92,1),0 0 12px rgba(242,196,92,.8),0 0 18px rgba(242,196,92,.4) !important;
  }
}

/* Do not let reduced-motion rules disable this tiny UI indicator. */
@media (prefers-reduced-motion:reduce){
  .topbar .domain .domain-mode-light{
    animation:everlight-dot-breathe 1.65s cubic-bezier(.45,0,.25,1) infinite !important;
    animation-play-state:running !important;
  }
}

/* Desktop: give the first domain enough room so the final 'g' is never clipped. */
@media (min-width:661px){
  .topbar .domain{
    overflow:visible !important;
    width:max-content !important;
    min-width:max-content !important;
    max-width:none !important;
  }
  .topbar .domain-lines{
    overflow:visible !important;
    width:max-content !important;
    min-width:max-content !important;
  }
  .topbar .domain-lines > a{
    display:block !important;
    overflow:visible !important;
    width:max-content !important;
    min-width:max-content !important;
    max-width:none !important;
    white-space:nowrap !important;
    padding-right:4px !important;
    letter-spacing:0 !important;
  }
}

/* =========================================================
   SETTINGS HAMBURGER — SITE-WIDE
   ========================================================= */
.settings-picker{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2147483646 !important;
}

.settings-trigger{
  width:44px !important;
  height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:2px solid currentColor !important;
  border-radius:10px !important;
  background:#050505 !important;
  color:#fff !important;
  cursor:pointer !important;
  padding:0 !important;
  box-sizing:border-box !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation !important;
}

.settings-trigger:hover,
.settings-trigger:focus-visible{
  outline:none !important;
  transform:none !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.18) !important;
}

.hamburger-icon{
  width:22px !important;
  height:18px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
}

.hamburger-icon span{
  display:block !important;
  width:100% !important;
  height:3px !important;
  border-radius:3px !important;
  background:#fff !important;
}

body.sun-mode .settings-trigger{
  background:#050505 !important;
  color:#fff !important;
}

body.mono-mode .settings-trigger{
  background:#fff !important;
  color:#050505 !important;
  border-color:#050505 !important;
}

body.mono-mode .hamburger-icon span{
  background:#050505 !important;
}

body.white-mode .settings-trigger{
  background:#fff !important;
  color:#050505 !important;
  border-color:#050505 !important;
}

body.white-mode .hamburger-icon span{
  background:#050505 !important;
}

.settings-menu{
  position:absolute !important;
  top:calc(100% + 8px) !important;
  right:0 !important;
  width:270px !important;
  max-width:calc(100vw - 24px) !important;
  padding:14px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:14px !important;
  background:#0b0d0f !important;
  color:#fff !important;
  box-shadow:0 16px 45px rgba(0,0,0,.45) !important;
  z-index:2147483647 !important;
  box-sizing:border-box !important;
}

body.mono-mode .settings-menu,
body.white-mode .settings-menu{
  background:#fff !important;
  color:#050505 !important;
  border-color:rgba(0,0,0,.18) !important;
}

.settings-menu[hidden]{
  display:none !important;
}

.settings-title{
  font-size:16px !important;
  font-weight:800 !important;
  margin-bottom:12px !important;
}

.settings-section{
  padding:10px 0 !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}

body.mono-mode .settings-section,
body.white-mode .settings-section{
  border-top-color:rgba(0,0,0,.10) !important;
}

.settings-section-title,
.settings-label{
  display:block !important;
  font-size:13px !important;
  font-weight:750 !important;
  margin-bottom:7px !important;
}

.settings-options{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:7px !important;
}

.settings-option{
  min-height:36px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.06) !important;
  color:inherit !important;
  font-weight:700 !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
}

.settings-option.active{
  border-color:currentColor !important;
  box-shadow:inset 0 0 0 1px currentColor !important;
}

.settings-select{
  width:100% !important;
  min-height:38px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:9px !important;
  padding:0 9px !important;
  background:#111417 !important;
  color:#fff !important;
  font:inherit !important;
}

body.mono-mode .settings-select,
body.white-mode .settings-select{
  background:#fff !important;
  color:#050505 !important;
  border-color:rgba(0,0,0,.18) !important;
}

@media(max-width:660px){
  .settings-trigger{
    width:42px !important;
    height:42px !important;
    border-radius:9px !important;
  }

  .settings-menu{
    position:fixed !important;
    top:calc(62px + env(safe-area-inset-top,0px)) !important;
    right:12px !important;
    left:12px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100vh - 86px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

body[data-font="serif"]{font-family:Georgia,"Times New Roman",serif !important;}
body[data-font="sans"]{font-family:Arial,Helvetica,sans-serif !important;}
body[data-font="mono"]{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace !important;}

/* =========================================================
   SETTINGS HAMBURGER — CLEAN ICON + MOBILE SAFE MENU
   ========================================================= */

/* No square/rounded outline around the three lines. */
.settings-trigger{
  width:42px !important;
  height:42px !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  color:#fff !important;
}

.hamburger-icon{
  width:21px !important;
  height:15px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
}

.hamburger-icon span{
  width:100% !important;
  height:2px !important;
  min-height:2px !important;
  border-radius:2px !important;
  background:currentColor !important;
  transition:transform .22s ease,opacity .18s ease !important;
}

.settings-trigger[aria-expanded="true"] .hamburger-icon span:first-child{
  transform:translateY(6.5px) rotate(45deg) !important;
}
.settings-trigger[aria-expanded="true"] .hamburger-icon span:nth-child(2){
  opacity:0 !important;
}
.settings-trigger[aria-expanded="true"] .hamburger-icon span:last-child{
  transform:translateY(-6.5px) rotate(-45deg) !important;
}

/* Make the menu sit above every mobile header layer. */
@media(max-width:660px){
  .settings-picker{
    position:static !important;
    z-index:2147483647 !important;
  }

  .settings-trigger{
    position:relative !important;
    z-index:2147483647 !important;
    width:42px !important;
    height:42px !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }

  .settings-menu{
    position:fixed !important;
    top:calc(58px + env(safe-area-inset-top,0px)) !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - 76px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    z-index:2147483647 !important;
    transform:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease !important;
  }

  .settings-menu:not([hidden]){
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) scale(1) !important;
    transform-origin:top center !important;
  }

  .settings-menu[hidden]{
    display:block !important;
  }
}

/* Desktop opening effect. */
.settings-menu{
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(-7px) scale(.97) !important;
  transform-origin:top right !important;
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1),visibility .22s ease !important;
}
.settings-menu:not([hidden]){
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) scale(1) !important;
  animation:settings-menu-enter .32s cubic-bezier(.2,.8,.2,1) both !important;
}
@keyframes settings-menu-enter{
  0%{opacity:0;transform:translateY(-9px) scale(.94)}
  55%{opacity:1;transform:translateY(2px) scale(1.012)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* Stagger the contents for a smoother opening effect. */
.settings-menu:not([hidden]) .settings-title,
.settings-menu:not([hidden]) .settings-section{
  animation:settings-item-in .3s ease both;
}
.settings-menu:not([hidden]) .settings-section:nth-child(2){animation-delay:.035s}
.settings-menu:not([hidden]) .settings-section:nth-child(3){animation-delay:.07s}
.settings-menu:not([hidden]) .settings-section:nth-child(4){animation-delay:.105s}
@keyframes settings-item-in{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:translateY(0)}
}

/* =========================================================
   SETTINGS BUTTON — SAME VISUAL LANGUAGE AS HUB/SHARE
   ========================================================= */
.settings-picker{
  position:relative !important;
  z-index:2147483647 !important;
}
.settings-trigger{
  width:48px !important;
  height:40px !important;
  border:1px solid #26343a !important;
  border-radius:10px !important;
  background:#080b0d !important;
  color:#9bc2df !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025) !important;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease !important;
}
.settings-trigger:hover{
  background:#11171b !important;
  border-color:#496778 !important;
}
.settings-trigger[aria-expanded="true"]{
  background:#11191e !important;
  border-color:#6d96b3 !important;
}
.hamburger-icon{
  width:22px !important;
  height:16px !important;
}
.hamburger-icon span{
  height:2px !important;
  min-height:2px !important;
  background:currentColor !important;
  border-radius:2px !important;
}
body.sun-mode .settings-trigger{
  color:#f0c86b !important;
  border-color:#4b4028 !important;
}
body.sun-mode .settings-trigger[aria-expanded="true"]{
  border-color:#b99138 !important;
  background:#17130a !important;
}
body.mono-mode .settings-trigger,
body.white-mode .settings-trigger{
  background:#f7f7f7 !important;
  color:#111 !important;
  border-color:#222 !important;
}
body.mono-mode .settings-trigger[aria-expanded="true"],
body.white-mode .settings-trigger[aria-expanded="true"]{
  background:#fff !important;
  border-color:#111 !important;
}

/* =========================================================
   SETTINGS MENU — PORTALLED TO BODY, SO MOBILE HEADER CAN
   NEVER CLIP IT
   ========================================================= */
#settingsMenu.settings-menu{
  position:fixed !important;
  top:72px !important;
  right:18px !important;
  left:auto !important;
  width:290px !important;
  max-width:calc(100vw - 24px) !important;
  max-height:calc(100vh - 92px) !important;
  overflow:auto !important;
  z-index:2147483647 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  transform-origin:top right !important;
}
#settingsMenu.settings-menu[hidden]{
  display:none !important;
}
#settingsMenu.settings-menu:not([hidden]){
  display:block !important;
}
@media(max-width:660px){
  #settingsMenu.settings-menu{
    top:calc(68px + env(safe-area-inset-top,0px)) !important;
    right:10px !important;
    left:10px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - 82px) !important;
    border-radius:16px !important;
  }
}

/* =========================================================
   FEED — IMAGE → TITLE → CATEGORY → SHORT TEXT
   ========================================================= */

.feed-card{
  position:relative !important;
  display:block !important;
  overflow:hidden !important;
  cursor:pointer !important;
  padding:0 !important;
  margin:0 0 18px !important;
  border-radius:18px !important;
  border:1px solid rgba(130,185,232,.18) !important;
  background:#080b0d !important;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease !important;
  outline:none !important;
}

.feed-card:hover,
.feed-card:focus-visible{
  transform:translateY(-2px) !important;
  border-color:rgba(130,185,232,.45) !important;
  box-shadow:0 12px 35px rgba(0,0,0,.25) !important;
}

.feed-card-media{
  width:100% !important;
  aspect-ratio:16 / 9 !important;
  overflow:hidden !important;
  background:#0e1418 !important;
}

.feed-card-media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  margin:0 !important;
  border-radius:0 !important;
  transition:transform .35s ease !important;
}

.feed-card:hover .feed-card-media img{
  transform:scale(1.025) !important;
}

.feed-card-no-image{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:
    radial-gradient(circle at center,
      rgba(130,185,232,.10),
      transparent 60%) !important;
}

.feed-card-no-image span{
  font-size:30px !important;
  color:#82b9e8 !important;
  opacity:.8 !important;
}

.feed-card-content{
  padding:16px 18px 18px !important;
}

.feed-card-title{
  margin:0 !important;
  font-size:clamp(21px,2vw,30px) !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  color:#f2f4f5 !important;
}

.feed-card-meta{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  margin-top:8px !important;
  font-size:13px !important;
  line-height:1.2 !important;
  color:#7f8b91 !important;
}

.feed-card-category{
  display:inline-flex !important;
  align-items:center !important;
  min-height:24px !important;
  padding:3px 9px !important;
  border-radius:999px !important;
  background:rgba(130,185,232,.10) !important;
  color:#8eb8d8 !important;
  font-weight:750 !important;
}

.feed-card-excerpt{
  margin:12px 0 0 !important;
  font-size:16px !important;
  line-height:1.55 !important;
  color:#b4bcc0 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

/* =========================================================
   FULL POST READER
   ========================================================= */

body.post-reader-open{
  overflow:hidden !important;
}

.post-reader-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483647 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
  box-sizing:border-box !important;
}

.post-reader-modal.open{
  display:flex !important;
  animation:post-reader-fade .2s ease both !important;
}

.post-reader-backdrop{
  position:absolute !important;
  inset:0 !important;
  background:rgba(0,0,0,.72) !important;
  backdrop-filter:blur(7px) !important;
  -webkit-backdrop-filter:blur(7px) !important;
}

.post-reader{
  position:relative !important;
  z-index:1 !important;
  width:min(760px,100%) !important;
  max-height:min(88vh,900px) !important;
  overflow:auto !important;
  border:1px solid rgba(130,185,232,.22) !important;
  border-radius:22px !important;
  background:#080b0d !important;
  box-shadow:0 25px 90px rgba(0,0,0,.55) !important;
  animation:post-reader-in .28s cubic-bezier(.2,.8,.2,1) both !important;
}

.post-reader-close{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  z-index:3 !important;
  width:42px !important;
  height:42px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:12px !important;
  background:rgba(0,0,0,.55) !important;
  color:#fff !important;
  font-size:28px !important;
  line-height:1 !important;
  cursor:pointer !important;
}

.post-reader-media{
  display:none !important;
  width:100% !important;
  max-height:48vh !important;
  overflow:hidden !important;
  background:#050708 !important;
}

.post-reader-media.has-image{
  display:block !important;
}

.post-reader-media img{
  display:block !important;
  width:100% !important;
  max-height:48vh !important;
  object-fit:cover !important;
}

.post-reader-content{
  padding:28px !important;
}

.post-reader-content h1{
  margin:0 !important;
  padding-right:50px !important;
  font-size:clamp(28px,4vw,44px) !important;
  line-height:1.1 !important;
  color:#f5f7f8 !important;
}

.post-reader-meta{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  margin-top:12px !important;
  color:#7f8b91 !important;
  font-size:14px !important;
}

.post-reader-category{
  padding:5px 10px !important;
  border-radius:999px !important;
  background:rgba(130,185,232,.12) !important;
  color:#8eb8d8 !important;
  font-weight:750 !important;
}

.post-reader-body{
  margin-top:22px !important;
  color:#e1e5e7 !important;
  font-size:18px !important;
  line-height:1.75 !important;
  white-space:pre-wrap !important;
  overflow-wrap:anywhere !important;
}

@keyframes post-reader-fade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes post-reader-in{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Full-page white theme support */
body.white-mode .feed-card{
  background:#fff !important;
  border-color:#d7d7d7 !important;
}
body.white-mode .feed-card-title,
body.white-mode .post-reader-content h1{
  color:#111 !important;
}
body.white-mode .feed-card-excerpt,
body.white-mode .post-reader-body{
  color:#333 !important;
}
body.white-mode .post-reader{
  background:#fff !important;
  border-color:#d0d0d0 !important;
}
body.white-mode .post-reader-close{
  background:#fff !important;
  color:#111 !important;
  border-color:#222 !important;
}

/* Black theme support */
body.mono-mode .feed-card,
body.mono-mode .post-reader{
  background:#000 !important;
  border-color:#292929 !important;
}
body.mono-mode .feed-card-title,
body.mono-mode .post-reader-content h1{
  color:#fff !important;
}
body.mono-mode .feed-card-excerpt,
body.mono-mode .post-reader-body{
  color:#ccc !important;
}

@media(max-width:660px){
  .feed-card{
    border-radius:15px !important;
    margin-bottom:14px !important;
  }

  .feed-card-media{
    aspect-ratio:16 / 10 !important;
  }

  .feed-card-content{
    padding:14px 15px 16px !important;
  }

  .feed-card-title{
    font-size:22px !important;
  }

  .feed-card-excerpt{
    font-size:15px !important;
    line-height:1.5 !important;
    -webkit-line-clamp:3 !important;
  }

  .post-reader-modal{
    align-items:flex-end !important;
    padding:0 !important;
  }

  .post-reader{
    width:100% !important;
    max-height:92dvh !important;
    border-radius:20px 20px 0 0 !important;
  }

  .post-reader-media,
  .post-reader-media img{
    max-height:38dvh !important;
  }

  .post-reader-content{
    padding:22px 18px 28px !important;
  }

  .post-reader-content h1{
    font-size:30px !important;
  }

  .post-reader-body{
    font-size:17px !important;
    line-height:1.65 !important;
  }
}

/* =========================================================
   SETTINGS — FINAL INTERACTION/POSITION FIX
   ========================================================= */
#settingsToggle{
  position:relative !important;
  z-index:2147483647 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
  cursor:pointer !important;
}
#settingsToggle:active{
  transform:scale(.97) !important;
}
#settingsMenu{
  position:fixed !important;
  z-index:2147483647 !important;
  box-sizing:border-box !important;
}
#settingsMenu[hidden]{
  display:none !important;
}
#settingsMenu:not([hidden]){
  display:block !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
@media(max-width:660px){
  #settingsMenu{
    top:calc(74px + env(safe-area-inset-top,0px)) !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - 88px) !important;
    overflow-y:auto !important;
    border-radius:16px !important;
  }
}

/* Authenticated-session UI: never expose the login panel while a stored
   session token is being validated. */
body.everlight-authenticated #profileLoginState{
  display:none !important;
}
body.everlight-authenticated #profileLoggedInState{
  display:block !important;
}

/* =========================================================
   FINAL MOBILE HEADER / DATE ALIGNMENT
   The header is fixed; the feed gets exactly one header-height
   offset. This prevents the date/time from being pushed down
   by a second in-flow header.
   ========================================================= */
@media (max-width:660px){
  .topbar{
    position:fixed !important;
    top:env(safe-area-inset-top,0px) !important;
    left:0 !important;
    right:0 !important;
    width:100vw !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    margin:0 !important;
    z-index:2147483500 !important;
    overflow:visible !important;
  }

  .layout{
    position:relative !important;
    margin:0 !important;
    padding-top:calc(64px + env(safe-area-inset-top,0px)) !important;
  }

  main#feed{
    position:relative !important;
    margin:0 !important;
    padding-top:0 !important;
  }

  .time-lockup{
    position:relative !important;
    top:0 !important;
    margin:0 !important;
    padding-top:6px !important;
    padding-bottom:12px !important;
    transform:none !important;
  }
}

@media (max-width:390px){
  .layout{
    padding-top:calc(60px + env(safe-area-inset-top,0px)) !important;
  }

  .topbar{
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
  }

  .time-lockup{
    padding-top:6px !important;
  }
}


/* =========================================================
   EVERLIGHT — CLEAN DESKTOP FRAME / SINGLE HEADER DIVIDER
   Structural fix: header -> three columns -> footer is one
   continuous frame. No stacked/bridge borders.
   ========================================================= */

:root{
  --everlight-divider:#202729;
}

/* ---------------- HEADER ---------------- */

.topbar{
  position:relative !important;
  box-sizing:border-box !important;
  border-bottom:0 !important;
  overflow:visible !important;
}

/* The header uses one real DOM divider. Old pseudo lines are disabled. */
.topbar::before,
.topbar::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  box-shadow:none !important;
  background:none !important;
}

/* ---------------- SYMBOL DIVIDER ---------------- */

.header-symbol-divider{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-9px !important;
  width:100% !important;
  height:18px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  color:#82b9e8 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:12px !important;
  font-weight:400 !important;
  line-height:18px !important;
  letter-spacing:1px !important;
  white-space:nowrap !important;
  pointer-events:none !important;
  z-index:9999999 !important;
  opacity:1 !important;
}

.header-symbol-divider::before,
.header-symbol-divider::after{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  width:calc(50% - 44px) !important;
  height:1px !important;
  margin:0 !important;
  padding:0 !important;
  background:var(--everlight-divider) !important;
  opacity:1 !important;
  box-shadow:none !important;
}

.header-symbol-divider::before{
  left:0 !important;
}

.header-symbol-divider::after{
  right:0 !important;
}

.header-symbol-divider .header-symbols{
  position:relative !important;
  z-index:2 !important;
  display:inline-block !important;
  padding:0 8px !important;
  margin:0 !important;
  background:#000 !important;
  color:#82b9e8 !important;
  font:400 12px/18px Georgia,"Times New Roman",serif !important;
  letter-spacing:1px !important;
  white-space:nowrap !important;
  text-shadow:0 0 7px rgba(130,185,232,.25) !important;
}

/* Only the symbols follow the selected style. Divider lines do not. */
body.sun-mode .header-symbol-divider .header-symbols{
  color:#e2b84f !important;
  text-shadow:0 0 7px rgba(226,184,79,.25) !important;
}

body.white-mode .header-symbol-divider .header-symbols{
  color:#111 !important;
  background:#fff !important;
  text-shadow:none !important;
}

body.mono-mode .header-symbol-divider .header-symbols{
  color:#fff !important;
  background:#000 !important;
  text-shadow:none !important;
}

/* ---------------- DESKTOP FRAME ---------------- */

@media (min-width:661px){

  html,
  body{
    height:100% !important;
    min-height:100% !important;
    overflow:hidden !important;
  }

  body{
    display:flex !important;
    flex-direction:column !important;
  }

  .topbar{
    flex:0 0 72px !important;
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    position:relative !important;
  }

  /* This is the key fix: no margin-top/top offset.
     The layout begins exactly where the header ends. */
  .layout{
    position:relative !important;
    top:auto !important;
    margin:0 auto !important;
    padding:0 !important;
    flex:1 1 auto !important;
    width:min(1240px,calc(100vw - 56px)) !important;
    max-width:1240px !important;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    align-self:center !important;
  }

  /* Exactly one vertical rail line at each column boundary. */
  .left-rail,
  .right-rail{
    position:relative !important;
    top:auto !important;
    height:100% !important;
    min-height:0 !important;
    align-self:stretch !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    background:#000 !important;
  }

  .left-rail{
    border-left:0 !important;
    border-top:0 !important;
    border-bottom:0 !important;
    border-right:1px solid var(--everlight-divider) !important;
  }

  .right-rail{
    border-right:0 !important;
    border-top:0 !important;
    border-bottom:0 !important;
    border-left:1px solid var(--everlight-divider) !important;
  }

  /* Never create extra horizontal rail caps. */
  .left-rail::before,
  .left-rail::after,
  .right-rail::before,
  .right-rail::after{
    content:none !important;
    display:none !important;
  }

  /* The feed owns no boundary line; the right rail owns the
     feed/right boundary so there can never be a double line. */
  main#feed{
    height:100% !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border-left:0 !important;
    border-right:0 !important;
    border-top:0 !important;
    border-bottom:0 !important;
    box-sizing:border-box !important;
  }

  /* Keep the navigation/profile content at its existing visual
     padding while the rail itself starts at the header edge. */
  .left-rail{
    padding-top:26px !important;
    padding-bottom:28px !important;
  }

  .right-rail{
    padding-top:28px !important;
    padding-bottom:28px !important;
  }

  /* The feed date row is an internal divider, not the frame line. */
  .time-lockup{
    border-bottom:1px solid var(--everlight-divider) !important;
    border-top:0 !important;
    margin-top:0 !important;
  }

  /* Footer closes the same frame. */
  .site-footer{
    flex:0 0 auto !important;
    position:relative !important;
    z-index:20 !important;
    box-sizing:border-box !important;
    border-top:1px solid var(--everlight-divider) !important;
  }
}

/* ---------------- MOBILE ---------------- */

@media (max-width:660px){

  .topbar{
    position:fixed !important;
    top:env(safe-area-inset-top,0px) !important;
    left:0 !important;
    right:0 !important;
    width:100vw !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    z-index:2147483500 !important;
    overflow:visible !important;
  }

  .header-symbol-divider{
    bottom:-9px !important;
    height:18px !important;
    line-height:18px !important;
  }

  .header-symbol-divider::before,
  .header-symbol-divider::after{
    width:calc(50% - 37px) !important;
    height:1px !important;
  }

  .header-symbol-divider .header-symbols{
    font-size:11px !important;
    line-height:18px !important;
    height:18px !important;
    padding:0 7px !important;
  }

  .layout{
    position:relative !important;
    top:auto !important;
    margin:0 !important;
    padding-top:calc(64px + env(safe-area-inset-top,0px)) !important;
  }

  main#feed{
    margin:0 !important;
    padding-top:0 !important;
    border:0 !important;
  }
}

@media (max-width:390px){
  .topbar{
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
  }

  .layout{
    padding-top:calc(60px + env(safe-area-inset-top,0px)) !important;
  }

  .header-symbol-divider{
    bottom:-8px !important;
    height:16px !important;
    line-height:16px !important;
  }

  .header-symbol-divider::before,
  .header-symbol-divider::after{
    width:calc(50% - 34px) !important;
  }

  .header-symbol-divider .header-symbols{
    font-size:10px !important;
    line-height:16px !important;
    height:16px !important;
  }
}


/* FINAL MOBILE SYMBOL + LINE VISIBILITY FIX */
@media (max-width:660px){
  .topbar{overflow:visible !important;z-index:2147483500 !important}
  .header-symbol-divider{
    position:fixed !important;
    left:0 !important;right:0 !important;
    top:calc(env(safe-area-inset-top,0px) + 63px) !important;
    bottom:auto !important;
    width:100vw !important;height:20px !important;
    min-height:20px !important;max-height:20px !important;
    margin:0 !important;padding:0 !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    overflow:visible !important;box-sizing:border-box !important;
    z-index:2147483647 !important;visibility:visible !important;opacity:1 !important;
    transform:none !important;
  }
  .header-symbol-divider::before,
  .header-symbol-divider::after{
    display:block !important;visibility:visible !important;
    position:absolute !important;top:50% !important;
    height:1px !important;margin:0 !important;
    background:#202729 !important;opacity:1 !important;z-index:1 !important;
  }
  .header-symbol-divider::before{
    left:0 !important;right:auto !important;
    width:calc(50vw - 44px) !important;
  }
  .header-symbol-divider::after{
    right:0 !important;left:auto !important;
    width:calc(50vw - 44px) !important;
  }
  .header-symbol-divider .header-symbols{
    position:relative !important;display:inline-block !important;
    visibility:visible !important;opacity:1 !important;z-index:3 !important;
    height:20px !important;min-height:20px !important;line-height:20px !important;
    padding:0 9px !important;margin:0 !important;
    background:#000 !important;color:#82b9e8 !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:13px !important;font-weight:400 !important;
    letter-spacing:1px !important;white-space:nowrap !important;
    overflow:visible !important;
    text-shadow:0 0 7px rgba(130,185,232,.25) !important;
  }
  body.sun-mode .header-symbol-divider .header-symbols{color:#e2b84f !important}
  body.white-mode .header-symbol-divider .header-symbols{
    color:#111 !important;background:#fff !important;text-shadow:none !important
  }
  body.mono-mode .header-symbol-divider .header-symbols{
    color:#fff !important;background:#000 !important;text-shadow:none !important
  }
}
@media (max-width:390px){
  .header-symbol-divider{
    top:calc(env(safe-area-inset-top,0px) + 59px) !important;
    height:18px !important;min-height:18px !important;max-height:18px !important;
  }
  .header-symbol-divider::before,
  .header-symbol-divider::after{width:calc(50vw - 40px) !important}
  .header-symbol-divider .header-symbols{
    height:18px !important;min-height:18px !important;line-height:18px !important;
    font-size:12px !important;padding:0 8px !important;
  }
}

/* =========================================================
   MOBILE HEADER DIVIDER — REAL HEADER BOTTOM
   ========================================================= */
@media(max-width:660px){
  .header-symbol-divider{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:calc(var(--mobile-header-bottom, 250px) - 1px) !important;
    bottom:auto !important;
    width:100vw !important;
    height:22px !important;
    min-height:22px !important;
    max-height:22px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
    z-index:2147483647 !important;
    pointer-events:none !important;
  }

  .header-symbol-divider::before,
  .header-symbol-divider::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    top:50% !important;
    width:calc(50vw - 43px) !important;
    height:1px !important;
    background:#202729 !important;
    opacity:1 !important;
    visibility:visible !important;
    z-index:1 !important;
  }

  .header-symbol-divider::before{left:0 !important;right:auto !important}
  .header-symbol-divider::after{right:0 !important;left:auto !important}

  .header-symbol-divider .header-symbols{
    display:inline-block !important;
    position:relative !important;
    z-index:3 !important;
    visibility:visible !important;
    opacity:1 !important;
    height:22px !important;
    line-height:22px !important;
    padding:0 9px !important;
    margin:0 !important;
    background:#000 !important;
    color:#82b9e8 !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:13px !important;
    font-weight:400 !important;
    letter-spacing:1px !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }

  body.sun-mode .header-symbol-divider .header-symbols{color:#e2b84f !important}
  body.white-mode .header-symbol-divider .header-symbols{
    color:#111 !important;background:#fff !important
  }
  body.mono-mode .header-symbol-divider .header-symbols{
    color:#fff !important;background:#000 !important
  }
}

@media(max-width:390px){
  .header-symbol-divider{
    height:20px !important;
    min-height:20px !important;
    max-height:20px !important;
  }
  .header-symbol-divider::before,
  .header-symbol-divider::after{
    width:calc(50vw - 40px) !important;
  }
  .header-symbol-divider .header-symbols{
    height:20px !important;
    line-height:20px !important;
    font-size:12px !important;
  }
}

/* Desktop: make the header symbols noticeably larger without
   changing the divider line geometry or mobile sizing. */
@media (min-width:661px){
  .header-symbol-divider{
    height:22px !important;
    line-height:22px !important;
    font-size:15px !important;
  }

  .header-symbol-divider .header-symbols{
    height:22px !important;
    line-height:22px !important;
    font-size:15px !important;
    padding:0 10px !important;
    letter-spacing:1.5px !important;
  }

  .header-symbol-divider::before,
  .header-symbol-divider::after{
    width:calc(50% - 48px) !important;
  }
}

/* Remove the duplicate desktop sidebar separator.
   Keep the lower separator that separates navigation from the note. */
@media (min-width:961px){
  .desktop-category-block{
    border-bottom:0 !important;
  }
}

/* JELEN VANNAK — Everlight-only presence card */
.everlight-online-summary{
  cursor:default !important;
  text-decoration:none !important;
}
.everlight-online-summary:hover{
  text-decoration:none !important;
}
.everlight-online-summary span{
  display:block !important;
}

/* KÖZÖSSÉG — Everlight local latest-post card */
.everlight-community-summary{
  cursor:pointer !important;
  text-decoration:none !important;
  display:block !important;
}
.everlight-community-summary:hover{
  text-decoration:none !important;
}
.everlight-community-summary strong{
  display:block !important;
  margin-bottom:6px !important;
}
.everlight-community-summary .community-latest-meta{
  display:block !important;
  font-size:10px !important;
  letter-spacing:.04em !important;
  color:#82b9e8 !important;
  margin-bottom:5px !important;
}
.everlight-community-summary .community-latest-excerpt{
  display:block !important;
  line-height:1.45 !important;
}

/* =========================================================
   KÖZÖSSÉG — screenshot-inspired local latest-post list
   ========================================================= */

#everlightCommunityCard{
  overflow:hidden !important;
}

#everlightCommunityCard > .eyebrow{
  margin-bottom:12px !important;
}

.everlight-community-summary{
  display:block !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:default !important;
}

.community-latest-list{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  border:1px solid rgba(139,173,204,.12) !important;
  border-radius:10px !important;
  background:rgba(22,28,35,.72) !important;
  overflow:hidden !important;
}

.community-latest-item{
  display:grid !important;
  grid-template-columns:30px minmax(0,1fr) !important;
  gap:10px !important;
  align-items:start !important;
  min-height:68px !important;
  padding:11px 12px !important;
  box-sizing:border-box !important;
  border:0 !important;
  border-bottom:1px solid rgba(139,173,204,.08) !important;
  background:transparent !important;
  color:#d9dfdf !important;
  cursor:pointer !important;
  transition:background .18s ease !important;
}

.community-latest-item:last-child{
  border-bottom:0 !important;
}

.community-latest-item:hover,
.community-latest-item:focus-visible{
  background:rgba(130,185,232,.055) !important;
  outline:none !important;
}

.community-avatar{
  width:30px !important;
  height:30px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  display:grid !important;
  place-items:center !important;
  background:#202930 !important;
  border:1px solid rgba(139,173,204,.14) !important;
  color:#82b9e8 !important;
  font-size:12px !important;
  flex:0 0 30px !important;
}

.community-avatar img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.community-latest-copy{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

.community-latest-copy strong{
  display:block !important;
  margin:0 0 3px !important;
  color:#edf1f1 !important;
  font:700 12px/1.25 "Manrope",Arial,sans-serif !important;
  white-space:normal !important;
  overflow:hidden !important;
}

.community-latest-copy span{
  display:block !important;
  color:#7f8b8d !important;
  font:400 9.5px/1.35 "Manrope",Arial,sans-serif !important;
  white-space:normal !important;
}

.community-latest-copy small{
  display:block !important;
  margin-top:2px !important;
  color:#82b9e8 !important;
  font:400 9px/1.3 "Manrope",Arial,sans-serif !important;
}

.community-empty{
  padding:14px !important;
  border:1px solid rgba(139,173,204,.12) !important;
  border-radius:10px !important;
  background:rgba(22,28,35,.72) !important;
}

.community-empty strong,
.community-empty span{
  display:block !important;
}

.community-empty strong{
  margin-bottom:5px !important;
  color:#edf1f1 !important;
}

.community-empty span{
  color:#7f8b8d !important;
  font-size:10px !important;
  line-height:1.45 !important;
}

/* Give the presence card the same compact community-panel language. */
#everlightOnlineCard{
  overflow:hidden !important;
}

#everlightOnlineCard .everlight-online-summary{
  padding:12px !important;
  border:1px solid rgba(139,173,204,.10) !important;
  border-radius:9px !important;
  background:rgba(22,28,35,.62) !important;
}

#everlightOnlineCard .faces{
  margin-top:8px !important;
}

/* Desktop rail: slightly more compact, like the reference. */
@media(min-width:961px){
  .right-rail{
    padding-top:22px !important;
  }

  #everlightCommunityCard,
  #everlightOnlineCard{
    margin-bottom:12px !important;
  }

  .community-latest-item{
    min-height:64px !important;
    padding:10px !important;
  }
}

/* =========================================================
   RIGHT RAIL — STATISTICS + SHARE, compact forum-card style
   ========================================================= */
.activity-card,
.right-share-card{
  position:relative !important;
  overflow:hidden !important;
  border:1px solid rgba(139,173,204,.12) !important;
  border-radius:10px !important;
  background:
    radial-gradient(circle at 86% 22%, rgba(92,102,143,.08) 0 48px, transparent 49px),
    radial-gradient(circle at 76% 92%, rgba(91,98,139,.07) 0 82px, transparent 83px),
    rgba(22,28,35,.72) !important;
  box-sizing:border-box !important;
}

.activity-card::after,
.right-share-card::after{
  content:"" !important;
  position:absolute !important;
  width:150px !important;
  height:150px !important;
  right:-72px !important;
  bottom:-72px !important;
  border-radius:50% !important;
  background:rgba(55,62,95,.10) !important;
  pointer-events:none !important;
}

.rail-card-title{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  margin:0 0 18px !important;
  padding:0 !important;
  color:#edf1f1 !important;
  font:700 16px/1.2 "Manrope",Arial,sans-serif !important;
  letter-spacing:-.01em !important;
}

.rail-card-title > span{
  color:#9aa4ae !important;
  font-size:15px !important;
  font-weight:700 !important;
}

.activity-card{
  padding:18px 20px 16px !important;
}

.activity-stats{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:4px 10px !important;
  margin:0 !important;
}

.activity-stats > div{
  display:contents !important;
}

.activity-stats span{
  color:#8e979f !important;
  font:400 12px/1.25 "Manrope",Arial,sans-serif !important;
}

.activity-stats strong{
  color:#e2e5e7 !important;
  font:400 13px/1.25 "Manrope",Arial,sans-serif !important;
  text-align:right !important;
  white-space:nowrap !important;
}

.right-share-card{
  padding:18px 20px 20px !important;
}

.right-share-card .rail-card-title{
  margin-bottom:18px !important;
}

.share-symbol-grid{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:10px 13px !important;
  align-items:center !important;
}

.share-symbol-grid button{
  width:20px !important;
  height:20px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#8f99a3 !important;
  display:grid !important;
  place-items:center !important;
  font:700 18px/1 Arial,sans-serif !important;
  cursor:pointer !important;
  transition:color .16s ease,transform .16s ease !important;
}

.share-symbol-grid button:hover{
  color:#c8d9e7 !important;
  transform:translateY(-1px) !important;
}

.share-symbol-grid button[aria-label="LinkedIn"]{
  font-size:15px !important;
}

.share-symbol-grid button[aria-label="E-mail"]{
  font-size:19px !important;
}

.share-hidden-action{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media(min-width:961px){
  .activity-card,
  .right-share-card{
    margin-top:12px !important;
  }
}

@media(max-width:960px){
  .activity-card,
  .right-share-card{
    display:none !important;
  }
}

/* =========================================================
   FEED COMPOSER — simplified forum-editor inspired layout
   Keep the existing IDs/functionality, only simplify the UI.
   ========================================================= */

#feed .composer{
  position:relative !important;
  display:block !important;
  padding:10px !important;
  border:1px solid rgba(139,173,204,.14) !important;
  border-radius:10px !important;
  background:rgba(22,28,35,.78) !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

#feed .composer > .avatar{
  display:none !important;
}

#feed .composer-body{
  display:block !important;
  min-width:0 !important;
}

#feed #postText{
  display:block !important;
  width:100% !important;
  min-height:82px !important;
  max-height:170px !important;
  resize:vertical !important;
  box-sizing:border-box !important;
  padding:16px 17px !important;
  margin:0 !important;
  border:1px solid rgba(139,173,204,.10) !important;
  border-radius:11px !important;
  background:#05090c !important;
  color:#dfe6e8 !important;
  font:400 15px/1.55 "Manrope",Arial,sans-serif !important;
  outline:none !important;
}

#feed #postText:focus{
  border-color:rgba(130,185,232,.35) !important;
  box-shadow:0 0 0 2px rgba(130,185,232,.05) !important;
}

#feed #postText::placeholder{
  color:#6e797d !important;
}

#feed .composer-tools{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  min-height:40px !important;
  margin-top:7px !important;
  padding:5px 6px !important;
  border:1px solid rgba(139,173,204,.10) !important;
  border-radius:8px !important;
  background:#151b21 !important;
  box-sizing:border-box !important;
}

#feed .composer-tools > label{
  min-height:29px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:0 9px !important;
  border:1px solid rgba(139,173,204,.10) !important;
  border-radius:6px !important;
  background:#1a2128 !important;
  color:#aeb7bb !important;
  font:400 11px/1 "Manrope",Arial,sans-serif !important;
  white-space:nowrap !important;
}

#feed .composer-tools > label:first-child{
  padding-left:5px !important;
}

#feed .composer-tools select{
  min-width:88px !important;
  height:27px !important;
  padding:0 20px 0 6px !important;
  border:0 !important;
  background:transparent !important;
  color:#e4e8e9 !important;
  font:600 11px "Manrope",Arial,sans-serif !important;
  outline:none !important;
}

#feed .composer-tools .image-upload{
  cursor:pointer !important;
}

#feed .composer-tools .image-upload input{
  display:none !important;
}

#feed .composer-tools .anonymous-toggle input{
  width:13px !important;
  height:13px !important;
  margin:0 !important;
  accent-color:#82b9e8 !important;
}

#feed .image-preview{
  margin-top:6px !important;
}

#feed .composer-footer{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-top:7px !important;
  padding:6px 3px 1px !important;
  border-top:1px solid rgba(139,173,204,.08) !important;
}

#feed #counter{
  color:#778287 !important;
  font:400 10px/1 "Manrope",Arial,sans-serif !important;
}

#feed #postButton{
  min-height:35px !important;
  padding:0 18px !important;
  border-radius:18px !important;
  font-size:11px !important;
}

@media(max-width:660px){
  #feed .composer{
    padding:8px !important;
    border-radius:10px !important;
  }

  #feed #postText{
    min-height:92px !important;
    font-size:15px !important;
  }

  #feed .composer-tools{
    flex-wrap:wrap !important;
    height:auto !important;
    padding:5px !important;
  }

  #feed .composer-tools > label{
    flex:0 0 auto !important;
  }

  #feed .composer-footer{
    margin-top:6px !important;
  }
}

/* =========================================================
   FEED COMPOSER — toolbar áthelyezve a szerkesztő tetejére
   ========================================================= */

#feed .composer{
  padding:8px !important;
}

#feed .composer-tools{
  order:0 !important;
  margin:0 0 7px !important;
  min-height:36px !important;
  padding:4px 6px !important;
  border:1px solid rgba(139,173,204,.12) !important;
  border-radius:7px !important;
  background:#151b21 !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
}

#feed .composer-tools::-webkit-scrollbar{
  display:none !important;
}

#feed .composer-tools > label{
  min-height:27px !important;
  height:27px !important;
  padding:0 8px !important;
  border:0 !important;
  border-right:1px solid rgba(139,173,204,.08) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#9ea8ad !important;
}

#feed .composer-tools > label:last-child{
  border-right:0 !important;
}

#feed .composer-tools select{
  height:25px !important;
  min-width:82px !important;
}

#feed #postText{
  order:1 !important;
  margin:0 !important;
  min-height:96px !important;
}

#feed .image-preview{
  order:2 !important;
}

#feed .composer-footer{
  order:3 !important;
}

@media(max-width:660px){
  #feed .composer-tools{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
  }

  #feed .composer-tools > label{
    flex:0 0 auto !important;
  }

  #feed #postText{
    min-height:92px !important;
  }
}

/* =========================================================
   RIGHT RAIL — unified card treatment
   Community / Presence / Statistics / Share use one visual family.
   ========================================================= */

.right-rail .rail-info-card,
.right-rail .activity-card,
.right-rail .right-share-card{
  position:relative !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  border:1px solid rgba(139,173,204,.20) !important;
  border-radius:10px !important;
  background:
    linear-gradient(135deg,
      rgba(35,65,79,.82) 0%,
      rgba(27,43,53,.86) 48%,
      rgba(31,47,68,.90) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 6px 18px rgba(0,0,0,.12) !important;
}

.right-rail .rail-info-card::before,
.right-rail .activity-card::before,
.right-rail .right-share-card::before{
  content:"" !important;
  position:absolute !important;
  width:180px !important;
  height:180px !important;
  right:-85px !important;
  top:-105px !important;
  border-radius:50% !important;
  background:rgba(117,130,176,.11) !important;
  pointer-events:none !important;
}

.right-rail .rail-info-card::after,
.right-rail .activity-card::after,
.right-rail .right-share-card::after{
  content:"" !important;
  position:absolute !important;
  width:150px !important;
  height:150px !important;
  left:-92px !important;
  bottom:-108px !important;
  border-radius:50% !important;
  background:rgba(75,128,143,.08) !important;
  pointer-events:none !important;
}

.right-rail .rail-info-card > *,
.right-rail .activity-card > *,
.right-rail .right-share-card > *{
  position:relative !important;
  z-index:2 !important;
}

.right-rail .rail-info-card{
  padding:16px 16px 14px !important;
  margin-bottom:12px !important;
}

.right-rail .activity-card{
  padding:16px 18px 15px !important;
}

.right-rail .right-share-card{
  padding:16px 18px 18px !important;
}

.right-rail .rail-card-title{
  margin:0 0 14px !important;
  color:#edf1f1 !important;
  font-size:15px !important;
}

.right-rail .rail-card-title > span{
  color:#a6b0b8 !important;
  font-size:13px !important;
}

/* Latest posts and presence no longer look like external-link cards. */
.right-rail .everlight-community-summary,
.right-rail .everlight-online-summary{
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.right-rail .community-latest-list{
  border:1px solid rgba(139,173,204,.12) !important;
  border-radius:8px !important;
  background:rgba(5,10,14,.22) !important;
}

.right-rail .community-latest-item{
  background:transparent !important;
}

.right-rail .community-latest-item:hover,
.right-rail .community-latest-item:focus-visible{
  background:rgba(130,185,232,.08) !important;
}

.right-rail #everlightOnlineCard .everlight-online-summary{
  padding:10px 11px !important;
  border:1px solid rgba(139,173,204,.12) !important;
  border-radius:8px !important;
  background:rgba(5,10,14,.22) !important;
}

.right-rail #everlightOnlineCard .everlight-online-summary strong{
  display:block !important;
  color:#edf1f1 !important;
  margin-bottom:4px !important;
}

.right-rail #everlightOnlineCard .everlight-online-summary span{
  display:block !important;
  color:#89949a !important;
  line-height:1.4 !important;
}

/* Theme-aware card backgrounds, matching the active buttons. */
body.sun-mode .right-rail .rail-info-card,
body.sun-mode .right-rail .activity-card,
body.sun-mode .right-rail .right-share-card{
  background:
    linear-gradient(135deg,
      rgba(101,79,37,.86),
      rgba(76,61,34,.90),
      rgba(62,54,38,.94)) !important;
  border-color:rgba(215,165,58,.24) !important;
}

body.mono-mode .right-rail .rail-info-card,
body.mono-mode .right-rail .activity-card,
body.mono-mode .right-rail .right-share-card{
  background:linear-gradient(135deg,#e8e8e8,#bdbdbd) !important;
  border-color:rgba(255,255,255,.35) !important;
  color:#111 !important;
}

body.mono-mode .right-rail .rail-card-title,
body.mono-mode .right-rail .rail-card-title > span,
body.mono-mode .right-rail .activity-stats span,
body.mono-mode .right-rail .activity-stats strong{
  color:#151515 !important;
}

@media(max-width:960px){
  .right-rail .rail-info-card,
  .right-rail .activity-card,
  .right-rail .right-share-card{
    display:none !important;
  }
}

/* Remove the old decorative quote and its two separator lines. */
.left-rail .rail-quote,
.left-rail .quote,
.left-rail .rail-note,
.left-rail .everlight-quote,
.left-rail .motto,
.left-rail .rail-decoration{
  display:none !important;
}

.left-rail .rail-quote::before,
.left-rail .rail-quote::after,
.left-rail .quote::before,
.left-rail .quote::after,
.left-rail .rail-note::before,
.left-rail .rail-note::after,
.left-rail .everlight-quote::before,
.left-rail .everlight-quote::after,
.left-rail .motto::before,
.left-rail .motto::after{
  content:none !important;
  display:none !important;
}

/* Do not draw the legacy horizontal rules that belonged to the quote block. */
.left-rail .rail-divider,
.left-rail .quote-divider,
.left-rail .motto-divider{
  display:none !important;
}

/* =========================================================
   RIGHT RAIL — same visual language as the Chat surface
   with a subtle animated light effect.
   ========================================================= */

.right-rail .rail-info-card,
.right-rail .activity-card,
.right-rail .right-share-card{
  background:
    linear-gradient(145deg,
      rgba(20,27,33,.97) 0%,
      rgba(16,22,27,.98) 52%,
      rgba(21,29,35,.97) 100%) !important;
  border:1px solid rgba(139,173,204,.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 24px rgba(0,0,0,.18) !important;
  isolation:isolate !important;
}

.right-rail .rail-info-card::before,
.right-rail .activity-card::before,
.right-rail .right-share-card::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  width:220px !important;
  height:220px !important;
  right:-120px !important;
  top:-145px !important;
  border-radius:50% !important;
  background:radial-gradient(circle,
    rgba(130,185,232,.12) 0%,
    rgba(130,185,232,.055) 28%,
    transparent 68%) !important;
  pointer-events:none !important;
  animation:everlightRailGlow 6s ease-in-out infinite alternate !important;
}

.right-rail .rail-info-card::after,
.right-rail .activity-card::after,
.right-rail .right-share-card::after{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  width:170px !important;
  height:170px !important;
  left:-110px !important;
  bottom:-120px !important;
  border-radius:50% !important;
  background:radial-gradient(circle,
    rgba(91,196,203,.075) 0%,
    rgba(91,196,203,.025) 34%,
    transparent 70%) !important;
  pointer-events:none !important;
  animation:everlightRailGlow2 7s ease-in-out infinite alternate !important;
}

.right-rail .rail-info-card > *,
.right-rail .activity-card > *,
.right-rail .right-share-card > *{
  position:relative !important;
  z-index:2 !important;
}

@keyframes everlightRailGlow{
  from{ transform:translate3d(0,0,0) scale(.94); opacity:.62; }
  to{ transform:translate3d(-16px,13px,0) scale(1.08); opacity:1; }
}

@keyframes everlightRailGlow2{
  from{ transform:translate3d(0,0,0) scale(.92); opacity:.45; }
  to{ transform:translate3d(18px,-12px,0) scale(1.06); opacity:.9; }
}

.right-rail .rail-info-card:hover,
.right-rail .activity-card:hover,
.right-rail .right-share-card:hover{
  border-color:rgba(139,173,204,.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 10px 28px rgba(0,0,0,.22),
    0 0 18px rgba(130,185,232,.035) !important;
  transition:border-color .25s ease, box-shadow .25s ease !important;
}

@media (prefers-reduced-motion:reduce){
  .right-rail .rail-info-card::before,
  .right-rail .activity-card::before,
  .right-rail .right-share-card::before,
  .right-rail .rail-info-card::after,
  .right-rail .activity-card::after,
  .right-rail .right-share-card::after{
    animation:none !important;
  }
}

/* =========================================================
   MOBILE — feed composer mirrors desktop structure
   ========================================================= */
@media(max-width:660px){
  #feed .composer{
    padding:8px !important;
  }

  #feed .composer-body{
    display:flex !important;
    flex-direction:column !important;
    min-width:0 !important;
  }

  #feed .composer-tools{
    order:0 !important;
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    min-height:36px !important;
    height:36px !important;
    margin:0 0 7px !important;
    padding:4px 6px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
  }

  #feed .composer-tools::-webkit-scrollbar{
    display:none !important;
  }

  #feed .composer-tools > label{
    flex:0 0 auto !important;
    min-height:27px !important;
    height:27px !important;
    white-space:nowrap !important;
  }

  #feed #postText{
    order:1 !important;
    width:100% !important;
    min-height:96px !important;
    max-height:170px !important;
    margin:0 !important;
    resize:vertical !important;
    box-sizing:border-box !important;
  }

  #feed .image-preview{
    order:2 !important;
  }

  #feed .composer-footer{
    order:3 !important;
  }
}

/* =========================================================
   MOBILE ISLAND — notification trigger + expandable panel
   ========================================================= */
@media(max-width:660px){
  #mobileDock{
    position:fixed !important;
    z-index:2147483000 !important;
  }

  .mobile-island-alert{
    position:absolute !important;
    right:-5px !important;
    top:-9px !important;
    width:30px !important;
    height:30px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid rgba(139,173,204,.22) !important;
    border-radius:50% !important;
    background:#151d23 !important;
    color:#9fc8e8 !important;
    box-shadow:
      0 4px 12px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
    cursor:pointer !important;
    z-index:12 !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  .mobile-alert-icon{
    display:block !important;
    font-size:12px !important;
    line-height:1 !important;
    text-shadow:0 0 8px rgba(130,185,232,.75) !important;
  }

  .mobile-alert-badge{
    position:absolute !important;
    top:-3px !important;
    right:-2px !important;
    min-width:12px !important;
    height:12px !important;
    padding:0 3px !important;
    border-radius:7px !important;
    display:grid !important;
    place-items:center !important;
    box-sizing:border-box !important;
    background:#82b9e8 !important;
    color:#071016 !important;
    font:800 8px/1 Arial,sans-serif !important;
    box-shadow:0 0 9px rgba(130,185,232,.55) !important;
  }

  .mobile-island-alert:active{
    transform:scale(.94) !important;
  }

  .mobile-community-panel{
    position:fixed !important;
    z-index:2147482990 !important;
    left:12px !important;
    right:12px !important;
    bottom:calc(96px + env(safe-area-inset-bottom,0px)) !important;
    max-height:min(64vh,520px) !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    border:1px solid rgba(139,173,204,.20) !important;
    border-radius:16px !important;
    background:
      linear-gradient(145deg,rgba(20,27,33,.985),rgba(12,18,23,.99)) !important;
    box-shadow:
      0 18px 45px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
    opacity:0 !important;
    transform:translateY(14px) scale(.98) !important;
    pointer-events:none !important;
    transition:opacity .22s ease,transform .25s cubic-bezier(.2,.8,.2,1) !important;
  }

  .mobile-community-panel.is-open{
    opacity:1 !important;
    transform:translateY(0) scale(1) !important;
    pointer-events:auto !important;
  }

  .mobile-community-panel-head{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:13px 15px 11px !important;
    border-bottom:1px solid rgba(139,173,204,.10) !important;
  }

  .mobile-community-panel-head strong{
    color:#edf1f1 !important;
    font:700 15px/1.2 "Manrope",Arial,sans-serif !important;
    letter-spacing:.01em !important;
  }

  .mobile-community-panel-head button{
    width:29px !important;
    height:29px !important;
    padding:0 !important;
    border:1px solid rgba(139,173,204,.14) !important;
    border-radius:50% !important;
    background:#151d23 !important;
    color:#aeb8bd !important;
    font:400 22px/1 Arial,sans-serif !important;
  }

  .mobile-community-panel-body{
    overflow:auto !important;
    padding:10px !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* Reuse the exact desktop right-rail cards inside the notification sheet. */
  .mobile-community-panel .right-rail,
  .mobile-community-panel .rail-info-card,
  .mobile-community-panel .activity-card,
  .mobile-community-panel .right-share-card{
    display:block !important;
  }

  .mobile-community-panel .mobile-cloned-rail{
    display:block !important;
  }

  .mobile-community-panel .rail-info-card,
  .mobile-community-panel .activity-card,
  .mobile-community-panel .right-share-card{
    margin:0 0 9px !important;
    padding:13px 14px !important;
    border-radius:11px !important;
  }

  .mobile-community-panel .rail-card-title{
    font-size:13px !important;
    margin-bottom:10px !important;
  }

  .mobile-community-panel .community-latest-item{
    min-height:58px !important;
    padding:9px !important;
  }

  .mobile-community-panel .activity-stats span{
    font-size:11px !important;
  }

  .mobile-community-panel .activity-stats strong{
    font-size:12px !important;
  }

  .mobile-community-panel .share-symbol-grid{
    gap:9px 13px !important;
  }

  body.mobile-community-open::after{
    content:"" !important;
    position:fixed !important;
    z-index:2147482980 !important;
    inset:0 !important;
    background:rgba(0,0,0,.30) !important;
    pointer-events:auto !important;
  }
}

/* =========================================================
   FINAL MOBILE POLISH — notification is INSIDE the island
   and the header symbol divider is tied to the real header.
   ========================================================= */
.mobile-island-alert{
  display:none !important;
}

@media(max-width:660px){
  /* The notification control is a normal island item, not a floating bubble. */
  #mobileDock{
    display:flex !important;
    align-items:center !important;
    justify-content:space-around !important;
    gap:2px !important;
    overflow:visible !important;
  }

  #mobileDock .mobile-dock-item{
    position:relative !important;
    flex:1 1 0 !important;
    min-width:0 !important;
  }

  #mobileDock .mobile-island-alert{
    position:relative !important;
    inset:auto !important;
    flex:0 0 48px !important;
    width:48px !important;
    height:48px !important;
    margin:0 4px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid rgba(139,173,204,.16) !important;
    border-radius:16px !important;
    background:rgba(21,29,35,.72) !important;
    color:#9fc8e8 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  #mobileDock .mobile-alert-icon{
    font-size:13px !important;
    line-height:1 !important;
  }

  #mobileDock .mobile-alert-badge{
    top:4px !important;
    right:4px !important;
    min-width:12px !important;
    height:12px !important;
    font-size:8px !important;
  }

  /* Header divider: derive its position from the actual fixed header,
     so there cannot be a second/offset line. */
  .topbar .header-symbol-divider{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:-1px !important;
    width:100% !important;
    height:18px !important;
    min-height:18px !important;
    max-height:18px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
    z-index:2147483647 !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:none !important;
  }

  .topbar .header-symbol-divider::before,
  .topbar .header-symbol-divider::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    top:50% !important;
    height:1px !important;
    width:calc(50% - 34px) !important;
    margin:0 !important;
    background:#202729 !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .topbar .header-symbol-divider::before{left:0 !important;}
  .topbar .header-symbol-divider::after{right:0 !important;}

  .topbar .header-symbol-divider .header-symbols{
    position:relative !important;
    z-index:2 !important;
    display:block !important;
    height:18px !important;
    line-height:18px !important;
    padding:0 8px !important;
    margin:0 !important;
    color:#82b9e8 !important;
    background:#000 !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:11px !important;
    letter-spacing:1.4px !important;
    white-space:nowrap !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}



/* =========================================================
   CANONICAL MOBILE ISLAND + COMMUNITY PANEL
   One source of truth for the four bottom actions.
   ========================================================= */
@media (max-width:660px){
  #mobileDock,
  .mobile-dock{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    bottom:calc(22px + env(safe-area-inset-bottom,0px)) !important;
    width:286px !important;
    max-width:calc(100vw - 28px) !important;
    height:68px !important;
    margin:0 !important;
    padding:5px !important;
    transform:translateX(-50%) !important;
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:0 !important;
    align-items:center !important;
    justify-items:center !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    border:1px solid rgba(150,190,215,.24) !important;
    border-radius:22px !important;
    background:rgba(12,15,17,.88) !important;
    box-shadow:0 10px 35px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter:blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(150%) !important;
    z-index:2147483000 !important;
  }

  #mobileDock.is-expanded{
    width:306px !important;
    max-width:calc(100vw - 24px) !important;
    height:84px !important;
    border-radius:26px !important;
  }

  #mobileDock::before{
    display:none !important;
    content:none !important;
  }

  /* Every action owns the same 48×48 selected square. */
  #mobileDock .mobile-dock-item,
  #mobileDock .mobile-island-alert{
    position:relative !important;
    inset:auto !important;
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    max-width:48px !important;
    max-height:48px !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    justify-self:center !important;
    align-self:center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid transparent !important;
    border-radius:16px !important;
    background:transparent !important;
    color:#c9d3d7 !important;
    box-shadow:none !important;
    outline:none !important;
    transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .22s ease,transform .14s ease !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  #mobileDock .mobile-dock-item small{display:none !important;}

  /* Only the currently open view gets the selected surface. */
  #mobileDock .mobile-dock-item.active{
    color:var(--accent) !important;
    background:var(--accent-soft) !important;
    border-color:rgba(130,185,232,.10) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  #mobileDock .mobile-dock-item:not(.active),
  #mobileDock .mobile-island-alert:not(.is-open){
    color:#c9d3d7 !important;
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }

  /* Notification is exactly the same selected square as Hub. */
  #mobileDock .mobile-island-alert.is-open{
    color:var(--accent) !important;
    background:var(--accent-soft) !important;
    border-color:rgba(130,185,232,.20) !important;
    box-shadow:
      0 0 0 1px rgba(130,185,232,.08),
      0 0 18px rgba(130,185,232,.18),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  #mobileDock .mobile-island-alert:hover,
  #mobileDock .mobile-island-alert:focus-visible{
    color:#c9d3d7 !important;
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
    outline:none !important;
  }

  #mobileDock .mobile-island-alert.is-open:hover,
  #mobileDock .mobile-island-alert.is-open:focus-visible{
    color:var(--accent) !important;
    background:var(--accent-soft) !important;
    border-color:rgba(130,185,232,.20) !important;
    box-shadow:
      0 0 0 1px rgba(130,185,232,.08),
      0 0 18px rgba(130,185,232,.18),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  #mobileDock .rail-action-icon{
    position:relative !important;
    display:block !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    flex:0 0 30px !important;
    margin:0 !important;
    visibility:visible !important;
    opacity:1 !important;
    color:currentColor !important;
    overflow:visible !important;
    font-size:0 !important;
  }

  #mobileDock .mobile-alert-icon{
    display:grid !important;
    place-items:center !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    flex:0 0 30px !important;
    color:currentColor !important;
    opacity:.72 !important;
    filter:none !important;
    text-shadow:none !important;
  }

  #mobileDock .mobile-alert-icon svg{
    display:block !important;
    width:22px !important;
    height:22px !important;
    fill:none !important;
    stroke:currentColor !important;
  }

  #mobileDock .mobile-island-alert.is-open .mobile-alert-icon{
    opacity:1 !important;
  }

  #mobileDock .mobile-alert-badge{
    position:absolute !important;
    top:3px !important;
    right:3px !important;
    min-width:13px !important;
    height:13px !important;
    padding:0 3px !important;
    border-radius:8px !important;
    display:grid !important;
    place-items:center !important;
    box-sizing:border-box !important;
    background:#66737b !important;
    color:#0b1115 !important;
    font:800 8px/1 Arial,sans-serif !important;
    box-shadow:none !important;
  }

  #mobileDock .mobile-island-alert.is-open .mobile-alert-badge{
    background:#82b9e8 !important;
    box-shadow:0 0 9px rgba(130,185,232,.42) !important;
  }

  #mobileDock .mobile-dock-item:active,
  #mobileDock .mobile-island-alert:active{
    transform:scale(.94) !important;
  }

  /* Notification sheet: one glass shell, no inner black rectangle. */
  .mobile-community-panel{
    position:fixed !important;
    z-index:2147482990 !important;
    left:12px !important;
    right:12px !important;
    bottom:calc(102px + env(safe-area-inset-bottom,0px)) !important;
    max-height:min(64vh,520px) !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    border:1px solid rgba(139,173,204,.20) !important;
    border-radius:18px !important;
    background:linear-gradient(145deg,rgba(20,27,33,.985),rgba(12,18,23,.99)) !important;
    box-shadow:0 18px 45px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.035) !important;
    opacity:0 !important;
    transform:translateY(14px) scale(.985) !important;
    pointer-events:none !important;
    transition:opacity .22s ease,transform .25s cubic-bezier(.2,.8,.2,1) !important;
  }

  .mobile-community-panel.is-open{
    opacity:1 !important;
    transform:translateY(0) scale(1) !important;
    pointer-events:auto !important;
  }

  .mobile-community-panel-head{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:15px 17px 13px !important;
    border-bottom:1px solid rgba(139,173,204,.10) !important;
  }

  .mobile-community-panel-head strong{
    color:#edf1f1 !important;
    font:700 18px/1.2 "Manrope",Arial,sans-serif !important;
  }

  .mobile-community-panel-head button{
    width:38px !important;
    height:38px !important;
    padding:0 !important;
    border:1px solid rgba(139,173,204,.14) !important;
    border-radius:50% !important;
    background:#151d23 !important;
    color:#aeb8bd !important;
    font:400 27px/1 Arial,sans-serif !important;
  }

  .mobile-community-panel-body{
    overflow:auto !important;
    padding:10px !important;
    background:transparent !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .mobile-community-panel .mobile-cloned-rail,
  .mobile-community-panel .mobile-cloned-rail .right-rail{
    width:100% !important;
    min-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .mobile-community-panel .rail-info-card,
  .mobile-community-panel .activity-card,
  .mobile-community-panel .right-share-card{
    margin:0 0 10px !important;
    border-radius:12px !important;
  }

  body.mobile-community-open::after{
    content:"" !important;
    position:fixed !important;
    inset:0 !important;
    z-index:2147482980 !important;
    background:rgba(0,0,0,.30) !important;
    pointer-events:auto !important;
  }
}

/* Desktop: notification island is mobile-only. */
@media (min-width:661px){
  #mobileCommunityAlert,
  .mobile-island-alert,
  #mobileCommunityPanel{
    display:none !important;
  }
}

/* =========================================================
   CANONICAL SHARE CARD
   Same card shell and real inline SVG logos on PC + mobile.
   ========================================================= */
.right-share-card,
.mobile-community-panel .right-share-card{
  position:relative !important;
  overflow:hidden !important;
  padding:16px !important;
  margin:0 0 10px !important;
  border:1px solid rgba(139,173,204,.13) !important;
  border-radius:12px !important;
  background:#171e26 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.025) !important;
  box-sizing:border-box !important;
}

.right-share-card::before,
.right-share-card::after,
.mobile-community-panel .right-share-card::before,
.mobile-community-panel .right-share-card::after{
  content:none !important;
  display:none !important;
}

.right-share-card .rail-card-title,
.mobile-community-panel .right-share-card .rail-card-title{
  position:relative !important;
  margin:0 0 15px !important;
  color:#edf1f1 !important;
  font:700 17px/1.2 "Manrope",Arial,sans-serif !important;
}

.right-share-card .share-title-icon,
.mobile-community-panel .right-share-card .share-title-icon{
  display:inline-grid !important;
  width:19px !important;
  height:19px !important;
  margin-right:5px !important;
  vertical-align:-4px !important;
  color:#9aa4ad !important;
}

.right-share-card .share-title-icon svg,
.mobile-community-panel .right-share-card .share-title-icon svg{
  width:100% !important;
  height:100% !important;
  fill:none !important;
  stroke:currentColor !important;
}

.right-share-card .share-symbol-grid,
.mobile-community-panel .right-share-card .share-symbol-grid{
  position:relative !important;
  display:grid !important;
  grid-template-columns:repeat(6,44px) !important;
  grid-auto-rows:44px !important;
  gap:8px !important;
  align-items:center !important;
  padding:0 !important;
  margin:0 !important;
}

.right-share-card .share-symbol-grid button,
.mobile-community-panel .right-share-card .share-symbol-grid button{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  max-width:44px !important;
  max-height:44px !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid rgba(139,173,204,.12) !important;
  border-radius:10px !important;
  background:rgba(12,18,23,.20) !important;
  color:#aeb8bd !important;
  display:grid !important;
  place-items:center !important;
  box-sizing:border-box !important;
  box-shadow:none !important;
  transform:none !important;
}

.right-share-card .share-symbol-grid button svg,
.mobile-community-panel .right-share-card .share-symbol-grid button svg{
  display:block !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  fill:currentColor !important;
  color:inherit !important;
}

.right-share-card .share-symbol-grid button[data-share-network="email"] svg,
.right-share-card .share-symbol-grid button[data-share-network="copy"] svg,
.mobile-community-panel .right-share-card .share-symbol-grid button[data-share-network="email"] svg,
.mobile-community-panel .right-share-card .share-symbol-grid button[data-share-network="copy"] svg{
  fill:none !important;
  stroke:currentColor !important;
}

.right-share-card .share-symbol-grid button:hover,
.right-share-card .share-symbol-grid button:focus-visible,
.mobile-community-panel .right-share-card .share-symbol-grid button:hover,
.mobile-community-panel .right-share-card .share-symbol-grid button:focus-visible{
  color:#d8e5ee !important;
  background:rgba(130,185,232,.07) !important;
  border-color:rgba(130,185,232,.18) !important;
  outline:none !important;
  transform:none !important;
}

.right-share-card .share-hidden-action,
#sharePageButton{display:none !important;}

@media(max-width:660px){
  .mobile-community-panel .right-share-card{
    padding:15px !important;
    border-radius:12px !important;
  }
}

/* White mode keeps the same geometry and uses the active light palette. */
body[data-theme="white"] .right-share-card,
body[data-theme="white"] .mobile-community-panel .right-share-card{
  background:#f0f3f5 !important;
  border-color:rgba(60,72,80,.14) !important;
  box-shadow:0 10px 24px rgba(20,30,35,.08),inset 0 1px 0 rgba(255,255,255,.75) !important;
}
body[data-theme="white"] .right-share-card .rail-card-title,
body[data-theme="white"] .mobile-community-panel .right-share-card .rail-card-title{
  color:#172027 !important;
}
body[data-theme="white"] .right-share-card .share-symbol-grid button,
body[data-theme="white"] .mobile-community-panel .right-share-card .share-symbol-grid button{
  color:#69747c !important;
}


/* =========================================================
   FEED TEXT EDITOR TOOLBAR
   Restored for desktop + mobile.
   ========================================================= */
#feed .feed-editor-toolbar{
  display:flex !important;
  align-items:center !important;
  gap:2px !important;
  width:max-content !important;
  max-width:100% !important;
  margin:0 0 8px !important;
  padding:3px !important;
  border:1px solid var(--line) !important;
  border-radius:9px !important;
  background:var(--panel) !important;
  box-sizing:border-box !important;
}

#feed .feed-editor-toolbar button{
  width:32px !important;
  height:30px !important;
  min-width:32px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  color:var(--muted) !important;
  display:grid !important;
  place-items:center !important;
  font:600 13px/1 "Manrope",sans-serif !important;
  cursor:pointer !important;
  transition:background .16s ease,color .16s ease,transform .16s ease !important;
}

#feed .feed-editor-toolbar button:hover,
#feed .feed-editor-toolbar button:focus-visible{
  background:var(--accent-soft) !important;
  color:var(--accent) !important;
  outline:none !important;
}

#feed .feed-editor-toolbar button:active{
  transform:translateY(1px) scale(.97) !important;
}

#feed .feed-editor-toolbar strong{
  font-weight:800 !important;
}

#feed .feed-editor-toolbar em{
  font-family:Georgia,serif !important;
  font-size:15px !important;
}

@media(max-width:660px){
  #feed .feed-editor-toolbar{
    width:100% !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
    margin-bottom:8px !important;
  }
  #feed .feed-editor-toolbar::-webkit-scrollbar{
    display:none !important;
  }
  #feed .feed-editor-toolbar button{
    width:34px !important;
    height:32px !important;
    min-width:34px !important;
  }
}


/* =========================================================
   RIGHT RAIL — UNIFORM CARD SPACING + FULL DESKTOP SHARE GRID
   ========================================================= */
@media(min-width:961px){
  .right-rail{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    padding-top:22px !important;
    padding-bottom:24px !important;
  }

  /* One source of spacing: the rail gap. */
  .right-rail #everlightCommunityCard,
  .right-rail #everlightOnlineCard,
  .right-rail .activity-card,
  .right-rail .right-share-card{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  /* The share card must fit inside the 300px rail
     (300px rail - 60px horizontal padding = 240px content). */
  .right-rail .right-share-card .share-symbol-grid{
    grid-template-columns:repeat(5,44px) !important;
    grid-auto-rows:44px !important;
    gap:6px !important;
    width:max-content !important;
    max-width:100% !important;
  }

  .right-rail .right-share-card{
    overflow:visible !important;
  }
}

/* Keep six compact columns on the mobile notification copy. */
@media(max-width:660px){
  .mobile-community-panel .right-share-card .share-symbol-grid{
    grid-template-columns:repeat(6,44px) !important;
    grid-auto-rows:44px !important;
    gap:8px !important;
  }
}


/* =========================================================
   FINAL FEED EDITOR — toolbar is directly UNDER the text box
   ========================================================= */
#feed .composer-body{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
}

#feed #postText{
  order:10 !important;
}

#feed #feedEditorToolbar{
  order:20 !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  width:100% !important;
  max-width:100% !important;
  min-height:40px !important;
  margin:8px 0 0 !important;
  padding:4px !important;
  gap:3px !important;
  border:1px solid rgba(139,173,204,.13) !important;
  border-radius:9px !important;
  background:#151b21 !important;
  box-sizing:border-box !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
}

#feed #feedEditorToolbar::-webkit-scrollbar{
  display:none !important;
}

#feed #feedEditorToolbar button{
  flex:0 0 36px !important;
  width:36px !important;
  height:32px !important;
  min-width:36px !important;
  min-height:32px !important;
  max-width:36px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  color:#aeb8bd !important;
  display:grid !important;
  place-items:center !important;
  box-sizing:border-box !important;
  font:600 14px/1 "Manrope",Arial,sans-serif !important;
}

#feed #feedEditorToolbar button:hover,
#feed #feedEditorToolbar button:focus-visible{
  color:#d8e5ee !important;
  background:rgba(130,185,232,.08) !important;
  outline:none !important;
}

/* =========================================================
   FINAL PC RIGHT RAIL — cards use all space up to divider
   ========================================================= */
@media(min-width:961px){
  .layout{
    grid-template-columns:220px minmax(0,760px) 300px !important;
  }

  .right-rail{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .right-rail > .rail-info-card,
  .right-rail > .activity-card,
  .right-rail > .right-share-card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .right-rail .right-share-card{
    overflow:hidden !important;
  }

  .right-rail .right-share-card .share-symbol-grid{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    grid-auto-rows:44px !important;
    gap:6px !important;
  }

  .right-rail .right-share-card .share-symbol-grid button{
    justify-self:center !important;
  }
}


/* FINAL COMPOSER FOOTER — keep counter + Megosztás in original bottom row */
#feed .composer-body{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
}

#feed #postText{
  order:10 !important;
}

#feed #feedEditorToolbar{
  order:20 !important;
}

#feed .composer-footer{
  order:30 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  width:100% !important;
  min-width:0 !important;
  margin-top:10px !important;
  box-sizing:border-box !important;
}

#feed .composer-footer #counter{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

#feed .composer-footer #postButton{
  flex:0 0 auto !important;
  margin-left:auto !important;
}

/* On narrow screens keep the original footer row; only shrink the button if necessary. */
@media(max-width:660px){
  #feed .composer-footer{
    flex-wrap:nowrap !important;
  }
  #feed .composer-footer #postButton{
    max-width:52% !important;
  }
}


/* =========================================================
   FEED EDITOR TOOLBAR — forum/editor style
   ========================================================= */
#feed #feedEditorToolbar{
  order:20 !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  max-width:100% !important;
  min-height:42px !important;
  height:42px !important;
  margin:8px 0 0 !important;
  padding:4px !important;
  gap:4px !important;
  border:1px solid #27313a !important;
  border-radius:9px !important;
  background:#171e25 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset !important;
}

#feed #feedEditorToolbar .editor-tool-group{
  display:flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  height:34px !important;
  padding:0 2px !important;
  border:1px solid #27313a !important;
  border-radius:7px !important;
  background:#192129 !important;
  box-sizing:border-box !important;
}

#feed #feedEditorToolbar button{
  flex:0 0 auto !important;
  width:34px !important;
  min-width:34px !important;
  height:30px !important;
  min-height:30px !important;
  margin:0 !important;
  padding:0 7px !important;
  border:0 !important;
  border-radius:5px !important;
  background:transparent !important;
  color:#b8c0c6 !important;
  display:grid !important;
  place-items:center !important;
  box-sizing:border-box !important;
  font:600 14px/1 "Manrope",Arial,sans-serif !important;
  white-space:nowrap !important;
}

#feed #feedEditorToolbar .editor-tool-group-right button:last-child{
  width:auto !important;
  min-width:94px !important;
  padding:0 12px !important;
}

#feed #feedEditorToolbar button:hover,
#feed #feedEditorToolbar button:focus-visible{
  color:#e5edf2 !important;
  background:rgba(130,185,232,.10) !important;
  outline:none !important;
}

#feed #feedEditorToolbar .editor-tool-spacer{
  flex:1 1 auto !important;
  min-width:10px !important;
}

@media(max-width:660px){
  #feed #feedEditorToolbar{
    height:42px !important;
    min-height:42px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
  }
  #feed #feedEditorToolbar::-webkit-scrollbar{display:none !important;}
  #feed #feedEditorToolbar .editor-tool-spacer{display:none !important;}
  #feed #feedEditorToolbar .editor-tool-group-right{
    display:none !important;
  }
}


/* =========================================================
   FEED TOOLBAR CLEANUP — ONE CONTINUOUS BAR, NO BUBBLE GROUPS
   ========================================================= */
#feed #feedEditorToolbar{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  height:42px !important;
  min-height:42px !important;
  padding:3px 4px !important;
  gap:0 !important;
  border:1px solid #27313a !important;
  border-radius:8px !important;
  background:#171e25 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

#feed #feedEditorToolbar .editor-tool-group{
  display:flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  height:34px !important;
  margin:0 !important;
  padding:0 3px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-sizing:border-box !important;
}

#feed #feedEditorToolbar .editor-tool-group + .editor-tool-group{
  border-left:1px solid #303a42 !important;
  margin-left:3px !important;
  padding-left:5px !important;
}

#feed #feedEditorToolbar button{
  flex:0 0 34px !important;
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  height:32px !important;
  min-height:32px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:4px !important;
  background:transparent !important;
  color:#aeb8bd !important;
  display:grid !important;
  place-items:center !important;
  box-sizing:border-box !important;
  font:600 14px/1 "Manrope",Arial,sans-serif !important;
}

#feed #feedEditorToolbar button:hover,
#feed #feedEditorToolbar button:focus-visible{
  background:#202a32 !important;
  color:#dce6ec !important;
  outline:none !important;
}

#feed #feedEditorToolbar .editor-tool-group-right{
  margin-left:auto !important;
  padding-left:5px !important;
  border-left:1px solid #303a42 !important;
}

#feed #feedEditorToolbar .editor-tool-group-right button:last-child{
  width:auto !important;
  min-width:88px !important;
  max-width:110px !important;
  padding:0 10px !important;
  font-size:12px !important;
}

@media(max-width:660px){
  #feed #feedEditorToolbar{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
  }
  #feed #feedEditorToolbar::-webkit-scrollbar{display:none !important;}
  #feed #feedEditorToolbar .editor-tool-spacer{display:none !important;}
  #feed #feedEditorToolbar .editor-tool-group-right{display:none !important;}
}

/* =========================================================
   DOMAIN STATUS DOT — STATIC APPEARANCE ONLY
   Timing/pulsing is controlled by app.js.
   ========================================================= */
.topbar .domain{
  position:relative !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
}

.topbar .domain .domain-mode-light{
  display:block !important;
  visibility:visible !important;
  flex:0 0 8px !important;
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  min-height:8px !important;
  margin:0 7px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:#82b9e8 !important;
  animation:none !important;
  animation-play-state:paused !important;
  pointer-events:none !important;
  position:relative !important;
  z-index:20 !important;
  will-change:opacity,transform,box-shadow !important;
}

.topbar .domain::before,
.topbar .domain::after{
  content:none !important;
  display:none !important;
}

body.sun-mode .topbar .domain .domain-mode-light{
  background:#f2c45c !important;
}

@media(max-width:660px){
  .topbar .domain .domain-mode-light{
    flex:0 0 7px !important;
    width:7px !important;
    height:7px !important;
    min-width:7px !important;
    min-height:7px !important;
    margin-right:6px !important;
  }
}