* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Bitcoin Connect Component Styling */
html {
    --bc-color-brand: #ff9900;
    --bc-color-brand-dark: #ffaa44;
    --bc-brand-mix: 100%;
    --bc-color-brand-button-text: #fff;
    --bc-color-brand-button-text-dark: #fff;
    --modal-inset-bg: #ffffff;
    background: linear-gradient(135deg, #ffb366 0%, #ff9933 100%);
    min-height: 100%;
  }

body.dark-mode {
    --modal-inset-bg: #1e1e1e;
}

.modal-inset {
    background: var(--modal-inset-bg);
}

body {
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    background: linear-gradient(135deg, #ffb366 0%, #ff9933 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 32px;
}

/* Game Toolbar — Windows 95 taskbar */
.game-toolbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: #ECE9D8;
    border-top: 2px solid #ffffff;
    box-shadow: inset 0 1px 0 #dfdfdf;
    z-index: 9000;
    align-items: center;
    justify-content: space-between;
    padding: 2px 6px;
    box-sizing: border-box;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    overflow: visible;
}

.game-toolbar.show {
    display: flex;
}

/* Left group: file menu + quick launch together */
.toolbar-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Left: file menu */
.toolbar-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.toolbar-menu-item {
    position: relative;
    padding: 2px 12px;
    height: 26px;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    user-select: none;
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2), inset 1px 1px 0 rgba(255,255,255,0.8);
    white-space: nowrap;
    box-sizing: border-box;
}

.toolbar-menu-item:hover {
    background: #b0b0b0;
}

.toolbar-menu-item.open {
    border-color: #808080 #dfdfdf #dfdfdf #808080;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2), inset -1px -1px 0 rgba(255,255,255,0.8);
}

.toolbar-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 2px);
    left: -2px;
    background: #ECE9D8;
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    box-shadow: 2px 2px 0 #808080;
    z-index: 10010;
    min-width: 195px;
    padding: 2px 0;
}

.toolbar-menu-item.open .toolbar-dropdown {
    display: block;
}

.toolbar-dropdown-user {
    padding: 6px 10px;
    font-size: 12px;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    margin-bottom: 2px;
}

.toolbar-dropdown-user.nostr {
    background: linear-gradient(180deg, #7b2d8b 0%, #5a1f6e 100%);
}

.toolbar-dropdown-user.standard {
    background: linear-gradient(180deg, #ff8800 0%, #cc6600 100%);
}

.toolbar-dropdown-item {
    padding: 5px 16px 5px 30px;
    font-size: 12px;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-weight: normal;
    position: relative;
}

.toolbar-dropdown-item i {
    position: absolute;
    left: 10px;
    width: 14px;
    text-align: center;
    font-size: 12px;
}

.toolbar-dropdown-item:hover {
    background: #000080;
    color: #ffffff;
}

.toolbar-dropdown-item:hover i {
    color: #ffffff;
}

.toolbar-dropdown-separator {
    height: 1px;
    background: #808080;
    box-shadow: 0 1px 0 #dfdfdf;
    margin: 3px 4px;
}

/* Quick-launch pinned programs */
.toolbar-quicklaunch {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 4px;
    border-left: 1px solid #808080;
    border-right: 1px solid #dfdfdf;
    margin-left: 3px;
    flex-shrink: 0;
}

.quicklaunch-btn {
    position: relative;
    width: 26px;
    height: 26px;
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2), inset 1px 1px 0 rgba(255,255,255,0.8);
    cursor: pointer;
    font-size: 14px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.quicklaunch-btn:hover {
    background: #b0b0b0;
}

.quicklaunch-btn:active {
    border-color: #808080 #dfdfdf #dfdfdf #808080;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2), inset -1px -1px 0 rgba(255,255,255,0.8);
}

@keyframes tooltip-autohide {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

.quicklaunch-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #ffffcc;
    color: #000;
    padding: 2px 6px;
    font-size: 12px;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 10011;
    border: 1px solid #000080;
    text-shadow: none;
}

.quicklaunch-btn[data-tooltip]:hover::after {
    animation: tooltip-autohide 3s ease forwards;
}

/* Right: system tray — inset recessed area */
.toolbar-tray {
    display: flex;
    align-items: center;
    padding: 1px 8px;
    gap: 3px;
    background: #ECE9D8;
    border: 2px solid;
    border-color: #808080 #dfdfdf #dfdfdf #808080;
    box-shadow: inset 1px 1px 0 #404040;
    height: 26px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.tray-btn {
    position: relative;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.tray-btn:hover {
    background: rgba(0, 0, 128, 0.08);
}

.tray-btn.tray-off {
    color: #808080;
}

.tray-divider {
    width: 1px;
    height: 14px;
    background: #808080;
    box-shadow: 1px 0 0 #dfdfdf;
    margin: 0 3px;
    flex-shrink: 0;
}

/* Win95 tooltip — yellow with navy border */
.tray-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #ffffcc;
    color: #000;
    padding: 2px 6px;
    font-size: 12px;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 10011;
    border: 1px solid #000080;
    text-shadow: none;
}

.tray-btn:hover::after {
    animation: tooltip-autohide 3s ease forwards;
}

/* Dark mode — keep Win95 shape, shift palette to dark gray */
body.dark-mode .game-toolbar {
    background: #2a2a2a;
    border-top-color: #555;
    box-shadow: inset 0 1px 0 #444;
}

body.dark-mode .toolbar-quicklaunch {
    border-left-color: #1a1a1a;
    border-right-color: #555;
}

body.dark-mode .quicklaunch-btn {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #555 #1a1a1a #1a1a1a #555;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .quicklaunch-btn:hover {
    background: #3a3a3a;
}

body.dark-mode .quicklaunch-btn:active {
    border-color: #1a1a1a #555 #555 #1a1a1a;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.4), inset -1px -1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .toolbar-menu-item {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #555 #1a1a1a #1a1a1a #555;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .toolbar-menu-item.open {
    border-color: #1a1a1a #555 #555 #1a1a1a;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.4), inset -1px -1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .toolbar-dropdown {
    background: #2a2a2a;
    border-color: #555 #111 #111 #555;
    box-shadow: 2px 2px 0 #1a1a1a;
}

body.dark-mode .toolbar-dropdown-user.nostr {
    background: linear-gradient(180deg, #5a1f6e 0%, #3d1050 100%);
}

body.dark-mode .toolbar-dropdown-user.standard {
    background: linear-gradient(180deg, #cc6600 0%, #994d00 100%);
}

body.dark-mode .toolbar-dropdown-item {
    color: #e0e0e0;
}

body.dark-mode .toolbar-dropdown-item:hover {
    background: #000080;
    color: #fff;
}

body.dark-mode .toolbar-dropdown-separator {
    background: #444;
    box-shadow: 0 1px 0 #555;
}

body.dark-mode .toolbar-tray {
    background: #2a2a2a;
    border-color: #1a1a1a #555 #555 #1a1a1a;
    box-shadow: inset 1px 1px 0 #111;
}

body.dark-mode .tray-btn {
    color: #e0e0e0;
}

body.dark-mode .tray-btn.tray-off {
    color: #555;
}

body.dark-mode .tray-divider {
    background: #444;
    box-shadow: 1px 0 0 #555;
}

/* Player HUD overlay on canvas */
.player-hud {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 3px 8px;
    font-size: 12px;
    font-family: Tahoma, sans-serif;
    z-index: 100;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

body.dark-mode .player-hud {
    background: rgba(0, 0, 0, 0.65);
}

.game-clock {
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    color: #000;
    padding: 0 4px;
    white-space: nowrap;
    pointer-events: none;
    flex-shrink: 0;
}

body.dark-mode .game-clock {
    color: #e0e0e0;
}

/* Windows XP Window Style */
.xp-window {
    background: #ECE9D8;
    border: 1px solid #0054E3;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.xp-title-bar {
    background: linear-gradient(180deg, #0997FF 0%, #0053EE 50%, #0050EE 50%, #06F 100%);
    padding: 3px 6px 3px 4px;
    color: white;
    font-weight: bold;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Orange title bar for home page sections (matching login container) */
.orange-title-bar {
    background: linear-gradient(180deg, #ffaa44 0%, #ff8800 50%, #ff8800 50%, #ff9900 100%) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: bold !important;
    padding: 4px 6px !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5) !important;
    border-bottom: 1px solid #808080 !important;
    text-align: left !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.xp-title-text {
    display: flex;
    align-items: center;
    gap: 4px;
}

.xp-window-icon {
    width: 16px;
    height: 16px;
}

.xp-content {
    padding: 8px;
    background: #ECE9D8;
}

/* Login Container - XP Dialog Style */
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    padding: 0;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 380px;
    width: 90%;
    position: relative;
}

.login-container h1 {
    background: linear-gradient(180deg, #ffaa44 0%, #ff8800 50%, #ff8800 50%, #ff9900 100%) !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5) !important;
    border-bottom: 1px solid #808080 !important;
    position: relative !important;
    text-align: left !important;
    min-height: 20px !important;
    width: 100% !important;
    display: block !important;
}

.login-container p {
    color: #2c3e50;
    margin: 16px 12px;
    font-size: 12px;
    text-shadow: none;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    margin: 0;
}

/* XP Text Input */
.username-input {
    padding: 3px 4px;
    border: 1px solid;
    border-color: #808080 #808080 #dfdfdf #dfdfdf;
    background: #fff;
    color: #000;
    font-size: 12px;
    font-family: Tahoma, sans-serif;
    box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
}

.username-input::placeholder {
    color: #999;
}

.username-input:focus {
    outline: 1px dotted #000;
    outline-offset: -3px;
}

/* XP Button */
.enter-btn {
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 50%, #d4d0c8 50%, #c0b8a8 100%);
    color: #000;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2), inset 1px 1px 0 rgba(255,255,255,0.8);
    padding: 4px 12px;
    font-size: 12px;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    cursor: pointer;
}

.enter-btn:hover {
    background: linear-gradient(180deg, #f0ece0 0%, #e0dcd0 50%, #e0dcd0 50%, #d0c8b8 100%);
}

.enter-btn:active {
    background: linear-gradient(180deg, #d4d0c8 0%, #c0b8a8 50%, #c0b8a8 50%, #b0a898 100%);
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2), inset -1px -1px 0 rgba(255,255,255,0.8);
}

/* Market Container */
.market-container {
    display: none;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    max-width: 1600px;
    margin: 0 auto;
}

.market-container.show {
    display: flex;
    margin-top: auto;
    margin-bottom: auto;
}

/* Info Panel - XP Window */
.info-panel {
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    padding: 0;
    width: 260px;
    flex-shrink: 0;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
}

.info-panel h2 {
    background: linear-gradient(180deg, #ffaa44 0%, #ff8800 50%, #ff8800 50%, #ff9900 100%);
    color: #ffffff;
    margin: 0;
    padding: 4px 6px;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    border-bottom: 1px solid #808080;
    position: relative;
    text-align: left;
    min-height: 20px;
}

.info-panel h3 {
    color: #2c3e50;
    margin: 8px 0 4px 0;
    font-size: 14px;
    font-weight: bold;
    text-shadow: none;
}

.info-panel p {
    color: #2c3e50;
    margin: 2px 0;
    line-height: 1.4;
    font-size: 12px;
    text-shadow: none;
}

.info-panel > * {
    padding: 0 12px;
}

.info-panel > h2 {
    padding: 6px 8px;
}

.info-panel .content {
    padding: 8px;
    background: #ECE9D8;
}

.info-panel .content p {
    color: #2c3e50;
    margin: 2px 0;
    line-height: 1.4;
    font-size: 12px;
}

.info-panel .content div {
    color: #2c3e50;
}

.info-panel .content span {
    color: #2c3e50;
}

.info-panel-btn {
    padding: 4px 12px;
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 50%, #d4d0c8 50%, #c0b8a8 100%);
    color: #000;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2), inset 1px 1px 0 rgba(255,255,255,0.8);
    cursor: pointer;
    font-weight: normal;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    font-size: 12px;
}

.info-panel-btn-on {
    background: linear-gradient(180deg, #a8e6a8 0%, #6bc76b 100%);
}

.info-panel-btn-muted {
    background: linear-gradient(180deg, #f8b8b8 0%, #e57373 100%);
}

.info-panel-btn:hover {
    background: linear-gradient(180deg, #f0ece0 0%, #e0dcd0 50%, #e0dcd0 50%, #d0c8b8 100%);
}

.info-panel-btn-on:hover {
    background: linear-gradient(180deg, #baeeba 0%, #7dd47d 100%);
}

.info-panel-btn-muted:hover {
    background: linear-gradient(180deg, #fac8c8 0%, #ef8a8a 100%);
}

.info-panel-btn:active,
.info-panel-btn-on:active,
.info-panel-btn-muted:active {
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2), inset -1px -1px 0 rgba(255,255,255,0.8);
}

.player-count {
    font-weight: bold;
    color: #ff9900;
    font-size: 0.9rem;
    text-shadow: none;
}

.market-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.screenshot-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    border: none;
    border-radius: 0;
    width: 35px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease, background 0.3s ease, transform 0.2s ease;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Viewfinder corner brackets - all four corners */
.screenshot-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.9);
    border-left: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 1px 0 0 0;
}

.screenshot-btn::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.9);
    border-right: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 0 1px 0 0;
}

/* Bottom corner brackets */
.viewfinder-corner {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.viewfinder-corner.bottom-left {
    bottom: 0;
    left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.9);
    border-left: 1px solid rgba(255, 255, 255, 0.9);
    border-top: none;
    border-right: none;
    border-radius: 0 0 0 1px;
}

.viewfinder-corner.bottom-right {
    bottom: 0;
    right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.9);
    border-right: 1px solid rgba(255, 255, 255, 0.9);
    border-top: none;
    border-left: none;
    border-radius: 0 0 1px 0;
}

.screenshot-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
}

.screenshot-btn:hover::before,
.screenshot-btn:hover::after,
.screenshot-btn:hover .viewfinder-corner {
    border-color: rgba(255, 153, 0, 0.9);
}

.screenshot-btn:active {
    transform: scale(0.95);
}

/* Canvas - XP Inset Panel */
.market-canvas {
    border: 3px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: 0 10px 30px rgba(255, 153, 0, 0.2);
    background: #ECE9D8;
    box-sizing: content-box;
}

/* Chat Panel - XP Window */
.chat-panel {
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    padding: 0;
    width: 300px;
    height: 604px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    box-sizing: content-box;
    position: relative;
}

.chat-panel h3 {
    background: linear-gradient(180deg, #ffaa44 0%, #ff8800 50%, #ff8800 50%, #ff9900 100%);
    color: #ffffff;
    margin: 0;
    padding: 4px 6px;
    font-size: 0.9rem;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    border-bottom: 1px solid #808080;
    text-align: left;
    min-height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-panel > div {
    padding: 8px;
}

#pinnedMessageContainer {
    display: none;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    border-bottom: 2px solid #ff9900;
    padding: 4px;
    margin: 8px 8px 0 8px;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
    color: #2c3e50;
    max-height: 150px;
    overflow-y: auto;
    flex-shrink: 0;
}

#pinnedMessageContainer div {
    color: #2c3e50;
}

.pinned-message-item {
    background-color: #ffffff;
    border-left: 3px solid #ff9900;
    color: #2c3e50;
}

.pinned-message-item span {
    color: #2c3e50;
}

.pinned-message-item span[style*="color: #ffffff"] {
    color: #2c3e50 !important;
}

body.dark-mode .pinned-message-item {
    background-color: #1a1a1a;
    border-left-color: #ff9900;
    color: #ffffff;
}

body.dark-mode .pinned-message-item span {
    color: #ffffff !important;
}

#chatMessages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 4px;
    margin: 8px 8px 0 8px;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
    color: #2c3e50;
}

#chatMessages div {
    color: #2c3e50;
    margin-bottom: 1px;
}

#chatMessages span {
    color: #2c3e50;
}

/* Player zap (NIP-57) — system-style card in global chat */
.player-zap-chat-card {
    margin: 6px 0 8px 0 !important;
    padding: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    background: linear-gradient(180deg, #fffef8 0%, #f5f0e4 100%);
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-left: 4px solid #ff9900;
    border-radius: 0;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.9), 1px 1px 2px rgba(0, 0, 0, 0.08);
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    line-height: 1.35;
}

.player-zap-chat-card-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: stretch;
    min-height: 40px;
    width: 100%;
    min-width: 0;
}

.player-zap-chat-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    align-self: stretch;
    width: 44px;
    min-width: 44px;
    padding: 6px 4px;
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.28) 0%, rgba(255, 153, 0, 0.18) 50%, rgba(255, 140, 0, 0.22) 100%);
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.35);
}

.player-zap-chat-icon {
    display: block;
    flex: 0 0 auto;
    align-self: center;
    font-size: 26px;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.65)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.player-zap-chat-text-row {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    color: #2c3e50;
}

.player-zap-chat-copy {
    min-width: 0;
    flex: 1 1 auto;
    align-self: stretch;
    white-space: normal;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    line-height: 1.45;
}

.player-zap-chat-sep {
    color: #888888;
    font-weight: bold;
    opacity: 0.85;
    user-select: none;
}

.player-zap-chat-from,
.player-zap-chat-to {
    font-weight: bold;
    color: #1a3a5c;
}

.player-zap-chat-amount {
    font-size: 12px;
    color: #b8860b;
    letter-spacing: 0.02em;
}

.player-zap-chat-time {
    font-size: 12px;
    color: #666666;
}

body.dark-mode .player-zap-chat-card {
    background: linear-gradient(180deg, #2a2820 0%, #1f1d18 100%);
    border-color: #555 #333 #333 #555;
    border-left-color: #ff9900;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.35);
}

body.dark-mode .player-zap-chat-icon-wrap {
    background: linear-gradient(180deg, rgba(255, 153, 0, 0.22) 0%, rgba(200, 100, 0, 0.15) 100%);
    border-right-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}

body.dark-mode .player-zap-chat-text-row {
    color: #e8e4dc !important;
}

body.dark-mode .player-zap-chat-from,
body.dark-mode .player-zap-chat-to {
    color: #ffd699 !important;
}

body.dark-mode .player-zap-chat-amount {
    color: #ffcc66 !important;
}

body.dark-mode .player-zap-chat-time {
    color: #aaaaaa !important;
}

body.dark-mode .player-zap-chat-sep {
    color: #777777 !important;
}

/* Door prize winner card */
.door-prize-chat-card {
    margin: 6px 0 8px 0 !important;
    padding: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    background: linear-gradient(180deg, #fffef8 0%, #f5f3e4 100%);
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-left: 4px solid #f0c040;
    border-radius: 0;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.9), 1px 1px 2px rgba(0, 0, 0, 0.08);
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    line-height: 1.35;
}

.door-prize-chat-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    align-self: stretch;
    width: 44px;
    min-width: 44px;
    padding: 6px 4px;
    background: linear-gradient(180deg, rgba(240, 210, 50, 0.28) 0%, rgba(220, 170, 0, 0.18) 50%, rgba(200, 150, 0, 0.22) 100%);
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.35);
}

