/**
 * GLiBz Western × Vapor Terminal Theme
 * ─────────────────────────────────────
 * Old West warmth meets retro green phosphor CRT.
 * Overrides UNA default template colors, typography, and surfaces.
 *
 * Palette:
 *   Parchment  #1C1710  (deep aged leather bg)
 *   Dust       #2A2318  (secondary surfaces)
 *   Rawhide    #3A3128  (cards / boxes)
 *   Saddle     #4A3F33  (borders, dividers)
 *   Gold       #D4A843  (AMMO Gold accent)
 *   Copper     #B87333  (warm secondary accent)
 *   Cream      #E8DCC8  (primary text)
 *   Terminal   #00FF41  (vapor green glow)
 *   Dim Term   #33CC55  (softer green for body text)
 *   Scanline   rgba(0,255,65,0.03)
 */

/* ═══════════════════════════════════════════════════════════════════
   § 1. GOOGLE FONTS — Rye (Western display) + Special Elite (typewriter)
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Rye&family=Special+Elite&family=VT323&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   § 2. ROOT VARIABLES
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --gw-bg-deep:     #110E0A;
    --gw-bg-page:     #1C1710;
    --gw-bg-block:    #2A2318;
    --gw-bg-card:     #3A3128;
    --gw-bg-hover:    #4A3F33;
    --gw-border:      #5A4D3E;
    --gw-border-dim:  #3D3429;
    --gw-gold:        #D4A843;
    --gw-gold-dim:    #A07830;
    --gw-copper:      #B87333;
    --gw-cream:       #E8DCC8;
    --gw-cream-dim:   #B8A88C;
    --gw-terminal:    #00FF41;
    --gw-term-dim:    #33CC55;
    --gw-term-glow:   rgba(0, 255, 65, 0.15);
    --gw-term-shadow: 0 0 8px rgba(0, 255, 65, 0.3), 0 0 2px rgba(0, 255, 65, 0.5);
    --gw-scanline:    rgba(0, 255, 65, 0.03);
    --gw-red:         #CC4433;
    --gw-font-display: 'Rye', Georgia, 'Times New Roman', serif;
    --gw-font-body:    'Special Elite', 'Courier New', Courier, monospace;
    --gw-font-terminal: 'VT323', 'Courier New', monospace;
}

/* ═══════════════════════════════════════════════════════════════════
   § 3. BASE SURFACES — page, body, backgrounds
   ═══════════════════════════════════════════════════════════════════ */

html {
    background: var(--gw-bg-deep) !important;
}

body,
body.bx-def-color-bg-page,
.bx-def-color-bg-page {
    background-color: var(--gw-bg-page) !important;
    color: var(--gw-cream) !important;
    font-family: var(--gw-font-body) !important;
}

/* Subtle western doodle pattern overlay on body */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('../images/western-pattern-tile.jpg');
    background-size: 300px 300px;
    background-repeat: repeat;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: luminosity;
}

/* CRT scanline overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        var(--gw-scanline) 2px,
        var(--gw-scanline) 4px
    );
    pointer-events: none;
    z-index: 9980;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════
   § 4. TOOLBAR — the top bar
   ═══════════════════════════════════════════════════════════════════ */

#bx-toolbar,
#bx-toolbar .bx-toolbar-content {
    background: linear-gradient(180deg, #1A1510 0%, #0D0A07 100%) !important;
    border-bottom: 2px solid var(--gw-gold-dim) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 1px 0 var(--gw-border-dim) !important;
}

/* Toolbar bottom gold rule with terminal green accent line */
#bx-toolbar::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gw-terminal) 20%, var(--gw-gold) 50%, var(--gw-terminal) 80%, transparent);
    opacity: 0.4;
}

#bx-toolbar a,
#bx-toolbar .bx-toolbar-content a {
    color: var(--gw-cream) !important;
}

#bx-toolbar a:hover,
#bx-toolbar .bx-menu-item:hover > a {
    color: var(--gw-gold) !important;
}

/* Logo glow */
#bx-logo-container a {
    color: var(--gw-gold) !important;
    text-shadow: 0 0 12px rgba(212, 168, 67, 0.4);
    font-family: var(--gw-font-display) !important;
}

