/* ============================================================
 * 车机模式（Car UI）— 叠加在 style.css 之上
 * ============================================================
 * 2026-10-10：由 assets/tesla.css 改名（车机版不再只针对特斯拉）。
 *
 * 只在 <body class="car-mode tesla-mode"> 下生效，普通浏览器完全不受影响。
 * ★ 选择器里沿用 `tesla-mode`（有意保留不改）：它是纯内部样式钩子、用户不可见，
 *   而 car-ui.css + exhaust_v2.php 里共有 100+ 处选择器在吃它。车机页面 body
 *   同时带 `car-mode`，新写的规则请用 `body.car-mode` 起头。
 *
 * 设计基线（10 尺界面 / 60~80cm 观看距离）：
 *   · 正文 19px 起，标题 26~34px，绝不出现 <16px 的文字
 *   · 所有可点目标 ≥56px；主操作 64px
 *   · 焦点环 = 4px 蓝环 + 外扩暗底 + 光晕。手柄操作全靠它指路，必须一眼可见
 *   · 零 hover 依赖（车机新固件谎报 hover:hover）；反馈一律 :active / 焦点态
 *   · 不再用 transform 动画（车机 GPU 弱），只用 outline / box-shadow / filter
 *   · 目标画布：全屏 1254×784，旧固件 1920×1200，面板模式 773×601
 * ============================================================ */

body.tesla-mode {
    --t-bg:        #0b0d10;
    --t-panel:     #14181e;
    --t-panel-2:   #1b2128;
    --t-line:      #2a323c;
    --t-fg:        #f2f6fa;
    --t-muted:     #9aa7b4;
    --t-accent:    #4da3ff;   /* 焦点 / 主色调 */
    --t-red:       #e31937;   /* 特斯拉红，仅用于「全屏」等关键 CTA */
    --t-green:     #3fb950;
    --t-focus:     #4da3ff;
    --t-bar-h:     78px;
    --t-radius:    16px;

    background:
        radial-gradient(1200px 520px at 50% -180px, rgba(77,163,255,.10), transparent 60%),
        radial-gradient(900px 460px at 88% -200px, rgba(227,25,55,.06), transparent 58%),
        var(--t-bg);
    background-attachment: fixed;
    color: var(--t-fg);
    font-size: 19px;
}

/* 车机模式隐藏鼠标光标（纯触摸 + 手柄，光标只会在误触时出现） */
body.tesla-mode,
body.tesla-mode a,
body.tesla-mode button { cursor: default; }

/* ============================================================
 * 1. 焦点系统 —— 手柄操作的唯一指示器
 * ============================================================ */
body.tesla-mode :focus { outline: none; }

body.tesla-mode .tf:focus,
body.tesla-mode .tf.is-focus,
body.tesla-mode .tf:focus-visible {
    outline: 4px solid var(--t-focus);
    outline-offset: 5px;
    box-shadow: 0 0 0 5px rgba(11,13,16,.9), 0 0 30px 8px rgba(77,163,255,.5);
    z-index: 3;
    position: relative;
}

/* 输入框聚焦：改用描边而非外环，避免光标被环挡住 */
body.tesla-mode input.tf:focus,
body.tesla-mode input:focus {
    outline: none;
    border-color: var(--t-focus) !important;
    box-shadow: 0 0 0 4px rgba(77,163,255,.35) !important;
}

/* ============================================================
 * 2. 车机顶栏（取代普通 .topbar）
 * ============================================================ */
body.tesla-mode .topbar { display: none !important; }

.t-bar {
    position: sticky; top: 0; z-index: 600;
    display: flex; align-items: center; gap: 18px;
    height: var(--t-bar-h); padding: 0 26px;
    background: rgba(13,16,20,.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--t-line);
}
.t-brand {
    display: flex; align-items: center; gap: 12px;
    color: var(--t-fg); font-size: 23px; font-weight: 800; letter-spacing: .3px;
    padding: 8px 14px; border-radius: 14px; white-space: nowrap;
}
.t-ico { width: 30px; height: 30px; display: block; filter: invert(92%) sepia(6%) saturate(200%) hue-rotate(180deg); }
.t-ico-lg { width: 38px; height: 38px; }
/* 品牌彩色 LOGO：不吃反色滤镜 */
.t-logo { width: 38px; height: 38px; display: block; }