body.dark-mode .door-prize-chat-card {
    background: linear-gradient(180deg, #2a2a1e 0%, #1f1e12 100%);
    border-color: #555 #333 #333 #555;
    border-left-color: #f0c040;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.35);
}

body.dark-mode .door-prize-chat-icon-wrap {
    background: linear-gradient(180deg, rgba(240, 200, 50, 0.22) 0%, rgba(180, 140, 0, 0.15) 100%);
    border-right-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}

#chatInput {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 6px;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #ffffff;
    color: #2c3e50;
    font-size: 12px;
    font-family: Tahoma, sans-serif;
    box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
}

#chatInput:focus {
    outline: 1px dotted #000;
    outline-offset: -3px;
}

#chatSend {
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 50%, #d4d0c8 50%, #c0b8a8 100%);
    color: #000;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2), inset 1px 1px 0 rgba(255,255,255,0.8);
    padding: 4px 12px;
    font-size: 12px;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    cursor: pointer;
    font-weight: bold;
}

#chatSend:hover {
    background: linear-gradient(180deg, #f0ece0 0%, #e0dcd0 50%, #e0dcd0 50%, #d0c8b8 100%);
}

#chatSend:active {
    background: linear-gradient(180deg, #d4d0c8 0%, #c0b8a8 50%, #c0b8a8 50%, #b0a898 100%);
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2), inset -1px -1px 0 rgba(255,255,255,0.8);
}

/* Mention suggestions styles */
.mention-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #666;
    border-top: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 1000;
    max-height: 150px;
    overflow-y: auto;
}

.mention-suggestions.hidden {
    display: none;
}

.mention-item {
    padding: 6px 8px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
    color: #2c3e50;
    font-size: 12px;
}

.mention-item:hover,
.mention-item.selected {
    background: #d4d0c8;
}

.mention-item:last-child {
    border-bottom: none;
}

.mention-username {
    font-weight: bold;
    color: #ff9900;
}

.mention-vendor-badge {
    display: inline-block;
    background: #ff9900;
    color: white;
    font-size: 12px;
    padding: 1px 4px;
    border-radius: 0;
    margin-left: 4px;
}

/* Mention badges in chat messages */
.chat-mention {
    display: inline-block;
    background: linear-gradient(180deg, rgba(255, 170, 68, 0.85) 0%, rgba(255, 136, 0, 0.85) 100%);
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 0;
    border: 1px solid rgba(204, 102, 0, 0.85);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.2);
    margin: 0 1px;
    text-decoration: none;
    cursor: default;
}

.chat-mention:hover {
    background: linear-gradient(180deg, rgba(255, 187, 85, 1) 0%, rgba(255, 153, 0, 1) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 3px rgba(0,0,0,0.3);
}

/* Interaction Panel - XP Dialog */
.interaction-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    padding: 0;
    text-align: center;
    max-width: 400px;
    width: 80%;
    height: 400px;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    box-shadow: 2px 2px 8px rgba(255, 153, 0, 0.3);
}

/* Jukebox modal specific styles */
#jukeboxModal {
    height: 400px;
}

#jukeboxQueueList,
#jukeboxSearchResults {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

#jukeboxQueueList::-webkit-scrollbar,
#jukeboxSearchResults::-webkit-scrollbar {
    width: 8px;
}

#jukeboxQueueList::-webkit-scrollbar-track,
#jukeboxSearchResults::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#jukeboxQueueList::-webkit-scrollbar-thumb,
#jukeboxSearchResults::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

#jukeboxQueueList::-webkit-scrollbar-thumb:hover,
#jukeboxSearchResults::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Dark mode scrollbars */
body.dark-mode #jukeboxQueueList::-webkit-scrollbar-track,
body.dark-mode #jukeboxSearchResults::-webkit-scrollbar-track {
    background: #1a1a1a;
}

body.dark-mode #jukeboxQueueList::-webkit-scrollbar-thumb,
body.dark-mode #jukeboxSearchResults::-webkit-scrollbar-thumb {
    background: #555;
}

body.dark-mode #jukeboxQueueList::-webkit-scrollbar-thumb:hover,
body.dark-mode #jukeboxSearchResults::-webkit-scrollbar-thumb:hover {
    background: #777;
}

body.dark-mode #jukeboxQueueList,
body.dark-mode #jukeboxSearchResults {
    scrollbar-color: #555 #1a1a1a;
}

.panel-title-bar {
    background: linear-gradient(180deg, #ffaa44 0%, #ff8800 50%, #ff8800 50%, #ff9900 100%);
    color: #ffffff;
    margin: 0;
    padding: 4px 6px;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #808080;
}

.panel-title-bar h3 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    flex: 1;
}

.booth-profile-pic {
    width: 42px;
    height: 42px;
    border-radius: 0;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #ccc;
}


