/* ═══════════════════════════════════════════════════════════════════════════
   FURRYDEN CHAT — EMBER THEME
   Dark & mystical. Warm amber glows, ancient parchment text, firelit den.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=JetBrains+Mono:wght@300;400;500;600&family=Inter:wght@300;400;500;600&display=swap');

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
    --fd-bg-base:          #0a0704;
    --fd-bg-sidebar:       #0d0905;
    --fd-bg-roomlist:      #120a05;
    --fd-bg-timeline:      #0b0704;
    --fd-bg-panel:         #0f0906;
    --fd-bg-input:         #160c06;

    --fd-amber:            #f59e0b;
    --fd-amber-dim:        #92600a;
    --fd-amber-glow:       0 0 8px #f59e0b88, 0 0 20px #f59e0b44;
    --fd-amber-glow-sm:    0 0 4px #f59e0b66;
    --fd-amber-glow-lg:    0 0 15px #f59e0baa, 0 0 40px #f59e0b55;

    /* Kept as aliases so all var(--fd-cyan*) references still resolve */
    --fd-cyan:             #f59e0b;
    --fd-cyan-dim:         #92600a;
    --fd-cyan-glow:        0 0 8px #f59e0b88, 0 0 20px #f59e0b44;
    --fd-cyan-glow-sm:     0 0 4px #f59e0b66;
    --fd-cyan-glow-lg:     0 0 15px #f59e0baa, 0 0 40px #f59e0b55;

    --fd-gold:             #fcd34d;
    --fd-rust:             #d97706;

    --fd-green:            #86efac;
    --fd-danger:           #f87171;

    --fd-text-primary:     #f0e6d3;
    --fd-text-secondary:   #9a7a58;
    --fd-text-dim:         #4a3520;
    --fd-text-bright:      #fef3c7;

    --fd-border:           #f59e0b14;
    --fd-border-active:    #f59e0b33;
    --fd-separator:        #f59e0b0a;

    --fd-font-display:     'Cinzel', serif;
    --fd-font-ui:          'JetBrains Mono', monospace;
    --fd-font-msg:         'Inter', sans-serif;

    --fd-scanlines: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(245, 158, 11, 0.012) 2px,
        rgba(245, 158, 11, 0.012) 4px
    );
}

/* ── Compound design token overrides (Element 1.10+) ─────────────────────── */
.cpd-theme-dark, [class*="cpd-theme"] {
    --cpd-color-bg-canvas-default:              var(--fd-bg-timeline)   !important;
    --cpd-color-bg-canvas-secondary-level-1:    var(--fd-bg-roomlist)   !important;
    --cpd-color-bg-canvas-secondary-level-2:    var(--fd-bg-panel)      !important;
    --cpd-color-bg-subtle-primary:              #f59e0b0f               !important;
    --cpd-color-bg-subtle-secondary:            #f59e0b08               !important;
    --cpd-color-bg-action-primary-rest:         var(--fd-amber)         !important;
    --cpd-color-bg-action-primary-hovered:      #d97706                 !important;
    --cpd-color-bg-action-primary-pressed:      #b45309                 !important;
    --cpd-color-text-primary:                   var(--fd-text-primary)  !important;
    --cpd-color-text-secondary:                 var(--fd-text-secondary)!important;
    --cpd-color-text-placeholder:               var(--fd-text-dim)      !important;
    --cpd-color-text-on-solid-primary:          #0a0704                 !important;
    --cpd-color-text-action-accent:             var(--fd-amber)         !important;
    --cpd-color-text-link:                      var(--fd-amber)         !important;
    --cpd-color-border-interactive-primary:     var(--fd-amber)         !important;
    --cpd-color-border-disabled:                var(--fd-border)        !important;
    --cpd-color-border-focus-ring:              var(--fd-amber)         !important;
    --cpd-color-icon-primary:                   var(--fd-amber)         !important;
    --cpd-color-icon-secondary:                 var(--fd-text-secondary)!important;
    --cpd-color-icon-tertiary:                  var(--fd-text-dim)      !important;
    --cpd-color-icon-on-solid-primary:          #0a0704                 !important;
}

