/* DRAIWN – standardized header & footer (GenOnDemand product-site template) */
:root { --footer-strip-height: 70px; --header-height: 56px; }
@media (max-width: 768px) { :root { --footer-strip-height: 90px; --header-height: 48px; } }

/* Header – same as nftcardgame / other product hubs (finished look) */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 56px;
    padding: 15px 30px;
    background: #ffffff;
    border-bottom: 2px solid #000000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}
.header-right { display: flex; align-items: center; }
.header-title {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    letter-spacing: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.header-title .header-title-text { white-space: nowrap; }
@media (min-width: 769px) {
    .header-title { border: 2px solid #000; border-radius: 8px; padding: 8px 12px; }
    .header-title:hover { background: #f0f0f0; }
}
.header-title .icon { color: #00f5ff; filter: drop-shadow(0 0 3px rgba(0,245,255,0.5)); }
.header-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 600;
}
/* Nav and Account: never default link style – match nftcardgame (black, bordered, no underline) */
.header-nav a,
.header-nav a:link,
.header-nav a:visited,
.gnd-header .header-nav a,
.gnd-header .header-nav a:link,
.gnd-header .header-nav a:visited {
    color: #000 !important;
    text-decoration: none !important;
    padding: 6px 12px;
    border-radius: 6px;
    border-bottom: 2px solid #000;
}
.header-nav a { transition: background 0.2s, color 0.2s, border-color 0.2s, font-weight 0.2s; }
.header-nav a:hover { background: #000; color: #fff; border-bottom-color: #000; font-weight: 700; text-decoration: underline; }
.header-nav a.active { background: #000; color: #fff; }
.header-account-wrap { display: flex; align-items: center; }
.header-account-wrap .account-btn,
.header-account-wrap .account-btn:link,
.header-account-wrap .account-btn:visited,
.gnd-header .account-btn,
.gnd-header .account-btn:link,
.gnd-header .account-btn:visited {
    background: transparent !important;
    border: 2px solid #000 !important;
    color: #000 !important;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    font-family: inherit;
}
.header-account-wrap .account-btn:hover { background: #000; color: #fff; }
.header-title:link,
.header-title:visited { color: #000 !important; text-decoration: none !important; }
.header-mute-btn {
    width: 40px; height: 40px; border-radius: 8px; border: 2px solid #000; background: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;
}
.header-mute-btn { transition: background 0.2s, color 0.2s, border-color 0.2s; }
.header-mute-btn:hover { background: #000; color: #fff; border-color: #000; }
.header-mute-btn .mute-icon-muted { display: none; }
.header-mute-btn.is-muted .mute-icon-unmuted { display: none; }
.header-mute-btn.is-muted .mute-icon-muted { display: inline-flex !important; }
.header-theme-btn {
    width: 40px; height: 40px; border-radius: 8px; border: 2px solid #000; background: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;
}
.header-theme-btn:hover { background: #eee; }
.header-theme-btn .theme-icon-night { display: none; }
html[data-theme="night"] .header-theme-btn .theme-icon-day { display: none; }
html[data-theme="night"] .header-theme-btn .theme-icon-night { display: inline-flex !important; }

/* Night mode – full inverse: day = black border + white fill + black text → night = white border + black fill + white text */
html[data-theme="night"] { --gnd-bg: #000000; --gnd-text: #ffffff; --gnd-border: #ffffff; --gnd-header-bg: #000000; --gnd-footer-bg: #000000; --gnd-card-bg: #0a0a0a; --gnd-muted: #aaa; --gnd-hover: #222; }
html[data-theme="night"] .header { background: var(--gnd-header-bg) !important; border-color: var(--gnd-border) !important; box-shadow: 0 2px 10px rgba(255,255,255,0.08); }
html[data-theme="night"] .header .header-title { color: var(--gnd-text) !important; border-color: var(--gnd-border) !important; }
html[data-theme="night"] .header .header-title:hover { background: var(--gnd-hover) !important; }
html[data-theme="night"] .header-nav a, html[data-theme="night"] .account-btn { color: var(--gnd-text) !important; }
html[data-theme="night"] .header-nav a { border-bottom-color: var(--gnd-border) !important; }
html[data-theme="night"] .header-nav a:hover { background: var(--gnd-text) !important; color: var(--gnd-bg) !important; border-bottom-color: var(--gnd-text) !important; font-weight: 700 !important; }
html[data-theme="night"] .header-mute-btn, html[data-theme="night"] .header-theme-btn { background: #000 !important; border: 2px solid #fff !important; color: var(--gnd-text) !important; }
html[data-theme="night"] .header-mute-btn:hover, html[data-theme="night"] .header-theme-btn:hover { background: var(--gnd-text) !important; border-color: var(--gnd-text) !important; color: var(--gnd-bg) !important; }
html[data-theme="night"] .header-account-wrap .account-btn { border-color: var(--gnd-border) !important; color: var(--gnd-text) !important; }
html[data-theme="night"] .header-account-wrap .account-btn:hover { background: var(--gnd-text) !important; color: var(--gnd-bg) !important; border-color: var(--gnd-text) !important; font-weight: 700 !important; }
html[data-theme="night"] .bottom-bar, html[data-theme="night"] .footer-row-status, html[data-theme="night"] .footer-row-bottom { background: var(--gnd-footer-bg) !important; border-color: var(--gnd-border) !important; color: var(--gnd-text) !important; box-shadow: 0 -2px 10px rgba(255,255,255,0.08); }
html[data-theme="night"] .bottom-bar { border-top: 2px solid #fff !important; }
html[data-theme="night"] .footer-datetime-box span, html[data-theme="night"] .footer-credit-box, html[data-theme="night"] .footer-credit-box a { color: var(--gnd-text) !important; }
html[data-theme="night"] .footer-calendar-btn, html[data-theme="night"] .footer-folder-btn, html[data-theme="night"] .footer-map-btn, html[data-theme="night"] .footer-account-btn { background: #000 !important; border: 2px solid #fff !important; color: var(--gnd-text) !important; }
html[data-theme="night"] .footer-calendar-btn:hover, html[data-theme="night"] .footer-folder-btn:hover, html[data-theme="night"] .footer-map-btn:hover { background: var(--gnd-text) !important; border-color: var(--gnd-text) !important; color: var(--gnd-bg) !important; font-weight: 700 !important; }
html[data-theme="night"] .footer-account-btn:hover { background: var(--gnd-text) !important; color: var(--gnd-bg) !important; border-color: var(--gnd-text) !important; font-weight: 700 !important; }

/* Mobile header */
@media (max-width: 768px) {
    .header { padding: 6px 10px; flex-wrap: wrap; gap: 6px; min-height: 0; overflow: visible; }
    .header-left { flex: 1 1 auto; min-width: 0; gap: 6px; }
    .header-right { flex: 0 0 auto; min-width: 0; }
    .header-title { font-size: 14px; letter-spacing: 0.5px; }
    .header-nav { font-size: 11px; }
    .header-nav a { padding: 4px 6px; }
    /* Account stays in header strip on mobile (no position: absolute below) */
    .footer-account-mobile { display: none !important; }
}
@media (max-width: 480px) {
    .header { padding: 4px 8px; }
    .header-title { font-size: 12px; }
    .header-title .header-title-text { display: none; }
    .header-nav { font-size: 10px; }
    .header-nav a { padding: 4px 6px; }
}

/* Footer – 2 rows: status, then datetime + calendar + folder + map + credit */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 2px solid #000000;
    padding: 8px 20px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: #666666;
    z-index: 1002;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.footer-row-status { text-align: center; color: #000; font-weight: 500; }
.footer-row-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-datetime-box {
    flex: 1;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-datetime-box.footer-left { flex: 1; min-width: 0; }
.footer-datetime-box span { color: #000000; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.footer-calendar-btn, .footer-folder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
    border: 2px solid #000;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    line-height: 1;
    transition: background 0.2s, color 0.2s, border-color 0.2s, font-weight 0.2s;
}
.footer-calendar-btn:hover, .footer-folder-btn:hover { background: #fff; color: #000; border-color: #000; font-weight: 700; }
.footer-map-btn {
    background: #000;
    color: #fff;
    border: 2px solid #000;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s, color 0.2s, border-color 0.2s, font-weight 0.2s;
}
.footer-map-btn:hover { background: #fff; color: #000; border-color: #000; font-weight: 700; }
.footer-credit-box.footer-right {
    flex: 1;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    color: #666666;
}
.footer-credit-box, .footer-product-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.footer-credit-box a { color: #000000; font-weight: 700; text-decoration: none; transition: all 0.3s; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.footer-credit-box a:hover { color: #00f5ff; }
@media (max-width: 768px) {
    .footer-datetime-full { display: none !important; }
    .footer-datetime-mobile { display: inline !important; }
}
@media (min-width: 769px) {
    .footer-datetime-mobile { display: none !important; }
}
.footer-account-mobile { display: none; }
.footer-account-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
    border: 2px solid #000;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    font-family: inherit;
}
.footer-account-btn:hover { background: #fff; color: #000; border-color: #000; font-weight: 700; }
@media (max-width: 768px) {
    .footer-account-mobile { display: flex !important; align-items: center; }
}

/* Hide Push/Pull console-style line under Welcome back (not for UI) */
.push-pull-box,
#loginFlowPushPull,
#signupFlowPushPull { display: none !important; }

/* Login/hub modals: clear font, night = white border */
.login-flow-box,
.hub-login-flow-box,
.login-prompt-box {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
/* Night mode (data-theme="night"): popups white border; buttons black infill – for all product sites */
html[data-theme="night"] .login-flow-box,
html[data-theme="night"] .hub-login-flow-box,
html[data-theme="night"] .login-prompt-box {
    border: 2px solid #fff !important;
}
html[data-theme="night"] .mini-hub-panel,
html[data-theme="night"] .account-overlay-box {
    border: 2px solid #fff !important;
}
html[data-theme="night"] .login-flow-box .btn-primary,
html[data-theme="night"] .login-flow-box .btn-secondary,
html[data-theme="night"] .hub-login-flow-box button:not(#hubLoginFlowClose) {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}
/* "What you get" highlight: light background + black text in night mode (all product sites) */
html[data-theme="night"] .hub-login-flow-box .flow-desc-highlight,
html[data-theme="night"] .hub-login-flow-box p.flow-desc-highlight,
html[data-theme="night"] .hub-login-flow-box div.flow-desc-highlight,
html[data-theme="night"] .login-prompt-box .flow-desc-highlight,
html[data-theme="night"] .login-prompt-box p.flow-desc-highlight,
html[data-theme="night"] .login-prompt-box div.flow-desc-highlight {
    color: #000 !important;
    background: #f0f8ff !important;
    border: 1px solid #fff !important;
}
html[data-theme="night"] .hub-login-flow-box .flow-desc-highlight *,
html[data-theme="night"] .login-prompt-box .flow-desc-highlight * {
    color: #000 !important;
}