.close-x-btn {
    background: linear-gradient(180deg, #ffaa44 0%, #ff8800 100%);
    border: 1px solid;
    border-color: #ffdd99 #884400 #884400 #ffdd99;
    box-shadow: inset 1px 1px 0 #ffeecc, inset -1px -1px 0 #662200;
    color: #ffffff;
    width: 20px;
    height: 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.close-x-btn:hover {
    background: linear-gradient(180deg, #ffbb55 0%, #ff9900 100%);
}

.close-x-btn:active {
    border-color: #884400 #ffdd99 #ffdd99 #884400;
    box-shadow: inset -1px -1px 0 #ffeecc, inset 1px 1px 0 #662200;
}

.booth-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 12px;
    background: #fff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
    min-height: 60px;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.booth-items::-webkit-scrollbar {
    width: 8px;
}

.booth-items::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.booth-items::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.booth-items::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.booth-item {
    background: transparent;
    padding: 6px 8px;
    border: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #000;
    text-align: left;
}

.booth-item:hover {
    background: transparent;
    color: #000;
}

.booth-item h4 {
    color: #5d4a37;
    margin: 0;
    font-size: 12px;
}

.booth-item p {
    color: #7f8c8d;
    font-size: 12px;
    margin: 0;
}



.hidden {
    display: none !important;
}

/* Virtual Joystick */
.joystick-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
}

.joystick-base {
    width: 120px;
    height: 120px;
    background: rgba(236, 233, 216, 0.7);
    border: 3px solid;
    border-color: #fff #7A7A7A #7A7A7A #fff;
    border-radius: 50%;
    position: relative;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.joystick-stick {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 2px rgba(255,255,255,0.5);
    transition: background 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.joystick-base:active .joystick-stick {
    background: rgba(255, 255, 255, 0.1);
}

.joystick-btc-img {
    width: 52%;
    height: 52%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    draggable: false;
}

/* Action Buttons */
.action-buttons-container {
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.action-btn-large {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    font-size: 22px;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.15s, transform 0.1s;
}

.action-btn-large:hover {
    background: rgba(0, 0, 0, 0.7);
}

.action-btn-large:active {
    transform: scale(0.92);
    background: rgba(247, 147, 26, 0.75);
    border-color: #1a5c1a #aaffaa #aaffaa #1a5c1a;
    box-shadow: inset -1px -1px 0 #c0ffc0, inset 1px 1px 0 #0d400d;
}

body.dark-mode .action-btn-large {
    background: linear-gradient(180deg, #2d7a2d 0%, #1a5c1a 100%);
    border-color: #4daa4d #0d400d #0d400d #4daa4d;
    box-shadow: inset 1px 1px 0 #3d8c3d, inset -1px -1px 0 #0a300a;
    color: #e0e0e0;
}

body.dark-mode .action-btn-large:hover {
    background: linear-gradient(180deg, #3d8c3d 0%, #2d7a2d 100%);
}

body.dark-mode .action-btn-large:active {
    background: linear-gradient(180deg, #1a5c1a 0%, #2d7a2d 100%);
    border-color: #0d400d #4daa4d #4daa4d #0d400d;
    box-shadow: inset -1px -1px 0 #3d8c3d, inset 1px 1px 0 #0a300a;
}

/* Mobile warning */
/* Scrollbar - XP Style */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-track {
    background: #ECE9D8;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 50%, #d4d0c8 50%, #c0b8a8 100%);
    border: 1px solid;
    border-color: #fff #000 #000 #fff;
    box-shadow: inset -1px -1px 1px rgba(0,0,0,0.1), inset 1px 1px 1px rgba(255,255,255,0.9);
}

::-webkit-scrollbar-button {
    display: none;
}

/* Wallet Settings - XP Style */
#wallet-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
}

#wallet-controls label {
    color: #2c3e50;
    text-shadow: none;
}

#wallet-controls span {
    color: #2c3e50;
    text-shadow: none;
}

/* Responsive design */
@media (max-width: 1248px) {
    body {
        overflow-y: auto;
        align-items: flex-start;
        min-height: 100vh;
    }

    .early-entry-modal-overlay {
        display: none !important;
    }

    .home-page-container {
        padding: 21px;
    }
}

/* Mobile settings panel — hidden by default, shown below desktop */
.mobile-settings-panel {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 75vh;
    background: #ECE9D8;
    border-top: 2px solid #ffffff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
    transform: translateY(100%);
    transition: transform 0.25s ease;
    z-index: 201;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-settings-panel.mobile-open {
    transform: translateY(0);
}

.mobile-settings-header {
    background: linear-gradient(180deg, #ffaa44 0%, #ff8800 50%, #ff8800 50%, #ff9900 100%);
    color: #fff;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #808080;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.mobile-settings-user {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-settings-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(180deg, #ffaa44 0%, #ff8800 100%);
    border: 1px solid;
    border-color: #ffdd99 #884400 #884400 #ffdd99;
    box-shadow: inset 1px 1px 0 #ffeecc, inset -1px -1px 0 #662200;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    width: 20px;
    height: 20px;
    padding: 0;
    touch-action: manipulation;
}

.mobile-settings-close:hover {
    background: linear-gradient(180deg, #ffbb55 0%, #ff9900 100%);
}

.mobile-settings-close:active {
    border-color: #884400 #ffdd99 #ffdd99 #884400;
    box-shadow: inset -1px -1px 0 #ffeecc, inset 1px 1px 0 #662200;
}

.mobile-settings-body {
    padding: 4px 0;
}

.mobile-settings-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    font-size: 15px;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    cursor: pointer;
    border-bottom: 1px solid #d4d0c8;
    color: #000000;
    touch-action: manipulation;
}

.mobile-settings-item:active {
    background: #d4d0c8;
}

.mobile-settings-item i {
    width: 22px;
    text-align: center;
    color: #ff8800;
    font-size: 17px;
    flex-shrink: 0;
    transition: color 0.15s;
}

.mobile-settings-item.settings-off i {
    color: #808080;
}

.mobile-settings-item.settings-off span {
    color: #808080;
}

.mobile-settings-separator {
    height: 1px;
    background: #808080;
    margin: 4px 0;
}

.mobile-settings-submenu-trigger {
    justify-content: flex-start;
}

.mobile-settings-chevron {
    margin-left: auto;
    font-size: 12px;
    color: #808080;
    transition: transform 0.22s ease, color 0.15s;
    flex-shrink: 0;
}

#soundSettingsTrigger.open .mobile-settings-chevron {
    transform: rotate(90deg);
    color: #ff8800;
}

.mobile-settings-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    background: #d4d0c8;
}

.mobile-settings-submenu.open {
    max-height: 320px;
}

.mobile-settings-subitem {
    padding-left: 30px;
    font-size: 14px;
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.dark-mode .mobile-settings-chevron {
    color: #888888;
}

body.dark-mode #soundSettingsTrigger.open .mobile-settings-chevron {
    color: #ffaa33;
}

body.dark-mode .mobile-settings-submenu {
    background: #222222;
}

body.dark-mode .mobile-settings-panel {
    background: #2d2d2d;
    border-top-color: #555555;
}

body.dark-mode .mobile-settings-header {
    background: linear-gradient(180deg, #444 0%, #333 50%, #333 50%, #222 100%);
    border-bottom-color: #555;
}

body.dark-mode .mobile-settings-item {
    color: #e0e0e0;
    border-bottom-color: #444444;
}

body.dark-mode .mobile-settings-item i {
    color: #ffaa33;
}

body.dark-mode .mobile-settings-item.settings-off i {
    color: #555555;
}

body.dark-mode .mobile-settings-item.settings-off span {
    color: #555555;
}

body.dark-mode .mobile-settings-item:active {
    background: #3a3a3a;
}

body.dark-mode .mobile-settings-separator {
    background: #555555;
}

/* Hide joystick and action buttons while settings panel is open */
body.settings-open .joystick-container,
body.settings-open .action-buttons-container {
    display: none !important;
}

body.settings-open {
    overflow: hidden;
    touch-action: none;
}

/* Hide close button on desktop — shown only via media query below */
.chat-close-btn {
    display: none;
}

/* Chat bottom sheet — all sub-desktop widths */
@media (max-width: 1247px) {
    .chat-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        height: 50vh;
        min-height: 200px;
        transform: translateY(100%);
        transition: transform 0.25s ease;
        z-index: 10100;
        border-top: 2px solid #808080;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
        box-sizing: border-box;
    }

    .chat-panel.mobile-open {
        transform: translateY(0);
    }

    .chat-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: linear-gradient(180deg, #ffaa44 0%, #ff8800 100%);
        border: 1px solid;
        border-color: #ffdd99 #884400 #884400 #ffdd99;
        box-shadow: inset 1px 1px 0 #ffeecc, inset -1px -1px 0 #662200;
        color: #ffffff;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        width: 20px;
        height: 20px;
        padding: 0;
    }

    .chat-close-btn:hover {
        background: linear-gradient(180deg, #ffbb55 0%, #ff9900 100%);
    }

    .chat-close-btn:active {
        border-color: #884400 #ffdd99 #ffdd99 #884400;
        box-shadow: inset -1px -1px 0 #ffeecc, inset 1px 1px 0 #662200;
    }

    /* Show mobile settings panel */
    .mobile-settings-panel {
        display: block;
    }

    /* Hide desktop toolbar — replaced by settings FAB on mobile */
    .game-toolbar,
    .game-toolbar.show {
        display: none !important;
    }

    /* Show action buttons only after login (JS removes .hidden) */
    .action-buttons-container:not(.hidden) {
        display: flex !important;
    }

    .player-hud {
        position: fixed;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        white-space: nowrap;
    }

}

/* Full mobile viewport — phones only */
@media (max-width: 899px) {
    body {
        overscroll-behavior: none;
        padding-bottom: 0;
    }

    .market-container,
    .market-container.show {
        padding: 0;
        gap: 0;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .market-area {
        width: 100vw;
        height: 100vh;
        gap: 0;
        align-items: stretch;
    }

    .market-canvas {
        border: none !important;
        box-shadow: none !important;
        display: block;
        touch-action: none;
        user-select: none;
        background: transparent;
    }

    /* Show joystick only after login (JS removes .hidden) */
    .joystick-container:not(.hidden) {
        display: block !important;
    }
}


/* Lightning Invoice Card Styles */
.lightning-invoice-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #ffc107;
    border-radius: 0;
    padding: 12px;
    margin: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 100%;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.invoice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dee2e6;
}

.invoice-icon {
    font-size: 24px;
    margin-right: 8px;
}

.invoice-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    flex: 1;
}

.invoice-header-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.qr-button,
.copy-button {
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 50%, #d4d0c8 50%, #c0b8a8 100%);
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2), inset 1px 1px 0 rgba(255,255,255,0.8);
    color: #000;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    min-width: 32px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-button svg,
.copy-button svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.qr-button:hover,
.copy-button:hover {
    background: linear-gradient(180deg, #f0ece0 0%, #e0dcd0 50%, #e0dcd0 50%, #d0c8b8 100%);
}

.qr-button:active,
.copy-button:active {
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2), inset -1px -1px 0 rgba(255,255,255,0.8);
}

.invoice-amount {
    font-size: 18px;
    font-weight: 700;
    color: #28a745;
    text-align: center;
    margin-bottom: 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.invoice-description {
    font-size: 12px;
    color: #6c757d;
    text-align: center;
    margin-bottom: 16px;
    font-style: italic;
}

.invoice-content {
    display: block;
}

.invoice-qr-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 10px 10px 10px;
    width: 100%;
    box-sizing: border-box;
}

.invoice-qr-container canvas,
.invoice-qr-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.invoice-actions {
    display: flex;
    justify-content: center;
}

.pay-button {
    background: linear-gradient(180deg, #ffd066 0%, #ff9900 100%);
    border: 1px solid;
    border-color: #ffeeaa #885500 #885500 #ffeeaa;
    box-shadow: inset 1px 1px 0 #fff0bb, inset -1px -1px 0 #663300;
    color: #000;
    padding: 8px 20px;
    font-weight: bold;
    font-size: 12px;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    cursor: pointer;
    min-width: 140px;
}

.pay-button:hover {
    background: linear-gradient(180deg, #ffe077 0%, #ffaa11 100%);
}

.pay-button:active {
    border-color: #885500 #ffeeaa #ffeeaa #885500;
    box-shadow: inset -1px -1px 0 #fff0bb, inset 1px 1px 0 #663300;
}

.pay-button:disabled {
    background: linear-gradient(180deg, #e0e0e0 0%, #c0c0c0 100%);
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2), inset 1px 1px 0 rgba(255,255,255,0.8);
    color: #808080;
    cursor: not-allowed;
}

/* Disabled button styling */
button:disabled {
    background: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
    border-color: #999999 #cccccc #cccccc #999999 !important;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1), inset -1px -1px 0 rgba(255,255,255,0.3) !important;
}

/* Animation for card appearance */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lightning-invoice-card {
    animation: slideInUp 0.3s ease-out;
}

/* Fullscreen Image Modal */
#fullscreenModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
}

#fullscreenModal.hidden {
    display: none;
}

#fullscreenOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: pointer;
}

#fullscreenContent {
    position: relative;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#fullscreenImage {
    max-height: 80vh;
    max-width: 90vw;
    width: auto;
    height: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    object-fit: contain;
}

#closeFullscreenBtn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    color: white;
    border: none;
    font-size: 48px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10002;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

#closeFullscreenBtn:hover {
    background: rgba(0, 0, 0, 0.9);
}

.image-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    font-size: 48px;
    font-weight: bold;
    cursor: pointer;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 10002;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    user-select: none;
}

.image-nav-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-50%) scale(1.1);
}

.image-nav-btn:active {
    transform: translateY(-50%) scale(0.95);
}

#prevImageBtn {
    left: 20px;
}

#nextImageBtn {
    right: 20px;
}

.image-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 0;
    font-size: 14px;
    font-weight: bold;
    z-index: 10002;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

body.dark-mode .image-nav-btn {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

body.dark-mode .image-nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

body.dark-mode .image-counter {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

@media (max-width: 899px) {
    #fullscreenImage {
        max-width: calc(100vw - 120px);
        max-height: 75vh;
    }

    #closeFullscreenBtn {
        top: 10px;
        right: 10px;
        font-size: 36px;
    }

    .image-nav-btn {
        width: 44px;
        height: 44px;
        font-size: 32px;
    }

    #prevImageBtn {
        left: 8px;
    }

    #nextImageBtn {
        right: 8px;
    }

    .image-counter {
        bottom: 12px;
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* Calendar Styles - Matching bullishMarket XP Theme */
.calendar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffb366 0%, #ff9933 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
}

.calendar-content {
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    padding: 0;
    max-width: 500px;
    width: 90%;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
}

.calendar-content h1 {
    background: linear-gradient(180deg, #ffaa44 0%, #ff8800 50%, #ff8800 50%, #ff9900 100%);
    color: #ffffff;
    margin: 0;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    border-bottom: 1px solid #808080;
    text-align: left;
}

.calendar-info {
    padding: 12px;
    background: #ECE9D8;
}

.calendar-info p {
    color: #2c3e50;
    margin: 8px 0;
    font-size: 12px;
    line-height: 1.4;
    text-shadow: none;
    text-align: center;
}

.events-separator {
    border-top: 1px solid #ccc;
    margin: 12px 0;
}

.events-header {
    color: #2c3e50;
    font-size: 14px;
    font-weight: bold;
    margin: 8px 0;
    text-align: center;
}

.events-list {
    margin: 12px 0;
}

.events-list .no-events-message {
    color: #2c3e50;
    font-size: 12px;
    margin: 8px 0;
    line-height: 1.4;
    text-align: center;
}

.event-item {
    background: #ffffff;
    border: 1px solid #ccc;
    border-color: #e0e0e0 #999 #999 #e0e0e0;
    padding: 8px 12px;
    margin-bottom: 8px;
    text-align: left;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.8), inset -1px -1px 0 rgba(0,0,0,0.2);
}

.event-item h3 {
    color: #ff9900;
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: bold;
    text-shadow: none;
}

.event-item .event-date {
    color: #2c3e50;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 12px;
}

.event-item .event-time {
    color: #666;
    margin-bottom: 4px;
    font-size: 12px;
}

.event-item .event-description {
    color: #2c3e50;
    font-size: 12px;
    line-height: 1.3;
    margin: 0;
}

.calendar-footer {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #ccc;
}

.calendar-footer p {
    color: #666;
    font-size: 12px;
    margin: 0;
    text-align: center;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 0;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.8);
}

.dark-mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-50%) scale(1.1);
}

.dark-mode-toggle i {
    display: block;
    transition: transform 0.2s ease;
}

/* Dark Mode Styles */
body.dark-mode {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

body.dark-mode .info-panel {
    background: #2d2d2d;
    border-color: #555 #333 #333 #555;
}

body.dark-mode .info-panel h2 {
    background: linear-gradient(180deg, #444 0%, #333 50%, #333 50%, #222 100%);
    color: #ffffff;
    border-bottom: 1px solid #555;
}

body.dark-mode .info-panel h3 {
    color: #e0e0e0;
}

body.dark-mode .info-panel p {
    color: #e0e0e0;
}

body.dark-mode .info-panel .content {
    background: #2d2d2d;
}

body.dark-mode .info-panel .content p {
    color: #e0e0e0;
}

body.dark-mode .info-panel .content div {
    color: #e0e0e0;
}

body.dark-mode .info-panel .content span {
    color: #e0e0e0;
}

body.dark-mode .info-panel-btn {
    background: linear-gradient(180deg, #444 0%, #333 100%);
    color: #e0e0e0;
    border: 1px solid;
    border-color: #555 #1a1a1a #1a1a1a #555;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .info-panel-btn-on {
    background: linear-gradient(180deg, #2a5c2a 0%, #1e4a1e 100%);
}

body.dark-mode .info-panel-btn-muted {
    background: linear-gradient(180deg, #7a2a2a 0%, #5c1a1a 100%);
}

body.dark-mode .info-panel-btn:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%);
}

body.dark-mode .info-panel-btn-on:hover {
    background: linear-gradient(180deg, #336633 0%, #285228 100%);
}

body.dark-mode .info-panel-btn-muted:hover {
    background: linear-gradient(180deg, #8a3333 0%, #6b2222 100%);
}

body.dark-mode .info-panel-btn:active,
body.dark-mode .info-panel-btn-on:active,
body.dark-mode .info-panel-btn-muted:active {
    border-color: #1a1a1a #555 #555 #1a1a1a;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.4), inset -1px -1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .player-count {
    color: #ffaa44;
}

body.dark-mode .market-canvas {
    background: #1a1a1a;
    border-color: #555 #333 #333 #555;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

body.dark-mode .chat-panel {
    background: #2d2d2d;
    border-color: #555 #333 #333 #555;
}

body.dark-mode .chat-panel h3 {
    background: linear-gradient(180deg, #444 0%, #333 50%, #333 50%, #222 100%);
    color: #ffffff;
    border-bottom: 1px solid #555;
}

body.dark-mode .chat-panel .chat-messages {
    background: #2d2d2d;
}

body.dark-mode .chat-panel .chat-messages p {
    color: #e0e0e0;
}

body.dark-mode #pinnedMessageContainer {
    background: #1a1a1a;
    border-color: #555 #333 #333 #555;
    border-bottom-color: #ff9900;
}

body.dark-mode #pinnedMessageContainer div {
    color: #ffffff !important;
}

body.dark-mode #pinnedMessageContainer span {
    color: #ffffff !important;
}

body.dark-mode #pinnedMessageContainer span[style*="color: #ffffff"] {
    color: #ffffff !important;
}

body.dark-mode #pinnedMessageContainer span[style*="color: #cccccc"] {
    color: #999999 !important;
}

body.dark-mode #chatMessages {
    background: #1a1a1a;
}

body.dark-mode #chatMessages div {
    color: #ffffff !important;
}

body.dark-mode #chatMessages span {
    color: #ffffff !important;
}

body.dark-mode #chatMessages span[style*="color: #2c3e50"] {
    color: #ffffff !important;
}

body.dark-mode #chatInput {
    background: #1a1a1a;
    color: #ffffff;
    border: 1px solid #555;
}

body.dark-mode .chat-panel .chat-input-container {
    background: #2d2d2d;
    border-top: 1px solid #555;
}

body.dark-mode .chat-panel input[type="text"] {
    background: #1a1a1a;
    color: #e0e0e0;
    border: 1px solid #555;
}

