@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&display=swap");
/* ============================================================
   LIVE CHAT — NEO-BRUTALISM THEME (shared override layer)
   与主站 trading 项目的 brutal-theme.css 同一套设计 token。
   在每个页面最后加载，覆盖内联的深色/霓虹样式与厂商 dark_mode 变量。
   规则：纸色底、3px 墨线、实心偏移阴影（无模糊）、高饱和色块、
         粗黑标题、按下去会「压扁」阴影的按钮。
   ============================================================ */

:root {
    /* ---- 与主站完全相同的 token ---- */
    --b-bg:        #F5F0E6;
    --b-bg-2:      #EDE5D3;
    --b-surface:   #FFFFFF;
    --b-surface-2: #FFF6DB;
    --b-sunken:    #FBF8F1;

    --b-ink:       #0A0A0A;
    --b-body:      #1F1F1F;
    --b-muted:     #4A4744;
    --b-faint:     #6E6A63;
    --b-line:      #0A0A0A;
    --b-shade:     #0A0A0A;

    --b-yellow:    #FFD23F;
    --b-blue:      #4D8DFF;
    --b-teal:      #2EE6C5;
    --b-pink:      #FF8FC7;
    --b-lime:      #B8F14A;
    --b-orange:    #FF9F43;
    --b-purple:    #A68BFF;

    --b-green:     #22C55E;
    --b-green-d:   #0B7A3E;
    --b-red:       #FF5A5F;
    --b-red-d:     #C8102E;
    --b-link:      #1447C9;

    --b-border:    3px solid var(--b-line);
    --b-border-2:  2px solid var(--b-line);
    --b-shadow-xs: 2px 2px 0 var(--b-shade);
    --b-shadow-sm: 4px 4px 0 var(--b-shade);
    --b-shadow:    6px 6px 0 var(--b-shade);
    --b-shadow-lg: 9px 9px 0 var(--b-shade);
    --b-r-sm: 6px;
    --b-r:    10px;
    --b-r-lg: 14px;

    --b-font:    "Space Grotesk", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
    --b-display: "Archivo Black", "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
    --b-snap:    cubic-bezier(.2, .9, .3, 1.2);

    /* ---- 覆盖 chat.html / guest-entry.html 内联的赛博变量 ---- */
    --bg-deep:      var(--b-bg);
    --sidebar-bg:   var(--b-surface);
    --glass-border: var(--b-line);
    --neon-blue:    var(--b-link);
    --neon-purple:  #6A3DF0;
    --neon-green:   var(--b-green-d);

    /* ---- 覆盖 dark_mode_css_variables.css（entry.html 用） ----
       全部指向 token，深色模式只改 token 就能跟着翻 */
    --landing-page-primary-bg-color: var(--b-bg);
    --landing-page-secondary-bg-color: var(--b-surface);
    --landing-page-tertiary-bg-color: var(--b-sunken);
    --landing-page-quaternary-bg-color: var(--b-blue);
    --landing-page-quinary-bg-color: var(--b-yellow);
    --landing-page-senary-bg-color: var(--b-bg);
    --landing-page-septenary-bg-color: var(--b-blue);
    --landing-page-primary-text-color: var(--b-ink);
    --landing-page-secondary-text-color: var(--b-body);
    --landing-page-tertiary-text-color: var(--b-body);
    --landing-page-quaternary-text-color: #0A0A0A;
    --landing-page-quinary-text-color: var(--b-link);
    --landing-page-senary-text-color: var(--b-link);
    --landing-page-septenary-text-color: var(--b-faint);
    --landing-page-octonary-text-color: var(--b-faint);
    --landing-page-primary-border-color: var(--b-line);
    --landing-page-secondary-border-color: var(--b-line);

    --entry-page-primary-bg-color: var(--b-bg);
    --entry-page-secondary-bg-color: var(--b-surface);
    --entry-page-tertiary-bg-color: var(--b-teal);
    --entry-page-quaternary-bg-color: var(--b-teal);
    --entry-page-quinary-bg-color: var(--b-sunken);
    --entry-page-senary-bg-color: var(--b-blue);
    --entry-page-primary-text-color: var(--b-ink);
    --entry-page-secondary-text-color: var(--b-ink);
    --entry-page-tertiary-text-color: var(--b-body);
    --entry-page-quaternary-text-color: #0A0A0A;
    --entry-page-quinary-text-color: var(--b-link);
    --entry-page-senary-text-color: var(--b-faint);
    --entry-page-primary-border-color: var(--b-line);
    --entry-page-secondary-border-color: var(--b-line);
    --entry-page-tertiary-border-color: var(--b-line);
    --entry-page-quaternary-border-color: var(--b-line);
}