/* ── Global ───────────────────────────────────────────────────────────────── */
body, html {
    background: var(--fd-bg-base) !important;
}

* {
    scrollbar-width: thin !important;
    scrollbar-color: var(--fd-amber-dim) transparent !important;
}

::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fd-amber-dim); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover {
    background: var(--fd-amber);
    box-shadow: 0 0 6px var(--fd-amber);
}

::selection {
    background: #f59e0b33 !important;
    color: var(--fd-text-bright) !important;
}

/* ── App shell ────────────────────────────────────────────────────────────── */
.mx_MatrixChat,
.mx_MatrixChat_wrapper {
    background: var(--fd-bg-base) !important;
}

/* ── Space panel (far-left icon strip) ───────────────────────────────────── */
.mx_SpacePanel {
    background: var(--fd-bg-base) !important;
    border-right: 1px solid var(--fd-border) !important;
}

.mx_SpacePanel ul { background: transparent !important; }

.mx_SpaceButton_avatarWrapper {
    border-radius: 4px !important;
    transition: box-shadow 0.2s, border 0.2s !important;
}

.mx_SpaceButton:hover .mx_SpaceButton_avatarWrapper,
.mx_SpaceButton_active .mx_SpaceButton_avatarWrapper {
    box-shadow: var(--fd-amber-glow) !important;
    outline: 1px solid var(--fd-amber) !important;
}

/* ── Left panel / room list ───────────────────────────────────────────────── */
.mx_LeftPanel,
.mx_LeftPanel_wrapper,
.mx_LeftPanel_roomListContainer {
    background: var(--fd-bg-roomlist) !important;
    border-right: 1px solid var(--fd-border-active) !important;
    box-shadow: 3px 0 20px #f59e0b14 !important;
    position: relative !important;
}

/* Scanlines overlay on the room list */
.mx_LeftPanel_roomListContainer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--fd-scanlines);
    pointer-events: none;
    z-index: 100;
    opacity: 0.6;
}

/* Section headers */
.mx_RoomListHeader_container,
.mx_RoomSublist_headerText,
.mx_RoomListHeader {
    color: var(--fd-amber-dim) !important;
    font-family: var(--fd-font-ui) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    opacity: 0.85 !important;
}