body.dark-mode .chat-panel button,
body.dark-mode #chatSend,
body.dark-mode #emojiPickerBtn,
body.dark-mode #gifPickerBtn {
    background: linear-gradient(180deg, #444 0%, #333 100%);
    color: #e0e0e0;
    border: 1px solid;
    border-color: #555 #1a1a1a #1a1a1a #555;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .chat-panel button:hover,
body.dark-mode #chatSend:hover,
body.dark-mode #emojiPickerBtn:hover,
body.dark-mode #gifPickerBtn:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%);
}

body.dark-mode .chat-panel button:active,
body.dark-mode #chatSend:active,
body.dark-mode #emojiPickerBtn:active,
body.dark-mode #gifPickerBtn:active {
    border-color: #1a1a1a #555 #555 #1a1a1a;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.4), inset -1px -1px 0 rgba(255,255,255,0.06);
}

/* Dark mode mention suggestions */
body.dark-mode .mention-suggestions {
    background: #2d2d2d;
    border-color: #555;
    color: #ffffff;
}

body.dark-mode .mention-item {
    color: #ffffff;
    border-bottom-color: #555;
}

body.dark-mode .mention-item:hover,
body.dark-mode .mention-item.selected {
    background: #444;
}

body.dark-mode .mention-username {
    color: #ffaa44;
}

/* Dark mode mention badges in chat */
body.dark-mode .chat-mention {
    background: linear-gradient(180deg, rgba(255, 187, 85, 0.85) 0%, rgba(255, 153, 0, 0.85) 100%);
    border-color: rgba(204, 102, 0, 0.85);
    color: #ffffff;
}

/* Dark mode reply preview in messages */
body.dark-mode #chatMessages .reply-preview {
    background: #cc7700 !important;
}

body.dark-mode #chatMessages .reply-preview-username {
    color: #ffffff !important;
}

body.dark-mode #chatMessages .reply-preview-message {
    color: #e0e0e0 !important;
}

body.dark-mode #chatMessages .reply-preview-message[style*="color"] {
    color: #e0e0e0 !important;
}

/* Dark mode reply preview in pinned messages */
body.dark-mode #pinnedMessageContainer .reply-preview {
    background: #cc7700 !important;
}

body.dark-mode #pinnedMessageContainer .reply-preview-username {
    color: #ffffff !important;
}

body.dark-mode #pinnedMessageContainer .reply-preview-message {
    color: #e0e0e0 !important;
}

body.dark-mode #pinnedMessageContainer .reply-preview-message[style*="color"] {
    color: #e0e0e0 !important;
}

body.dark-mode .chat-mention {
    background: linear-gradient(180deg, rgba(255, 187, 85, 0.85) 0%, rgba(255, 153, 0, 0.85) 100%);
    border-color: rgba(204, 102, 0, 0.85);
    color: #ffffff;
}

body.dark-mode .chat-mention:hover {
    background: linear-gradient(180deg, rgba(255, 204, 102, 1) 0%, rgba(255, 170, 0, 1) 100%);
}

body.dark-mode .interaction-panel {
    background: #2d2d2d;
    border-color: #555 #333 #333 #555;
}

body.dark-mode .interaction-panel .panel-title-bar {
    background: linear-gradient(180deg, #444 0%, #333 50%, #333 50%, #222 100%);
    border-bottom: 1px solid #555;
}

body.dark-mode .interaction-panel .panel-title-bar h3 {
    color: #ffffff;
}

body.dark-mode .interaction-panel .close-x-btn {
    background: linear-gradient(180deg, #885500 0%, #663300 100%);
    border: 1px solid;
    border-color: #aa7700 #331100 #331100 #aa7700;
    box-shadow: inset 1px 1px 0 #bb8800, inset -1px -1px 0 #220a00;
    color: #ffffff;
}

body.dark-mode .interaction-panel .close-x-btn:hover {
    background: linear-gradient(180deg, #996600 0%, #774400 100%);
}

body.dark-mode .interaction-panel .close-x-btn:active {
    border-color: #331100 #aa7700 #aa7700 #331100;
    box-shadow: inset -1px -1px 0 #bb8800, inset 1px 1px 0 #220a00;
}

body.dark-mode .booth-items {
    background: #2d2d2d;
    scrollbar-color: #555 #1a1a1a;
}

body.dark-mode .booth-items::-webkit-scrollbar-track {
    background: #1a1a1a;
}

body.dark-mode .booth-items::-webkit-scrollbar-thumb {
    background: #555;
}

body.dark-mode .booth-items::-webkit-scrollbar-thumb:hover {
    background: #777;
}

body.dark-mode .booth-item {
    background: #1a1a1a;
    border: 1px solid #555;
}

body.dark-mode .booth-item h4 {
    color: #e0e0e0;
}

body.dark-mode .booth-item p {
    color: #e0e0e0;
}

body.dark-mode .booth-item .price {
    color: #ffaa44;
}

body.dark-mode .booth-item button {
    background: linear-gradient(180deg, #444 0%, #333 100%);
    color: #e0e0e0;
    border: 1px solid;
    border-color: #555 #1a1a1a #1a1a1a #555;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.06);
}

/* Auction modal dark mode styles */
body.dark-mode #auctionModal h4 {
    color: #e0e0e0;
}

body.dark-mode #currentAuctionsList,
body.dark-mode #upcomingAuctionsList,
body.dark-mode #pastAuctionsList {
    background: #1a1a1a !important;
    border-color: #555 !important;
    color: #e0e0e0;
}

body.dark-mode #currentAuctionsList div[style*="color: #666"],
body.dark-mode #upcomingAuctionsList div[style*="color: #666"],
body.dark-mode #pastAuctionsList div[style*="color: #666"] {
    color: #999 !important;
}

body.dark-mode #auctionBackBtn {
    background: linear-gradient(180deg, #444 0%, #333 100%) !important;
    color: #e0e0e0 !important;
    border: 1px solid !important;
    border-color: #555 #1a1a1a #1a1a1a #555 !important;
    box-shadow: inset 1px 1px 0 #444, inset -1px -1px 0 #111 !important;
}

body.dark-mode #auctionBackBtn:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%) !important;
}

/* Dark mode for auction items dynamically added - override inline styles */
body.dark-mode #currentAuctionsList > div[data-auction-item-id],
body.dark-mode #upcomingAuctionsList > div,
body.dark-mode #pastAuctionsList > div {
    border-bottom-color: #555 !important;
    color: #e0e0e0;
}

body.dark-mode #currentAuctionsList > div[data-auction-item-id] div[style*="color: #666"],
body.dark-mode #upcomingAuctionsList > div div[style*="color: #666"],
body.dark-mode #pastAuctionsList > div div[style*="color: #666"] {
    color: #999 !important;
}

body.dark-mode #currentAuctionsList > div[data-auction-item-id] div[style*="font-weight: bold"],
body.dark-mode #upcomingAuctionsList > div div[style*="font-weight: bold"],
body.dark-mode #pastAuctionsList > div div[style*="font-weight: bold"] {
    color: #e0e0e0 !important;
}

body.dark-mode #currentAuctionsList img[style*="border: 1px solid #ccc"],
body.dark-mode #upcomingAuctionsList img[style*="border: 1px solid #ccc"],
body.dark-mode #pastAuctionsList img[style*="border: 1px solid #ccc"] {
    border-color: #555 !important;
}

body.dark-mode #currentAuctionsList div[style*="background: #f0f0f0"],
body.dark-mode #upcomingAuctionsList div[style*="background: #f0f0f0"],
body.dark-mode #pastAuctionsList div[style*="background: #f0f0f0"] {
    background: #2d2d2d !important;
    border-color: #555 !important;
    color: #999 !important;
}

/* Theme-aware auction list (unified list) */
body.dark-mode #allAuctionsList {
    background: #1a1a1a !important;
    border-color: #555 !important;
    color: #e0e0e0;
}

body.dark-mode .auction-list-item {
    border-bottom-color: #555 !important;
}

body.dark-mode .auction-list-item:hover {
    background: #333;
}

body.dark-mode .auction-item-name {
    color: #e0e0e0 !important;
}

body.dark-mode .auction-text-secondary {
    color: #aaa !important;
}

body.dark-mode .auction-list-item img[style*="border: 1px solid #ccc"] {
    border-color: #555 !important;
}

body.dark-mode .auction-list-item div[style*="background: #f0f0f0"] {
    background: #3a3a3a !important;
    color: #aaa !important;
    border-color: #555 !important;
}

body.dark-mode .auction-thumbnail {
    border-color: #555 !important;
}

body.dark-mode .auction-thumbnail-placeholder {
    background: #3a3a3a !important;
    color: #aaa !important;
    border-color: #555 !important;
}

/* Multiple images badge - ensure it's visible in dark mode */
body.dark-mode .auction-thumbnail + span {
    border-color: #2c2c2c !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
}

body.dark-mode .auction-item {
    background: #2d2d2d;
    border: 1px solid #555;
    color: #e0e0e0;
}

body.dark-mode .auction-item h5 {
    color: #ffaa44;
}

body.dark-mode .auction-item p {
    color: #e0e0e0;
}

body.dark-mode .auction-item .auction-price {
    color: #ffaa44;
}

body.dark-mode .auction-item button {
    background: linear-gradient(180deg, #444 0%, #333 100%);
    color: #e0e0e0;
    border: 1px solid;
    border-color: #555 #1a1a1a #1a1a1a #555;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .auction-item button:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%);
}

/* Dark mode for auction detail view */
body.dark-mode #auctionItemDetails h3 {
    color: #e0e0e0 !important;
}

body.dark-mode #auctionItemDetails div[style*="color: #666"],
body.dark-mode #auctionItemDetails div[style*="color: #999"] {
    color: #999 !important;
}

body.dark-mode #auctionItemDetails div[style*="background: #f9f9f9"],
body.dark-mode #auctionItemDetails div[style*="background: #f0f0f0"] {
    background: #2d2d2d !important;
    border-color: #555 !important;
}

body.dark-mode #auctionItemDetails div[style*="background: #fff"] {
    background: #1a1a1a !important;
    border-color: #555 !important;
}

body.dark-mode #auctionItemDetails div[style*="border: 1px solid #ccc"] {
    border-color: #555 !important;
}

body.dark-mode #auctionItemDetails img[style*="border: 1px solid #ccc"] {
    border-color: #555 !important;
}

body.dark-mode #auctionItemDetails div[style*="background: #f0f0f0"][style*="width: 70px"] {
    background: #2d2d2d !important;
    border-color: #555 !important;
    color: #999 !important;
}

body.dark-mode #auctionItemDetails .current-bid-amount {
    color: #ffaa44 !important;
}

body.dark-mode #auctionItemDetails input[type="number"] {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

body.dark-mode #auctionItemDetails button[style*="background: #ff9900"] {
    background: #ffaa44 !important;
}

body.dark-mode #auctionItemDetails button[style*="background: #ff9900"]:hover {
    background: #ffbb55 !important;
}

body.dark-mode #auctionItemDetails button[style*="background: #ddd"] {
    background: #444 !important;
    border-color: #555 !important;
    color: #e0e0e0 !important;
}

body.dark-mode #auctionItemDetails button[style*="background: #ddd"]:hover {
    background: #555 !important;
}

body.dark-mode #auctionItemDetails .bid-history-content > div[style*="border-bottom: 1px solid #eee"] {
    border-bottom-color: #555 !important;
}

body.dark-mode #auctionItemDetails .bid-history-content strong {
    color: #e0e0e0;
}

body.dark-mode #auctionItemDetails .bid-history-content div[style*="color: #666"] {
    color: #999 !important;
}

/* Dark mode for auction ended/upcoming containers */
body.dark-mode .auction-ended-container,
body.dark-mode .auction-upcoming-container {
    background: #2d2d2d !important;
    border-color: #555 #333 #333 #555 !important;
}

body.dark-mode .auction-ended-title {
    color: #e0e0e0 !important;
}

body.dark-mode .auction-ended-winner {
    color: #e0e0e0 !important;
}

body.dark-mode .auction-ended-no-bids {
    color: #999 !important;
}

body.dark-mode .auction-upcoming-time,
body.dark-mode .auction-upcoming-bid {
    color: #aaa !important;
}

/* Dark mode for bid history */
body.dark-mode .bid-history-container {
    background: #1a1a1a !important;
    border-color: #555 #333 #333 #555 !important;
}

body.dark-mode .bid-history-title {
    color: #e0e0e0 !important;
}

body.dark-mode .bid-history-item {
    border-bottom-color: #555 !important;
}

body.dark-mode .bid-history-bidder {
    color: #e0e0e0 !important;
}

body.dark-mode .bid-history-timestamp {
    color: #999 !important;
}

body.dark-mode .bid-history-empty {
    color: #999 !important;
}

/* Dark mode for auction description and time left */
body.dark-mode .auction-time-left,
body.dark-mode .auction-description {
    color: #aaa !important;
}

/* Jukebox modal dark mode styles */
body.dark-mode #jukeboxModal h4 {
    color: #e0e0e0;
}

body.dark-mode #jukeboxModal input {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

body.dark-mode #jukeboxModal input::placeholder {
    color: #888;
}

body.dark-mode #jukeboxAddBtn,
body.dark-mode #jukeboxBackBtn,
body.dark-mode #jukeboxDownloadHistoryBtn,
body.dark-mode #jukeboxGenerateQRBtn,
body.dark-mode #jukeboxCancelPaymentBtn {
    background: linear-gradient(180deg, #444 0%, #333 100%) !important;
    color: #e0e0e0 !important;
    border: 1px solid !important;
    border-color: #555 #1a1a1a #1a1a1a #555 !important;
    box-shadow: inset 1px 1px 0 #444, inset -1px -1px 0 #111 !important;
}

body.dark-mode #jukeboxAddBtn:hover,
body.dark-mode #jukeboxBackBtn:hover,
body.dark-mode #jukeboxDownloadHistoryBtn:hover,
body.dark-mode #jukeboxGenerateQRBtn:hover,
body.dark-mode #jukeboxCancelPaymentBtn:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%) !important;
}

body.dark-mode #jukeboxAddBtn:active,
body.dark-mode #jukeboxBackBtn:active,
body.dark-mode #jukeboxDownloadHistoryBtn:active,
body.dark-mode #jukeboxGenerateQRBtn:active,
body.dark-mode #jukeboxCancelPaymentBtn:active {
    border-color: #1a1a1a #555 #555 #1a1a1a !important;
    box-shadow: inset -1px -1px 0 #444, inset 1px 1px 0 #111 !important;
}

body.dark-mode #jukeboxPaymentView > div[style*="color: #666"] {
    color: #999 !important;
}

body.dark-mode #jukeboxPaymentSpinner div[style*="color: #666"] {
    color: #999 !important;
}

body.dark-mode #jukeboxPaymentSpinner div[style*="border: 4px solid"] {
    border-color: #333 !important;
    border-top-color: #ff9900 !important;
}