.t-nav { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
.t-nav-item {
    display: flex; align-items: center; gap: 10px;
    height: 58px; padding: 0 20px; border-radius: 14px;
    color: var(--t-muted); font-size: 19px; font-weight: 600; white-space: nowrap;
    border: 1px solid transparent;
    transition: none;
}
.t-nav-item.is-active { color: var(--t-fg); background: var(--t-panel); border-color: var(--t-line); }
.t-nav-item:active { background: var(--t-panel-2); color: var(--t-fg); }

.t-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.t-btn {
    display: flex; align-items: center; gap: 9px;
    height: 58px; padding: 0 22px; border-radius: 14px;
    background: var(--t-panel); color: var(--t-fg);
    border: 1px solid var(--t-line);
    font-size: 19px; font-weight: 700; font-family: inherit; white-space: nowrap;
}
.t-btn:active { background: var(--t-panel-2); }
.t-btn-accent {
    background: linear-gradient(180deg, #f02b47, var(--t-red)); border-color: #ff5771; color: #fff;
}
.t-btn-accent:active { filter: brightness(.9); }
.t-acc-btn {
    width: 58px; height: 58px; padding: 0; border-radius: 50%;
    background: var(--t-panel); border: 1px solid var(--t-line);
    display: flex; align-items: center; justify-content: center;
    /* ★ 未读消息角标要露在圆外（2026-10-09）：overflow 放开，头像自身补圆角补上裁切 */
    position: relative; overflow: visible;
}
.t-acc-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* 头像未读消息角标：红底白字数字 */
.t-acc-badge {
    position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; padding: 0 6px;
    box-sizing: border-box; border-radius: 12px; background: #f85149; color: #fff;
    font-size: 15px; font-weight: 700; line-height: 20px; text-align: center;
    border: 2px solid #0e1116; pointer-events: none;
}

/* ============================================================
 * 3. 账号全屏菜单
 * ============================================================ */
.t-menu {
    /* 变量兜底：网页版小窗（qb-carbar）body 无 .tesla-mode，子树自带同值变量 */
    --t-panel: #14181e; --t-panel-2: #1b2128; --t-line: #2a323c;
    --t-fg: #f2f6fa; --t-muted: #9aa7b4;
    position: fixed; inset: 0; z-index: 1500; overflow-y: auto;
    flex-direction: column;
    background: rgba(8,10,13,.9); backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
}
.t-menu[hidden] { display: none; }
.t-menu-head { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 26px; }
.t-menu-head img { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; border: 3px solid var(--t-line); }
.t-menu-name { font-size: 27px; font-weight: 800; text-align: center; }
/* 会员 ID（2026-10-09）：昵称下方的浅色小字，供会员报给好友用 ID 搜索加好友 */
.t-menu-id { font-size: 16px; color: #8b93a7; text-align: center; margin-top: 2px; letter-spacing: .5px; }
.t-menu-plan { font-size: 17px; color: var(--t-muted); text-align: center; margin-top: 4px; }
.t-menu-rows { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); gap: 16px; }
.t-menu-row {
    display: flex; align-items: center; gap: 16px;
    min-height: 72px; padding: 0 24px; border-radius: 16px;
    background: var(--t-panel); border: 1px solid var(--t-line);
    color: var(--t-fg); font-size: 20px; font-weight: 600;
}
.t-menu-row:active { background: var(--t-panel-2); }
.t-menu-row .t-mi {
    flex: none; width: 34px; text-align: center;
    font-style: normal; font-size: 22px; line-height: 1;
}

/* ============================================================
 * 4. 搜索浮层
 * ============================================================ */
.t-search-mask {
    position: fixed; inset: 0; z-index: 1500;
    background: rgba(8,10,13,.9); backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center; padding: 40px;
}
.t-search-mask[hidden] { display: none; }
.t-search-box { width: 100%; max-width: 900px; }
.t-search-input {
    display: flex; align-items: center; gap: 16px;
    background: var(--t-panel); border: 2px solid var(--t-line); border-radius: 20px;
    padding: 0 26px; height: 92px;
}
.t-search-input:focus-within { border-color: var(--t-focus); box-shadow: 0 0 0 5px rgba(77,163,255,.28); }
.t-search-ico { font-size: 26px; }
.t-search-input input {
    flex: 1 1 auto; height: 100%; border: 0; background: transparent;
    color: var(--t-fg); font-size: 30px; font-weight: 600; font-family: inherit; outline: none;
    box-shadow: none !important;
}
.t-search-input input::placeholder { color: #5d6a78; }
.t-search-act { display: flex; gap: 16px; justify-content: center; margin-top: 28px; }
.t-search-act .t-btn { height: 70px; padding: 0 40px; font-size: 21px; }

/* ============================================================
 * 5. 主容器 / 区块
 * ============================================================ */
body.tesla-mode .container { max-width: none; padding: 22px 30px 132px; }  /* 底部留出手柄状态条的高度 */

.t-sec { margin: 0 0 34px; }
.t-sec-h {
    display: flex; align-items: baseline; gap: 14px;
    font-size: 25px; font-weight: 800; margin: 0 0 16px; letter-spacing: .2px;
}
.t-sec-h .t-sec-sub { font-size: 16px; font-weight: 600; color: var(--t-muted); }

/* 横向滑轨（继续玩 / 最近更新）
 * ★ 焦点框外扩 9px（outline 4px + offset 5px），滑轨 overflow-y:hidden 会裁它：
 *   四边内边距必须 ≥10px（2026-10-09 车机实测蓝色选框显示不全），scroll-padding
 *   让 scrollIntoView('nearest') 滚动后仍给焦点框留位 */
.t-rail {
    display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden;
    padding: 10px 10px 16px; margin: -10px -10px 0;
    scroll-padding: 10px;
    scroll-snap-type: x proximity; scroll-behavior: smooth;
    scrollbar-width: none;
}
.t-rail::-webkit-scrollbar { display: none; }
.t-rail > * { flex: 0 0 auto; scroll-snap-align: start; }

/* 车机卡片：比普通 .card 更大、标题更大 */
.t-card {
    display: block; width: 172px; border-radius: var(--t-radius);
    background: var(--t-panel); border: 1px solid var(--t-line);
    overflow: hidden; text-decoration: none; color: var(--t-fg);
}
.t-rail .t-card { width: 178px; }
.t-card .t-cover {
    position: relative; width: 100%; aspect-ratio: 3 / 4; background: #0f1318; overflow: hidden;
}
.t-card .t-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-card .t-cover .t-noimg {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 40px; color: #3a444f;
}
.t-card .t-meta { padding: 11px 13px 13px; }
.t-card .t-title {
    display: block; font-size: 18px; font-weight: 700; line-height: 1.32;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 48px;
}
.t-card .t-sub { display: block; font-size: 15px; color: var(--t-muted); margin-top: 6px; }
.t-card .t-cplat {
    position: absolute; left: 10px; top: 10px; z-index: 2;
    font-size: 14px; font-weight: 800; padding: 5px 11px; border-radius: 9px;
    background: rgba(10,13,17,.86); border: 1px solid rgba(255,255,255,.14); color: #fff;
}
.t-card .t-cplay { display: none; }   /* 蓝色播放键已删：整卡即播放入口 */
.t-card:active { background: var(--t-panel-2); }

/* 网格 */
.t-grid {
    display: grid; gap: 22px 18px;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.t-grid .t-card { width: auto; }

/* ============================================================
 * 6. 平台 chips（车机版比 .tabs 更大）
 * ============================================================ */
.t-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.t-chip {
    display: flex; align-items: center; height: 62px; padding: 0 26px;
    border-radius: 14px; background: var(--t-panel); border: 1px solid var(--t-line);
    color: var(--t-muted); font-size: 20px; font-weight: 700; white-space: nowrap;
    text-decoration: none;
}
.t-chip:active { background: var(--t-panel-2); color: var(--t-fg); }
.t-chip.is-active {
    background: linear-gradient(180deg, #2b6fd0, #1f57a8);
    border-color: #4d8fe0; color: #fff;
}
/* 首字母索引（纯手柄也能逛全站，不用打字） */
.t-alpha { display: flex; flex-wrap: wrap; gap: 9px; }
.t-alpha .t-chip { height: 52px; padding: 0 0; min-width: 52px; justify-content: center; font-size: 18px; }

/* ============================================================
 * 6b. 首页专用：首字母折叠 / 空态 / 页脚切换
 * ============================================================ */
.t-home { padding-bottom: 20px; }

/* ★ hidden 必须显式压过 display:flex，否则收起的首字母行照样渲染
   （<details> 折叠内容在 Chromium 里仍有盒子，所以这里改用 hidden + 显式规则） */
.t-alpha[hidden] { display: none !important; }
.t-menu[hidden] { display: none !important; }
.t-search-mask[hidden] { display: none !important; }
.t-pad-hud[hidden] { display: none !important; }
.t-toast[hidden] { display: none !important; }

.t-empty {
    padding: 46px 30px; border-radius: var(--t-radius);
    background: var(--t-panel); border: 1px solid var(--t-line);
    color: var(--t-muted); font-size: 21px; text-align: center;
}
.t-end { text-align: center; color: var(--t-muted); font-size: 18px; padding: 26px 0 8px; }

.t-foot-switch {
    margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--t-line);
    color: var(--t-muted); font-size: 17px; text-align: center;
}
.t-foot-switch a {
    display: inline-flex; align-items: center; height: 50px; padding: 0 18px;
    margin: 0 4px; border-radius: 12px; background: var(--t-panel);
    border: 1px solid var(--t-line); color: var(--t-fg); font-weight: 700;
}

/* ============================================================
 * 7. 老页面在车机模式下的再放大（排行榜 / 月光宝盒 / 播放页…）
 * ============================================================ */
body.tesla-mode .tabs { gap: 12px; }
body.tesla-mode .tab { height: 62px; padding: 0 26px; font-size: 20px; font-weight: 700; border-radius: 14px; }

body.tesla-mode .search-bar { margin: 18px 0; }
body.tesla-mode .search-input-wrap { height: 68px; }
body.tesla-mode .search-input-wrap input { font-size: 22px; height: 68px; }
body.tesla-mode .search-btn { height: 68px; padding: 0 34px; font-size: 20px; }

body.tesla-mode .cat-tabs .cat-tab { height: 54px; padding: 0 22px; font-size: 18px; }
body.tesla-mode .alpha-chip { height: 52px; min-width: 52px; font-size: 18px; }

body.tesla-mode .grid { gap: 22px 18px; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
body.tesla-mode .grid .card .meta .title { font-size: 18px; }
body.tesla-mode .grid-info { font-size: 19px; }

body.tesla-mode .sitefoot { font-size: 15px; opacity: .75; padding-bottom: 40px; }

/* 手柄导航要能「看见」视口外的元素：关掉渲染优化。
   否则 content-visibility:auto 会让屏幕外卡片的 getClientRects() 为空，
   手柄往下按一格就找不到候选，列表直接卡住。一屏 48~60 张，代价可接受。 */
body.tesla-mode .grid > .card {
    content-visibility: visible;
    contain-intrinsic-size: none;
}

/* 车机模式「加群/客服」浮窗：2026-10-09 用户要求恢复显示（此前因挡手柄状态条而隐藏）。
   上移到 back-top（车机 68px 高）之上，避免右下角两按钮重叠 */
body.tesla-mode .contact-fab { display: flex !important; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
body.tesla-mode .back-top { width: 68px; height: 68px; }

/* ============================================================
 * 8. 手柄状态 / 提示
 * ============================================================ */
.t-pad-hud {
    position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 900; display: flex; align-items: center; gap: 12px;
    height: 60px; padding: 0 22px; border-radius: 999px;
    background: rgba(16,20,26,.94); border: 1px solid var(--t-line);
    color: var(--t-fg); font-size: 17px; font-weight: 700;
    box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
.t-pad-hud[hidden] { display: none; }
.t-pad-dot { width: 12px; height: 12px; border-radius: 50%; background: #4b5563; }
.t-pad-hud.is-on .t-pad-dot { background: var(--t-green); box-shadow: 0 0 12px var(--t-green); }

.t-toast {
    position: fixed; left: 50%; top: 100px; transform: translateX(-50%);
    z-index: 2000; padding: 18px 34px; border-radius: 16px;
    background: rgba(20,24,30,.97); border: 1px solid var(--t-line);
    color: var(--t-fg); font-size: 20px; font-weight: 700;
    box-shadow: 0 10px 34px rgba(0,0,0,.6);
}
.t-toast[hidden] { display: none; }

/* 手柄按键图例（首次连接手柄时提示一次） */
.t-legend { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 22px; }
.t-legend > div { display: flex; align-items: center; gap: 10px; font-size: 18px; color: var(--t-muted); }
.t-legend kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 12px; border-radius: 11px;
    background: var(--t-panel-2); border: 1px solid var(--t-line);
    color: var(--t-fg); font-size: 16px; font-weight: 800; font-family: inherit;
}

/* ============================================================
 * 9. 车机扫码登录页（wechat_login.php 车机分支）
 *    布局：左边放大版二维码，右边扫码步骤 —— 1254×784 一屏放下
 * ============================================================ */
.t-login {
    display: flex; align-items: center; justify-content: center;
    padding: 34px 40px 40px;
}
.t-login-card {
    display: flex; align-items: center; gap: 52px;
    padding: 34px 46px; border-radius: 24px;
    background: var(--t-panel); border: 1px solid var(--t-line);
}
.t-login-qr {
    width: 405px; height: 540px; flex: 0 0 auto;
    overflow: hidden; border-radius: 14px; background: #fff;
}
.t-login-qr iframe { transform: scale(1.35); transform-origin: top left; }
.t-login-side { display: flex; flex-direction: column; min-width: 340px; }
.t-login-title { font-size: 30px; font-weight: 800; letter-spacing: .5px; }
.t-login-steps { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; }
.t-login-steps span { font-size: 21px; font-weight: 600; color: var(--t-fg); }
.t-login-wait { font-size: 19px; font-weight: 700; color: var(--t-accent); margin-top: 30px; }
.t-login-hint { font-size: 16px; color: var(--t-muted); margin-top: 14px; }

/* ============================================================
 * 10. 视口适配
 * ============================================================ */
/* 1254×784（新固件全屏）：顶栏内容偏多，整体收紧一档，避免右侧「登录」被裁掉 */
@media (max-width: 1420px) {
    .t-bar { gap: 11px; padding: 0 18px; }
    .t-brand { gap: 9px; padding: 6px 10px; }
    .t-brand b { font-size: 20px; }
    .t-ico-lg { width: 32px; height: 32px; }
    .t-logo { width: 32px; height: 32px; }
    .t-nav { gap: 5px; margin-left: 2px; }
    .t-nav-item { padding: 0 14px; gap: 8px; font-size: 18px; }
    .t-ico { width: 26px; height: 26px; }
    .t-right { gap: 7px; }
    .t-btn { padding: 0 16px; gap: 8px; font-size: 18px; }
}
/* 大屏（旧固件 1920×1200）：再多一列、留白加大 */
@media (min-width: 1700px) {
    body.tesla-mode .container { padding: 26px 56px 132px; }
    .t-grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 26px 22px; }
    .t-card { width: 188px; }
    /* 登录页：二维码再放大一档（480×640） */
    .t-login-qr { width: 480px; height: 640px; }
    .t-login-qr iframe { transform: scale(1.6); }
    .t-login-side { min-width: 420px; }
}
/* 面板模式（773×601）：导航收起文字、只留图标；卡片缩到 3 列 */
@media (max-width: 1000px) {
    body.tesla-mode { font-size: 17px; --t-bar-h: 66px; }
    .t-bar { gap: 10px; padding: 0 14px; }
    .t-brand b { display: none; }
    .t-nav-item span, .t-btn span { display: none; }
    .t-nav-item, .t-btn { padding: 0 16px; height: 52px; }
    .t-acc-btn { width: 52px; height: 52px; }
    body.tesla-mode .container { padding: 16px 16px 104px; }
    .t-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 16px 12px; }
    .t-card { width: 152px; }
    .t-rail .t-card { width: 152px; }
    .t-menu-rows { grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 10px; }
    .t-search-input { height: 76px; }
    .t-search-input input { font-size: 24px; }
    /* ★ 小窗模式账号菜单适配（2026-10-06）：菜单遮罩 z 1500 盖过快捷条(1400)；
       内容 margin:auto 居中 + 超高可滚动；底部 padding 让开快捷条；
       头像/行高紧凑化，双列放得下 773×601 */
    .t-menu { display: block; padding: 18px 14px 100px; }
    .t-menu > .t-menu-head { margin: 0 auto 14px; }
    .t-menu > .t-menu-rows { margin: 0 auto; max-width: 100%; }
    .t-menu-head img { width: 64px; height: 64px; border-width: 2px; }
    .t-menu-name { font-size: 20px; }
    .t-menu-id { font-size: 13px; }
    .t-menu-plan { font-size: 14px; margin-top: 2px; }
    .t-menu-row { min-height: 54px; padding: 0 14px; font-size: 17px; border-radius: 12px; gap: 10px; }
    .t-menu-row .t-mi { font-size: 18px; width: 28px; }
    /* 登录页：773×601 下改竖排、二维码缩到 285×360，整卡保证一屏放下 */
    .t-login-card { flex-direction: column; gap: 20px; padding: 20px 26px; }
    .t-login-qr { width: 285px; height: 380px; }
    .t-login-qr iframe { transform: scale(.95); }
    .t-login-side { min-width: 0; align-items: center; text-align: center; }
    .t-login-title { font-size: 24px; }
    .t-login-steps { gap: 8px; margin-top: 14px; }
    .t-login-steps span { font-size: 17px; }
    .t-login-wait { font-size: 16px; margin-top: 14px; }
    .t-login-hint { display: none; }
}
/* 竖屏（少数情况）：提示横屏 */
body.tesla-mode.is-portrait .container::before {
    content: "↻ 建议横屏使用，游戏画面更大";
    display: block; padding: 12px 18px; margin-bottom: 14px; border-radius: 12px;
    background: rgba(227,25,55,.14); border: 1px solid rgba(227,25,55,.4);
    color: #ffb3bf; font-size: 18px; font-weight: 700;
}

/* ============================================================
 * 11. 首页增强（收藏 / 每日推荐 / 双人同乐 / 分类 / 热搜词）
 * ============================================================ */
/* 顶栏滚动自动收起（下滑收、上滑现，给 630px 矮屏腾内容） */
.t-bar { transition: transform .16s linear; }
.t-bar.t-hid { transform: translateY(-110%); }

/* 卡片包裹层：收藏♥挂在卡片右上角（按钮不能嵌在 <a> 里）
 * 未收 ♡ 灰描边 / 已收 ♥ 红心 */
.t-cwrap { position: relative; }
.t-fav {
    position: absolute; right: 8px; top: 8px; z-index: 4;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(10,13,17,.62); color: #9aa7b5;
    font-size: 28px; line-height: 1; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
}
.t-fav.on { color: #ff3b5c; background: rgba(10,13,17,.74); border-color: rgba(255,59,92,.55); }
.t-fav:active { filter: brightness(.85); }

/* 多版本角标（封面左下；右下已被播放键占用） */
.t-cmulti {
    position: absolute; left: 10px; bottom: 10px; z-index: 2;
    font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 8px;
    background: rgba(20,26,34,.86); border: 1px solid rgba(255,255,255,.16); color: #ffd58a;
}

/* 「更多 ›」行内链接（双人同乐标题右侧） */
.t-more {
    display: inline-flex; align-items: center; height: 44px; padding: 0 16px;
    margin-left: 6px; border-radius: 11px; align-self: center;
    background: var(--t-panel); border: 1px solid var(--t-line);
    color: var(--t-muted); font-size: 16px; font-weight: 700; text-decoration: none;
}
.t-more:active { background: var(--t-panel-2); color: var(--t-fg); }

/* 分类 chips 行：比平台行小一号，用底色区分 */
.t-chips-cat { margin-top: 10px; }
.t-chip-cat { height: 50px; padding: 0 20px; font-size: 17px; color: var(--t-fg); }

/* 搜索浮层热词行 */
.t-hot-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 24px; }
.t-hot-cap { color: var(--t-muted); font-size: 16px; font-weight: 700; }
.t-hot {
    display: inline-flex; align-items: center; height: 54px; padding: 0 22px;
    border-radius: 12px; background: var(--t-panel); border: 1px solid var(--t-line);
    color: var(--t-fg); font-size: 18px; font-weight: 700; text-decoration: none;
}
.t-hot:active { background: var(--t-panel-2); }

/* ============================================================
 * 12. 横条小窗（用户车机实测 ~1050×630）
 *     1001~1140px：照搬面板档的图标化顶栏，右侧不再被裁
 * ============================================================ */
@media (max-width: 1140px) and (min-width: 1001px) {
    body.tesla-mode { --t-bar-h: 66px; }
    .t-bar { gap: 10px; padding: 0 14px; }
    .t-brand b { display: none; }
    .t-nav-item span, .t-btn span { display: none; }
    .t-nav-item, .t-btn { padding: 0 16px; height: 52px; }
    .t-acc-btn { width: 52px; height: 52px; }
    body.tesla-mode .container { padding: 16px 18px 104px; }
    .t-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 18px 14px; }
    .t-card { width: 156px; }
    .t-rail .t-card { width: 156px; }
}

/* ============================================================
 * 13. 矮视口压缩（≤720px 高：一屏尽量看到游戏库第一行）
 * ============================================================ */
@media (max-height: 720px) {
    body.tesla-mode .container { padding-top: 12px; }
    .t-sec { margin: 0 0 14px; }
    .t-sec-h { font-size: 20px; margin: 0 0 8px; gap: 10px; }
    .t-sec-h .t-sec-sub { font-size: 14px; }
    .t-rail { gap: 12px; padding: 10px 10px 12px; margin: -10px -10px 0; scroll-padding: 10px; }
    .t-rail .t-card { width: 132px; }   /* 覆盖宽度档：矮屏 rail 卡更小 */
    .t-card .t-meta { padding: 7px 10px 9px; }
    .t-card .t-title { font-size: 15px; min-height: 40px; }
    .t-card .t-sub { font-size: 13px; margin-top: 3px; }
    .t-cplay { display: none; }
    .t-fav { width: 44px; height: 44px; font-size: 24px; }
    .t-chip { height: 48px; padding: 0 18px; font-size: 17px; }
    .t-chip-cat { height: 44px; padding: 0 14px; font-size: 15px; }
    .t-grid { gap: 16px 14px; }
}

/* ===== 好友/聊天/联机邀请（车机适配）===== */
/* 彩色品牌图标不吃反色滤镜 */
.t-ico-nf { filter: none; }
/* 导航好友未读角标 */
.t-nav-item { position: relative; }
.t-soc-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 22px; height: 22px; border-radius: 999px;
    background: #e82127; color: #fff; font-style: normal;
    font-size: 13px; font-weight: 700; line-height: 22px;
    text-align: center; padding: 0 6px;
}

/* 社交页：车机 1254×784 大屏触控优化（style.css 基础上加大） */
body.tesla-mode .social-wrap { height: calc(100vh - 148px); min-height: 0; gap: 14px; }
body.tesla-mode .soc-side { flex: 0 0 340px; width: 340px; border-radius: 16px; }
body.tesla-mode .soc-search input { font-size: 17px; padding: 12px 14px; }
body.tesla-mode .soc-search button { width: 52px; height: 48px; font-size: 20px; }
body.tesla-mode .soc-tab { font-size: 17px; padding: 14px 0; }
body.tesla-mode .soc-ava { width: 52px; height: 52px; }
body.tesla-mode .soc-friend { padding: 12px; }
body.tesla-mode .soc-friend-meta b { font-size: 17px; }
body.tesla-mode .soc-friend-meta span { font-size: 14.5px; }
body.tesla-mode .soc-mini { font-size: 15px; padding: 9px 16px; }
body.tesla-mode .soc-unread { font-size: 13px; min-width: 22px; text-align: center; }
body.tesla-mode .soc-chat { border-radius: 16px; }
body.tesla-mode .soc-chat-meta b { font-size: 18px; }
body.tesla-mode .soc-chat-meta span { font-size: 13.5px; }
body.tesla-mode .soc-invite-btn { font-size: 16px; padding: 12px 22px; }
body.tesla-mode .soc-del-btn { padding: 11px 13px; font-size: 17px; }
body.tesla-mode .soc-msgs { padding: 18px; gap: 12px; }
body.tesla-mode .soc-bubble { font-size: 17px; padding: 12px 16px; }
body.tesla-mode .soc-msg-ts { font-size: 12.5px; }
body.tesla-mode .soc-inv-card > b { font-size: 16px; }
body.tesla-mode .soc-inv-card > span { font-size: 15px; }
body.tesla-mode .soc-inputbar input { font-size: 17px; padding: 13px 16px; }
body.tesla-mode .soc-inputbar button { font-size: 16.5px; padding: 0 30px; }
body.tesla-mode .soc-game-item { font-size: 16px; padding: 12px 14px; }
body.tesla-mode .soc-game-list { max-height: 240px; }
body.tesla-mode .soc-invite-panel input { font-size: 16px; padding: 10px 13px; }
body.tesla-mode .soc-list-empty { font-size: 15px; }
body.tesla-mode .soc-empty { font-size: 17px; }
body.tesla-mode .soc-empty-ico { font-size: 52px; }
body.tesla-mode .soc-hint { font-size: 14.5px; }
/* toast 弹在车机顶栏下方居中，字号加大 */
body.tesla-mode #socToastBox { top: 76px; right: auto; left: 50%; transform: translateX(-50%); max-width: 480px; }
body.tesla-mode .soc-toast { font-size: 16px; padding: 15px 18px; }
body.tesla-mode .soc-toast-btn { font-size: 15px; padding: 9px 18px; }
body.tesla-mode .soc-toast-btn { font-size: 15px; padding: 9px 18px; }

/* ============================================================
   小窗模式快捷条（2026-10-06）
   特斯拉浏览器以 ~1050×630 小窗打开时，底部居中悬浮三个大按钮：
   车机投屏 / 声浪模拟器 / 车机全屏。由 tesla-quickbar.js 控制显隐。
   ============================================================ */
.t-quickbar {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1400;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-radius: 999px;
    /* 2026-10-09 用户要求：灰底换浅绿 + 半透明（毛玻璃效果由 16px backdrop-blur 提供） */
    background: rgba(120, 200, 130, .10);
    border: 1px solid rgba(255, 255, 255, .3);
    box-shadow: 0 18px 52px rgba(0, 0, 0, .68), inset 0 1px 0 rgba(255, 255, 255, .10);
    backdrop-filter: blur(16px) saturate(1.35);
    -webkit-backdrop-filter: blur(16px) saturate(1.35);
    animation: tQbIn .38s cubic-bezier(.2, .9, .3, 1.15) both;
}
.t-quickbar[hidden] { display: none !important; }
@keyframes tQbIn {
    from { opacity: 0; transform: translateX(-50%) translateY(26px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.t-qb-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 62px;
    padding: 0 28px;
    border-radius: 999px;
    /* ★ 2026-10-06：半透明灰底在暗背景下不醒目 → 改四色实心 + 白图标 */
    background: linear-gradient(180deg, #3a4252, #232936);
    border: 1.5px solid rgba(255, 255, 255, .26);
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .5px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
/* 图标一律洗成纯白剪影：原图标深海军蓝描边在暗底上发闷 */
.t-qb-btn .t-ico {
    width: 26px; height: 26px; flex: 0 0 auto;
    filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}
.t-qb-btn:active { transform: scale(.95); filter: brightness(1.14); }
.t-qb-btn:focus-visible { outline: 3px solid rgba(255, 255, 255, .6); outline-offset: 2px; }
/* 分色：投屏=蓝 · 宝盒=紫 · 声浪=琥珀 · 全屏=品牌红（各带同色光晕） */
.t-qb-btn.t-qb-cast {
    background: linear-gradient(180deg, #3d8bff, #1f5fd8);
    border-color: rgba(190, 220, 255, .45);
    box-shadow: 0 10px 24px rgba(31, 95, 216, .5), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.t-qb-btn.t-qb-moon {
    background: linear-gradient(180deg, #9a6bff, #6a35e6);
    border-color: rgba(215, 200, 255, .45);
    box-shadow: 0 10px 24px rgba(106, 53, 230, .5), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.t-qb-btn.t-qb-sound {
    background: linear-gradient(180deg, #ffa733, #f07c0c);
    border-color: rgba(255, 225, 180, .5);
    box-shadow: 0 10px 24px rgba(240, 124, 12, .5), inset 0 1px 0 rgba(255, 255, 255, .4);
}
/* 「车机全屏」用品牌红做主按钮，最显眼 */
.t-qb-btn.t-qb-accent {
    background: linear-gradient(180deg, #ff4b52, #e82127);
    border-color: rgba(255, 200, 200, .5);
    box-shadow: 0 10px 26px rgba(232, 33, 39, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
    color: #fff;
}
/* 小窗本身就窄：整体再收一档，保证一排放得下 */
@media (max-width: 1120px) {
    .t-quickbar { gap: 10px; padding: 8px 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    .t-qb-btn { height: 54px; padding: 0 20px; font-size: 18px; gap: 8px; }
    .t-qb-btn .t-ico { width: 22px; height: 22px; }
}

/* ============================================================
 * 车机顶栏 · 窄窗适配（2026-10-09）
 * ------------------------------------------------------------
 * 问题：6 个导航项（游戏库/好友/排行榜/月光宝盒/声浪模拟/投屏）即使
 *   只留图标也要 ~450px，加品牌标与搜索/头像整条要 ~590px —— 竖向
 *   小窗（<590px）会被撑出**整页横向滚动**（bodyScrollW 590 > vw）。
 * 手段：让导航自己横向滚（隐藏滚动条），顶栏永远不撑破页面。
 * ============================================================ */
@media (max-width: 700px) {
    .t-nav {
        flex: 1 1 auto;
        min-width: 0;                     /* ★ 关键：允许在 flex 里收缩 */
        overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none;
    }
    .t-nav::-webkit-scrollbar { display: none; }
    .t-brand, .t-right { flex: 0 0 auto; }
    .t-nav-item { padding: 0 12px; }
}

/* 竖屏提示条 · 小窗压成细条（2026-10-09）
   原来内距 12px + 字号 18px ≈ 占 67px；竖向小窗里寸土寸金，压成细条 */
@media (orientation: portrait) and (max-width: 1100px) {
    body.tesla-mode.is-portrait .container::before {
        padding: 5px 12px; margin-bottom: 8px;
        font-size: 12.5px; font-weight: 600; border-radius: 9px;
    }
}


/* ============================================================
 * ★ 车机版「软着陆」提示条（2026-10-10 新增，PHP: includes/car.php 的 car_notice_html）
 * ------------------------------------------------------------
 * 只在**自动识别**进入车机首页时出现，用户自己 ?ui=car 进来的不显示。
 *
 * 为什么需要它：国产车机（比亚迪 DiLink / 蔚来 / 小鹏 / 理想 / 吉利 GKUI…）用的
 * 都是普通 Android UA，没有任何车机标识，服务端认不出来，只能到浏览器里靠
 * 「大屏 + 横屏 + 无 Mobile」去猜。猜错时（安卓平板、Linux 触摸屏一体机）
 * 用户点一下就能回网页版，不会被卡在车机界面里出不来。
 *
 * 按钮带 .tf，焦点环自动复用上面第 1 节的规则 —— 手柄也能选中它。
 * ============================================================ */
body.tesla-mode .t-notice,
body.car-mode .t-notice {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px;
    margin: 0 0 26px;
    padding: 14px 22px;
    border-radius: var(--t-radius);
    background: linear-gradient(90deg, rgba(77,163,255,.15), rgba(77,163,255,.05));
    border: 1px solid rgba(77,163,255,.38);
    font-size: 17px; line-height: 1.35;
}
body.tesla-mode .t-notice-t,
body.car-mode .t-notice-t { color: var(--t-muted); }
body.tesla-mode .t-notice-t b,
body.car-mode .t-notice-t b { color: var(--t-fg); font-weight: 700; }
body.tesla-mode .t-notice-a,
body.car-mode .t-notice-a {
    margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 20px; border-radius: 999px;
    background: var(--t-panel-2); border: 1px solid var(--t-line);
    color: var(--t-fg); font-size: 16px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
}
body.tesla-mode .t-notice-a:active,
body.car-mode .t-notice-a:active { background: rgba(77,163,255,.28); }