/* Search bar */
.mx_RoomSearch,
.mx_RoomSearch input {
    background: var(--fd-bg-input) !important;
    border: 1px solid var(--fd-border-active) !important;
    border-radius: 3px !important;
    color: var(--fd-text-primary) !important;
    font-family: var(--fd-font-ui) !important;
    font-size: 12px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.mx_RoomSearch:focus-within {
    border-color: var(--fd-amber) !important;
    box-shadow: var(--fd-amber-glow) !important;
}

/* Room tiles */
.mx_RoomTile {
    border-radius: 2px !important;
    border-left: 2px solid transparent !important;
    transition: background 0.12s, border-left-color 0.12s, box-shadow 0.12s !important;
    font-family: var(--fd-font-ui) !important;
}
.mx_RoomTile:hover {
    background: #f59e0b0a !important;
    border-left-color: var(--fd-amber-dim) !important;
}
.mx_RoomTile_selected,
.mx_RoomTile[aria-selected="true"] {
    background: #f59e0b18 !important;
    border-left: 2px solid var(--fd-amber) !important;
    box-shadow: inset 3px 0 12px #f59e0b1a !important;
}

.mx_RoomTile_name,
.mx_RoomTile_nameWithPreview {
    font-family: var(--fd-font-ui) !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
}
.mx_RoomTile_name  { color: var(--fd-text-primary)   !important; }
.mx_RoomTile_nameWithPreview { color: var(--fd-text-secondary) !important; }

/* Notification badges */
.mx_NotificationBadge {
    background: var(--fd-amber) !important;
    color: #0a0704 !important;
    font-family: var(--fd-font-ui) !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    box-shadow: var(--fd-amber-glow-sm) !important;
    animation: fd-badge-pulse 2.5s ease-in-out infinite !important;
}
.mx_NotificationBadge_dot,
.mx_NotificationBadge_highlighted {
    background: var(--fd-rust) !important;
    box-shadow: 0 0 4px #d9770666 !important;
}

/* ── Timeline ─────────────────────────────────────────────────────────────── */
.mx_RoomView,
.mx_RoomView_body,
.mx_ScrollPanel,
.mx_RoomView_timeline,
.mx_RoomView_timeline_rr_enabled {
    background: var(--fd-bg-timeline) !important;
}

/* Event tiles */
.mx_EventTile {
    font-family: var(--fd-font-msg) !important;
    transition: background 0.1s !important;
}
.mx_EventTile:hover { background: #f59e0b06 !important; }

.mx_EventTile_highlighted,
.mx_EventTile_isHighlighted {
    background: #f59e0b0a !important;
    border-left: 2px solid var(--fd-amber) !important;
    padding-left: 8px !important;
    box-shadow: inset 3px 0 10px #f59e0b14 !important;
}

/* Sender name */
.mx_DisambiguatedProfile_displayName,
.mx_EventTile .mx_SenderProfile_name,
.mx_EventTile_senderDetails .mx_DisambiguatedProfile {
    font-family: var(--fd-font-ui) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.03em !important;
    text-shadow: 0 0 6px currentColor !important;
}

/* Message body */
.mx_EventTile_body,
.mx_MTextBody,
.mx_EventTile_content {
    font-family: var(--fd-font-msg) !important;
    color: var(--fd-text-primary) !important;
    line-height: 1.65 !important;
}

/* Timestamps */
.mx_MessageTimestamp {
    color: var(--fd-text-dim) !important;
    font-family: var(--fd-font-ui) !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
}

/* Code / pre */
.mx_EventTile_body code,
.mx_EventTile_body pre,
code, pre {
    font-family: var(--fd-font-ui) !important;
    background: #f59e0b0d !important;
    border: 1px solid var(--fd-border-active) !important;
    border-radius: 3px !important;
    color: var(--fd-amber) !important;
}

/* Links */
a, .mx_EventTile_body a {
    color: var(--fd-amber) !important;
    text-shadow: 0 0 6px #f59e0b55 !important;
    transition: text-shadow 0.2s !important;
}
a:hover { text-shadow: 0 0 10px #f59e0baa !important; }

/* Date separators */
.mx_DateSeparator,
.mx_TimelineSeparator {
    color: var(--fd-text-dim) !important;
    font-family: var(--fd-font-ui) !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

/* Pills (mentions) */
.mx_UserPill, .mx_RoomPill, .mx_EventPill {
    background: #f59e0b15 !important;
    border: 1px solid var(--fd-amber-dim) !important;
    color: var(--fd-amber) !important;
    font-family: var(--fd-font-ui) !important;
    font-size: 11px !important;
    border-radius: 3px !important;
    transition: box-shadow 0.15s !important;
}
.mx_UserPill:hover, .mx_RoomPill:hover {
    box-shadow: var(--fd-amber-glow-sm) !important;
}
.mx_UserPill_me {
    background: #f59e0b22 !important;
    border-color: var(--fd-amber) !important;
    color: var(--fd-gold) !important;
    box-shadow: var(--fd-amber-glow-sm) !important;
    animation: fd-mention-pulse 3s ease-in-out infinite !important;
}

/* Reactions */
.mx_ReactionsRowButton {
    background: #f59e0b0a !important;
    border: 1px solid var(--fd-border) !important;
    border-radius: 12px !important;
    transition: all 0.15s !important;
}
.mx_ReactionsRowButton:hover {
    background: #f59e0b1a !important;
    border-color: var(--fd-amber) !important;
    box-shadow: var(--fd-amber-glow-sm) !important;
}
.mx_ReactionsRowButton_selected {
    background: #f59e0b22 !important;
    border-color: var(--fd-amber) !important;
    box-shadow: var(--fd-amber-glow-sm) !important;
    color: var(--fd-amber) !important;
}

/* E2E icons */
.mx_EventTile_e2eIcon_verified  { filter: drop-shadow(0 0 5px var(--fd-green))   !important; }
.mx_EventTile_e2eIcon_warning   { filter: drop-shadow(0 0 5px var(--fd-danger))  !important; }
.mx_EventTile_e2eIcon_unknown   { filter: drop-shadow(0 0 5px var(--fd-rust))    !important; }

/* Typing indicator */
.mx_TypingIndicator {
    color: var(--fd-text-secondary) !important;
    font-family: var(--fd-font-ui) !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
}
.mx_TypingIndicator_avatars .mx_BaseAvatar {
    animation: fd-avatar-pulse 1.5s ease-in-out infinite !important;
}

/* ── Room header ──────────────────────────────────────────────────────────── */
.mx_RoomHeader,
.mx_LegacyRoomHeader {
    background: var(--fd-bg-panel) !important;
    border-bottom: 1px solid var(--fd-border-active) !important;
    box-shadow: 0 2px 20px #f59e0b14 !important;
}

.mx_RoomHeader_heading,
.mx_LegacyRoomHeader_name,
.mx_RoomHeader_nametext {
    color: var(--fd-text-bright) !important;
    font-family: var(--fd-font-ui) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-shadow: 0 0 12px #f59e0b55 !important;
}

.mx_RoomHeader_topic,
.mx_LegacyRoomHeader_topic {
    color: var(--fd-text-secondary) !important;
    font-family: var(--fd-font-ui) !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
}

/* Header buttons */
.mx_RoomHeader_button,
.mx_LegacyRoomHeader_button {
    color: var(--fd-text-secondary) !important;
    transition: color 0.2s, filter 0.2s !important;
}
.mx_RoomHeader_button:hover,
.mx_LegacyRoomHeader_button:hover {
    color: var(--fd-amber) !important;
    filter: drop-shadow(0 0 4px var(--fd-amber)) !important;
}

/* ── Message composer ─────────────────────────────────────────────────────── */
.mx_MessageComposer_wrapper,
.mx_MessageComposer_row {
    background: var(--fd-bg-input) !important;
    border: 1px solid var(--fd-border-active) !important;
    border-radius: 6px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.mx_MessageComposer_wrapper:focus-within,
.mx_MessageComposer_row:focus-within {
    border-color: var(--fd-amber) !important;
    box-shadow: var(--fd-amber-glow), inset 0 0 20px #f59e0b06 !important;
}

.mx_BasicMessageComposer .public-DraftEditor-content {
    font-family: var(--fd-font-msg) !important;
    color: var(--fd-text-primary) !important;
    caret-color: var(--fd-amber) !important;
}

/* Composer buttons */
.mx_MessageComposer_button {
    color: var(--fd-text-dim) !important;
    transition: color 0.2s, filter 0.2s !important;
}
.mx_MessageComposer_button:hover {
    color: var(--fd-amber) !important;
    filter: drop-shadow(0 0 4px var(--fd-amber)) !important;
}

/* Send button */
.mx_MessageComposer_sendMessage {
    background: var(--fd-amber) !important;
    color: #0a0704 !important;
    box-shadow: var(--fd-amber-glow-sm) !important;
    transition: box-shadow 0.2s, filter 0.2s !important;
}
.mx_MessageComposer_sendMessage:hover {
    box-shadow: var(--fd-amber-glow) !important;
    filter: brightness(1.15) !important;
}

/* ── Avatars ──────────────────────────────────────────────────────────────── */
.mx_BaseAvatar {
    border: 1px solid var(--fd-border) !important;
    box-shadow: 0 0 6px #f59e0b22 !important;
    transition: box-shadow 0.2s, border-color 0.2s !important;
}
.mx_BaseAvatar:hover {
    box-shadow: var(--fd-amber-glow) !important;
    border-color: var(--fd-amber) !important;
}

/* ── Right panel ──────────────────────────────────────────────────────────── */
.mx_RightPanel,
.mx_BaseCard,
.mx_UserInfo {
    background: var(--fd-bg-panel) !important;
    border-left: 1px solid var(--fd-border-active) !important;
    box-shadow: -3px 0 20px #f59e0b14 !important;
    font-family: var(--fd-font-ui) !important;
}

.mx_UserInfo_profile_displayName {
    color: var(--fd-text-bright) !important;
    font-family: var(--fd-font-ui) !important;
    text-shadow: 0 0 10px #f59e0b44 !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary_outline,
.mx_DefaultWelcome_buttons a,
.mx_DefaultWelcome_buttons button,
[class*="cpd-button"][data-kind="primary"],
[class*="cpd-button"][data-kind="primary"] * {
    background: var(--fd-amber) !important;
    color: #0a0704 !important;
    font-family: var(--fd-font-ui) !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 3px !important;
    box-shadow: var(--fd-amber-glow-sm) !important;
    transition: box-shadow 0.2s, filter 0.2s !important;
}
.mx_AccessibleButton_kind_primary:hover {
    box-shadow: var(--fd-amber-glow) !important;
    filter: brightness(1.12) !important;
}

.mx_AccessibleButton_kind_secondary {
    background: transparent !important;
    border: 1px solid var(--fd-amber) !important;
    color: var(--fd-amber) !important;
    font-family: var(--fd-font-ui) !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: 3px !important;
    transition: background 0.2s, box-shadow 0.2s !important;
}
.mx_AccessibleButton_kind_secondary:hover {
    background: #f59e0b11 !important;
    box-shadow: var(--fd-amber-glow-sm) !important;
}

.mx_AccessibleButton_kind_danger {
    background: var(--fd-danger) !important;
    color: #0a0704 !important;
    font-family: var(--fd-font-ui) !important;
    box-shadow: 0 0 4px #f8717166 !important;
}
.mx_AccessibleButton_kind_danger:hover {
    box-shadow: 0 0 8px #f87171aa, 0 0 20px #f8717144 !important;
    filter: brightness(1.1) !important;
}

/* ── Inputs / forms ───────────────────────────────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea,
.mx_Field input,
.mx_Field textarea,
.mx_Field select {
    background: var(--fd-bg-input) !important;
    border: 1px solid var(--fd-border-active) !important;
    border-radius: 3px !important;
    color: var(--fd-text-primary) !important;
    font-family: var(--fd-font-ui) !important;
    font-size: 13px !important;
    caret-color: var(--fd-amber) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
input:focus, textarea:focus,
.mx_Field input:focus,
.mx_Field textarea:focus {
    border-color: var(--fd-amber) !important;
    box-shadow: var(--fd-amber-glow) !important;
    outline: none !important;
}

.mx_Field label {
    color: var(--fd-text-secondary) !important;
    font-family: var(--fd-font-ui) !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

/* ── Dialogs / modals ─────────────────────────────────────────────────────── */
.mx_Dialog,
.mx_GenericModal,
[role="dialog"] {
    background: var(--fd-bg-panel) !important;
    border: 1px solid var(--fd-border-active) !important;
    box-shadow: 0 0 40px #f59e0b1a, 0 25px 70px rgba(0,0,0,0.85) !important;
    border-radius: 4px !important;
    color: var(--fd-text-primary) !important;
    font-family: var(--fd-font-ui) !important;
}

.mx_Dialog_title,
.mx_GenericModal_title {
    color: var(--fd-amber) !important;
    font-family: var(--fd-font-display) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 12px #f59e0b55 !important;
    border-bottom: 1px solid var(--fd-border-active) !important;
    padding-bottom: 14px !important;
    margin-bottom: 16px !important;
}

.mx_Dialog_cancelButton:hover { color: var(--fd-danger) !important; }

/* Dialog backdrop */
.mx_Dialog_background {
    background: rgba(10, 7, 4, 0.88) !important;
    backdrop-filter: blur(4px) !important;
}

/* ── Context menus ────────────────────────────────────────────────────────── */
.mx_ContextualMenu,
.mx_GenericDropdownMenu_menu {
    background: var(--fd-bg-panel) !important;
    border: 1px solid var(--fd-border-active) !important;
    box-shadow: 0 0 25px #f59e0b14, 0 10px 35px rgba(0,0,0,0.75) !important;
    border-radius: 4px !important;
    font-family: var(--fd-font-ui) !important;
    overflow: hidden !important;
}

.mx_ContextualMenu_item,
.mx_GenericDropdownMenu_option {
    color: var(--fd-text-primary) !important;
    font-family: var(--fd-font-ui) !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    transition: background 0.1s, color 0.1s !important;
}
.mx_ContextualMenu_item:hover,
.mx_GenericDropdownMenu_option:hover {
    background: #f59e0b10 !important;
    color: var(--fd-amber) !important;
}

/* ── Tooltips ─────────────────────────────────────────────────────────────── */
.mx_Tooltip,
[role="tooltip"] {
    background: var(--fd-bg-panel) !important;
    border: 1px solid var(--fd-border-active) !important;
    color: var(--fd-text-primary) !important;
    font-family: var(--fd-font-ui) !important;
    font-size: 11px !important;
    letter-spacing: 0.03em !important;
    border-radius: 3px !important;
    box-shadow: var(--fd-amber-glow-sm) !important;
}

/* Hide "Create account" button on welcome page — registration is admin-only */
.mx_DefaultWelcome_buttons a[href*="register"],
.mx_DefaultWelcome_buttons button:not(:first-of-type),
.mx_DefaultWelcome_buttons > *:last-child {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   WELCOME / LOGIN PAGE — EMBER HEARTH
   ══════════════════════════════════════════════════════════════════════════ */

/* Kill the lake background image */
.mx_AuthPage > div[style*="lake"],
.mx_AuthPage > div[style*="background"] {
    background: none !important;
}

/* Full page atmosphere */
.mx_AuthPage {
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background:
        var(--fd-scanlines),
        radial-gradient(ellipse 120% 50% at 50% -5%,  #f59e0b14 0%, transparent 55%),
        radial-gradient(ellipse 70%  50% at 0%   100%, #d977060d 0%, transparent 50%),
        radial-gradient(ellipse 70%  50% at 100% 100%, #f59e0b09 0%, transparent 50%),
        var(--fd-bg-base) !important;
}

/* Stone floor — warm amber grid */
.mx_AuthPage::before {
    content: '';
    position: fixed;
    left: -100%;
    right: -100%;
    bottom: 0;
    height: 55vh;
    background-image:
        linear-gradient(rgba(245, 158, 11, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 158, 11, 0.14) 1px, transparent 1px);
    background-size: 70px 70px;
    transform: perspective(350px) rotateX(65deg);
    transform-origin: bottom center;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 50%, transparent 100%);
    mask-image: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 50%, transparent 100%);
}

/* Slow ember sweep */
.mx_AuthPage::after {
    content: '';
    position: fixed;
    top: 0; bottom: 0;
    left: -60%;
    width: 60%;
    background: linear-gradient(90deg,
        transparent 0%,
        #f59e0b05 40%,
        #f59e0b0b 50%,
        #f59e0b05 60%,
        transparent 100%);
    animation: fd-sweep 10s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes fd-sweep {
    0%   { left: -60%; }
    100% { left: 160%; }
}

/* Card — dark glass with amber border and warm glow */
.mx_AuthPage_modal {
    position: relative !important;
    z-index: 1 !important;
    background: rgba(15, 9, 6, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--fd-amber) !important;
    border-radius: 0 !important;
    clip-path: polygon(
        0 16px, 16px 0,
        calc(100% - 16px) 0, 100% 16px,
        100% calc(100% - 16px), calc(100% - 16px) 100%,
        16px 100%, 0 calc(100% - 16px)
    ) !important;
    box-shadow:
        0 0  20px #f59e0b33,
        0 0  50px #f59e0b18,
        0 0 100px #f59e0b0a,
        inset 0 0 30px #f59e0b07,
        0 40px 100px rgba(0, 0, 0, 0.85) !important;
    animation: fd-card-glow 5s ease-in-out infinite !important;
}

@keyframes fd-card-glow {
    0%, 100% {
        box-shadow:
            0 0  20px #f59e0b33,
            0 0  50px #f59e0b18,
            0 0 100px #f59e0b0a,
            inset 0 0 30px #f59e0b07,
            0 40px 100px rgba(0,0,0,0.85);
    }
    50% {
        box-shadow:
            0 0  28px #f59e0b55,
            0 0  65px #f59e0b28,
            0 0 120px #f59e0b14,
            inset 0 0 40px #f59e0b0e,
            0 40px 100px rgba(0,0,0,0.85);
    }
}

/* Corner brackets */
.mx_AuthPage_modalContent {
    position: relative !important;
}
.mx_AuthPage_modalContent::before,
.mx_AuthPage_modalContent::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    z-index: 10;
}
.mx_AuthPage_modalContent::before {
    top: 0; left: 0;
    border-top: 2px solid var(--fd-amber);
    border-left: 2px solid var(--fd-amber);
    filter: drop-shadow(0 0 6px var(--fd-amber));
}
.mx_AuthPage_modalContent::after {
    bottom: 0; right: 0;
    border-bottom: 2px solid var(--fd-amber);
    border-right: 2px solid var(--fd-amber);
    filter: drop-shadow(0 0 6px var(--fd-amber));
}

/* Welcome title — Cinzel display font */
.mx_DefaultWelcome h1,
.mx_DefaultWelcome [class*="heading"] {
    color: var(--fd-text-bright) !important;
    font-family: var(--fd-font-display) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    text-shadow:
        0 0 10px #f59e0b88,
        0 0 25px #f59e0b44,
        0 0 50px #f59e0b22 !important;
    margin-bottom: 28px !important;
}

/* Logo — amber glow breathing */
.mx_DefaultWelcome_logo {
    background: url('/FamilyCrest.png') center/contain no-repeat !important;
    width: 110px !important;
    height: 110px !important;
    min-height: 110px !important;
    filter:
        brightness(0) saturate(100%)
        invert(72%) sepia(74%) saturate(700%) hue-rotate(3deg)
        brightness(103%) contrast(97%)
        drop-shadow(0 0 12px #f59e0bcc)
        drop-shadow(0 0 30px #f59e0b66) !important;
    display: block !important;
    margin: 0 auto 20px !important;
    animation: fd-logo-pulse 4s ease-in-out infinite !important;
}

@keyframes fd-logo-pulse {
    0%, 100% {
        filter:
            brightness(0) saturate(100%)
            invert(72%) sepia(74%) saturate(700%) hue-rotate(3deg)
            brightness(103%) contrast(97%)
            drop-shadow(0 0 10px #f59e0baa)
            drop-shadow(0 0 28px #f59e0b55);
    }
    50% {
        filter:
            brightness(0) saturate(100%)
            invert(72%) sepia(74%) saturate(700%) hue-rotate(3deg)
            brightness(103%) contrast(97%)
            drop-shadow(0 0 18px #f59e0bff)
            drop-shadow(0 0 50px #f59e0b88)
            drop-shadow(0 0 80px #f59e0b33);
    }
}

/* Sign In button */
.mx_DefaultWelcome_buttons > *:first-child {
    width: 100% !important;
    padding: 14px 20px !important;
    font-family: var(--fd-font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #0a0704 !important;
    background: var(--fd-amber) !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%) !important;
    box-shadow: var(--fd-amber-glow) !important;
    transition: box-shadow 0.2s, filter 0.2s !important;
}
.mx_DefaultWelcome_buttons > *:first-child:hover {
    box-shadow: var(--fd-amber-glow-lg) !important;
    filter: brightness(1.12) !important;
}

/* Footer — hide irrelevant external links */
.mx_AuthFooter { display: none !important; }

/* Hide language selector */
.mx_AuthBody_language,
.mx_Dropdown_language,
[class*="language"],
.mx_AuthPage .mx_Dropdown { display: none !important; }

/* AuthBody (actual login form) */
.mx_AuthBody,
.mx_AuthPage .mx_AuthBody {
    background: rgba(15, 9, 6, 0.92) !important;
    border: 1px solid var(--fd-border-active) !important;
    box-shadow: 0 0 50px #f59e0b1a, 0 30px 80px rgba(0,0,0,0.8) !important;
    border-radius: 0 !important;
}

/* Login page left panel — family crest */
.mx_AuthHeaderLogo img,
.mx_AuthHeaderLogo svg {
    display: none !important;
}
.mx_AuthHeader {
    position: relative !important;
}

.mx_AuthHeaderLogo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 110px !important;
    height: 110px !important;
    background: url('/FamilyCrest.png') center/contain no-repeat !important;
    filter:
        brightness(0) saturate(100%)
        invert(72%) sepia(74%) saturate(700%) hue-rotate(3deg)
        brightness(103%) contrast(97%)
        drop-shadow(0 0 14px #f59e0bcc)
        drop-shadow(0 0 35px #f59e0b77) !important;
    animation: fd-logo-pulse 4s ease-in-out infinite !important;
}

/* Left panel background */
.mx_AuthHeader {
    background:
        radial-gradient(ellipse 120% 80% at 50% 30%, #f59e0b0e 0%, transparent 70%),
        rgba(10, 7, 4, 0.95) !important;
    border-right: 1px solid var(--fd-border-active) !important;
}

/* ── Home page ────────────────────────────────────────────────────────────── */
.mx_HomePage img[src*="element"],
.mx_HomePage img[src*="logo"],
.mx_HomePage svg,
.mx_EmptyState img,
.mx_EmptyState svg,
[class*="HomePage"] img,
[class*="HomePage"] svg,
[class*="home_page"] img,
[class*="home_page"] svg {
    display: none !important;
}
.mx_HomePage > div > img,
.mx_HomePage > div > svg {
    display: none !important;
}

.mx_HomePage_default_buttons,
.mx_HomePage_default_buttons ~ * { margin-top: 0 !important; }

.mx_DefaultWelcome_logo img {
    display: none !important;
}
.mx_DefaultWelcome_logo {
    width: 90px !important;
    height: 90px !important;
    min-height: 90px !important;
    display: block !important;
    margin: 0 auto 16px !important;
}

/* ── Animations ───────────────────────────────────────────────────────────── */
@keyframes fd-badge-pulse {
    0%, 100% { box-shadow: 0 0 4px #f59e0b77; }
    50%       { box-shadow: 0 0 12px #f59e0bcc, 0 0 24px #f59e0b44; }
}

@keyframes fd-avatar-pulse {
    0%, 100% { box-shadow: 0 0 4px #f59e0b44; }
    50%       { box-shadow: 0 0 14px #f59e0baa; }
}

@keyframes fd-mention-pulse {
    0%, 100% { box-shadow: 0 0 3px #f59e0b55; }
    50%       { box-shadow: 0 0 10px #f59e0baa, 0 0 20px #f59e0b44; }
}

@keyframes fd-border-glow {
    0%, 100% { border-color: var(--fd-amber-dim); }
    50%       { border-color: var(--fd-amber); box-shadow: var(--fd-amber-glow); }
}