/* Dynamically-generated search result "Add to Queue" buttons */
body.dark-mode .jukebox-add-track-btn {
    background: linear-gradient(180deg, #444 0%, #333 100%) !important;
    color: #e0e0e0 !important;
    border: 1px solid !important;
    border-color: #555 #1a1a1a #1a1a1a #555 !important;
    box-shadow: inset 1px 1px 0 #444, inset -1px -1px 0 #111 !important;
}

body.dark-mode .jukebox-add-track-btn:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%) !important;
}

/* Search result track items */
body.dark-mode .jukebox-track-item {
    background: #2a2a2a !important;
    border-color: #555 #333 #333 #555 !important;
}

/* Win95-style scrollbars */
.win95-scroll::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}
.win95-scroll::-webkit-scrollbar-track {
    background: #c0c0c0;
    border: 1px solid #888;
}
.win95-scroll::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    min-height: 20px;
}
.win95-scroll::-webkit-scrollbar-thumb:hover {
    background: #d0d0d0;
}
.win95-scroll::-webkit-scrollbar-button {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    display: block;
    width: 16px;
    height: 16px;
}
.win95-scroll::-webkit-scrollbar-button:active {
    border-color: #808080 #ffffff #ffffff #808080;
}
.win95-scroll::-webkit-scrollbar-corner {
    background: #c0c0c0;
}

/* Jukebox flat list rows */
.jukebox-result-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-bottom: 1px solid #d0d0d0;
    font-size: 12px;
    font-family: Tahoma, sans-serif;
    cursor: default;
    user-select: none;
    text-align: left;
}
.jukebox-result-row:last-child {
    border-bottom: none;
}
.jukebox-result-row:hover {
    background: #0a246a;
    color: #ffffff;
}
.jukebox-result-row:hover .jukebox-result-artist {
    color: #ccccff;
}
.jukebox-result-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jukebox-result-title {
    font-weight: bold;
}
.jukebox-result-artist {
    color: #666;
    font-size: 12px;
}
.jukebox-result-add {
    padding: 2px 8px;
    background: #ECE9D8;
    color: #000;
    border: 2px solid;
    border-color: #ffffff #0a0a0a #0a0a0a #ffffff;
    cursor: pointer;
    font-size: 12px;
    font-family: Tahoma, sans-serif;
    flex-shrink: 0;
    white-space: nowrap;
}
.jukebox-result-add:active {
    border-color: #0a0a0a #ffffff #ffffff #0a0a0a;
}
body.dark-mode .jukebox-result-row {
    border-bottom-color: #444;
}
body.dark-mode .jukebox-result-row:hover {
    background: #1a3a8a;
    color: #ffffff;
}
body.dark-mode .jukebox-result-artist {
    color: #aaa;
}
body.dark-mode .jukebox-result-add {
    background: linear-gradient(180deg, #444 0%, #333 100%);
    color: #e0e0e0;
    border-color: #555 #1a1a1a #1a1a1a #555;
}

/* Queue history separator */
body.dark-mode #jukeboxQueueList div[style*="border-top: 2px solid #ddd"] {
    border-top-color: #555 !important;
    border-bottom-color: #444 !important;
}

/* Jukebox search icon styles */
#jukeboxSearchBtn {
    transition: color 0.2s, transform 0.1s;
}

#jukeboxSearchBtn:hover {
    color: #ffaa44 !important;
    transform: translateY(-50%) scale(1.15);
}

#jukeboxSearchBtn:active {
    transform: translateY(-50%) scale(0.9);
}

body.dark-mode #jukeboxSearchBtn {
    color: #ff9900 !important;
}

body.dark-mode #jukeboxSearchBtn:hover {
    color: #ffaa44 !important;
}

body.dark-mode #jukeboxQueueList {
    color: #e0e0e0;
    background: #1a1a1a !important;
    border-color: #555 !important;
}

body.dark-mode #jukeboxSearchResults {
    color: #e0e0e0;
    background: #1a1a1a !important;
    border-color: #555 !important;
}

/* Override inline styles in jukebox modal for dark mode */
body.dark-mode #jukeboxQueueList div[style*="color: #666"] {
    color: #999 !important;
}

body.dark-mode #jukeboxQueueList div[style*="background: #f5f5f5"] {
    background: #1a1a1a !important;
    border-left-color: #555 !important;
}

body.dark-mode #jukeboxQueueList div[style*="background: #fff3cd"] {
    background: #3a2a0a !important;
}

body.dark-mode #jukeboxQueueList div[style*="color: #333"] {
    color: #e0e0e0 !important;
}

body.dark-mode #jukeboxQueueList div[style*="color: #666"] {
    color: #999 !important;
}

body.dark-mode #jukeboxQueueList div[style*="display: flex"] {
    background: #1a1a1a !important;
    border-left-color: #555 !important;
}

body.dark-mode #jukeboxQueueList img {
    background: #2a2a2a !important;
}

body.dark-mode #jukeboxSearchResults div[style*="color: #666"] {
    color: #999 !important;
}

body.dark-mode #jukeboxSearchResults div[style*="background: #f9f9f9"] {
    background: #1a1a1a !important;
    border-color: #555 !important;
}

body.dark-mode #jukeboxSearchResults div[style*="color: #333"] {
    color: #e0e0e0 !important;
}

body.dark-mode #jukeboxSearchResults div[style*="color: #666"] {
    color: #999 !important;
}

body.dark-mode #jukeboxSearchResults div[style*="display: flex"] {
    background: #1a1a1a !important;
    border-color: #555 !important;
}

body.dark-mode #jukeboxSearchResults img {
    background: #2a2a2a !important;
}

/* Jukebox payment view dark mode styles */
body.dark-mode #jukeboxPaymentView h4 {
    color: #e0e0e0;
}

body.dark-mode #jukeboxPaymentStatus {
    color: #e0e0e0;
}

body.dark-mode #jukeboxQRCode {
    background: #2a2a2a !important;
    border-color: #555 !important;
}

body.dark-mode #jukeboxInvoiceText {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

body.dark-mode .booth-item button:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%);
}

/* Override inline styles for dark mode */
body.dark-mode .booth-item span[style*="color: #2c3e50"] {
    color: #e0e0e0 !important;
}

body.dark-mode .booth-item span[style*="color: #666"] {
    color: #999 !important;
}

/* Feedback modal dark mode styles */
body.dark-mode #feedbackModal label {
    color: #e0e0e0 !important;
}

body.dark-mode #feedbackModal input[type="text"],
body.dark-mode #feedbackModal textarea {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

body.dark-mode #feedbackModal input[type="text"]::placeholder,
body.dark-mode #feedbackModal textarea::placeholder {
    color: #888 !important;
}

body.dark-mode #feedbackModal #feedbackStatus {
    color: #999 !important;
}

body.dark-mode #feedbackModal #feedbackStatus[style*="color: #0a0"] {
    color: #4ade80 !important;
}

body.dark-mode #feedbackModal #feedbackStatus[style*="color: #c00"] {
    color: #f87171 !important;
}

body.dark-mode #feedbackModal #feedbackSendBtn,
body.dark-mode #feedbackModal #feedbackDownloadBtn {
    background: linear-gradient(180deg, #444 0%, #333 100%) !important;
    color: #e0e0e0 !important;
    border: 1px solid !important;
    border-color: #555 #1a1a1a #1a1a1a #555 !important;
    box-shadow: inset 1px 1px 0 #444, inset -1px -1px 0 #111 !important;
}

body.dark-mode #feedbackModal #feedbackSendBtn:hover,
body.dark-mode #feedbackModal #feedbackDownloadBtn:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%) !important;
}

body.dark-mode #feedbackModal #feedbackSendBtn:disabled {
    background: #333 !important;
    color: #666 !important;
    cursor: not-allowed !important;
}

/* Vendor message form dark mode styles */
body.dark-mode #vendorMessageView label {
    color: #e0e0e0 !important;
}

body.dark-mode #vendorMessageView input[type="text"],
body.dark-mode #vendorMessageView textarea {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

body.dark-mode #vendorMessageView input[type="text"]::placeholder,
body.dark-mode #vendorMessageView textarea::placeholder {
    color: #888 !important;
}

body.dark-mode #vendorMessageView div[style*="font-size: 12px; color: #666;"] {
    color: #999 !important;
}

body.dark-mode #vendorMessageView #vendorMessageSendBtn,
body.dark-mode #vendorMessageView #vendorMessageCancelBtn {
    background: linear-gradient(180deg, #444 0%, #333 100%) !important;
    color: #e0e0e0 !important;
    border: 1px solid !important;
    border-color: #555 #1a1a1a #1a1a1a #555 !important;
    box-shadow: inset 1px 1px 0 #444, inset -1px -1px 0 #111 !important;
}

body.dark-mode #vendorMessageView #vendorMessageSendBtn:hover,
body.dark-mode #vendorMessageView #vendorMessageCancelBtn:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%) !important;
}

body.dark-mode #vendorMessageView #vendorMessageSendBtn:disabled {
    background: #333 !important;
    color: #666 !important;
    cursor: not-allowed !important;
}

/* Tip jar modal dark mode styles (mirror feedback modal) */
body.dark-mode #tipjarModal label {
    color: #e0e0e0 !important;
}

body.dark-mode #tipjarModal input[type="number"] {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

body.dark-mode #tipjarModal #tipjarAmountInput::placeholder {
    color: #888 !important;
}

body.dark-mode #tipjarModal #tipjarCreateInvoiceBtn,
body.dark-mode #tipjarModal #tipjarGenerateQRBtn,
body.dark-mode #tipjarModal #tipjarBackBtn,
body.dark-mode #tipjarModal .tipjar-preset-btn {
    background: linear-gradient(180deg, #444 0%, #333 100%) !important;
    color: #e0e0e0 !important;
    border: 1px solid !important;
    border-color: #555 #1a1a1a #1a1a1a #555 !important;
    box-shadow: inset 1px 1px 0 #444, inset -1px -1px 0 #111 !important;
}

body.dark-mode #tipjarModal #tipjarCreateInvoiceBtn:hover,
body.dark-mode #tipjarModal #tipjarGenerateQRBtn:hover,
body.dark-mode #tipjarModal #tipjarBackBtn:hover,
body.dark-mode #tipjarModal .tipjar-preset-btn:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%) !important;
}

body.dark-mode #feedbackModal h4 {
    color: #e0e0e0 !important;
}

body.dark-mode #feedbackModal #feedbackList {
    background: #1a1a1a !important;
    border-color: #555 !important;
    color: #e0e0e0 !important;
}

body.dark-mode #feedbackModal #feedbackList div[style*="color: #666"] {
    color: #999 !important;
}

body.dark-mode #feedbackModal #feedbackList > div[style*="border: 1px solid #ddd"] {
    border-color: #555 !important;
    background: #2d2d2d !important;
}

body.dark-mode #feedbackModal #feedbackList strong {
    color: #e0e0e0 !important;
}

body.dark-mode #feedbackModal #feedbackList span[style*="color: #666"] {
    color: #999 !important;
}

body.dark-mode #feedbackModal #feedbackList div[style*="color: #333"] {
    color: #e0e0e0 !important;
}

body.dark-mode #feedbackModal .feedback-item {
    border-color: #555 !important;
    background: #2d2d2d !important;
}

body.dark-mode #feedbackModal .feedback-name {
    color: #e0e0e0 !important;
}

body.dark-mode #feedbackModal .feedback-date {
    color: #999 !important;
}

body.dark-mode #feedbackModal .feedback-message {
    color: #e0e0e0 !important;
}

/* Link colors - use #ff9900 in both light and dark modes */
a {
    color: #ff9900 !important;
}

a:hover {
    color: #ffaa00 !important;
}

/* Override specific inline link styles */
a[style*="color: #007bff"] {
    color: #ff9900 !important;
}

a[style*="color: #3498db"] {
    color: #ff9900 !important;
}

a[style*="color: #000000"] {
    color: #ff9900 !important;
}

/* Website label color for dark mode */
body.dark-mode #boothWebsite {
    color: #ffffff !important;
}

body.dark-mode .login-container {
    background: #2d2d2d;
    border: 2px solid #555;
}

body.dark-mode .login-container h1 {
    color: #ffffff;
}

body.dark-mode .login-container p {
    color: #e0e0e0;
}

body.dark-mode .login-form label {
    color: #e0e0e0;
}

body.dark-mode .login-form input {
    background: #1a1a1a;
    color: #e0e0e0;
    border: 1px solid #555;
}