/* =========================================================================
   DARK MODE —— html[data-theme="dark"]，与主站同一套深色 token：
   墨线翻成奶油色，色块保持高饱和、黑字。
   ========================================================================= */
:root[data-theme="dark"] {
    --b-bg:        #131316;
    --b-bg-2:      #1A1A1F;
    --b-surface:   #1F2026;
    --b-surface-2: #2A2B33;
    --b-sunken:    #17171B;

    --b-ink:       #F5F0E6;
    --b-body:      #E4DED0;
    --b-muted:     #B8B1A3;
    --b-faint:     #938D81;
    --b-line:      #F5F0E6;
    --b-shade:     #F5F0E6;

    --b-green-d:   #4ADE80;
    --b-red-d:     #FF7A7F;
    --b-link:      #8FB4FF;

    --neon-purple: #C3B1FF;
}

/* ============================================================
   1. 全局底
   ============================================================ */
html { background-color: var(--b-bg) !important; }
body {
    background-color: var(--b-bg) !important;
    background-image: radial-gradient(color-mix(in srgb, var(--b-ink) 13%, transparent) 1.2px, transparent 1.3px) !important;
    background-size: 22px 22px !important;
    color: var(--b-ink) !important;
    font-family: var(--b-font) !important;
    -webkit-font-smoothing: antialiased;
}
*, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
}
a { color: var(--b-link); }
a:hover { color: var(--b-ink); }
::selection { background: var(--b-yellow); color: #0A0A0A; }

::-webkit-scrollbar { width: 12px !important; height: 12px !important; }
::-webkit-scrollbar-track { background: var(--b-bg) !important; border-left: 2px solid var(--b-line); }
::-webkit-scrollbar-thumb { background: var(--b-ink) !important; border: 3px solid var(--b-bg) !important; border-radius: 0 !important; }
::-webkit-scrollbar-thumb:hover { background: var(--b-blue) !important; }

/* ============================================================
   2. chat.html — 侧栏 / 顶栏（与主站侧栏一致）
   ============================================================ */
.sidebar-wrapper-fixed {
    background: var(--b-surface) !important;
    border-right: var(--b-border) !important;
    box-shadow: none !important;
}
/* 1200px 以下（手机 + iPad）侧栏是抽屉，与主站一致：☰ 打开、✕ 关闭。
   ✕ 是 d-xl-none，原本 992–1199 之间看得到却关不掉。 */
@media (max-width: 1199.98px) {
    .sidebar-wrapper-fixed { transform: translateX(-100%); z-index: 1100 !important; transition: transform .2s var(--b-snap) !important; }
    .sidebar-wrapper-fixed.active { transform: translateX(0); box-shadow: 8px 0 0 var(--b-shade), 0 0 0 100vw rgba(10,10,10,.55) !important; }
    .main-content-wrapper { margin-left: 0 !important; width: 100% !important; }
    .dashboard-sidebar-filter__button.d-lg-none,
    .topbar-fixed-wrapper a.d-lg-none { display: inline-block !important; }
}
.sidebar-brand {
    background: var(--b-yellow) !important;
    border-bottom: var(--b-border) !important;
    padding: 16px 18px !important;
    margin-bottom: 10px;
}
.sidebar-brand img { filter: none !important; }
.sidebar-menu__close.text-white, .sidebar-menu__close i {
    color: #0A0A0A !important;
}
.sidebar-menu__close {
    background: #FFFFFF !important;
    border: 2px solid #0A0A0A !important;
    border-radius: var(--b-r-sm) !important;
    box-shadow: var(--b-shadow-xs) !important;
    padding: 2px 4px;
}
.menu-label {
    color: var(--b-faint) !important;
    font-family: var(--b-font) !important;
    font-weight: 700 !important;
    font-size: .7rem !important;
    letter-spacing: 2px !important;
    margin: 22px 0 8px 20px !important;
}
.menu-label::before { content: "// "; color: var(--b-ink); }
.nav-item-modern {
    color: var(--b-ink) !important;
    background: transparent !important;
    border: 2px solid transparent !important;
    border-radius: var(--b-r) !important;
    font-weight: 600;
    font-size: 1rem !important;
    padding: 11px 20px !important;
    margin: 4px 15px 6px !important;
    white-space: nowrap;
    transition: transform .12s var(--b-snap), box-shadow .12s var(--b-snap), background .12s !important;
}
.nav-item-modern i { color: var(--b-ink) !important; filter: none !important; }
.nav-item-modern:hover {
    background: var(--b-yellow) !important;
    border-color: #0A0A0A !important;
    color: #0A0A0A !important;
    box-shadow: 3px 3px 0 #0A0A0A !important;
    transform: translate(-2px, -2px) !important;
}
.nav-item-modern:hover i { color: #0A0A0A !important; }
.nav-item-modern.active {
    background: var(--b-blue) !important;
    border-color: #0A0A0A !important;
    color: #0A0A0A !important;
    font-weight: 700;
    box-shadow: 4px 4px 0 #0A0A0A !important;
}
.nav-item-modern.active::before { display: none !important; }
.nav-item-modern.active i { color: #0A0A0A !important; }
.nav-item-modern.text-danger, .nav-item-modern.text-danger i { color: var(--b-red-d) !important; }
.nav-item-modern.text-danger:hover { background: var(--b-red) !important; color: #0A0A0A !important; }
.nav-item-modern.text-danger:hover i { color: #0A0A0A !important; }
/* 访客菜单里的 Login 链接内联写了灰色，这里拉回墨色 */
#nav-login, #nav-login i { color: var(--b-ink) !important; }
#nav-login:hover, #nav-login:hover i { color: #0A0A0A !important; }

/* 主题切换按钮 —— 继承 .nav-item-modern 的尺寸，只复位 <button> */
.theme-toggle {
    width: calc(100% - 30px);
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--b-font);
}
.theme-toggle .theme-toggle__dark { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__dark  { display: inline; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__light { display: none; }

.topbar-fixed-wrapper {
    background: var(--b-bg) !important;
    border-bottom: var(--b-border) !important;
    box-shadow: none !important;
}
.topbar-fixed-wrapper .text-white, .topbar-fixed-wrapper h4 {
    color: var(--b-ink) !important;
    font-family: var(--b-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}
.dashboard-sidebar-filter__button {
    background: var(--b-yellow) !important;
    border: 2px solid #0A0A0A !important;
    border-radius: var(--b-r-sm) !important;
    box-shadow: var(--b-shadow-xs) !important;
    padding: 2px 6px !important;
}
.dashboard-sidebar-filter__button i { color: #0A0A0A !important; }

.btn-outline-primary {
    background: var(--b-yellow) !important;
    color: #0A0A0A !important;
    border: 2px solid #0A0A0A !important;
    border-radius: var(--b-r-sm) !important;
    box-shadow: 3px 3px 0 #0A0A0A !important;
    font-weight: 700;
    text-transform: uppercase;
    padding: 9px 16px !important;
    transition: transform .1s var(--b-snap), box-shadow .1s var(--b-snap) !important;
}
.btn-outline-primary i { color: #0A0A0A !important; }
.btn-outline-primary:hover { background: var(--b-pink) !important; color: #0A0A0A !important; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #0A0A0A !important; }
.btn-outline-primary:active { transform: translate(3px, 3px); box-shadow: none !important; }
:root[data-theme="dark"] .btn-outline-primary { box-shadow: 3px 3px 0 var(--b-shade) !important; }

/* 顶栏首字母头像：统一改成粉色贴纸方块 */
.dropdown a > div {
    background: var(--b-pink) !important;
    border: 2px solid #0A0A0A !important;
    border-radius: var(--b-r-sm) !important;
    box-shadow: var(--b-shadow-xs) !important;
    transition: transform .12s var(--b-snap), box-shadow .12s var(--b-snap) !important;
}
.dropdown a:hover > div { background: var(--b-yellow) !important; transform: translate(-2px, -2px); box-shadow: var(--b-shadow-sm) !important; }
#header-avatar-letter { color: #0A0A0A !important; font-family: var(--b-display) !important; font-weight: 400 !important; font-size: 15px; }
.dropdown-menu {
    background: var(--b-surface) !important;
    border: var(--b-border) !important;
    border-radius: var(--b-r) !important;
    box-shadow: var(--b-shadow) !important;
    padding: 8px !important;
}
.dropdown-item { color: var(--b-ink) !important; border-radius: var(--b-r-sm) !important; font-weight: 600; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--b-yellow) !important; color: #0A0A0A !important; }
.dropdown-item.text-danger { color: var(--b-red-d) !important; }
.dropdown-item.text-danger:hover { background: var(--b-red) !important; color: #0A0A0A !important; }
.dropdown-divider { border-color: var(--b-line) !important; border-top-width: 2px !important; opacity: 1; }

/* ============================================================
   3. chat.html — 聊天壳 / 消息
   ============================================================ */
.chat-shell {
    background: var(--b-surface) !important;
    border: var(--b-border) !important;
    border-radius: var(--b-r-lg) !important;
    box-shadow: var(--b-shadow) !important;
}
.chat-agent-head {
    background: var(--b-yellow) !important;
    border-bottom: var(--b-border) !important;
    box-shadow: none !important;
    padding: 14px 20px !important;
}
.agent-avatar {
    background: #FFFFFF !important;
    border: 2px solid #0A0A0A !important;
    border-radius: var(--b-r-sm) !important;
    color: #0A0A0A !important;
    box-shadow: var(--b-shadow-xs) !important;
}
.agent-name {
    color: #0A0A0A !important;
    font-family: var(--b-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.agent-status { color: #0A0A0A !important; font-weight: 700; text-transform: uppercase; font-size: .7rem !important; letter-spacing: 1px; }
.agent-status::before {
    background: var(--b-green) !important;
    border: 2px solid #0A0A0A;
    width: 10px !important; height: 10px !important;
    box-shadow: none !important;
}
.lang-btn {
    background: #FFFFFF !important;
    border: 2px solid #0A0A0A !important;
    border-radius: var(--b-r-sm) !important;
    color: #0A0A0A !important;
    box-shadow: var(--b-shadow-xs) !important;
    font-weight: 700;
    transition: transform .1s var(--b-snap), box-shadow .1s var(--b-snap) !important;
}
.lang-btn:hover { background: var(--b-pink) !important; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #0A0A0A !important; }
.lang-btn i { color: #0A0A0A !important; }

.chat-messages::-webkit-scrollbar-thumb { background: var(--b-ink) !important; border-radius: 0 !important; }

.msg-avatar {
    background: var(--b-surface) !important;
    border: 2px solid var(--b-line) !important;
    border-radius: var(--b-r-sm) !important;
    color: var(--b-ink) !important;
    box-shadow: none !important;
    font-weight: 700;
}
.msg-row.mine .msg-avatar { background: var(--b-teal) !important; border-color: #0A0A0A !important; color: #0A0A0A !important; }
.msg-bubble {
    border-radius: var(--b-r) !important;
    padding: 11px 15px !important;
    font-weight: 500;
}
.msg-row:not(.mine) .msg-bubble {
    background: var(--b-surface) !important;
    border: 2px solid var(--b-line) !important;
    color: var(--b-ink) !important;
    box-shadow: var(--b-shadow-sm) !important;
    border-bottom-left-radius: 2px !important;
}
.msg-row.mine .msg-bubble {
    background: var(--b-blue) !important;
    border: 2px solid #0A0A0A !important;
    color: #0A0A0A !important;
    box-shadow: 4px 4px 0 var(--b-shade) !important;
    border-bottom-right-radius: 2px !important;
}
.msg-time { color: var(--b-faint) !important; font-weight: 600; font-size: .68rem !important; letter-spacing: .5px; }
.empty-chat { color: var(--b-muted) !important; font-weight: 600; }
.empty-chat i {
    color: #0A0A0A !important;
    background: var(--b-yellow);
    border: 3px solid #0A0A0A;
    border-radius: var(--b-r);
    box-shadow: 4px 4px 0 var(--b-shade);
    padding: 12px;
    font-size: 2.4rem !important;
}

.msg-image, .msg-video, .quoted-thumb {
    border: 2px solid var(--b-line) !important;
    border-radius: var(--b-r-sm) !important;
    box-shadow: none !important;
}
.msg-file-attach {
    background: var(--b-sunken) !important;
    border: 2px solid var(--b-line) !important;
    border-radius: var(--b-r-sm) !important;
    box-shadow: none !important;
}
.msg-file-attach i { color: var(--b-ink) !important; }
.msg-file-attach span { color: var(--b-ink) !important; }
.msg-row.mine .msg-file-attach { background: #FFFFFF !important; border-color: #0A0A0A !important; }
.msg-row.mine .msg-file-attach span,
.msg-row.mine .msg-file-attach i { color: #0A0A0A !important; }

.msg-action-btn {
    background: var(--b-surface) !important;
    border: 2px solid var(--b-line) !important;
    border-radius: 4px !important;
    color: var(--b-ink) !important;
    box-shadow: none !important;
    padding: 1px 8px !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .65rem !important;
}
.msg-action-btn:hover { background: var(--b-yellow) !important; color: #0A0A0A !important; border-color: #0A0A0A !important; }

.quoted-msg {
    border: none !important;
    border-left: 4px solid var(--b-ink) !important;
    background: var(--b-surface-2) !important;
    border-radius: 4px !important;
}
.quoted-msg:hover { background: var(--b-yellow) !important; }
.quoted-msg:hover .quoted-sender, .quoted-msg:hover .quoted-body,
.quoted-msg:hover .quoted-body span, .quoted-msg:hover .quoted-body i { color: #0A0A0A !important; }
.msg-row.mine .quoted-msg { background: rgba(255,255,255,.55) !important; border-left-color: #0A0A0A !important; }
.quoted-sender { color: var(--b-ink) !important; }
.msg-row.mine .quoted-sender { color: #0A0A0A !important; }
.quoted-body, .quoted-body span, .quoted-body i { color: var(--b-muted) !important; }
.msg-row.mine .quoted-body,
.msg-row.mine .quoted-body span,
.msg-row.mine .quoted-body i { color: #1F1F1F !important; }

/* ============================================================
   4. chat.html — 输入区 / 附件
   ============================================================ */
.chat-input-bar {
    background: var(--b-bg-2) !important;
    border-top: var(--b-border) !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
}
.chat-input {
    background: var(--b-surface) !important;
    border: 2px solid var(--b-line) !important;
    border-radius: var(--b-r-sm) !important;
    color: var(--b-ink) !important;
    box-shadow: none !important;
    font-family: var(--b-font) !important;
    font-weight: 500;
    padding: 11px 14px !important;
}
.chat-input:focus { box-shadow: 4px 4px 0 var(--b-yellow), 4px 4px 0 2px var(--b-line) !important; }
.chat-input::placeholder { color: var(--b-faint) !important; }

.send-btn, .btn-attach {
    border: 2px solid #0A0A0A !important;
    border-radius: var(--b-r-sm) !important;
    color: #0A0A0A !important;
    box-shadow: 3px 3px 0 var(--b-shade) !important;
    transition: transform .1s var(--b-snap), box-shadow .1s var(--b-snap), background .1s !important;
}
.send-btn { background: var(--b-teal) !important; }
.btn-attach { background: var(--b-yellow) !important; }
.send-btn i, .btn-attach i { color: #0A0A0A !important; }
.send-btn:hover, .btn-attach:hover { transform: translate(-2px, -2px) !important; box-shadow: 5px 5px 0 var(--b-shade) !important; }
.send-btn:active, .btn-attach:active { transform: translate(3px, 3px) !important; box-shadow: none !important; }
.btn-attach:hover { background: var(--b-pink) !important; }
.send-btn:disabled { opacity: 1 !important; background: #D9D4C7 !important; box-shadow: none !important; transform: none !important; }

.attach-menu {
    background: var(--b-surface) !important;
    border: var(--b-border) !important;
    border-radius: var(--b-r) !important;
    box-shadow: var(--b-shadow) !important;
    padding: 6px !important;
}
.attach-item { color: var(--b-ink) !important; border-radius: var(--b-r-sm) !important; font-weight: 600; }
.attach-item i { color: var(--b-ink) !important; }
.attach-item:hover { background: var(--b-yellow) !important; color: #0A0A0A !important; }
.attach-item:hover i { color: #0A0A0A !important; }

.image-preview-wrapper { background: var(--b-bg-2) !important; border-top: 2px solid var(--b-line) !important; }
.image-preview-box img { border: 2px solid var(--b-line) !important; border-radius: var(--b-r-sm) !important; box-shadow: none !important; }
.image-preview-box .remove-btn,
.file-preview-item .remove-btn,
.image-preview-wrapper > .remove-btn {
    background: var(--b-red) !important;
    color: #0A0A0A !important;
    border: 2px solid #0A0A0A !important;
    border-radius: 4px !important;
    box-shadow: var(--b-shadow-xs) !important;
}
.file-preview-row {
    background: var(--b-surface) !important;
    border: 2px solid var(--b-line) !important;
    border-radius: var(--b-r-sm) !important;
    box-shadow: none !important;
}
.file-preview-row i { color: var(--b-ink) !important; }
.file-preview-row .fp-name { color: var(--b-ink) !important; }
.file-preview-row .fp-size { color: var(--b-faint) !important; }

.reply-mode-bar {
    background: var(--b-surface-2) !important;
    border-top: 2px solid var(--b-line) !important;
    border-left: 4px solid var(--b-ink) !important;
    box-shadow: none !important;
}
.reply-mode-bar .rbar-icon, .reply-mode-bar .rbar-label { color: var(--b-ink) !important; text-transform: uppercase; }
.reply-mode-bar .rbar-preview { color: var(--b-muted) !important; }
.reply-mode-bar .rbar-close { color: var(--b-ink) !important; }
.reply-mode-bar .rbar-close:hover { color: var(--b-red-d) !important; }

.drag-overlay {
    background: color-mix(in srgb, var(--b-yellow) 88%, transparent) !important;
    border: 4px dashed #0A0A0A !important;
    border-radius: var(--b-r-lg) !important;
    color: #0A0A0A !important;
    font-family: var(--b-display);
    text-transform: uppercase;
}
.drag-overlay i { filter: none !important; color: #0A0A0A !important; }

/* ============================================================
   5. chat.html — 访客登录弹窗 / 语言弹窗 / 移动底栏
   访客弹窗与主站登录页一致：黄色海报底 + 白卡，深浅主题都固定
   ============================================================ */
.guest-overlay {
    background-color: #FFD23F !important;
    background-image: radial-gradient(rgba(10,10,10,.22) 1.2px, transparent 1.3px) !important;
    background-size: 22px 22px !important;
}
.guest-card, .lang-modal {
    border: 3px solid #0A0A0A !important;
    border-radius: var(--b-r-lg) !important;
}
.guest-card { background: #FFFFFF !important; box-shadow: 9px 9px 0 #0A0A0A !important; }
.lang-modal { background: var(--b-surface) !important; box-shadow: var(--b-shadow-lg) !important; }
.guest-icon {
    background: #FFD23F !important;
    border: 3px solid #0A0A0A !important;
    border-radius: var(--b-r) !important;
    color: #0A0A0A !important;
    box-shadow: 4px 4px 0 #0A0A0A !important;
    transform: rotate(-4deg);
}
.guest-card h3 {
    color: #0A0A0A !important;
    font-family: var(--b-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}
.lang-modal h6 {
    color: var(--b-ink) !important;
    font-family: var(--b-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}
.guest-card p { color: #4A4744 !important; font-weight: 500; }
.guest-input {
    background: #FBF8F1 !important;
    border: 2px solid #0A0A0A !important;
    border-radius: var(--b-r-sm) !important;
    color: #0A0A0A !important;
    box-shadow: none !important;
    font-family: var(--b-font) !important;
    font-weight: 500;
}
.guest-input:focus { background: #FFFFFF !important; box-shadow: 4px 4px 0 #FFD23F, 4px 4px 0 2px #0A0A0A !important; }
.guest-input::placeholder { color: #6E6A63 !important; }
.guest-err { color: #C8102E !important; font-weight: 600; }
.guest-btn {
    background: #2EE6C5 !important;
    border: 2px solid #0A0A0A !important;
    border-radius: var(--b-r-sm) !important;
    color: #0A0A0A !important;
    box-shadow: 4px 4px 0 #0A0A0A !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: transform .1s var(--b-snap), box-shadow .1s var(--b-snap) !important;
}
.guest-btn:hover { transform: translate(-2px, -2px) !important; box-shadow: 6px 6px 0 #0A0A0A !important; }
.guest-btn:active { transform: translate(3px, 3px) !important; box-shadow: none !important; }

.lang-backdrop { background: rgba(10,10,10,.55) !important; }
.lang-option {
    color: var(--b-ink) !important;
    border: 2px solid transparent !important;
    border-radius: var(--b-r-sm) !important;
    font-weight: 600;
}
.lang-option:hover, .lang-option.active {
    background: var(--b-yellow) !important;
    border-color: #0A0A0A !important;
    color: #0A0A0A !important;
    box-shadow: var(--b-shadow-xs) !important;
}

.mobile-bottom-nav {
    background: var(--b-surface) !important;
    border: var(--b-border) !important;
    border-radius: var(--b-r-lg) !important;
    box-shadow: var(--b-shadow) !important;
}
.mobile-bottom-nav a { color: var(--b-ink) !important; border-radius: var(--b-r-sm) !important; }
.mobile-bottom-nav a.active, .mobile-bottom-nav a:hover { background: var(--b-yellow) !important; color: #0A0A0A !important; }
.mobile-bottom-nav .mid-button {
    background: var(--b-blue) !important;
    border: 2px solid #0A0A0A !important;
    border-radius: var(--b-r) !important;
    color: #0A0A0A !important;
    box-shadow: var(--b-shadow-sm) !important;
}

/* ============================================================
   6. guest-entry.html — 独立访客入口卡（画布在页面内联 #entry-canvas）
   ============================================================ */
body .card {
    background: #FFFFFF !important;
    border: 3px solid #0A0A0A !important;
    border-radius: var(--b-r-lg) !important;
    box-shadow: 9px 9px 0 #0A0A0A !important;
    color: #0A0A0A !important;
}
.logo-wrap img { filter: none !important; }
.icon-ring {
    background: #FFD23F !important;
    border: 3px solid #0A0A0A !important;
    border-radius: var(--b-r) !important;
    box-shadow: 4px 4px 0 #0A0A0A !important;
    transform: rotate(-4deg);
}
body .card h2 {
    color: #0A0A0A !important;
    font-family: var(--b-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}
body .card .subtitle { color: #4A4744 !important; font-weight: 500; }
body .card label { color: #0A0A0A !important; font-weight: 700 !important; letter-spacing: 1px; }
body .card input[type="text"] {
    background: #FBF8F1 !important;
    border: 2px solid #0A0A0A !important;
    border-radius: var(--b-r-sm) !important;
    color: #0A0A0A !important;
    box-shadow: none !important;
    font-family: var(--b-font) !important;
    font-weight: 500;
}
body .card input[type="text"]:focus { background: #FFFFFF !important; box-shadow: 4px 4px 0 #FFD23F, 4px 4px 0 2px #0A0A0A !important; }
body .card input::placeholder { color: #6E6A63 !important; }
.err { color: #C8102E !important; font-weight: 600; }
.btn-enter, .btn-login {
    border: 2px solid #0A0A0A !important;
    border-radius: var(--b-r-sm) !important;
    color: #0A0A0A !important;
    box-shadow: 4px 4px 0 #0A0A0A !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: transform .1s var(--b-snap), box-shadow .1s var(--b-snap), background .1s !important;
}
.btn-enter { background: #2EE6C5 !important; }
.btn-login { background: #FFFFFF !important; }
.btn-enter:hover, .btn-login:hover { transform: translate(-2px, -2px) !important; box-shadow: 6px 6px 0 #0A0A0A !important; }
.btn-login:hover { background: #FF8FC7 !important; color: #0A0A0A !important; }
.btn-enter:active, .btn-login:active { transform: translate(3px, 3px) !important; box-shadow: none !important; }
.divider { color: #0A0A0A !important; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.divider::before, .divider::after { background: #0A0A0A !important; height: 2px !important; }

/* ============================================================
   7. entry.html — 厂商登录页版面
   ============================================================ */
.entry_page .background,
.entry_page .background > .image,
.entry_page .background > .slideshow { filter: grayscale(1) contrast(1.1) opacity(.22); }
.entry_page .background { background: #FFD23F !important; }
.entry_box {
    background: var(--b-bg) !important;
    border-right: var(--b-border) !important;
    box-shadow: none !important;
}
/* logo 条与聊天页侧栏顶部一致：黄色色块，深色模式下 logo 也看得清 */
.entry_box .top {
    background: #FFD23F !important;
    border-bottom: var(--b-border) !important;
}
.entry_box .heading > div > h3 {
    color: var(--b-ink) !important;
    font-family: var(--b-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}
.entry_box .heading > div > span { color: var(--b-muted) !important; }
.entry_box .tabs > ul > li {
    color: var(--b-ink) !important;
    border: 2px solid transparent !important;
    border-radius: var(--b-r-sm) !important;
    font-weight: 700;
    text-transform: uppercase;
}
.entry_box .tabs > ul > li.selected {
    background: var(--b-yellow) !important;
    color: #0A0A0A !important;
    border-color: #0A0A0A !important;
    box-shadow: var(--b-shadow-xs) !important;
}
.entry_box .form_container > form > .field > label {
    color: var(--b-ink) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .74rem;
}
.entry_box .form_container > form > .field > input,
.entry_box .form_container > form > .field > select,
.entry_box .form_container > form > .field > textarea {
    background: var(--b-sunken) !important;
    border: 2px solid var(--b-line) !important;
    border-radius: var(--b-r-sm) !important;
    color: var(--b-ink) !important;
    box-shadow: none !important;
    font-family: var(--b-font) !important;
    font-weight: 500;
}
.entry_box .form_container > form > .field > input:focus,
.entry_box .form_container > form > .field > select:focus,
.entry_box .form_container > form > .field > textarea:focus {
    background: var(--b-surface) !important;
    box-shadow: 4px 4px 0 var(--b-yellow), 4px 4px 0 2px var(--b-line) !important;
}
.entry_box .form_container > form > .field.checkbox > label > .checkmark {
    background: var(--b-surface) !important;
    border: 2px solid var(--b-line) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
.entry_box .form_container > form > .field.checkbox > label > input:checked ~ .checkmark {
    background: var(--b-blue) !important;
    box-shadow: var(--b-shadow-xs) !important;
}
.entry_box .form_container > .message {
    background: color-mix(in srgb, var(--b-red) 22%, var(--b-surface)) !important;
    border: 2px solid var(--b-line) !important;
    border-radius: var(--b-r-sm) !important;
    box-shadow: none !important;
    color: var(--b-ink) !important;
}
.entry_box .submit_form > span {
    background: var(--b-teal) !important;
    border: 2px solid #0A0A0A !important;
    border-radius: var(--b-r-sm) !important;
    color: #0A0A0A !important;
    box-shadow: 4px 4px 0 var(--b-shade) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: transform .1s var(--b-snap), box-shadow .1s var(--b-snap) !important;
}
.entry_box .submit_form > span:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--b-shade) !important; }
.entry_box .submit_form > span:active { transform: translate(3px, 3px); box-shadow: none !important; }
.entry_box .change_form span,
.entry_box .change_form a { color: var(--b-link) !important; font-weight: 700; }

/* ============================================================
   8. 动效克制
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .nav-item-modern:hover, .btn-outline-primary:hover, .send-btn:hover, .btn-attach:hover,
    .guest-btn:hover, .btn-enter:hover, .btn-login:hover, .dropdown a:hover > div,
    .entry_box .submit_form > span:hover {
        transform: none !important;
    }
}