/* Toolbar icons */
#bx-toolbar .sys-icon,
#bx-toolbar .sys-icon-a {
    color: var(--gw-cream-dim) !important;
}

#bx-toolbar .bx-menu-item:hover .sys-icon,
#bx-toolbar .bx-menu-item:hover .sys-icon-a {
    color: var(--gw-terminal) !important;
    text-shadow: var(--gw-term-shadow);
}

/* Notification badges — terminal green */
#bx-toolbar .bx-menu-item-nt-count,
.bx-informer-item-cnt {
    background: var(--gw-terminal) !important;
    color: #000 !important;
    font-family: var(--gw-font-terminal) !important;
    font-weight: bold;
    box-shadow: 0 0 6px rgba(0, 255, 65, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════
   § 5. SIDEBAR / NAVIGATION PANEL
   ═══════════════════════════════════════════════════════════════════ */

.bx-main-column.narrow,
.bx-main-column.narrow .bx-mc-cnt {
    background: linear-gradient(180deg, #1A1510 0%, #110E0A 100%) !important;
    border-right: 1px solid var(--gw-border-dim) !important;
}

.bx-menu-panel {
    background: transparent !important;
}

.bx-menu-panel .bx-menu-item a {
    color: var(--gw-cream-dim) !important;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.bx-menu-panel .bx-menu-item a:hover {
    color: var(--gw-terminal) !important;
    background: rgba(0, 255, 65, 0.05) !important;
    border-left-color: var(--gw-terminal);
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.2);
}

.bx-menu-panel .bx-menu-item.bx-menu-tab-active a,
.bx-menu-panel .bx-menu-item a.bx-menu-tab-active {
    color: var(--gw-gold) !important;
    background: rgba(212, 168, 67, 0.08) !important;
    border-left-color: var(--gw-gold) !important;
}

/* Sidebar panel titles */
.bx-menu-panel .bx-mpi-toggle {
    color: var(--gw-gold) !important;
    font-family: var(--gw-font-display) !important;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.bx-menu-panel .sys-icon {
    color: var(--gw-copper) !important;
}

.bx-menu-panel .bx-menu-item:hover .sys-icon {
    color: var(--gw-terminal) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 6. MAIN CONTENT AREA
   ═══════════════════════════════════════════════════════════════════ */

.bx-main-column.wide {
    background: var(--gw-bg-page) !important;
}

.bx-main-content {
    background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 7. DESIGN BOXES (cards, panels, content blocks)
   ═══════════════════════════════════════════════════════════════════ */

.bx-db-container {
    background: var(--gw-bg-block) !important;
    border: 1px solid var(--gw-border-dim) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(212, 168, 67, 0.05) !important;
}

/* Block headers — western ribbon feel */
.bx-db-header {
    background: linear-gradient(180deg, rgba(212, 168, 67, 0.12) 0%, rgba(212, 168, 67, 0.04) 100%) !important;
    border-bottom: 1px solid var(--gw-border-dim) !important;
    position: relative;
}

/* Gold accent line under headers */
.bx-db-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gw-gold-dim) 30%, var(--gw-gold) 50%, var(--gw-gold-dim) 70%, transparent);
    opacity: 0.5;
}

.bx-db-title {
    color: var(--gw-gold) !important;
    font-family: var(--gw-font-display) !important;
    letter-spacing: 0.5px;
}

.bx-db-content {
    background: transparent !important;
    color: var(--gw-cream) !important;
}

/* Box / card backgrounds */
.bx-def-color-bg-block,
.bx-def-color-bg-box,
.bx-def-color-bg-box-overflow {
    background-color: var(--gw-bg-card) !important;
}

.bx-def-color-bg-box-hover:hover {
    background-color: var(--gw-bg-hover) !important;
}

.bx-def-color-bg-sec {
    background-color: var(--gw-bg-block) !important;
}

.bx-def-color-bg-hl,
.bx-def-color-bg-hl-even:nth-child(even),
.bx-def-color-bg-hl-hover:hover {
    background-color: rgba(212, 168, 67, 0.06) !important;
}

.bx-def-color-bg-active {
    background-color: rgba(0, 255, 65, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 8. TYPOGRAPHY — Western + Terminal
   ═══════════════════════════════════════════════════════════════════ */

/* Headings — Rye Western display font */
h1, .bx-def-font-h1 {
    font-family: var(--gw-font-display) !important;
    color: var(--gw-gold) !important;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

h2, .bx-def-font-h2 {
    font-family: var(--gw-font-display) !important;
    color: var(--gw-gold) !important;
}

h3, .bx-def-font-h3 {
    font-family: var(--gw-font-display) !important;
    color: var(--gw-copper) !important;
}

/* Body text */
.bx-def-font-default,
.bx-base-text-entity-content,
.bx-tl-content,
.bx-content-description,
p {
    color: var(--gw-cream) !important;
}

/* Grayed / secondary text */
.bx-def-font-grayed,
.bx-informer-msg-text {
    color: var(--gw-cream-dim) !important;
}

/* Code / pre blocks — full terminal mode */
pre, code,
.bx-tl-content pre,
.bx-base-text-entity-content pre,
.bx-content-description pre,
.cmt-body pre {
    background: var(--gw-bg-deep) !important;
    color: var(--gw-terminal) !important;
    border: 1px solid rgba(0, 255, 65, 0.2) !important;
    font-family: var(--gw-font-terminal) !important;
    text-shadow: 0 0 4px rgba(0, 255, 65, 0.3);
    border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════
   § 9. LINKS — Vapor green with terminal glow on hover
   ═══════════════════════════════════════════════════════════════════ */

a {
    color: var(--gw-term-dim) !important;
    transition: color 0.2s, text-shadow 0.2s;
}

a:hover {
    color: var(--gw-terminal) !important;
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.3);
}

/* Keep gold for certain nav/action links */
.bx-db-title a,
.bx-menu-panel a,
#bx-toolbar a {
    color: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 10. BUTTONS — Leather + terminal glow
   ═══════════════════════════════════════════════════════════════════ */

.bx-btn,
.bx-btn-small,
button,
input[type="submit"],
input[type="button"] {
    background: linear-gradient(180deg, var(--gw-bg-hover) 0%, var(--gw-bg-card) 100%) !important;
    color: var(--gw-cream) !important;
    border: 1px solid var(--gw-border) !important;
    font-family: var(--gw-font-body) !important;
    text-shadow: none;
    transition: all 0.2s ease;
    border-radius: 3px !important;
}

.bx-btn:hover,
.bx-btn-small:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: linear-gradient(180deg, var(--gw-border) 0%, var(--gw-bg-hover) 100%) !important;
    border-color: var(--gw-gold-dim) !important;
    color: var(--gw-gold) !important;
    box-shadow: 0 0 8px rgba(212, 168, 67, 0.2);
}

/* Primary / call-to-action buttons — Gold western */
.bx-btn-primary,
.bx-btn.bx-btn-primary,
a.bx-btn-primary {
    background: linear-gradient(180deg, var(--gw-gold) 0%, var(--gw-gold-dim) 100%) !important;
    color: #1C1710 !important;
    border-color: var(--gw-copper) !important;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.bx-btn-primary:hover,
.bx-btn.bx-btn-primary:hover,
a.bx-btn-primary:hover {
    background: linear-gradient(180deg, #E8BC5A 0%, var(--gw-gold) 100%) !important;
    box-shadow: 0 0 16px rgba(212, 168, 67, 0.4), 0 0 4px rgba(0, 255, 65, 0.15) !important;
    color: #1C1710 !important;
}

/* Danger / delete buttons */
.bx-btn.bx-btn-danger {
    background: linear-gradient(180deg, var(--gw-red), #992233) !important;
    border-color: #992233 !important;
    color: var(--gw-cream) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 11. FORMS — Aged paper inputs with terminal cursor
   ═══════════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select,
.bx-form-input-wrapper-text input,
.bx-form-input-text,
.bx-form-input-textarea {
    background: var(--gw-bg-deep) !important;
    color: var(--gw-terminal) !important;
    border: 1px solid var(--gw-border-dim) !important;
    font-family: var(--gw-font-terminal) !important;
    font-size: 1rem;
    caret-color: var(--gw-terminal);
    border-radius: 3px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--gw-terminal) !important;
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.2), inset 0 0 4px rgba(0, 255, 65, 0.05) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(0, 255, 65, 0.3) !important;
    font-style: italic;
}

/* Form labels */
.bx-form-caption,
.bx-form-section-divider {
    color: var(--gw-copper) !important;
    font-family: var(--gw-font-display) !important;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Checkboxes & radios */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--gw-terminal) !important;
}

select {
    background-image: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 12. BORDERS & DIVIDERS — Weathered rope lines
   ═══════════════════════════════════════════════════════════════════ */

.bx-def-border {
    border-color: var(--gw-border-dim) !important;
}

hr,
.bx-def-hr {
    border-color: var(--gw-border-dim) !important;
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════════
   § 13. MENUS (horizontal tabs, dropdown menus)
   ═══════════════════════════════════════════════════════════════════ */

/* Horizontal menu tabs */
.bx-db-menu-tab {
    color: var(--gw-cream-dim) !important;
    border-bottom-color: transparent !important;
}

.bx-db-menu-tab:hover {
    color: var(--gw-terminal) !important;
}

.bx-db-menu-tab-active,
.bx-menu-tab-active {
    color: var(--gw-gold) !important;
    border-bottom-color: var(--gw-gold) !important;
}

/* Dropdown / popup menus */
.bx-popup,
.bx-popup-applied,
.bx-menu-ver {
    background: var(--gw-bg-block) !important;
    border: 1px solid var(--gw-border) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.bx-menu-ver > li > a,
.bx-popup .bx-menu-item a {
    color: var(--gw-cream) !important;
}

.bx-menu-ver > li > a:hover,
.bx-popup .bx-menu-item a:hover {
    background: rgba(0, 255, 65, 0.06) !important;
    color: var(--gw-terminal) !important;
}

/* Submenu / page navigation bar */
.bx-page-submenu-cnt {
    background: var(--gw-bg-block) !important;
    border-bottom: 1px solid var(--gw-border-dim) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 14. COVER / PAGE HEADER
   ═══════════════════════════════════════════════════════════════════ */

.bx-cover-wrapper {
    border-bottom: 2px solid var(--gw-gold-dim) !important;
}

.bx-cover-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, var(--gw-bg-page));
    pointer-events: none;
}

.bx-cover-title {
    font-family: var(--gw-font-display) !important;
    color: var(--gw-gold) !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* ═══════════════════════════════════════════════════════════════════
   § 15. POPUPS & MODALS
   ═══════════════════════════════════════════════════════════════════ */

.bx-popup-wrapper .bx-popup-content,
.bx-popup-fog {
    background: var(--gw-bg-block) !important;
    border: 1px solid var(--gw-border) !important;
    color: var(--gw-cream) !important;
}

.bx-popup-fog {
    background: rgba(0, 0, 0, 0.75) !important;
    border: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 16. COMMENTS
   ═══════════════════════════════════════════════════════════════════ */

.cmt-body {
    color: var(--gw-cream) !important;
}

.cmt-cont {
    border-color: var(--gw-border-dim) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 17. TIMELINE / FEED ITEMS
   ═══════════════════════════════════════════════════════════════════ */

.bx-tl-item {
    background: var(--gw-bg-block) !important;
    border: 1px solid var(--gw-border-dim) !important;
    border-radius: 4px !important;
}

.bx-tl-item:hover {
    border-color: var(--gw-border) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 18. PROFILE & AVATAR ELEMENTS
   ═══════════════════════════════════════════════════════════════════ */

.bx-profile-avatar-cnt img {
    border: 2px solid var(--gw-border) !important;
    border-radius: 50%;
    transition: border-color 0.2s;
}

.bx-profile-avatar-cnt:hover img {
    border-color: var(--gw-gold) !important;
    box-shadow: 0 0 12px rgba(212, 168, 67, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════
   § 19. SEARCH BAR — Terminal style
   ═══════════════════════════════════════════════════════════════════ */

.bx-search-site input[type="text"],
#bx-toolbar .bx-search-site input[type="text"] {
    background: var(--gw-bg-deep) !important;
    color: var(--gw-terminal) !important;
    border: 1px solid var(--gw-border-dim) !important;
    font-family: var(--gw-font-terminal) !important;
    border-radius: 3px !important;
}

.bx-search-site input[type="text"]:focus {
    border-color: var(--gw-terminal) !important;
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 20. LABELS, BADGES, TAGS
   ═══════════════════════════════════════════════════════════════════ */

.bx-def-label,
.bx-def-color-bg-label {
    background: var(--gw-bg-hover) !important;
    color: var(--gw-cream) !important;
    border: 1px solid var(--gw-border-dim);
}

.bx-def-color-bg-label-menu {
    background: var(--gw-gold-dim) !important;
    color: #1C1710 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 21. FOOTER
   ═══════════════════════════════════════════════════════════════════ */

.bx-footer-wrapper,
.bx-footer {
    background: var(--gw-bg-deep) !important;
    border-top: 1px solid var(--gw-border-dim) !important;
    color: var(--gw-cream-dim) !important;
}

.bx-footer a {
    color: var(--gw-term-dim) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 22. SCROLLBAR — Dark western leather
   ═══════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--gw-bg-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--gw-border);
    border-radius: 4px;
    border: 2px solid var(--gw-bg-deep);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gw-gold-dim);
}

/* ═══════════════════════════════════════════════════════════════════
   § 23. WESTERN DECORATIVE SVG ELEMENTS (CSS-only ornaments)
   ═══════════════════════════════════════════════════════════════════ */

/* Ornamental divider between blocks — western flourish */
.bx-db-container + .bx-db-container::before {
    content: '\2726  \2726  \2726';
    display: block;
    text-align: center;
    color: var(--gw-gold-dim);
    font-size: 0.7rem;
    letter-spacing: 8px;
    padding: 4px 0 12px;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════
   § 24. LOADING STATES — Terminal cursor blink
   ═══════════════════════════════════════════════════════════════════ */

.bx-loading-ajax,
.bx-loading-inline {
    color: var(--gw-terminal) !important;
}

.bx-sys-spinner .ball-clip-rotate > div {
    border-color: var(--gw-terminal) !important;
    border-bottom-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 25. SELECTION — Gold on dark
   ═══════════════════════════════════════════════════════════════════ */

::selection {
    background: var(--gw-gold) !important;
    color: #1C1710 !important;
}

::-moz-selection {
    background: var(--gw-gold) !important;
    color: #1C1710 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 26. WESTERN ACCENTS — Decorative corners on major containers
   ═══════════════════════════════════════════════════════════════════ */

/* Corner ornaments on design box containers */
.bx-db-container {
    position: relative;
}

.bx-db-container::before,
.bx-db-container::after {
    position: absolute;
    font-size: 1rem;
    color: var(--gw-gold-dim);
    opacity: 0.3;
    pointer-events: none;
    line-height: 1;
}

.bx-db-container::before {
    content: '\250C';
    top: 2px;
    left: 4px;
}

.bx-db-container::after {
    content: '\2510';
    top: 2px;
    right: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   § 27. IMAGES & MEDIA — Sepia tint with gold borders
   ═══════════════════════════════════════════════════════════════════ */

.bx-tl-item img:not(.bx-profile-avatar-cnt img),
.bx-base-text-entity-content img {
    border-radius: 3px;
    border: 1px solid var(--gw-border-dim);
}

/* Gallery thumbnails */
.bx-base-unit-gallery-img {
    border: 2px solid var(--gw-border-dim) !important;
    transition: border-color 0.2s;
}

.bx-base-unit-gallery-img:hover {
    border-color: var(--gw-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 28. VAPOR TERMINAL ACCENTS — Glowing elements
   ═══════════════════════════════════════════════════════════════════ */

/* Terminal-style glow on active/current breadcrumb */
.bx-page-submenu-cnt .bx-menu-tab-active a {
    color: var(--gw-terminal) !important;
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.4);
}

/* Pulsing terminal cursor after page title */
.bx-page-block-title-text::after {
    content: '\2588';
    display: inline-block;
    color: var(--gw-terminal);
    font-family: var(--gw-font-terminal);
    font-size: 0.8em;
    margin-left: 4px;
    animation: gw-cursor-blink 1s step-end infinite;
    opacity: 0.7;
}

@keyframes gw-cursor-blink {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0; }
}

/* Terminal scanline animation on hovered cards */
.bx-tl-item:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        transparent 0%,
        rgba(0, 255, 65, 0.02) 50%,
        transparent 100%
    );
    background-size: 100% 4px;
    animation: gw-scan 3s linear infinite;
    pointer-events: none;
    border-radius: 4px;
}

@keyframes gw-scan {
    0% { background-position: 0 0; }
    100% { background-position: 0 100vh; }
}

/* ═══════════════════════════════════════════════════════════════════
   § 29. SPECIFIC UNA MODULE OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

/* Messenger / conversations */
.bx-messenger-wrapper,
.bx-messenger-block {
    background: var(--gw-bg-block) !important;
    color: var(--gw-cream) !important;
}

.bx-messenger-msg-area {
    background: var(--gw-bg-deep) !important;
}

/* Notifications popup */
.bx-informer-popup {
    background: var(--gw-bg-block) !important;
    border: 1px solid var(--gw-border) !important;
}

.bx-informer-item {
    border-bottom-color: var(--gw-border-dim) !important;
}

.bx-informer-item:hover {
    background: rgba(0, 255, 65, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 30. WESTERN SECTION BADGES — SVG decorators
   ═══════════════════════════════════════════════════════════════════ */

/* Star badge for section headers — CSS-only sheriff star */
.bx-db-title::before {
    content: '\2605';
    color: var(--gw-gold);
    margin-right: 8px;
    font-size: 0.8em;
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════
   § 31. TAILWIND OVERRIDES — Fix conflicts
   ═══════════════════════════════════════════════════════════════════ */

.bx-std .bx-def-color-bg-hl,
.bx-std .bx-def-color-bg-hl-even:nth-child(even),
.bx-std .bx-def-color-bg-hl-hover:hover,
.bx-artificer .bx-def-color-bg-hl,
.bx-artificer .bx-def-color-bg-hl-even:nth-child(even),
.bx-artificer .bx-def-color-bg-hl-hover:hover {
    background-color: rgba(212, 168, 67, 0.06) !important;
}

.bx-std .bx-def-color-bg-block,
.bx-std .bx-def-color-bg-box {
    background-color: var(--gw-bg-card) !important;
}

.bx-std-bg.bx-def-color-bg-page {
    background-color: var(--gw-bg-page) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 32. COLOR UTILITY CLASS OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

.col-gold,
.col-gold-dark {
    color: var(--gw-gold) !important;
}

.col-green1 {
    color: var(--gw-terminal) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 33. TABLE OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

table {
    border-color: var(--gw-border-dim) !important;
}

th {
    background: var(--gw-bg-card) !important;
    color: var(--gw-gold) !important;
    font-family: var(--gw-font-display) !important;
    font-size: 0.85rem;
    border-color: var(--gw-border-dim) !important;
}

td {
    color: var(--gw-cream) !important;
    border-color: var(--gw-border-dim) !important;
}

tr:nth-child(even) {
    background: rgba(212, 168, 67, 0.03) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 34. RESPONSIVE — Mobile adjustments
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    body::before {
        background-size: 200px 200px;
        opacity: 0.02;
    }

    body::after {
        /* Reduce scanline intensity on mobile */
        opacity: 0.3;
    }

    .bx-db-container::before,
    .bx-db-container::after {
        display: none;
    }

    .bx-page-block-title-text::after {
        display: none;
    }

    .bx-db-container + .bx-db-container::before {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   § 35. REDUCED MOTION — Respect user preferences
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    body::after {
        display: none;
    }

    .bx-page-block-title-text::after {
        animation: none;
        opacity: 0;
    }

    .bx-tl-item:hover::after {
        animation: none;
    }

    a,
    .bx-btn,
    button,
    input {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   § 36. PRINT — Clean western look without effects
   ═══════════════════════════════════════════════════════════════════ */

@media print {
    body::before,
    body::after {
        display: none !important;
    }

    body,
    .bx-db-container,
    .bx-db-content {
        background: #fff !important;
        color: #333 !important;
    }

    a {
        color: #333 !important;
    }
}