body.dark-mode .login-form button {
    background: linear-gradient(180deg, #444 0%, #333 100%);
    color: #e0e0e0;
    border: 1px solid;
    border-color: #555 #1a1a1a #1a1a1a #555;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .login-form button:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%);
}

body.dark-mode .login-form button:active {
    border-color: #1a1a1a #555 #555 #1a1a1a;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.4), inset -1px -1px 0 rgba(255,255,255,0.06);
}

/* Override inline styles for dark mode */
body.dark-mode #usernameLabel,
body.dark-mode label[for="passwordInput"] {
    color: #e0e0e0 !important;
}


body.dark-mode .calendar-container {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
}

body.dark-mode .calendar-content {
    background: #1a1a1a;
    border: 2px solid #555;
    border-color: #666 #333 #333 #666;
}

body.dark-mode .calendar-content h1 {
    background: linear-gradient(180deg, #ffaa44 0%, #ff8800 50%, #ff8800 50%, #ff9900 100%);
    color: #ffffff;
    border-bottom: 1px solid #808080;
}

body.dark-mode .calendar-info {
    background: #1a1a1a;
}

body.dark-mode .calendar-info p {
    color: #e0e0e0;
    text-align: center;
}

body.dark-mode .events-separator {
    border-top: 1px solid #555;
}

body.dark-mode .events-header {
    color: #e0e0e0;
}

body.dark-mode .events-list {
    background: #1a1a1a;
}

body.dark-mode .events-list .no-events-message {
    color: #e0e0e0;
    text-align: center;
}

body.dark-mode .event-item {
    background: #2d2d2d;
    border: 1px solid #555;
    border-color: #666 #333 #333 #666;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.1), inset -1px -1px 0 rgba(0,0,0,0.3);
}

body.dark-mode .event-item h3 {
    color: #ffaa44;
}

body.dark-mode .event-item .event-date {
    color: #ffaa44;
}

body.dark-mode .event-item .event-time {
    color: #999;
}

body.dark-mode .event-item .event-description {
    color: #e0e0e0;
}

body.dark-mode .calendar-footer {
    background: #1a1a1a;
    border-top: 1px solid #555;
}

body.dark-mode .calendar-footer p {
    color: #999;
}


/* Lightning Invoice Card Dark Mode */
body.dark-mode .lightning-invoice-card {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    border: 2px solid #ffaa44;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .invoice-header {
    border-bottom: 1px solid #555;
}

body.dark-mode .invoice-title {
    color: #e0e0e0;
}

body.dark-mode .qr-button,
body.dark-mode .copy-button {
    background: linear-gradient(180deg, #444 0%, #333 100%);
    color: #e0e0e0;
    border: 1px solid;
    border-color: #555 #1a1a1a #1a1a1a #555;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .qr-button:hover,
body.dark-mode .copy-button:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%);
}

body.dark-mode .qr-button:active,
body.dark-mode .copy-button:active {
    border-color: #1a1a1a #555 #555 #1a1a1a;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.4), inset -1px -1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .invoice-amount {
    color: #4ade80;
}

body.dark-mode .invoice-description {
    color: #999;
}

body.dark-mode .pay-button {
    background: linear-gradient(180deg, #885500 0%, #663300 100%);
    border: 1px solid;
    border-color: #aa7700 #331100 #331100 #aa7700;
    box-shadow: inset 1px 1px 0 #bb8800, inset -1px -1px 0 #220a00;
    color: #ffffff;
}

body.dark-mode .pay-button:hover {
    background: linear-gradient(180deg, #996600 0%, #774400 100%);
}

body.dark-mode .pay-button:active {
    border-color: #331100 #aa7700 #aa7700 #331100;
    box-shadow: inset -1px -1px 0 #bb8800, inset 1px 1px 0 #220a00;
}

/* Dark mode styles for fullscreen modal */
body.dark-mode #fullscreenModal {
    background: rgba(0, 0, 0, 0.95);
}

body.dark-mode #closeFullscreenBtn {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

body.dark-mode #closeFullscreenBtn:hover {
    color: #ff6b6b;
    background: rgba(0, 0, 0, 0.9);
}

/* Speech Bubble Animation Styles */
@keyframes speechBubbleEllipses {
    0%, 20% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    80%, 100% {
        opacity: 0;
    }
}

.speech-bubble-ellipses {
    animation: speechBubbleEllipses 1.5s infinite;
}

.speech-bubble-ellipses .dot:nth-child(1) {
    animation-delay: 0s;
}

.speech-bubble-ellipses .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.speech-bubble-ellipses .dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* Early Entry Modal Styles - Windows XP Theme */
.early-entry-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffb366 0%, #ff9933 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
}

.early-entry-modal {
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    max-width: 300px;
    width: 90%;
    position: relative;
}

.early-entry-modal-title-bar {
    background: linear-gradient(180deg, #ffaa44 0%, #ff8800 50%, #ff8800 50%, #ff9900 100%) !important;
    color: #ffffff !important;
    padding: 4px 6px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #808080 !important;
    position: relative !important;
}

.early-entry-modal-title-bar h3 {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5) !important;
    text-align: left !important;
}

.early-entry-modal-close {
    background: linear-gradient(180deg, #ffaa44 0%, #ff8800 100%);
    border: 1px solid #666;
    border-top-color: #fff;
    border-left-color: #fff;
    color: #ffffff;
    width: 20px;
    height: 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.early-entry-modal-close:hover {
    background: linear-gradient(180deg, #ff8800 0%, #ffaa44 100%);
    border-color: #ffffff #808080 #808080 #ffffff;
}

.early-entry-modal-close:active {
    background: linear-gradient(180deg, #ff8800 0%, #ffaa44 100%);
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

.early-entry-modal-content {
    padding: 12px;
    text-align: center;
    background: #ECE9D8;
}

.early-entry-modal-content h4 {
    color: #2c3e50;
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: bold;
    text-shadow: none;
}

.early-entry-modal-content p {
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-size: 12px;
    line-height: 1.4;
    text-shadow: none;
}

.early-entry-modal-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 0 12px 0;
}

.early-entry-modal-btn {
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 50%, #d4d0c8 50%, #c0b8a8 100%);
    color: #000;
    border: 1px solid;
    border-color: #fff #000 #000 #fff;
    padding: 4px 8px;
    font-size: 12px;
    font-family: Tahoma, sans-serif;
    font-weight: normal;
    cursor: pointer;
    box-shadow: inset -1px -1px 1px rgba(0,0,0,0.1), inset 1px 1px 1px rgba(255,255,255,0.9);
    transition: all 0.1s ease;
}

.early-entry-modal-btn:hover {
    background: linear-gradient(180deg, #f0ece0 0%, #e0dcd0 50%, #e0dcd0 50%, #d0c8b8 100%);
}

.early-entry-modal-btn:active {
    background: linear-gradient(180deg, #d4d0c8 0%, #c0b8a8 50%, #c0b8a8 50%, #b0a898 100%);
    border-color: #000 #fff #fff #000;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}


/* Dark mode for early entry modal */
body.dark-mode .early-entry-modal {
    background: #2d2d2d;
    border: 2px solid #555;
}

body.dark-mode .early-entry-modal-title-bar {
    background: linear-gradient(180deg, #ffaa44 0%, #ff8800 50%, #ff8800 50%, #ff9900 100%);
    border-bottom: 1px solid #808080;
}

body.dark-mode .early-entry-modal-content {
    background: #2d2d2d;
}

body.dark-mode .early-entry-modal-content h4 {
    color: #e0e0e0;
}

body.dark-mode .early-entry-modal-content p {
    color: #e0e0e0;
}

body.dark-mode .early-entry-modal-btn {
    background: linear-gradient(180deg, #444 0%, #333 100%);
    color: #e0e0e0;
    border: 1px solid;
    border-color: #555 #1a1a1a #1a1a1a #555;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .early-entry-modal-btn:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%);
}

body.dark-mode .early-entry-modal-btn:active {
    border-color: #1a1a1a #555 #555 #1a1a1a;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.4), inset -1px -1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .early-entry-modal-overlay {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

/* Product Tooltip Styles - XP Theme */
.product-tooltip {
    position: absolute;
    background: #FFFFE1;
    border: 1px solid #000000;
    padding: 8px 10px;
    font-size: 12px;
    color: #000000;
    font-family: Tahoma, sans-serif;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    pointer-events: none;
    line-height: 1.4;
    white-space: pre-line;
    word-wrap: break-word;
    text-align: left;
    display: none;
}

.product-tooltip.show {
    display: block;
}

/* Dark mode tooltip */
body.dark-mode .product-tooltip {
    background: #2d2d2d;
    border: 1px solid #ffaa44;
    color: #e0e0e0;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}

/* Product Detail View Styles */
body.dark-mode #productDetailView {
    background: #2d2d2d;
}

body.dark-mode .product-detail-header-info {
    border-bottom-color: #555 !important;
}

body.dark-mode .product-detail-name {
    color: #e0e0e0 !important;
}

body.dark-mode .product-detail-price {
    color: #ffaa44 !important;
}

body.dark-mode .product-detail-label {
    color: #e0e0e0 !important;
}

body.dark-mode .product-detail-textarea {
    background: #1a1a1a !important;
    border-color: #555 !important;
    color: #e0e0e0 !important;
}

/* Booth Proximity Tooltip Styles - XP Theme */
.booth-tooltip {
    position: fixed;
    background: #FFFFE1;
    border: 1px solid #000000;
    padding: 10px 12px;
    font-size: 12px;
    color: #000000;
    font-family: Tahoma, sans-serif;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 10002;
    pointer-events: none;
    line-height: 1.5;
    white-space: pre-line;
    word-wrap: break-word;
    text-align: left;
    max-width: 300px;
    display: none;
}

.booth-tooltip.show {
    display: block;
}

.booth-tooltip .tooltip-description {
    margin-bottom: 8px;
}

.booth-tooltip .tooltip-hint {
    font-weight: bold;
    color: #ff8800;
    font-size: 12px;
}

/* Dark mode booth tooltip */
body.dark-mode .booth-tooltip {
    background: #2d2d2d;
    border: 1px solid #ffaa44;
    color: #e0e0e0;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}

body.dark-mode .booth-tooltip .tooltip-hint {
    color: #ffaa44;
}

/* Vendor Edit Modal Styles */
.vendor-edit-modal-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    display: none;
    width: 906px;
    height: 606px;
}

.vendor-edit-modal-overlay:not(.hidden) {
    display: flex;
    flex-direction: column;
}

.vendor-edit-modal {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-radius: 0;
    padding: 0;
    position: relative;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.8), inset -1px -1px 0 rgba(0,0,0,0.2), 2px 2px 8px rgba(0,0,0,0.3);
}

.vendor-edit-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 50%, #d4d0c8 50%, #c0b8a8 100%);
    border-bottom: 1px solid #808080;
}

.vendor-edit-modal-header h2 {
    margin: 0;
    color: #2c3e50;
    font-size: 16px;
    font-weight: bold;
}

.vendor-edit-close-btn {
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    font-size: 20px;
    cursor: pointer;
    color: #2c3e50;
    padding: 2px 8px;
    width: 24px;
    height: 24px;
    line-height: 1;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2), inset 1px 1px 0 rgba(255,255,255,0.8);
}

.vendor-edit-close-btn:hover {
    background: #b0b0b0;
}

.vendor-edit-close-btn:active {
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2), inset -1px -1px 0 rgba(255,255,255,0.8);
}

.vendor-edit-content {
    padding: 24px;
    background: #ECE9D8;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Windows 95 Style Buttons */
.vendor-edit-modal button:not(.vendor-edit-close-btn) {
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 50%, #d4d0c8 50%, #c0b8a8 100%);
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    color: #2c3e50;
    padding: 6px 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2), inset 1px 1px 0 rgba(255,255,255,0.8);
    border-radius: 0;
}

.vendor-edit-modal button:not(.vendor-edit-close-btn):hover {
    background: linear-gradient(180deg, #f0ece0 0%, #e0dcd0 50%, #e0dcd0 50%, #d0c8b8 100%);
}

.vendor-edit-modal button:not(.vendor-edit-close-btn):active {
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2), inset -1px -1px 0 rgba(255,255,255,0.8);
}

.vendor-edit-modal input,
.vendor-edit-modal textarea {
    background: #ffffff;
    border: 1px solid #666;
    border-color: #808080 #ffffff #ffffff #808080;
    color: #2c3e50;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2);
}

.vendor-edit-modal input:focus,
.vendor-edit-modal textarea:focus {
    outline: 1px solid #0078d4;
    outline-offset: -1px;
}

.vendor-edit-modal label {
    color: #2c3e50;
}

.vendor-edit-modal .vendor-edit-section {
    border: 1px solid #ccc;
    border-color: #e0e0e0 #999 #999 #e0e0e0;
    padding: 12px;
    margin-bottom: 12px;
    background: #ffffff;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.8), inset -1px -1px 0 rgba(0,0,0,0.2);
}

/* Dark Mode Styles for Vendor Edit Modal */
body.dark-mode .vendor-edit-modal {
    background: #2d2d2d;
    border-color: #555 #333 #333 #555;
}

body.dark-mode .vendor-edit-modal-header {
    background: linear-gradient(180deg, #444 0%, #333 50%, #333 50%, #222 100%);
    border-bottom: 1px solid #555;
}

body.dark-mode .vendor-edit-modal-header h2 {
    color: #ffffff;
}

body.dark-mode .vendor-edit-close-btn {
    background: #444;
    border-color: #555 #333 #333 #555;
    color: #ffffff;
}

body.dark-mode .vendor-edit-close-btn:hover {
    background: #555;
}

body.dark-mode .vendor-edit-content {
    background: #2d2d2d;
}

body.dark-mode .vendor-edit-modal button:not(.vendor-edit-close-btn) {
    background: linear-gradient(180deg, #444 0%, #333 100%);
    border: 1px solid;
    border-color: #555 #1a1a1a #1a1a1a #555;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.06);
    color: #e0e0e0;
}

body.dark-mode .vendor-edit-modal button:not(.vendor-edit-close-btn):hover {
    background: linear-gradient(180deg, #555 0%, #444 100%);
}

body.dark-mode .vendor-edit-modal button:not(.vendor-edit-close-btn):active {
    border-color: #1a1a1a #555 #555 #1a1a1a;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.4), inset -1px -1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .vendor-edit-modal input,
body.dark-mode .vendor-edit-modal textarea {
    background: #1a1a1a;
    border-color: #555 #333 #333 #555;
    color: #e0e0e0;
}

body.dark-mode .vendor-edit-modal input:focus,
body.dark-mode .vendor-edit-modal textarea:focus {
    outline-color: #4a9eff;
}

body.dark-mode .vendor-edit-modal label {
    color: #e0e0e0;
}

body.dark-mode .vendor-edit-modal .vendor-edit-section {
    background: #1a1a1a;
    border-color: #555 #333 #333 #555;
}

body.dark-mode .vendor-edit-modal .vendor-edit-section strong {
    color: #e0e0e0;
}

@media (max-width: 960px) {
    .vendor-edit-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        transform: none;
        z-index: 10000;
    }

    .vendor-edit-content {
        padding: 14px;
    }
}

body.dark-mode .vendor-edit-modal h3 {
    color: #e0e0e0;
}

.vendor-edit-modal h3 {
    color: #2c3e50;
}

/* NIP-99 import modal (stacked above booth editor, below confirm prompt) */
@keyframes nip99-spin {
    to {
        transform: rotate(360deg);
    }
}

.nip99-import-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 10050;
    display: none;
    overflow-y: auto;
}

.nip99-import-modal-overlay:not(.hidden) {
    display: block;
}

.nip99-import-modal {
    max-width: 720px;
    margin: 32px auto;
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-radius: 0;
    padding: 0;
    position: relative;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.8), inset -1px -1px 0 rgba(0, 0, 0, 0.2), 2px 2px 8px rgba(0, 0, 0, 0.3);
}

.nip99-import-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 50%, #d4d0c8 50%, #c0b8a8 100%);
    border-bottom: 1px solid #808080;
}

.nip99-import-modal-header h2 {
    margin: 0;
    color: #000;
    font-size: 16px;
    font-weight: bold;
}

.nip99-import-modal-body {
    padding: 16px 20px 20px;
    max-height: 65vh;
    overflow-y: auto;
    background: #ECE9D8;
}

.nip99-import-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
    margin-bottom: 12px;
    font-size: 12px;
}

.nip99-import-options label {
    color: #2c3e50;
}

.nip99-import-status {
    font-size: 13px;
    margin-bottom: 8px;
    color: #2c3e50;
}

.nip99-import-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #d0d0d0;
    border-top-color: #ff9900;
    border-radius: 50%;
    animation: nip99-spin 1s linear infinite;
    vertical-align: middle;
    margin-left: 8px;
}

.nip99-import-list {
    max-height: 38vh;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-color: #e0e0e0 #999 #999 #e0e0e0;
    background: #fff;
    margin-bottom: 12px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.8), inset -1px -1px 0 rgba(0, 0, 0, 0.15);
}

.nip99-import-row {
    border-bottom: 1px solid #e0e0e0;
}

.nip99-import-row:last-child {
    border-bottom: none;
}

.nip99-import-row-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
}

.nip99-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 1px solid #ccc;
    flex-shrink: 0;
}

.nip99-thumb-placeholder {
    background: #eee;
}

.nip99-import-row-main {
    flex: 1;
    min-width: 160px;
}

.nip99-import-row-title {
    font-weight: bold;
    font-size: 13px;
    color: #2c3e50;
}

.nip99-import-row-price {
    font-size: 12px;
    color: #555;
    margin-top: 2px;
}

.nip99-import-row-desc {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    line-height: 1.35;
    max-height: 3.2em;
    overflow: hidden;
}

.nip99-status-badge {
    font-size: 12px;
    text-transform: uppercase;
    padding: 2px 6px;
    background: #d4d0c8;
    border: 1px solid #bbb;
    align-self: center;
    color: #2c3e50;
}

.nip99-import-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid #ccc;
}

.nip99-import-modal button:not(.vendor-edit-close-btn) {
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 50%, #d4d0c8 50%, #c0b8a8 100%);
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    color: #2c3e50;
    padding: 6px 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2), inset 1px 1px 0 rgba(255,255,255,0.8);
    border-radius: 0;
}

.nip99-import-modal button:not(.vendor-edit-close-btn):hover {
    background: linear-gradient(180deg, #f0ece0 0%, #e0dcd0 50%, #e0dcd0 50%, #d0c8b8 100%);
}

.nip99-import-modal button:not(.vendor-edit-close-btn):active {
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2), inset -1px -1px 0 rgba(255,255,255,0.8);
}

body.dark-mode .nip99-import-modal {
    background: #2d2d2d;
    border-color: #555 #333 #333 #555;
}

body.dark-mode .nip99-import-modal-header {
    background: linear-gradient(180deg, #444 0%, #333 50%, #333 50%, #222 100%);
    border-bottom: 1px solid #555;
}

body.dark-mode .nip99-import-modal-header h2 {
    color: #ffffff;
}

body.dark-mode .nip99-import-modal-body {
    background: #2d2d2d;
}

body.dark-mode .nip99-import-options label,
body.dark-mode .nip99-import-status {
    color: #e0e0e0;
}

body.dark-mode .nip99-import-list {
    background: #1a1a1a;
    border-color: #555 #333 #333 #555;
}

body.dark-mode .nip99-import-row {
    border-bottom-color: #444;
}

body.dark-mode .nip99-import-row-title {
    color: #e0e0e0;
}

body.dark-mode .nip99-import-row-price {
    color: #ccc;
}

body.dark-mode .nip99-import-row-desc {
    color: #aaa;
}

body.dark-mode .nip99-status-badge {
    background: #333;
    border-color: #555;
    color: #e0e0e0;
}

body.dark-mode .nip99-import-modal button:not(.vendor-edit-close-btn) {
    background: linear-gradient(180deg, #444 0%, #333 100%);
    border: 1px solid;
    border-color: #555 #1a1a1a #1a1a1a #555;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.06);
    color: #e0e0e0;
}

body.dark-mode .nip99-import-modal button:not(.vendor-edit-close-btn):hover {
    background: linear-gradient(180deg, #555 0%, #444 100%);
}

body.dark-mode .nip99-import-modal button:not(.vendor-edit-close-btn):active {
    border-color: #1a1a1a #555 #555 #1a1a1a;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.4), inset -1px -1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .nip99-import-footer {
    border-top-color: #555;
}

/* Confirm Prompt (used inside vendor edit modal) */
.confirm-prompt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.confirm-prompt-dialog {
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    min-width: 280px;
    max-width: 360px;
    font-family: "Tahoma", "Segoe UI", sans-serif;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #404040, 2px 2px 8px rgba(0,0,0,0.3);
}

.confirm-prompt-titlebar {
    background: linear-gradient(180deg, #0a246a 0%, #3a6ea5 100%);
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
}

.confirm-prompt-body {
    padding: 18px 20px;
    font-size: 12px;
    color: #2c3e50;
}

.confirm-prompt-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0 20px 16px;
}

.confirm-prompt-buttons button {
    min-width: 75px;
    padding: 3px 10px;
    font-size: 12px;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    cursor: pointer;
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 50%, #d4d0c8 50%, #c0b8a8 100%);
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    color: #2c3e50;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2), inset 1px 1px 0 rgba(255,255,255,0.8);
}

.confirm-prompt-buttons button:hover {
    background: linear-gradient(180deg, #f0ece0 0%, #e0dcd0 50%, #e0dcd0 50%, #d0c8b8 100%);
}

.confirm-prompt-buttons button:active {
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2), inset -1px -1px 0 rgba(255,255,255,0.8);
}

/* Confirm Prompt - Dark Mode */
body.dark-mode .confirm-prompt-dialog {
    background: #2d2d2d;
    border-color: #555 #333 #333 #555;
}

body.dark-mode .confirm-prompt-titlebar {
    background: linear-gradient(180deg, #444 0%, #333 50%, #333 50%, #222 100%);
}

body.dark-mode .confirm-prompt-body {
    color: #e0e0e0;
}

body.dark-mode .confirm-prompt-buttons button {
    background: linear-gradient(180deg, #444 0%, #333 100%);
    border: 1px solid;
    border-color: #555 #1a1a1a #1a1a1a #555;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.06);
    color: #e0e0e0;
}

body.dark-mode .confirm-prompt-buttons button:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%);
}

body.dark-mode .confirm-prompt-buttons button:active {
    border-color: #1a1a1a #555 #555 #1a1a1a;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.4), inset -1px -1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .confirm-prompt-buttons button:hover {
    background: linear-gradient(180deg, #555 0%, #444 50%, #444 50%, #333 100%);
}

body.dark-mode .confirm-prompt-buttons button:active {
    background: linear-gradient(180deg, #333 0%, #222 50%, #222 50%, #111 100%);
}

/* Vendor Config Export/Import Section */
.vendor-config-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #ddd;
}

.vendor-config-panel {
    margin-bottom: 24px;
    padding: 16px;
    background: #ffffff;
    border-radius: 0;
}

.vendor-config-panel:last-child {
    margin-bottom: 0;
}

.vendor-config-panel h4 {
    color: #2c3e50;
}

.vendor-config-textarea {
    width: 100%;
    padding: 8px;
    font-family: monospace;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 0;
    resize: vertical;
    background: #fff;
    color: #000;
}

body.dark-mode .vendor-config-section {
    border-top-color: #555;
}

body.dark-mode .vendor-config-panel {
    background: #1a1a1a;
}

body.dark-mode .vendor-config-panel h4 {
    color: #e0e0e0;
}

body.dark-mode .vendor-config-textarea {
    background: #1a1a1a;
    border-color: #555;
    color: #e0e0e0;
}

/* Product Image Item Styles */
.product-image-item {
    display: flex;
    align-items: center;
    padding: 4px;
    background: #f9f9f9;
    border: 1px solid #ccc;
    border-color: #e0e0e0 #999 #999 #e0e0e0;
}

.product-image-item input[type="text"] {
    margin: 0;
    border: 1px solid #999;
    border-color: #808080 #ffffff #ffffff #808080;
}

.product-image-item button {
    min-width: 24px;
    height: 22px;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1;
}

.product-image-item button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body.dark-mode .product-image-item {
    background: #1a1a1a;
    border-color: #555 #333 #333 #555;
}

body.dark-mode .product-image-item input[type="text"] {
    background: #2d2d2d;
    border-color: #555 #333 #333 #555;
    color: #e0e0e0;
}

.product-image-item input[type="text"][readonly] {
    background: #d4d0c8;
    color: #666;
    cursor: default;
}

body.dark-mode .product-image-item input[type="text"][readonly] {
    background: #1a1a1a;
    color: #999;
}

/* Home Page Container Styles */
.home-page-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: auto;
    padding: 20px;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.home-page-container.hidden {
    display: none;
}

/* Single Column Layout */
.home-mosaic {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.home-section {
    width: 100%;
}

/* Section Windows - Match login container borders */
.section-window {
    margin-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

.section-title-bar {
    font-size: 12px;
    padding: 4px 6px;
}

.section-content {
    padding: 21px;
    min-height: 100px;
    flex: 1;
    color: #2c3e50;
}

.section-content h3,
.section-content h4 {
    color: #000;
}

/* Sponsors section content with scroll */
.sponsors-section .section-content {
    max-height: 480px;
    min-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 21px;
}

/* Custom scrollbar for sponsors section - hide buttons */
.sponsors-section .section-content::-webkit-scrollbar {
    width: 16px;
}

.sponsors-section .section-content::-webkit-scrollbar-track {
    background: #ECE9D8;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
}

.sponsors-section .section-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 50%, #d4d0c8 50%, #c0b8a8 100%);
    border: 1px solid;
    border-color: #fff #000 #000 #fff;
    box-shadow: inset -1px -1px 1px rgba(0,0,0,0.1), inset 1px 1px 1px rgba(255,255,255,0.9);
}

.sponsors-section .section-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #e8e8e8 0%, #c8c8c8 100%);
}

.sponsors-section .section-content::-webkit-scrollbar-button {
    display: none;
}

.sponsors-section .section-content {
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 #ECE9D8;
}

/* About Section */
.about-section {
    width: 100%;
}

/* Calendar Section */
.calendar-section {
    width: 100%;
}

/* Sponsors Section */
.sponsors-section {
    width: 100%;
    margin: 0;
}

/* Reviews carousel */
.reviews-content {
    padding: 0 !important;
    min-height: 160px !important;
    display: flex !important;
    flex-direction: column !important;
}

.reviews-carousel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 8px;
    flex: 1;
}

.review-footer {
    margin-top: auto;
}

.review-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 8px 0 16px;
}

.review-progress-bar {
    height: 3px;
    background: rgba(0,0,0,0.1);
    width: 100%;
    overflow: hidden;
}

.review-progress-fill {
    height: 100%;
    width: 0%;
    background: #ff8800;
}

.review-body {
    flex: 1;
    text-align: center;
    min-width: 0;
    padding: 16px 12px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.review-text {
    font-size: 16px;
    font-style: italic;
    color: #2c3e50;
    line-height: 1.6;
    margin: 0;
}

.review-author {
    font-size: 12px;
    font-weight: bold;
    color: #ff8800;
    margin-top: 6px;
    letter-spacing: 0.03em;
}

.review-author::before {
    content: '— ';
    opacity: 0.7;
}

.review-author[data-npub]:not([data-npub=""])::before {
    content: none;
}

.review-author-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.review-author-link:hover {
    text-decoration: underline;
}

.review-author-avatar {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    vertical-align: middle;
}

.review-dot {
    width: 7px;
    height: 7px;
    background: #c0bdb0;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    display: inline-block;
}

.review-dot.active {
    background: #ff8800;
}

.review-nav-btn {
    background: #ECE9D8;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    color: #333;
    font-size: 28px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.8);
}

.review-nav-btn:hover {
    background: #fff8e8;
    color: #ff8800;
}

.review-nav-btn:active {
    border-color: #808080 #fff #fff #808080;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.15);
}

.review-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

body.dark-mode .review-text { color: #ccc; }
body.dark-mode .review-quote-mark { color: #ff9922; opacity: 0.5; }
body.dark-mode .review-nav-btn {
    background: #333;
    border-color: #555 #222 #222 #555;
    color: #ccc;
}
body.dark-mode .review-nav-btn:hover { color: #ffaa44; background: #444; }
body.dark-mode .review-dot { background: #555; }
body.dark-mode .review-dot.active { background: #ff8800; }

/* Vendor Booth Section */
.vendor-booth-section {
    width: 100%;
}

.vendor-booth-list {
    font-size: 12px;
}

/* Vendor cards — used for the current Reserved Vendors list and inside each Past Event card */
.vendor-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

/* Desktop: 2 columns (never more, even on wide screens) */
@media (min-width: 480px) {
    .vendor-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vendor-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    padding: 8px;
    min-height: 44px;
    box-sizing: border-box;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.8);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.1s;
}

.vendor-card[href]:hover {
    background: #d4d0c8;
    border-color: #808080 #ffffff #ffffff #808080;
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.vendor-card[href]:active {
    transform: translate(0, 0);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

.vendor-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

.vendor-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.vendor-avatar-placeholder {
    background: #d4d0c8;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px solid #bbb;
    box-sizing: border-box;
}

/* Avatars-only vendor list — used inside each Past Event card, where the store name
   and card chrome are dropped in favor of a compact row of avatars. */
.vendor-avatar-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vendor-avatar-link {
    display: block;
    cursor: pointer;
}

.vendor-avatar-wrap-compact {
    --avatar-size: clamp(36px, 6vw, 52px);
    width: var(--avatar-size);
    height: var(--avatar-size);
}

.vendor-avatar-wrap-compact .vendor-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
}

.vendor-avatar-wrap-compact .vendor-avatar-placeholder {
    font-size: calc(var(--avatar-size) * 0.4);
}

.vendor-streak-badge {
    position: absolute;
    top: -4px;
    right: -10px;
    background: #666;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 8px;
    border: 1px solid #fff;
    white-space: nowrap;
}

.vendor-card-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.vendor-card-name {
    font-size: 12px;
    font-weight: bold;
    color: #000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
}

body.dark-mode .vendor-card {
    background: #1a1a1a;
    border-color: #666 #333 #333 #666;
}

body.dark-mode .vendor-card[href]:hover {
    background: #333;
    border-color: #333 #666 #666 #333;
}

body.dark-mode .vendor-avatar-placeholder {
    background: #333;
    color: #999;
    border-color: #555;
}

body.dark-mode .vendor-card-name {
    color: #e0e0e0;
}

.tier-info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tier-info-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #ffffe1;
    color: #000;
    border: 1px solid #808080;
    padding: 3px 6px;
    font-size: 11px;
    font-family: Tahoma, sans-serif;
    font-weight: normal;
    white-space: normal;
    width: max-content;
    max-width: 140px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.tier-info-icon:hover::after {
    opacity: 1;
}

/* Pin first card tooltip to the left so it doesn't clip */
#vendorBoothPricing > div:first-child .tier-info-icon::after {
    left: 0;
    transform: none;
}

/* Pin last card tooltip to the right so it doesn't clip */
#vendorBoothPricing > div:last-child .tier-info-icon::after {
    left: auto;
    right: 0;
    transform: none;
}

.sponsors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

/* Tablet: 4 columns */
@media (min-width: 480px) {
    .sponsors-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Desktop: 5 columns */
@media (min-width: 768px) {
    .sponsors-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.sponsor-icon-card {
    background: #fff;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    padding: 0;
    cursor: pointer;
    text-align: center;
    transition: all 0.1s;
    text-decoration: none;
    display: block;
    overflow: hidden;
}

.sponsor-icon-card:hover {
    background: #d4d0c8;
    border-color: #808080 #ffffff #ffffff #808080;
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.sponsor-icon-card:active {
    transform: translate(0, 0);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

.sponsor-icon {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin: 0;
}

.sponsor-name {
    font-size: 12px;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sponsors-footer {
    padding: 0 21px 21px 21px;
    border-top: 1px solid #ccc;
    background: #ECE9D8;
}

.view-all-sponsors-link {
    display: inline-block;
    color: #0054E3;
    text-decoration: none;
    font-size: 12px;
    margin-top: 8px;
    padding: 4px 8px;
}

.view-all-sponsors-link:hover {
    text-decoration: underline;
}

/* Calendar Section - already defined above */

.home-events-list {
    font-size: 12px;
}

.home-event-item {
    padding: 8px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
}

.home-event-item:last-child {
    margin-bottom: 0;
}

.home-event-item h4 {
    margin: 0 0 4px 0;
    font-size: 12px;
    color: #000;
    font-weight: bold;
}

.home-event-date,
.home-event-time {
    font-size: 12px;
    color: #666;
    margin: 2px 0;
}

.no-events-message {
    color: #666;
    font-size: 12px;
    text-align: center;
    padding: 8px;
    font-style: italic;
}

.loading-dots span {
    opacity: 0;
    animation: loadingDotFade 1.4s infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loadingDotFade {
    0%, 80%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

/* Past Events Section */
.past-events-section .section-content {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.past-events-section .section-content::-webkit-scrollbar {
    width: 16px;
}

.past-events-section .section-content::-webkit-scrollbar-track {
    background: #ECE9D8;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
}

.past-events-section .section-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 50%, #d4d0c8 50%, #c0b8a8 100%);
    border: 1px solid;
    border-color: #fff #000 #000 #fff;
    box-shadow: inset -1px -1px 1px rgba(0,0,0,0.1), inset 1px 1px 1px rgba(255,255,255,0.9);
}

.past-events-section .section-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #e8e8e8 0%, #c8c8c8 100%);
}

.past-events-section .section-content::-webkit-scrollbar-button {
    display: none;
}

.past-events-section .section-content {
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 #ECE9D8;
}

.past-events-list {
    font-size: 12px;
}

.past-event-card {
    padding: 8px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
}

.past-event-card:last-child {
    margin-bottom: 0;
}

.past-event-card h4 {
    margin: 0 0 4px 0;
    font-size: 12px;
    color: #000;
    font-weight: bold;
}

.past-event-date {
    font-size: 12px;
    color: #666;
    margin: 2px 0 8px 0;
}

.past-event-card .vendor-avatar-list {
    margin-top: 4px;
}

/* ===== Home Page Dark Mode ===== */
body.dark-mode .section-window {
    background: #2d2d2d;
    border-color: #666 #333 #333 #666;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .section-window .xp-content {
    background: #2d2d2d;
}

body.dark-mode .section-window .orange-title-bar {
    background: linear-gradient(180deg, #444 0%, #333 50%, #333 50%, #222 100%) !important;
    border-bottom: 1px solid #555 !important;
}

body.dark-mode .section-content {
    color: #e0e0e0;
}

body.dark-mode .section-content h3,
body.dark-mode .section-content h4 {
    color: #e0e0e0;
}

body.dark-mode .section-content p,
body.dark-mode .section-content li {
    color: #ccc;
}

body.dark-mode .home-event-item {
    background: #1a1a1a;
    border-color: #666 #333 #333 #666;
}

body.dark-mode .home-event-item h4 {
    color: #ffaa44;
}

body.dark-mode .home-event-date,
body.dark-mode .home-event-time {
    color: #999;
}

body.dark-mode .no-events-message {
    color: #999;
}

body.dark-mode .past-event-card {
    background: #1a1a1a;
    border-color: #666 #333 #333 #666;
}

body.dark-mode .past-event-card h4 {
    color: #ffaa44;
}

body.dark-mode .past-event-date {
    color: #999;
}

body.dark-mode .login-container-grid {
    background: #2d2d2d;
    border-color: #666 #333 #333 #666;
}

body.dark-mode .login-container-grid h1 {
    background: linear-gradient(180deg, #444 0%, #333 50%, #333 50%, #222 100%) !important;
    border-bottom: 1px solid #555 !important;
}

body.dark-mode .login-container-grid p {
    color: #e0e0e0;
}

body.dark-mode .login-container-grid .login-form label {
    color: #e0e0e0 !important;
}

body.dark-mode .login-container-grid .login-form input {
    background: #1a1a1a;
    color: #e0e0e0;
    border-color: #555;
}

body.dark-mode .login-container-grid .login-form .enter-btn {
    background: linear-gradient(180deg, #444 0%, #333 100%);
    color: #ffffff;
    border-color: #666 #333 #333 #666;
}

body.dark-mode .login-container-grid .login-form .enter-btn:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%);
}

body.dark-mode .sponsor-icon-card {
    background: #2d2d2d;
    border-color: #666 #333 #333 #666;
}

body.dark-mode .sponsor-icon-card:hover {
    background: #3a3a3a;
    border-color: #333 #666 #666 #333;
}

body.dark-mode .sponsor-name {
    color: #e0e0e0;
}

body.dark-mode .sponsors-footer {
    background: #2d2d2d;
    border-top-color: #555;
}

body.dark-mode .view-all-sponsors-link {
    color: #6ba4ff;
}

body.dark-mode .sponsors-section .section-content::-webkit-scrollbar-track {
    background: #2d2d2d;
    border-color: #333 #666 #666 #333;
}

body.dark-mode .sponsors-section .section-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #555 0%, #444 100%);
    border-color: #666 #333 #333 #666;
}

body.dark-mode .sponsors-section .section-content {
    scrollbar-color: #444 #2d2d2d;
}

body.dark-mode .past-events-section .section-content::-webkit-scrollbar-track {
    background: #2d2d2d;
    border-color: #333 #666 #666 #333;
}

body.dark-mode .past-events-section .section-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #555 0%, #444 100%);
    border-color: #666 #333 #333 #666;
}

body.dark-mode .past-events-section .section-content {
    scrollbar-color: #444 #2d2d2d;
}

/* Login Section in Grid */
.login-section-grid {
    width: 100%;
    margin: 0;
}

.login-container-grid {
    display: flex;
    flex-direction: column;
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    padding: 0;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 100%;
    position: relative;
    margin: 0;
}

.login-container-grid h1 {
    background: linear-gradient(180deg, #ffaa44 0%, #ff8800 50%, #ff8800 50%, #ff9900 100%) !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5) !important;
    border-bottom: 1px solid #808080 !important;
    position: relative !important;
    text-align: left !important;
    min-height: 20px !important;
    width: 100% !important;
    display: block !important;
}

.login-container-grid p {
    color: #2c3e50;
    margin: 16px 12px;
    font-size: 12px;
    text-shadow: none;
}

.login-container-grid .login-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 21px;
    margin: 0;
}

.login-container-grid .login-form label {
    color: #000;
}

/* ===== Emoji Picker ===== */
#emojiPickerBtn {
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 50%, #d4d0c8 50%, #c0b8a8 100%);
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2), inset 1px 1px 0 rgba(255,255,255,0.8);
    cursor: pointer;
    padding: 4px 10px;
    font-size: 14px;
    color: #000;
    flex-shrink: 0;
}

#emojiPickerBtn:hover {
    background: linear-gradient(180deg, #f0ece0 0%, #e0dcd0 50%, #e0dcd0 50%, #d0c8b8 100%);
}

#emojiPickerBtn:active {
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2), inset -1px -1px 0 rgba(255,255,255,0.8);
}

.emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 280px;
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: -2px;
}

.emoji-picker.hidden {
    display: none;
}

.emoji-picker-header {
    padding: 6px;
    border-bottom: 1px solid #ccc;
}

.emoji-search {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    border-radius: 0;
    font-size: 12px;
    box-sizing: border-box;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
}

.emoji-category-tabs {
    display: flex;
    border-bottom: 1px solid #ccc;
    background: #d4d0c8;
    overflow-x: auto;
    scrollbar-width: none;
}

.emoji-category-tabs::-webkit-scrollbar {
    display: none;
}

.emoji-category-tab {
    padding: 4px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.6;
    flex-shrink: 0;
    transition: opacity 0.15s, background 0.15s;
}

.emoji-category-tab:hover {
    opacity: 1;
    background: #d8d8d8;
}

.emoji-category-tab.active {
    opacity: 1;
    background: #fff;
    border-bottom: 2px solid #ff9900;
}

.emoji-grid-container {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.emoji-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 0;
    border: none;
    background: transparent;
    transition: background 0.1s;
    padding: 0;
}

.emoji-grid-item:hover {
    background: #ddd;
}

.emoji-category-label {
    font-size: 12px;
    font-weight: bold;
    color: #666;
    padding: 4px 2px 2px;
    margin-top: 4px;
}

/* Emoji Picker Dark Mode */
body.dark-mode #emojiPickerBtn:hover {
    color: #ff9900;
}

body.dark-mode .emoji-picker {
    background: #2a2a2a;
    border-color: #444;
}

body.dark-mode .emoji-search {
    background: #1a1a1a;
    color: #eee;
    border-color: #444;
}

body.dark-mode .emoji-category-tabs {
    background: #333;
    border-color: #444;
}

body.dark-mode .emoji-category-tab:hover {
    background: #444;
}

body.dark-mode .emoji-category-tab.active {
    background: #2a2a2a;
}

body.dark-mode .emoji-grid-item:hover {
    background: #444;
}

body.dark-mode .emoji-category-label {
    color: #999;
}

body.dark-mode .emoji-picker-header {
    border-color: #444;
}

/* ===== GIF Picker ===== */
#gifPickerBtn {
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 50%, #d4d0c8 50%, #c0b8a8 100%);
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2), inset 1px 1px 0 rgba(255,255,255,0.8);
    cursor: pointer;
    padding: 4px 10px;
    font-weight: bold;
    font-size: 12px;
    color: #000;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
}

#gifPickerBtn:hover {
    background: linear-gradient(180deg, #f0ece0 0%, #e0dcd0 50%, #e0dcd0 50%, #d0c8b8 100%);
}

#gifPickerBtn:active {
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2), inset -1px -1px 0 rgba(255,255,255,0.8);
}

.gif-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 320px;
    background: #ECE9D8;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: -2px;
}

.gif-picker.hidden {
    display: none;
}

.gif-picker-header {
    padding: 6px;
    border-bottom: 1px solid #ccc;
}

.gif-search {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    border-radius: 0;
    font-size: 12px;
    box-sizing: border-box;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
}

.gif-grid-container {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.gif-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.gif-grid-item {
    cursor: pointer;
    border-radius: 0;
    overflow: hidden;
    background: #ddd;
    aspect-ratio: 16 / 10;
    transition: transform 0.1s, box-shadow 0.1s;
}

.gif-grid-item:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.gif-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gif-attribution {
    padding: 3px 6px;
    font-size: 12px;
    color: #999;
    text-align: center;
    border-top: 1px solid #ccc;
    background: #d4d0c8;
    flex-shrink: 0;
}

.gif-loading {
    text-align: center;
    color: #999;
    padding: 40px 20px;
    font-size: 12px;
}

/* GIF in chat messages */
.chat-gif {
    max-width: 200px;
    max-height: 200px;
    border-radius: 0;
    display: block;
}

/* GIF Picker Dark Mode */
body.dark-mode #gifPickerBtn:hover {
    color: #ff9900;
}

body.dark-mode .gif-picker {
    background: #2a2a2a;
    border-color: #444;
}

body.dark-mode .gif-search {
    background: #1a1a1a;
    color: #eee;
    border-color: #444;
}

body.dark-mode .gif-picker-header {
    border-color: #444;
}

body.dark-mode .gif-grid-item {
    background: #333;
}

body.dark-mode .gif-attribution {
    background: #333;
    border-color: #444;
    color: #777;
}

/* ── Dark mode: modal-inset text color ── */
body.dark-mode .modal-inset {
    color: #ccc;
}

/* ── User Guide modal ── */
.user-guide-section-header {
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 4px;
    padding-bottom: 3px;
    border-bottom: 1px solid #d0ccc0;
}
.user-guide-table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
}
.user-guide-table tr + tr td {
    border-top: 1px solid #ece9d8;
}
.user-guide-table td {
    padding: 4px 10px 4px 0;
    vertical-align: top;
}
.user-guide-key {
    font-weight: bold;
    white-space: nowrap;
    width: 1%;
    padding-right: 16px !important;
}
.user-guide-context {
    font-weight: normal;
    color: #888;
}
body.dark-mode .user-guide-section-header {
    color: #777;
    border-bottom-color: #3a3a3a;
}
body.dark-mode .user-guide-table tr + tr td {
    border-top-color: #2e2e2e;
}
body.dark-mode .user-guide-context {
    color: #666;
}

/* ── Dark mode: About / Info modal ── */
body.dark-mode #infoModalOverlay .interaction-panel,
body.dark-mode #userGuideModalOverlay .interaction-panel {
    color: #ccc;
}
body.dark-mode #infoModalOverlay p,
body.dark-mode #userGuideModalOverlay strong,
body.dark-mode #userGuideModalOverlay td {
    color: #ccc;
}

/* ── Dark mode: Wallet modal ── */
body.dark-mode #walletModalOverlay .interaction-panel {
    color: #ccc;
}
body.dark-mode #walletModalOverlay label,
body.dark-mode #walletModalOverlay span {
    color: #ccc;
}
body.dark-mode #defaultZapAmount {
    background: #1e1e1e;
    color: #ccc;
    border-color: #555;
}

/* ── Dark mode: Customize Avatar modal ── */
body.dark-mode #avatarCustomizeStatus {
    color: #aaa;
}
body.dark-mode #avatarUnequipBar {
    background: #2a2a2a;
    border-color: #444;
}
body.dark-mode #avatarEquippedSummary {
    color: #ccc;
}
body.dark-mode #avatarUnequipBtn {
    background: #3a3a3a;
    color: #e0e0e0;
    border-color: #555 #222 #222 #555;
}
body.dark-mode #avatarCustomizePaymentView {
    background: #1e1e1e;
    border-color: #444;
    color: #ccc;
}
body.dark-mode #avatarPaymentAmount {
    color: #ccc;
}
body.dark-mode #avatarPaymentQRCode {
    background: #ffffff;
    border-color: #444;
}
body.dark-mode #avatarGenerateQRBtn,
body.dark-mode #avatarCancelPaymentBtn {
    background: #3a3a3a;
    color: #e0e0e0;
    border-color: #555 #222 #222 #555;
}
body.dark-mode #avatarItemsList {
    border-color: #555 #222 #222 #555;
}
body.dark-mode #avatarItemsList div {
    color: #aaa;
}

/* Responsive Design */
@media (max-width: 479px) {
    .home-page-container {
        padding: 21px;
        width: 100%;
    }

    .home-mosaic {
        max-width: 100%;
        gap: 12px;
    }


    .sponsors-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .sponsors-section .section-content {
        max-height: 380px;
        min-height: 380px;
    }

    .section-content {
        padding: 10px;
    }
}