/* ============================================================
 * 设计 token —— 逐字取自改造前的 fq/assets/tyy.css（小云自己的设计系统）
 * 颜色 / 圆角 / 间距 / 字体一个值都没改。
 * ============================================================ */
:root,
html[data-theme="night"],
html[data-theme="day"] {
    --c-primary: #3370ff;
    --c-ink: #1d2129;
    --c-on-primary: #1d2129;
    --c-on-primary-mute: #4e5969;
    --c-night: #f5f7fa;
    --c-night-soft: #ffffff;
    --c-light: #ffffff;
    --c-cool: #f7f8fa;
    --c-hair-dark: #e5e6eb;
    --c-hair-light: #f2f3f5;
    --c-ink-mute: #86909c;
    --c-hover: #f2f3f5;
    --c-fill: #3370ff;
    --c-on-fill: #ffffff;
    --c-mask: rgba(0, 0, 0, 0.4);
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-pill: 8px;
    --r-full: 9999px;
    --s-xxs: 4px;
    --s-xs: 8px;
    --s-sm: 12px;
    --s-md: 16px;
    --s-lg: 18px;
    --s-xl: 24px;
    --s-xxl: 32px;
    --s-huge: 48px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

html, body {
    background: var(--c-night);
    color: var(--c-on-primary);
    font-family: var(--font);
    letter-spacing: 0;
}

a { color: var(--c-primary); }
a:hover { color: #2b5fd9; }

/* ============================================================
 * 壳层样式 —— 逐字取自改造前的 fq/template/Admin_index.php
 * ============================================================ */
* {
    margin:0; padding:0; box-sizing:border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html,body{
    height: 100%;
    overflow: hidden;
}
body {
    background: #f7f8fa;
    color: #1d2129;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
.container {
    height:100%;
    position:relative;
}
.sb-mask {
    position:fixed;
    inset:0;
    background: rgba(0,0,0,0.4);
    z-index:998;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: all .22s ease;
}
.sb-mask.show {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.sidebar {
    width:252px;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:999;
    color: #1d2129;
    background: #ffffff;
    box-shadow: 2px 0 12px rgba(0,0,0,0.08);
    transform:translateX(-100%);
    transition: all .22s ease;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.sidebar.show {
    transform:translateX(0);
}
.logo {
    height:58px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px 0 18px;
    font-size:16px;
    font-weight:600;
    color: #1d2129;
    border-bottom:1px solid #e5e6eb;
}
.sidebar-close {
    width:28px;
    height:28px;
    line-height:26px;
    text-align:center;
    font-size:18px;
    cursor:pointer;
    border-radius: 8px;
    border: 1px solid #e5e6eb;
    color: #4e5969;
}
.nav_list {
    padding:12px;
    margin:0;
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
.nav_item {
    list-style:none;
    margin:0 0 4px;
    cursor:pointer;
    border-radius:10px;
}
.nav_item .nav_link,
.nav_row {
    display:flex;
    align-items:center;
    min-height:44px;
    padding:0 12px;
    border-radius: 10px;
    color: #1d2129;
    font-size:14px;
    font-weight:400;
}
.nav_item .nav_link:hover,
.nav_row:hover {
    background: #f2f3f5;
}
.nav_arrow {
    margin-left:auto;
    color: #86909c;
    font-size:14px;
    transition: transform .2s ease;
}
.nav_item.open .nav_arrow {
    transform:rotate(90deg);
}
.sub_nav {
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .2s ease;
}
.sub_nav.open { grid-template-rows:1fr; }
.sub_nav ul {
    overflow:hidden;
    min-height:0;
    margin:0;
    padding:0 0 0 12px;
    list-style:none;
}
.sub_nav a {
    display:flex;
    align-items:center;
    min-height:40px;
    padding:0 12px;
    font-size:14px;
    color: #4e5969;
    border-radius:10px;
}
.sub_nav a:hover {
    background: #f2f3f5;
    color: #1d2129;
}
.toggle-btn {
    position:fixed;
    left:16px;
    top:16px;
    min-width:50px;
    height:36px;
    line-height:34px;
    padding:0 14px;
    background:#3370ff;
    color: #fff;
    text-align:center;
    border-radius: 10px;
    cursor:pointer;
    z-index:99;
    border:none;
    font-size:14px;
    font-weight:500;
}
.main {
    height:100vh;
    display:flex;
    flex-direction:column;
}
.header {
    height:64px;
    background: #ffffff;
    border-bottom:1px solid #e5e6eb;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0 24px 0 80px;
    position:relative;
    z-index:98;
}
.header-word {
    margin-right:auto;
    font-size:16px;
    font-weight:600;
    color:#1d2129;
}
.header-actions {
    display:flex;
    align-items:center;
    gap:10px;
}
.user_info {
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    position:relative;
}
.user_info img {
    width:28px;
    height:28px;
    border-radius: 50%;
    object-fit:cover;
    border:1px solid #e5e6eb;
}
.user_drop {
    position:absolute;
    top:40px;
    right:0;
    width:140px;
    background: #ffffff;
    border:1px solid #e5e6eb;
    border-radius: 10px;
    box-shadow:0 2px 12px rgba(0,0,0,0.08);
    display:none;
    z-index:1000;
}
.user_drop a {
    display:block;
    padding:12px 16px;
    font-size:14px;
    color:#4e5969;
}
.user_drop-name {
    display:block;
    padding: 12px 16px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #1d2129;
    border-bottom: 1px solid #e5e6eb;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user_drop a:hover {
    background:#f2f3f5;
}
.tab_bar {
    min-height:44px;
    background: #ffffff;
    border-bottom:1px solid #e5e6eb;
    display:flex;
    align-items:center;
    padding:8px 16px;
    gap:8px;
    overflow-x:auto;
    white-space:nowrap;
    flex-shrink:0;
}
.tab {
    padding:8px 16px;
    height:32px;
    line-height:14px;
    background:#f7f8fa;
    border:1px solid #e5e6eb;
    border-radius: 10px;
    font-size:14px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color: #4e5969;
}
.tab.active {
    background: #3370ff;
    color: #ffffff;
    border-color: #3370ff;
}
.tab .close { font-size:12px; }
.content_box {
    flex:1;
    background: #f7f8fa;
    overflow:hidden;
}
.iframe {
    width:100%;
    height:100%;
    border:none;
    display:none;
}
.iframe.show {
    display:block;
}

/* ==================================================================
   苹果 / iPhone 适配（新增，放在最后以覆盖上面的老规则）
   原来的三个坑：
   1) .main 写死 height:100vh —— iOS 上 100vh 是按"地址栏收起后"算的，
      地址栏还在时整个框架就比屏幕高，底部标签栏/内容被推到屏幕外；
   2) .toggle-btn 固定在 left:16px / top:16px —— 全屏或刘海机上被灵动岛/
      状态栏压住，而侧边栏只能靠这个按钮打开，等于进不了菜单；
   3) 侧边栏和内容区都没吃安全区，底部菜单项会被 Home 条盖住。
   ================================================================== */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

html, body {
    overflow: hidden;
    overscroll-behavior: none;              /* 禁掉整页橡皮筋，否则框架跟着晃 */
    -webkit-text-size-adjust: 100%;
}

/* 高度用 dvh，老 iOS 回退到 JS 写入的 --vvh */
.main {
    height: 100vh;
    height: 100dvh;
    height: var(--vvh, 100dvh);
    min-height: 0;
}
.container {
    height: 100vh;
    height: 100dvh;
    height: var(--vvh, 100dvh);
}

/* 菜单按钮：躲开刘海/灵动岛，触控区加到 44px 高 */
.toggle-btn {
    left: calc(16px + var(--sal));
    top: calc(16px + var(--sat));
    min-width: 56px;
    height: 40px;
    line-height: 38px;
    padding: 0 16px;
    font-size: 15px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 侧边栏：顶部留出状态栏，底部留出 Home 条，滚动到头能停住 */
.sidebar {
    padding-top: var(--sat);
    padding-bottom: var(--sab);
    padding-left: var(--sal);
    overscroll-behavior: contain;
}
.sidebar .nav_list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(12px + var(--sab));
}
.nav_item .nav_link,
.nav_row,
.sub_nav a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 顶栏：右侧安全区，避免头像被圆角/灵动岛切掉 */
.header {
    padding-left: calc(80px + var(--sal));
    padding-right: calc(24px + var(--sar));
}
.header-actions { flex-shrink: 0; }

/* 上下拉菜单在窄屏上不许溢出屏幕 */
.user_drop {
    max-width: calc(100vw - 32px);
    -webkit-overflow-scrolling: touch;
}

/* 标签栏：横向滚动到底部安全区，滚动条藏掉 */
.tab_bar {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-left: calc(16px + var(--sal));
    padding-right: calc(16px + var(--sar));
}
.tab_bar::-webkit-scrollbar { display: none; }
.tab { flex-shrink: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* iframe 内容区：留出底部安全区（横屏 iPhone 左右也会被切） */
.content_box {
    min-height: 0;
    padding-left: var(--sal);
    padding-right: var(--sar);
}
.iframe { display: none; }
.iframe.show { display: block; }

/* iPhone 竖屏：顶栏收窄，标题让位给头像 */
@media (max-width: 480px) {
    .header {
        height: 56px;
        padding-left: calc(76px + var(--sal));
        padding-right: calc(12px + var(--sar));
    }
    .header-word { font-size: 15px; }
    .tab_bar { padding-top: 6px; padding-bottom: 6px; }
    .tab { padding: 8px 12px; font-size: 13px; height: 34px; }
}

/* iPhone SE / mini：再压一档 */
@media (max-width: 390px) {
    .toggle-btn { min-width: 52px; padding: 0 12px; font-size: 14px; }
    .sidebar { width: 232px; }
    .header-word { font-size: 14px; }
}

/* 键盘弹起时把菜单按钮收起来，免得浮在输入框上挡手 */
body.kb-open .toggle-btn { display: none; }

/* 横屏矮屏：顶栏和标签栏一起瘦身，把高度让给 iframe */
@media (max-height: 460px) and (orientation: landscape) {
    .header { height: 46px; }
    .tab_bar { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
    .toggle-btn { height: 34px; line-height: 32px; top: calc(8px + var(--sat)); }
}

/* ------------------------------------------------------------
 * 内容区：改造前是一个个 <iframe class="iframe">，现在换成
 * <div class="pane"> 承载 Vue 视图；声明与 .iframe 一致，
 * 另把原先落在 iframe 内部文档上的滚动搬到 pane 自己身上。
 * ------------------------------------------------------------ */
.pane {
    width:100%;
    height:100%;
    border:none;
    display:none;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
}
.pane.show {
    display:block;
}

/* ============================================================
 * 登录页样式 —— 逐字取自改造前的 /dl/index.php
 * 只有 body 那两条规则改挂到 .login-page（页面不再独占 body），
 * 声明的值一个都没动。
 * ============================================================ */
* {
  box-sizing: border-box;
}
.login-page {
  min-height: 100vh;
  margin: 0;
  background-color: #f7f8fa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-box {
  width: 100%;
  max-width: 400px;
  padding: 40px 32px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.login-box h2 {
  text-align: center;
  margin: 0 0 32px;
  font-size: 28px;
  font-weight: 600;
  color: #1d2129;
}
.form-item {
  margin-bottom: 20px;
}
.form-item label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #4e5969;
}
.form-item input {
  width: 100%;
  height: 44px;
  border: 1px solid #d0d5dd;
  padding: 0 16px;
  font-size: 16px;
  outline: none;
  background: #fff;
  color: #1d2129;
  border-radius: 10px;
  transition: border-color 0.2s;
}
.form-item input:focus {
  border-color: #3370ff;
}
.err-msg {
  display: block;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 13px;
  line-height: 1.5;
}
.btn-login {
  width: 100%;
  height: 46px;
  margin-top: 8px;
  background: #3370ff;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-login:hover {
  background: #2b60de;
}
.footer {
  margin-top: 24px;
  font-size: 13px;
  color: #86909c;
}

/* ============================================================
 * 视图 home 样式 —— 逐字取自 fq/fq.php
 * 选择器统一加 .view-home 前缀，值一个都没动。
 * ============================================================ */
.view-home {
    --brand:        #3370ff;
    --brand-2:      #5b8cff;
    --text:         #1d2129;
    --text-sub:     #4e5969;
    --text-mute:    #86909c;
    --line:         #eceef2;
    --bg:           #f4f6fa;
    --card:         #ffffff;

    --green:        #00b42a;
    --green-soft:   #e8fff0;
    --orange:       #ff7d00;
    --orange-soft:  #fff4e6;
    --violet:       #7b61ff;
    --violet-soft:  #f1edff;
    --cyan:         #0fc6c2;
    --cyan-soft:    #e6fbfa;

    --sh-card:  0 1px 2px rgba(29,33,41,.04), 0 8px 24px rgba(29,33,41,.06);
    --sh-hair:  0 1px 2px rgba(29,33,41,.05);
    --r-lg: 20px;
    --r-md: 14px;
    --r-sm: 10px;
    --font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
}

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


.view-home, .view-home {
    min-height: 100%;
    height: 100%;
}

.view-home {
    background:
        radial-gradient(1200px 420px at 50% -180px, #e8efff 0%, rgba(232,239,255,0) 62%),
        var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    padding: 20px 16px calc(28px + env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    animation: fade .5s ease both;
}

@keyframes fade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}


.view-home .wrap {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}


/* ============================== 顶部身份卡 ============================== */

.view-home .hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #3370ff 0%, #5b8cff 52%, #7b9dff 100%);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(51,112,255,.26);
    margin-bottom: 18px;
}

.view-home .hero::after {
    content: '';
    position: absolute;
    right: -56px; top: -72px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,.13);
    pointer-events: none;
}

.view-home .hero::before {
    content: '';
    position: absolute;
    right: 46px; bottom: -96px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    pointer-events: none;
}

.view-home .hero-avatar {
    position: relative;
    width: 66px; height: 66px;
    flex-shrink: 0;
    border-radius: 50%;
    padding: 3px;
    background: rgba(255,255,255,.35);
}

.view-home .hero-avatar img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #fff;
}

.view-home .hero-dot {
    position: absolute;
    right: 1px; bottom: 1px;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: #23d160;
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.04);
}

.view-home .hero-main { position: relative; z-index: 1; min-width: 0; flex: 1; }

.view-home .hero-hello {
    font-size: 13px;
    opacity: .88;
    letter-spacing: .3px;
}

.view-home .hero-name {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .3px;
    margin: 3px 0 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-home .hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.view-home .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.26);
    white-space: nowrap;
}

.view-home .hero-tag b { font-weight: 600; }


/* ============================== 区块标题 ============================== */

.view-home .sec {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 4px 11px;
}

.view-home .sec-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
}

.view-home .sec-sub {
    font-size: 12px;
    color: var(--text-mute);
}

.view-home .sec-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line), rgba(236,238,242,0));
}


/* ============================== 数据卡网格 ============================== */

.view-home .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}


.view-home .stat {
    position: relative;
    overflow: hidden;
    background: var(--card);
    border-radius: var(--r-md);
    padding: 16px 16px 15px;
    box-shadow: var(--sh-card);
    border: 1px solid rgba(236,238,242,.9);
    transition: transform .16s ease, box-shadow .16s ease;
    animation: pop .45s cubic-bezier(.22,.9,.3,1.1) both;
}

.view-home .stat:nth-child(1) { animation-delay: .04s; }

.view-home .stat:nth-child(2) { animation-delay: .10s; }

.view-home .stat:nth-child(3) { animation-delay: .16s; }

.view-home .stat:nth-child(4) { animation-delay: .22s; }

@keyframes pop {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (hover: hover) {

    .view-home .stat:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 6px rgba(29,33,41,.05), 0 14px 30px rgba(29,33,41,.09);
    }


}

/* 卡片顶部一条渐变色带 */

.view-home .stat::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 3px;
    background: var(--bar, linear-gradient(90deg,#3370ff,#5b8cff));
    opacity: .95;
}


.view-home .stat-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.view-home .stat-icon {
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soft, #e8f0ff);
    color: var(--ink, var(--brand));
}

.view-home .stat-icon svg { width: 18px; height: 18px; display: block; }

.view-home .stat-label {
    font-size: 12.5px;
    color: var(--text-sub);
    font-weight: 600;
    line-height: 1.35;
    min-width: 0;
}


.view-home .stat-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-height: 40px;
    line-height: 1.05;
}

.view-home .stat-num {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.6px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    color: var(--text);
}

.view-home .stat-unit {
    font-size: 12.5px;
    color: var(--text-mute);
    font-weight: 600;
}


.view-home .stat-foot {
    margin-top: 9px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.view-home .stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--text-mute);
}

.view-home .stat-row b {
    color: var(--text-sub);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}


.view-home .bar {
    height: 6px;
    border-radius: 999px;
    background: #f0f2f6;
    overflow: hidden;
    margin: 8px 0 3px;
}

.view-home .bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--bar, linear-gradient(90deg,#3370ff,#5b8cff));
    transition: width .5s cubic-bezier(.22,.9,.3,1);
}


.view-home .pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--soft, #e8f0ff);
    color: var(--ink, var(--brand));
    white-space: nowrap;
}

.view-home .pill.live::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: blink 1.4s ease-in-out infinite;
}

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.28} }


/* 配色变体 */

.view-home .stat.blue { --bar: linear-gradient(90deg,#3370ff,#7ba2ff); --soft:#e8f0ff; --ink:#3370ff; }

.view-home .stat.green { --bar: linear-gradient(90deg,#00b42a,#4bd66a); --soft:#e8fff0; --ink:#00a026; }

.view-home .stat.orange { --bar: linear-gradient(90deg,#ff7d00,#ffa64d); --soft:#fff4e6; --ink:#e57000; }

.view-home .stat.violet { --bar: linear-gradient(90deg,#7b61ff,#a794ff); --soft:#f1edff; --ink:#6a4dff; }


/* ============================== 今日用量排行 ============================== */

.view-home .rank {
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: var(--sh-hair);
    border: 1px solid rgba(236,238,242,.9);
    padding: 6px 14px;
}

.view-home .rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f6f8;
}

.view-home .rank-item:last-child { border-bottom: none; }

.view-home .rank-no {
    width: 20px; height: 20px;
    flex-shrink: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: #f2f3f5;
    color: var(--text-mute);
}

.view-home .rank-no.r1 { background: linear-gradient(135deg,#ffb020,#ff8f00); color:#fff; }

.view-home .rank-no.r2 { background: linear-gradient(135deg,#b9c2d0,#98a2b3); color:#fff; }

.view-home .rank-no.r3 { background: linear-gradient(135deg,#e0a878,#c98b56); color:#fff; }

.view-home .rank-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-home .rank-bar {
    width: 84px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #f0f2f6;
    overflow: hidden;
}

.view-home .rank-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width .5s cubic-bezier(.22,.9,.3,1);
}

.view-home .rank-bar i.ok { background: linear-gradient(90deg,#00b42a,#4bd66a); }

.view-home .rank-bar i.warn { background: linear-gradient(90deg,#ff7d00,#ffa64d); }

.view-home .rank-bar i.full { background: linear-gradient(90deg,#f53f3f,#ff7875); }

.view-home .rank-num {
    width: 58px;
    flex-shrink: 0;
    text-align: right;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.view-home .rank-num em {
    font-style: normal;
    font-weight: 600;
    color: var(--text-mute);
    font-size: 11.5px;
}


/* ============================== 底部说明 ============================== */

.view-home .note {
    margin-top: 16px;
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: var(--sh-hair);
    border: 1px solid rgba(236,238,242,.9);
    padding: 13px 16px;
    font-size: 12px;
    color: var(--text-mute);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.view-home .note-k { color: var(--text-sub); font-weight: 600; }

.view-home .note-sep { color: var(--line); }

.view-home .refresh {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    background: #eef3ff;
    border: none;
    border-radius: 999px;
    padding: 6px 13px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease;
}

.view-home .refresh:hover { background: #e2ecff; }

.view-home .refresh:active { transform: scale(.97); }

.view-home .refresh svg { width: 13px; height: 13px; }

.view-home .refresh.spin svg { animation: spin .7s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }


.view-home .auto {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-sub);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.view-home .auto input {
    width: 14px; height: 14px;
    accent-color: var(--brand);
    margin: 0;
}


/* 空态（拿不到数据时） */

.view-home .empty-hint {
    grid-column: 1 / -1;
    background: var(--card);
    border: 1px dashed #dcdfe6;
    border-radius: var(--r-md);
    padding: 28px 16px;
    text-align: center;
    color: var(--text-mute);
    font-size: 13px;
    line-height: 1.9;
}

.view-home .empty-hint b { color: var(--text-sub); }


/* ============================== 响应式 ============================== */

/* 平板及以上：四列并排 */

@media (min-width: 720px) {

    .view-home .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .view-home .stat-num { font-size: 27px; }

    .view-home { padding: 24px 20px calc(32px + env(safe-area-inset-bottom, 0px)); }


}

/* 大屏：数值再大一点，卡片留白多一点 */

@media (min-width: 1024px) {

    .view-home .stat { padding: 18px 18px 16px; }

    .view-home .stat-num { font-size: 30px; }


}


/* 小屏（iPhone SE / mini）：紧一点，字号降一档但不小于 12px */

@media (max-width: 380px) {

    .view-home { padding: 14px 12px calc(22px + env(safe-area-inset-bottom, 0px)); }

    .view-home .hero { padding: 16px 16px; gap: 12px; border-radius: 16px; }

    .view-home .hero-avatar { width: 56px; height: 56px; }

    .view-home .hero-name { font-size: 18px; }

    .view-home .hero-tag { font-size: 11px; padding: 3px 8px; }

    .view-home .grid { gap: 10px; }

    .view-home .stat { padding: 14px 13px 13px; border-radius: 12px; }

    .view-home .stat-icon { width: 30px; height: 30px; border-radius: 9px; }

    .view-home .stat-icon svg { width: 16px; height: 16px; }

    .view-home .stat-label { font-size: 12px; }

    .view-home .stat-num { font-size: 25px; }

    .view-home .stat-row { font-size: 11.5px; }


}


/* iPad / iPhone 横屏：矮屏收紧纵向留白 */

@media (max-height: 560px) and (orientation: landscape) {

    .view-home { padding-top: 12px; }

    .view-home .hero { padding: 13px 16px; margin-bottom: 12px; }

    .view-home .hero-avatar { width: 50px; height: 50px; }

    .view-home .hero-name { font-size: 17px; margin: 2px 0 5px; }

    .view-home .stat { padding: 12px 14px; }

    .view-home .stat-head { margin-bottom: 8px; }

    .view-home .stat-value { min-height: 32px; }

    .view-home .stat-num { font-size: 24px; }


}


/* iOS 平滑：卡片不做整页回弹 */

.view-home, .view-home { overscroll-behavior: none; }


/* ============================================================
 * 视图 dashboard 样式 —— 逐字取自 fq/fq.php
 * 选择器统一加 .view-dashboard 前缀，值一个都没动。
 * ============================================================ */
.view-dashboard {
    --brand:        #3370ff;
    --brand-2:      #5b8cff;
    --text:         #1d2129;
    --text-sub:     #4e5969;
    --text-mute:    #86909c;
    --line:         #eceef2;
    --bg:           #f4f6fa;
    --card:         #ffffff;

    --green:        #00b42a;
    --green-soft:   #e8fff0;
    --orange:       #ff7d00;
    --orange-soft:  #fff4e6;
    --violet:       #7b61ff;
    --violet-soft:  #f1edff;
    --cyan:         #0fc6c2;
    --cyan-soft:    #e6fbfa;

    --sh-card:  0 1px 2px rgba(29,33,41,.04), 0 8px 24px rgba(29,33,41,.06);
    --sh-hair:  0 1px 2px rgba(29,33,41,.05);
    --r-lg: 20px;
    --r-md: 14px;
    --r-sm: 10px;
    --font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
}

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


.view-dashboard, .view-dashboard {
    min-height: 100%;
    height: 100%;
}

.view-dashboard {
    background:
        radial-gradient(1200px 420px at 50% -180px, #e8efff 0%, rgba(232,239,255,0) 62%),
        var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    padding: 20px 16px calc(28px + env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    animation: fade .5s ease both;
}

@keyframes fade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}


.view-dashboard .wrap {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}


/* ============================== 顶部身份卡 ============================== */

.view-dashboard .hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #3370ff 0%, #5b8cff 52%, #7b9dff 100%);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(51,112,255,.26);
    margin-bottom: 18px;
}

.view-dashboard .hero::after {
    content: '';
    position: absolute;
    right: -56px; top: -72px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,.13);
    pointer-events: none;
}

.view-dashboard .hero::before {
    content: '';
    position: absolute;
    right: 46px; bottom: -96px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    pointer-events: none;
}

.view-dashboard .hero-avatar {
    position: relative;
    width: 66px; height: 66px;
    flex-shrink: 0;
    border-radius: 50%;
    padding: 3px;
    background: rgba(255,255,255,.35);
}

.view-dashboard .hero-avatar img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #fff;
}

.view-dashboard .hero-dot {
    position: absolute;
    right: 1px; bottom: 1px;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: #23d160;
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.04);
}

.view-dashboard .hero-main { position: relative; z-index: 1; min-width: 0; flex: 1; }

.view-dashboard .hero-hello {
    font-size: 13px;
    opacity: .88;
    letter-spacing: .3px;
}

.view-dashboard .hero-name {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .3px;
    margin: 3px 0 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-dashboard .hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.view-dashboard .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.26);
    white-space: nowrap;
}

.view-dashboard .hero-tag b { font-weight: 600; }


/* ============================== 区块标题 ============================== */

.view-dashboard .sec {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 4px 11px;
}

.view-dashboard .sec-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
}

.view-dashboard .sec-sub {
    font-size: 12px;
    color: var(--text-mute);
}

.view-dashboard .sec-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line), rgba(236,238,242,0));
}


/* ============================== 数据卡网格 ============================== */

.view-dashboard .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}


.view-dashboard .stat {
    position: relative;
    overflow: hidden;
    background: var(--card);
    border-radius: var(--r-md);
    padding: 16px 16px 15px;
    box-shadow: var(--sh-card);
    border: 1px solid rgba(236,238,242,.9);
    transition: transform .16s ease, box-shadow .16s ease;
    animation: pop .45s cubic-bezier(.22,.9,.3,1.1) both;
}

.view-dashboard .stat:nth-child(1) { animation-delay: .04s; }

.view-dashboard .stat:nth-child(2) { animation-delay: .10s; }

.view-dashboard .stat:nth-child(3) { animation-delay: .16s; }

.view-dashboard .stat:nth-child(4) { animation-delay: .22s; }

@keyframes pop {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (hover: hover) {

    .view-dashboard .stat:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 6px rgba(29,33,41,.05), 0 14px 30px rgba(29,33,41,.09);
    }


}

/* 卡片顶部一条渐变色带 */

.view-dashboard .stat::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 3px;
    background: var(--bar, linear-gradient(90deg,#3370ff,#5b8cff));
    opacity: .95;
}


.view-dashboard .stat-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.view-dashboard .stat-icon {
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soft, #e8f0ff);
    color: var(--ink, var(--brand));
}

.view-dashboard .stat-icon svg { width: 18px; height: 18px; display: block; }

.view-dashboard .stat-label {
    font-size: 12.5px;
    color: var(--text-sub);
    font-weight: 600;
    line-height: 1.35;
    min-width: 0;
}


.view-dashboard .stat-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-height: 40px;
    line-height: 1.05;
}

.view-dashboard .stat-num {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.6px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    color: var(--text);
}

.view-dashboard .stat-unit {
    font-size: 12.5px;
    color: var(--text-mute);
    font-weight: 600;
}


.view-dashboard .stat-foot {
    margin-top: 9px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.view-dashboard .stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--text-mute);
}

.view-dashboard .stat-row b {
    color: var(--text-sub);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}


.view-dashboard .bar {
    height: 6px;
    border-radius: 999px;
    background: #f0f2f6;
    overflow: hidden;
    margin: 8px 0 3px;
}

.view-dashboard .bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--bar, linear-gradient(90deg,#3370ff,#5b8cff));
    transition: width .5s cubic-bezier(.22,.9,.3,1);
}


.view-dashboard .pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--soft, #e8f0ff);
    color: var(--ink, var(--brand));
    white-space: nowrap;
}

.view-dashboard .pill.live::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: blink 1.4s ease-in-out infinite;
}

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.28} }


/* 配色变体 */

.view-dashboard .stat.blue { --bar: linear-gradient(90deg,#3370ff,#7ba2ff); --soft:#e8f0ff; --ink:#3370ff; }

.view-dashboard .stat.green { --bar: linear-gradient(90deg,#00b42a,#4bd66a); --soft:#e8fff0; --ink:#00a026; }

.view-dashboard .stat.orange { --bar: linear-gradient(90deg,#ff7d00,#ffa64d); --soft:#fff4e6; --ink:#e57000; }

.view-dashboard .stat.violet { --bar: linear-gradient(90deg,#7b61ff,#a794ff); --soft:#f1edff; --ink:#6a4dff; }


/* ============================== 今日用量排行 ============================== */

.view-dashboard .rank {
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: var(--sh-hair);
    border: 1px solid rgba(236,238,242,.9);
    padding: 6px 14px;
}

.view-dashboard .rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f6f8;
}

.view-dashboard .rank-item:last-child { border-bottom: none; }

.view-dashboard .rank-no {
    width: 20px; height: 20px;
    flex-shrink: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: #f2f3f5;
    color: var(--text-mute);
}

.view-dashboard .rank-no.r1 { background: linear-gradient(135deg,#ffb020,#ff8f00); color:#fff; }

.view-dashboard .rank-no.r2 { background: linear-gradient(135deg,#b9c2d0,#98a2b3); color:#fff; }

.view-dashboard .rank-no.r3 { background: linear-gradient(135deg,#e0a878,#c98b56); color:#fff; }

.view-dashboard .rank-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-dashboard .rank-bar {
    width: 84px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #f0f2f6;
    overflow: hidden;
}

.view-dashboard .rank-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width .5s cubic-bezier(.22,.9,.3,1);
}

.view-dashboard .rank-bar i.ok { background: linear-gradient(90deg,#00b42a,#4bd66a); }

.view-dashboard .rank-bar i.warn { background: linear-gradient(90deg,#ff7d00,#ffa64d); }

.view-dashboard .rank-bar i.full { background: linear-gradient(90deg,#f53f3f,#ff7875); }

.view-dashboard .rank-num {
    width: 58px;
    flex-shrink: 0;
    text-align: right;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.view-dashboard .rank-num em {
    font-style: normal;
    font-weight: 600;
    color: var(--text-mute);
    font-size: 11.5px;
}


/* ============================== 底部说明 ============================== */

.view-dashboard .note {
    margin-top: 16px;
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: var(--sh-hair);
    border: 1px solid rgba(236,238,242,.9);
    padding: 13px 16px;
    font-size: 12px;
    color: var(--text-mute);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.view-dashboard .note-k { color: var(--text-sub); font-weight: 600; }

.view-dashboard .note-sep { color: var(--line); }

.view-dashboard .refresh {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    background: #eef3ff;
    border: none;
    border-radius: 999px;
    padding: 6px 13px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease;
}

.view-dashboard .refresh:hover { background: #e2ecff; }

.view-dashboard .refresh:active { transform: scale(.97); }

.view-dashboard .refresh svg { width: 13px; height: 13px; }

.view-dashboard .refresh.spin svg { animation: spin .7s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }


.view-dashboard .auto {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-sub);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.view-dashboard .auto input {
    width: 14px; height: 14px;
    accent-color: var(--brand);
    margin: 0;
}


/* 空态（拿不到数据时） */

.view-dashboard .empty-hint {
    grid-column: 1 / -1;
    background: var(--card);
    border: 1px dashed #dcdfe6;
    border-radius: var(--r-md);
    padding: 28px 16px;
    text-align: center;
    color: var(--text-mute);
    font-size: 13px;
    line-height: 1.9;
}

.view-dashboard .empty-hint b { color: var(--text-sub); }


/* ============================== 响应式 ============================== */

/* 平板及以上：四列并排 */

@media (min-width: 720px) {

    .view-dashboard .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .view-dashboard .stat-num { font-size: 27px; }

    .view-dashboard { padding: 24px 20px calc(32px + env(safe-area-inset-bottom, 0px)); }


}

/* 大屏：数值再大一点，卡片留白多一点 */

@media (min-width: 1024px) {

    .view-dashboard .stat { padding: 18px 18px 16px; }

    .view-dashboard .stat-num { font-size: 30px; }


}


/* 小屏（iPhone SE / mini）：紧一点，字号降一档但不小于 12px */

@media (max-width: 380px) {

    .view-dashboard { padding: 14px 12px calc(22px + env(safe-area-inset-bottom, 0px)); }

    .view-dashboard .hero { padding: 16px 16px; gap: 12px; border-radius: 16px; }

    .view-dashboard .hero-avatar { width: 56px; height: 56px; }

    .view-dashboard .hero-name { font-size: 18px; }

    .view-dashboard .hero-tag { font-size: 11px; padding: 3px 8px; }

    .view-dashboard .grid { gap: 10px; }

    .view-dashboard .stat { padding: 14px 13px 13px; border-radius: 12px; }

    .view-dashboard .stat-icon { width: 30px; height: 30px; border-radius: 9px; }

    .view-dashboard .stat-icon svg { width: 16px; height: 16px; }

    .view-dashboard .stat-label { font-size: 12px; }

    .view-dashboard .stat-num { font-size: 25px; }

    .view-dashboard .stat-row { font-size: 11.5px; }


}


/* iPad / iPhone 横屏：矮屏收紧纵向留白 */

@media (max-height: 560px) and (orientation: landscape) {

    .view-dashboard { padding-top: 12px; }

    .view-dashboard .hero { padding: 13px 16px; margin-bottom: 12px; }

    .view-dashboard .hero-avatar { width: 50px; height: 50px; }

    .view-dashboard .hero-name { font-size: 17px; margin: 2px 0 5px; }

    .view-dashboard .stat { padding: 12px 14px; }

    .view-dashboard .stat-head { margin-bottom: 8px; }

    .view-dashboard .stat-value { min-height: 32px; }

    .view-dashboard .stat-num { font-size: 24px; }


}


/* iOS 平滑：卡片不做整页回弹 */

.view-dashboard, .view-dashboard { overscroll-behavior: none; }


/* ============================================================
 * 视图 goods 样式 —— 逐字取自 fq/template/Goods_List5.inc.php
 * 选择器统一加 .view-goods 前缀，值一个都没动。
 * ============================================================ */
.view-goods * { box-sizing: border-box; }

        .view-goods, .view-goods {
            margin: 0;
            min-height: 100%;
            background: var(--c-night-soft);
            color: var(--c-on-primary);
            font-family: var(--font);
            letter-spacing: 0;
        }

        .view-goods a { color: inherit; text-decoration: none; }

        .view-goods button { font-family: inherit; }

        .view-goods .page {
            max-width: 1080px;
            margin: 0 auto;
            padding: 20px 16px 56px;
        }

        .view-goods .toolbar {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--c-hair-dark);
        }

        .view-goods .toolbar-copy h1 { margin: 0; font-size: 22px; font-weight: 700; }

        .view-goods .toolbar-copy p { margin: 6px 0 0; font-size: 12px; color: var(--c-on-primary-mute); }

        .view-goods .btn-ghost {
            display: inline-flex; align-items: center; justify-content: center;
            min-height: 36px; padding: 0 16px;
            border: 1px solid var(--c-on-primary); border-radius: var(--r-pill);
            background: transparent; color: var(--c-on-primary);
            font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer;
        }

        .view-goods .btn-ghost:hover { background: var(--c-hover); }


        /* 上下排列列表 */

        .view-goods .goods-list { list-style: none; margin: 0; padding: 0; }

        .view-goods .goods-row {
            display: flex; align-items: center; gap: 14px;
            background: var(--c-night-soft);
            border: 1px solid var(--c-hair-dark);
            border-radius: var(--r-sm);
            padding: 12px 14px;
            margin-bottom: 10px;
            transition: border-color .15s ease;
        }

        .view-goods .goods-row:hover { border-color: var(--c-on-primary); }

        .view-goods .goods-thumb {
            width: 72px; height: 72px;
            border-radius: 10px;
            object-fit: cover;
            background: var(--c-hover);
            flex-shrink: 0;
        }

        .view-goods .goods-info { flex: 1; min-width: 0; }

        .view-goods .goods-title {
            margin: 0 0 6px;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.45;
            color: var(--c-on-primary);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .view-goods .goods-sub { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--c-on-primary-mute); }

        .view-goods .goods-price { font-size: 15px; font-weight: 700; color: var(--c-on-primary); }

        .view-goods .goods-price small { font-size: 12px; font-weight: 400; margin-right: 2px; color: var(--c-on-primary-mute); }

        .view-goods .goods-id { font-size: 12px; font-weight: 700; color: #ff4757; background: rgba(255,71,87,.12); padding: 2px 8px; border-radius: var(--r-full); border: 1px solid rgba(255,71,87,.35); }


        /* 行内功能按钮 */

        .view-goods .row-ops { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

        .view-goods .op-btn {
            display: inline-flex; align-items: center; justify-content: center;
            min-height: 30px; padding: 0 12px;
            border: 1px solid var(--c-hair-dark); border-radius: var(--r-full);
            background: transparent; color: var(--c-on-primary-mute);
            font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none;
            font-family: inherit;
        }

        .view-goods .op-btn:hover { border-color: var(--c-on-primary); color: var(--c-on-primary); }

        .view-goods .op-del { color: #ff4757; border-color: rgba(255,71,87,.35); }

        .view-goods .op-del:hover { color: #ff4757; border-color: #ff4757; background: rgba(255,71,87,.08); }

        .view-goods .row-ops form { display: inline-flex; margin: 0; }


        .view-goods .pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 0; }

        .view-goods .pager a, .view-goods .pager span {
            min-width: 36px; height: 36px; padding: 0 10px;
            display: inline-flex; align-items: center; justify-content: center;
            border: 1px solid var(--c-hair-dark); border-radius: var(--r-full);
            color: var(--c-on-primary-mute); font-size: 12px; text-decoration: none;
        }

        .view-goods .pager a:hover { border-color: var(--c-on-primary); color: var(--c-on-primary); }

        .view-goods .pager .is-current { border-color: var(--c-on-primary); color: var(--c-on-primary); }

        .view-goods .empty-state { text-align: center; padding: 64px 20px; border: 1px solid var(--c-hair-dark); border-radius: var(--r-sm); background: var(--c-night-soft); }

        .view-goods .empty-state h2 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }

        .view-goods .empty-state p { margin: 0 0 20px; font-size: 14px; color: var(--c-ink-mute); }

        .view-goods .toast {
            position: fixed; right: 16px; bottom: 16px; z-index: 2100;
            min-width: 200px; padding: 12px 16px;
            background: var(--c-night-soft); border: 1px solid var(--c-hair-dark);
            border-radius: var(--r-xs); color: var(--c-on-primary); font-size: 13px;
            transition: opacity 0.2s ease;
        }

        @media (max-width: 768px) {

            .view-goods .page { padding: 12px 10px 48px; }

            .view-goods .toolbar { align-items: flex-start; gap: 10px; }

            .view-goods .toolbar-copy h1 { font-size: 19px; }

            .view-goods .goods-thumb { width: 64px; height: 64px; }

            .view-goods .goods-row { flex-wrap: wrap; gap: 10px; padding: 11px 12px; }

            .view-goods .goods-info { flex: 1 1 calc(100% - 84px); min-width: 0; }

            .view-goods .goods-title { font-size: 13px; }

            .view-goods .row-ops { width: 100%; order: 3; padding-top: 10px; border-top: 1px dashed var(--c-hair-dark); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

            .view-goods .row-ops .op-btn, .view-goods .row-ops form, .view-goods .row-ops form button { width: 100%; }

            .view-goods .op-btn { min-height: 36px; padding: 0 10px; font-size: 13px; }

            .view-goods .row-ops form { display: flex; }

        
}


/* ============================================================
 * 视图 collect 样式 —— 逐字取自 fq/template/Goods_Add5.inc.php
 * 选择器统一加 .view-collect 前缀，值一个都没动。
 * ============================================================ */
/* ===== 现代简约 · 全局 ===== */

.view-collect * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}


.view-collect, .view-collect html[data-theme="day"], .view-collect html[data-theme="night"] {
    --bg: #f5f7fa;
    --surface: #ffffff;
    --surface-2: #f7f9fc;
    --border: #e5e6eb;
    --border-light: #f2f3f5;
    --text-primary: #1d2129;
    --text-secondary: #4e5969;
    --text-muted: #86909c;
    --accent: #3370ff;
    --accent-soft: #e8f1ff;
    --accent-glow: rgba(51, 112, 255, 0.08);
    --danger: #e5484d;
    --danger-soft: #ffece8;
    --ok: #00b42a;
    --ok-soft: #e8ffea;
    --warn: #d97706;
    --warn-soft: #fff7e8;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    --transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
}


.view-collect, .view-collect {
    min-height: 100%;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.01em;
}

.view-collect { padding: 16px 12px 40px; }

.view-collect .container { width: min(1200px, 100%); margin: 0 auto; }


.view-collect .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.view-collect .card:hover { box-shadow: var(--shadow-md); }


.view-collect .card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--surface-2);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-collect .card-header i { color: var(--accent); font-size: 14px; }

.view-collect .card-body { padding: 20px; }


.view-collect .form-group { margin-bottom: 16px; }

.view-collect .form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.view-collect .form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    min-height: 42px;
    background: var(--surface);
    color: var(--text-primary);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    outline: none;
}

.view-collect .form-input:hover { border-color: var(--text-muted); }

.view-collect .form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: var(--surface);
}

.view-collect textarea.form-input {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}


.view-collect .input-group { display: flex; align-items: stretch; width: 100%; }

.view-collect .input-prefix {
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    min-height: 42px;
    transition: border-color var(--transition);
}

.view-collect .input-group:focus-within .input-prefix {
    border-color: var(--accent);
    color: var(--accent);
}

.view-collect .input-group .form-input {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    flex: 1;
}


.view-collect .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid var(--border);
    cursor: pointer;
    background: var(--surface);
    color: var(--text-primary);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    white-space: nowrap;
    min-height: 42px;
}

.view-collect .btn:hover {
    border-color: var(--text-muted);
    background: var(--surface-2);
    box-shadow: var(--shadow-sm);
}

.view-collect .btn:active { transform: scale(0.98); }

.view-collect .btn-primary {
    background: var(--text-primary);
    color: var(--surface);
    border-color: var(--text-primary);
}

.view-collect .btn-primary:hover {
    background: var(--text-secondary);
    border-color: var(--text-secondary);
    box-shadow: var(--shadow-md);
}

.view-collect .btn-block { display: flex; width: 100%; }


.view-collect .upload-area {
    padding: 16px;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.view-collect .preview-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}

.view-collect .upload-area .form-input { flex: 1; min-width: 200px; }


.view-collect .radio-group {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 8px;
}

.view-collect .radio-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
    color: var(--text-secondary);
}

.view-collect .radio-item input[type="radio"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}


.view-collect .tab-container {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    gap: 4px;
}

.view-collect .tab {
    padding: 10px 18px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    transition: color var(--transition), border-color var(--transition);
    margin-bottom: -1px;
    user-select: none;
}

.view-collect .tab:hover { color: var(--text-secondary); }

.view-collect .tab.active { border-bottom-color: var(--accent); color: var(--accent); }

.view-collect .tab-content { display: none; }

.view-collect .tab-content.active { display: block; animation: fadeIn 0.25s ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}


.view-collect .alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid;
}

.view-collect .alert-info {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}


.view-collect .loading-bar {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}

.view-collect .loading-bar.show { display: flex; }

.view-collect .loading-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    border-top-color: transparent;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }


.view-collect .toast {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 999;
    max-width: min(320px, calc(100vw - 28px));
    padding: 12px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1), opacity 0.35s ease;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-collect .toast.show { transform: translateY(0); opacity: 1; }

.view-collect .toast.toast-error { border-left: 3px solid var(--danger); }

.view-collect .toast.toast-success { border-left: 3px solid var(--ok); }

.view-collect .toast.toast-info { border-left: 3px solid var(--accent); }


/* ===== 采集结果：桌面双列 + 图片网格 ===== */

.view-collect .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.view-collect .grid-2 .form-group.full { grid-column: 1 / -1; }

.view-collect .avatar-row { display: flex; align-items: center; gap: 12px; }

.view-collect .avatar-preview { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--surface-2); flex-shrink: 0; }

.view-collect .img-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.view-collect .img-item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.view-collect .img-box { height: 150px; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border-light); }

.view-collect .img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }

.view-collect .img-ops { display: flex; gap: 6px; min-width: 0; }

.view-collect .img-ops .form-input { flex: 1; min-width: 0; font-size: 12px; padding: 6px 10px; }

.view-collect .btn-mini { min-height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }

.view-collect .btn-mini:hover { border-color: var(--danger); color: var(--danger); }

@media (max-width: 768px) {

    .view-collect .grid-2 { grid-template-columns: 1fr; }

    .view-collect .img-grid { grid-template-columns: repeat(2, 1fr); }

    .view-collect .img-box { height: 110px; }


}


@media (max-width: 640px) {

    .view-collect { padding: 12px 8px 40px; }

    .view-collect .card { border-radius: 12px; }

    .view-collect .card-body { padding: 14px; }

    .view-collect .card-header { padding: 14px 16px; font-size: 12px; }

    .view-collect .input-group { flex-direction: column; }

    .view-collect .input-prefix {
        border-right: 1px solid var(--border);
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        border-bottom: none;
        justify-content: flex-start;
        padding: 8px 14px;
        min-height: auto;
    }

    .view-collect .input-group .form-input {
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        min-height: 46px;
        font-size: 15px;
    }

    .view-collect .form-label { font-size: 13px; }

    .view-collect textarea.form-input { min-height: 96px; }

    .view-collect .upload-area { flex-direction: column; align-items: flex-start; }

    .view-collect .btn { min-height: 46px; font-size: 15px; }

    .view-collect .btn-mini { min-height: 38px; padding: 0 12px; font-size: 13px; }

    .view-collect .radio-item { min-height: 40px; }

    .view-collect .avatar-row { flex-wrap: wrap; }

    .view-collect .avatar-preview { width: 72px; height: 72px; }

    .view-collect .img-grid { gap: 8px; }

    .view-collect .img-box { border-radius: 8px; }

    .view-collect .img-ops { flex-direction: column; }

    .view-collect .img-ops .btn-mini { width: 100%; }

    .view-collect .grid-2 { gap: 0; }

    .view-collect .form-group { margin-bottom: 14px; }

    .view-collect .alert { font-size: 12px; }

    .view-collect .loading-bar span { font-size: 12px; }


}


/* ============================================================
 * 视图 edit 样式 —— 逐字取自 fq/template/Goods_Edit5.inc.php
 * 选择器统一加 .view-edit 前缀，值一个都没动。
 * ============================================================ */
/* ===== 现代简约 · 全局 ===== */

.view-edit, .view-edit html[data-theme="day"], .view-edit html[data-theme="night"] {
    --bg: #f5f7fa;
    --surface: #ffffff;
    --surface-2: #f7f9fc;
    --border: #e5e6eb;
    --border-light: #f2f3f5;
    --text-primary: #1d2129;
    --text-secondary: #4e5969;
    --text-muted: #86909c;
    --accent: #3370ff;
    --accent-soft: #e8f1ff;
    --accent-glow: rgba(51, 112, 255, 0.08);
    --danger: #e5484d;
    --danger-soft: #ffece8;
    --ok: #00b42a;
    --ok-soft: #e8ffea;
    --warn: #d97706;
    --warn-soft: #fff7e8;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    --transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
}


.view-edit * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.view-edit, .view-edit {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    max-width: 100vw;
}


.view-edit a { color: inherit; text-decoration: none; }

.view-edit button, .view-edit input, .view-edit select, .view-edit textarea { font-family: inherit; }


.view-edit .page {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 100px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0));
}


.view-edit .toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    flex-wrap: wrap;
}

.view-edit .toolbar h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.view-edit .toolbar p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}


.view-edit .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.view-edit .btn-ghost:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--text-muted);
    box-shadow: var(--shadow-xs);
}

.view-edit .btn-ghost:active { transform: scale(0.98); }

.view-edit .btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }


.view-edit .btn-line {
    background: var(--surface);
    color: var(--text-secondary);
}

.view-edit .btn-fill {
    background: var(--text-primary);
    color: var(--surface);
    border-color: var(--text-primary);
}

.view-edit .btn-fill:hover:not(:disabled) {
    background: var(--text-secondary);
    border-color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
}

.view-edit .btn-mini {
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
    border-radius: var(--radius-sm);
}


.view-edit .section {
    margin-bottom: 16px;
    padding: 22px 22px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.view-edit .section:hover { box-shadow: var(--shadow-md); }


.view-edit .section h2 {
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-edit .section h2::before {
    content: '';
    width: 4px;
    height: 14px;
    background: var(--accent);
    border-radius: 2px;
}

.view-edit .section h2 i {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.view-edit .hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

.view-edit .input-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.view-edit .input-group .input-text { flex: 1; min-width: 200px; }

.view-edit .btn-mini {
    min-height: 38px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface-2); color: var(--text-secondary);
    font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap;
}

.view-edit .btn-mini:hover { border-color: var(--accent); color: var(--accent); }


.view-edit .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.view-edit .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.view-edit .field.full { grid-column: 1 / -1; }

.view-edit .field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}


.view-edit .field input, .view-edit .field select, .view-edit .field textarea {
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.view-edit .field textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.6;
}

.view-edit .field input:hover, .view-edit .field select:hover, .view-edit .field textarea:hover {
    border-color: var(--text-muted);
}

.view-edit .field input:focus, .view-edit .field select:focus, .view-edit .field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.view-edit .field input::placeholder, .view-edit .field textarea::placeholder {
    color: var(--text-muted);
}

.view-edit .field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230d9488' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}


.view-edit .radios {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    flex-wrap: wrap;
}

.view-edit .radios label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    user-select: none;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--transition), background var(--transition), color var(--transition);
    line-height: 1;
}

.view-edit .radios label:hover {
    background: var(--surface-2);
    border-color: var(--text-muted);
}

.view-edit .radios input[type="radio"] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
    margin: 0;
    cursor: pointer;
}

.view-edit .radios label:has(input[type="radio"]:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}


.view-edit .upload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.view-edit .upload-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.view-edit .upload-card h3 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.view-edit .preview-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
    transition: border-color var(--transition);
}

.view-edit .preview-box:hover { border-color: var(--accent); }

.view-edit .preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.view-edit .preview-box.is-empty img { display: none; }

.view-edit .preview-box.is-empty::after {
    content: "点击上传";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

.view-edit .btn-del {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background 0.15s;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.view-edit .btn-del:hover {
    background: var(--danger);
    transform: scale(1.08);
}

.view-edit .btn-del::before { content: '×'; }

.view-edit .preview-box.is-empty .btn-del { display: none; }


.view-edit .upload-actions {
    display: flex;
    gap: 8px;
}

.view-edit .upload-actions .btn-ghost {
    flex: 1;
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
}

.view-edit .upload-actions .btn-del-row { display: none; }


.view-edit .upload-card input[type="text"] {
    width: 100%;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
}

.view-edit .upload-card input[type="text"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.view-edit .upload-file { display: none; }


.view-edit .loading {
    display: none;
    margin-top: 4px;
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
    text-align: center;
}

.view-edit .loading::before { content: '⏳ '; }


.view-edit .submit-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 12px;
    padding: 16px 0 0;
    margin-top: 8px;
    background: linear-gradient(180deg, transparent 0%, var(--bg) 30%);
    z-index: 10;
}

.view-edit .submit-bar .btn-ghost {
    flex: 1;
    min-height: 48px;
    font-size: 14px;
}


@media (max-width: 720px) {

    .view-edit .grid { grid-template-columns: 1fr; }

    .view-edit .upload-grid { grid-template-columns: repeat(2, 1fr); }


}

@media (max-width: 480px) {

    .view-edit .page { padding: 12px 12px 80px; }

    .view-edit .section { padding: 18px 16px 16px; }

    .view-edit .section h2 { font-size: 12px; }

    .view-edit .field input, .view-edit .field select, .view-edit .field textarea {
        min-height: 42px;
        font-size: 14px;
    }

    .view-edit .upload-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

    .view-edit .upload-card { padding: 10px; gap: 8px; }

    .view-edit .toolbar { padding: 14px 16px; }

    .view-edit .toolbar h1 { font-size: 17px; }

    .view-edit .btn-ghost { padding: 0 14px; font-size: 12px; }

    .view-edit .radios { gap: 8px; }

    .view-edit .radios label { padding: 6px 10px; font-size: 12px; }


}


@supports (padding: max(0px)) {

    .view-edit .page {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }


}


/* ============================================================
 * 视图 orders 样式 —— 逐字取自 fq/template/Goods_OrderList120888.inc.php
 * 选择器统一加 .view-orders 前缀，值一个都没动。
 * ============================================================ */
.view-orders * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

        .view-orders {
            --bg: #f5f7fa; --surface: #ffffff; --surface-2: #f7f9fc;
            --border: #e8ecf1; --border-light: #f0f3f7;
            --text: #1d2129; --sub: #4e5969; --mute: #94a3b8;
            --accent: #3370ff; --accent-soft: #e8f1ff;
            --danger: #e5484d; --danger-soft: #ffece8;
            --ok: #00b42a; --ok-soft: #e8ffea;
            --warn: #d97706; --warn-soft: #fff7e8;
            --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        .view-orders, .view-orders { min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.55; }

        .view-orders { padding: 14px 10px 48px; }

        .view-orders .shell { width: min(860px, 100%); margin: 0 auto; }


        /* 顶部标题 */

        .view-orders .hd { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }

        .view-orders .hd h1 { font-size: 21px; font-weight: 700; }

        .view-orders .hd .sub { margin-top: 4px; font-size: 12px; color: var(--sub); }

        .view-orders .hd-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }

        .view-orders .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); font-size: 11px; font-weight: 500; color: var(--sub); }

        .view-orders .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: pulse 1.6s ease-in-out infinite; }

        .view-orders .pill.paused .dot { background: var(--warn); animation: none; }

        .view-orders .pill b { color: var(--text); }

        @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }


        /* 按钮 */

        .view-orders .btns { display: flex; flex-wrap: wrap; gap: 8px; }

        .view-orders .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 6px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; font-family: inherit; text-decoration: none; cursor: pointer; }

        .view-orders .btn:hover { border-color: var(--accent); color: var(--accent); }

        .view-orders .btn-fill { background: var(--accent); color: #fff; border-color: var(--accent); }

        .view-orders .btn-fill:hover { color: #fff; background: #2b5fd9; }

        .view-orders .btn-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

        .view-orders .btn-danger { color: var(--danger); }

        .view-orders .btn-pay { background: linear-gradient(135deg, #ff6a00, #ff9500); color: #fff; border: none; font-weight: 600; }

        .view-orders .btn-pay:hover { color: #fff; opacity: .92; }


        /* 记录卡片 */

        .view-orders .card-list { display: flex; flex-direction: column; gap: 10px; }

        .view-orders .rcard { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; border-left: 4px solid #c9cdd4; transition: background .15s ease; }

        .view-orders .rcard.st-2 { border-left-color: var(--warn); }

        .view-orders .rcard.st-4 { border-left-color: var(--ok); }

        .view-orders .rcard.flash { animation: rflash 1.2s ease; }

        @keyframes rflash { 0% { background: var(--warn-soft); } 100% { background: transparent; } }

        .view-orders .rcard-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

        .view-orders .rcard-title { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        .view-orders .gid-tag { font-size: 11px; color: var(--mute); background: var(--surface-2); border: 1px solid var(--border-light); border-radius: 6px; padding: 0 7px; flex-shrink: 0; }

        .view-orders .badge { padding: 1px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; flex-shrink: 0; white-space: nowrap; }

        .view-orders .badge-live { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); animation: pulse 1.6s ease-in-out infinite; }

        .view-orders .badge-new { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); }

        .view-orders .badge-paid { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); }

        .view-orders .rcard-info { margin-top: 8px; font-size: 13px; color: var(--sub); display: flex; flex-wrap: wrap; gap: 6px 14px; }

        .view-orders .rcard-info .region { color: var(--accent); font-weight: 500; }

        .view-orders .rcard-buyer { margin-top: 4px; font-size: 12px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 4px 14px; }

        .view-orders .rcard-buyer b { color: var(--sub); font-weight: 500; }

        .view-orders .rcard-foot { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }

        .view-orders .rcard-time { font-size: 12px; color: var(--mute); }

        .view-orders .st-label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border); color: var(--sub); }

        .view-orders .st-label.s-2 { background: var(--warn-soft); border-color: #ffe1a8; color: var(--warn); }

        .view-orders .st-label.s-4 { background: var(--accent-soft); border-color: #d3e4ff; color: var(--accent); }

        .view-orders .st-label.s-paid { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }

        .view-orders .st-say { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px dashed #c7dcff; border-radius: 8px; padding: 6px 10px; }

        .view-orders .st-say.say-2 { color: var(--warn); background: var(--warn-soft); border-color: #ffe1a8; }

        .view-orders .st-say.say-paid { color: var(--ok); background: var(--ok-soft); border-color: #b7e8bf; }

        .view-orders .rcard-ops { display: flex; flex-wrap: wrap; gap: 6px; }

        .view-orders .rcard-ops .btn { min-height: 32px; padding: 4px 11px; font-size: 12px; }


        .view-orders .pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 16px 0 4px; }

        .view-orders .pager a { min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-size: 13px; }

        .view-orders .pager a.active, .view-orders .pager a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }


        .view-orders .empty { text-align: center; padding: 56px 16px; color: var(--mute); }

        .view-orders .empty .ic { font-size: 34px; opacity: .6; margin-bottom: 10px; }

        .view-orders .empty p { font-size: 14px; }


        .view-orders .toast { position: fixed; top: 16px; right: 16px; z-index: 120; max-width: min(320px, calc(100vw - 28px)); padding: 11px 15px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-140%); opacity: 0; transition: all .3s ease; font-size: 13px; font-weight: 500; }

        .view-orders .toast.show { transform: translateY(0); opacity: 1; }

        .view-orders .toast.ok { border-left: 3px solid var(--ok); }

        .view-orders .toast.err { border-left: 3px solid var(--danger); }

        .view-orders .new-alert { position: fixed; bottom: 18px; left: 16px; z-index: 121; display: none; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--danger); color: var(--danger); font-weight: 600; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }

        .view-orders .new-alert.show { display: inline-flex; animation: pulse 1.4s ease-in-out infinite; }


        /* 支付成功弹窗（后台全台通知，5 秒） */

        .view-orders .pay-popup {
            position: fixed; top: 16px; right: 16px; z-index: 130;
            max-width: min(340px, calc(100vw - 24px));
            background: linear-gradient(135deg, #ffffff 0%, #f0fff4 100%);
            border: 1px solid #b7e8bf; border-radius: 14px;
            box-shadow: 0 12px 32px rgba(0,0,0,.16);
            padding: 14px 16px;
            display: none; align-items: flex-start; gap: 12px;
            transform: translateY(-140%); transition: transform .35s cubic-bezier(.2,.9,.3,1.2);
        }

        .view-orders .pay-popup.show { display: flex; transform: translateY(0); }

        .view-orders .pay-popup .pp-icon { font-size: 34px; line-height: 1; }

        .view-orders .pay-popup .pp-body { flex: 1; min-width: 0; }

        .view-orders .pay-popup .pp-title { font-size: 16px; font-weight: 700; color: #1d2129; margin-bottom: 4px; }

        .view-orders .pay-popup .pp-meta { font-size: 13px; color: #e5484d; font-weight: 600; margin-bottom: 4px; }

        .view-orders .pay-popup .pp-text { font-size: 13px; color: #4e5969; line-height: 1.5; }

        .view-orders .pay-popup.is-order { background: linear-gradient(135deg, #ffffff 0%, #fff7e8 100%); border-color: #ffe1a8; }


        /* 手机端 */

        @media (max-width: 720px) {

            .view-orders { padding: 10px 8px 56px; }

            .view-orders .hd h1 { font-size: 19px; }

            .view-orders .btns { width: 100%; }

            .view-orders .btns .btn { flex: 1 1 calc(50% - 6px); min-height: 38px; }

            .view-orders .rcard { padding: 11px 12px; }

            .view-orders .rcard-title { white-space: normal; }

            .view-orders .rcard-foot { flex-direction: column; align-items: flex-start; gap: 8px; }

            .view-orders .rcard-ops { width: 100%; }

            .view-orders .rcard-ops .btn { min-height: 36px; flex: 1 1 calc(33.3% - 6px); font-size: 13px; }

        
}


/* ============================================================
 * 视图 admins 样式 —— 逐字取自 fq/template/Admin_List.inc.php
 * 选择器统一加 .view-admins 前缀，值一个都没动。
 * ============================================================ */
.view-admins * {box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

.view-admins {font-family:var(--font);background:var(--c-night);padding:16px;font-size:14px;color:var(--c-on-primary);letter-spacing:0.32px;overflow-x:hidden;max-width:100vw}

.view-admins .container-fluid {max-width:1400px;margin:0 auto}

.view-admins .card {background:var(--c-night-soft);border:1px solid var(--c-hair-dark);border-radius:12px;margin-bottom:20px}

.view-admins .card-toolbar {padding:16px 20px;border-bottom:1px solid var(--c-hair-dark)}

.view-admins .toolbar-btn-action {display:flex;flex-wrap:wrap;gap:8px}

.view-admins .toolbar-btn-action .btn {display:inline-flex;padding:10px 14px;background:transparent;color:var(--c-on-primary);border:1px solid var(--c-on-primary);border-radius:32px;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:0.96px;text-transform:uppercase;white-space:nowrap}

.view-admins .card-body {padding:20px}


/* 表格 */

.view-admins .table-responsive {overflow-x:auto;margin-bottom:20px}

.view-admins .table {width:100%;border-collapse:collapse;background:var(--c-night-soft);color:var(--c-on-primary)}

.view-admins .table th, .view-admins .table td {padding:10px 12px;text-align:left;border:1px solid var(--c-hair-dark);font-size:13px;vertical-align:top}

.view-admins .table th {background:var(--c-hover);font-weight:700;font-size:12px;letter-spacing:0.96px;text-transform:uppercase;white-space:nowrap}


/* 按钮 */

.view-admins .btn {padding:8px 12px;border-radius:32px;border:1px solid var(--c-hair-dark);cursor:pointer;text-decoration:none;background:transparent;color:var(--c-on-primary);font-size:12px;letter-spacing:0.96px;text-transform:uppercase;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}

.view-admins .btn-xs {padding:5px 10px;font-size:11px}

.view-admins .btn-primary {background:var(--c-fill);color:var(--c-on-fill);border-color:var(--c-fill)}

.view-admins .btn-info {background:transparent;color:var(--c-on-primary);border-color:var(--c-on-primary)}

.view-admins .btn-danger {background:var(--c-fill);color:var(--c-on-fill);border-color:var(--c-fill)}

.view-admins .btn-group {display:flex;gap:5px;flex-wrap:wrap}


/* 标签 */

.view-admins .tag {display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid;white-space:nowrap}

.view-admins .tag-online {color:#10b981;border-color:#10b981;background:#d1fae5}

.view-admins .tag-offline {color:#94a3b8;border-color:#e2e8f0;background:#f8fafc}

.view-admins .tag-role-super {color:#f59e0b;border-color:#f59e0b;background:#fef3c7}

.view-admins .tag-role-sub {color:#0d9488;border-color:#0d9488;background:#ccfbf1}

.view-admins .tag-role-disabled {color:#ef4444;border-color:#ef4444;background:#fee2e2}

.view-admins .tag-ok {color:#10b981;border-color:#10b981;background:#d1fae5}

.view-admins .tag-off {color:#ef4444;border-color:#ef4444;background:#fee2e2}

.view-admins .tkl-remain-super {color:#f59e0b;font-weight:600;font-size:12px}

.view-admins .tkl-remain-ok {color:#0d9488;font-weight:600}

.view-admins .tkl-remain-low {color:#f59e0b;font-weight:600}

.view-admins .tkl-remain-zero {color:#ef4444;font-weight:600}

.view-admins .tkl-remain-off {color:#94a3b8;font-size:12px}


/* 分页 */

.view-admins .pagination {display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;justify-content:center}

.view-admins .pagination a {padding:8px 12px;border:1px solid var(--c-hair-dark);border-radius:32px;text-decoration:none;color:var(--c-on-primary)}

.view-admins .pagination a.btn-success {background:var(--c-fill);color:var(--c-on-fill);border-color:var(--c-fill)}


/* 表单（添加/编辑账号：上下排列） */

.view-admins .form-card {max-width:560px;margin:0 auto}

.view-admins .form-row {display:flex;flex-direction:column;align-items:stretch;margin-bottom:18px;gap:8px}

.view-admins .form-row:last-child {margin-bottom:0}

.view-admins .form-label {width:100%;padding-top:0;text-align:left;color:var(--c-on-primary);font-weight:600;font-size:13px;white-space:nowrap;flex-shrink:0}

.view-admins .required {color:#ef4444;margin-right:3px;font-weight:700}

.view-admins .form-controls {flex:1;min-width:0}

.view-admins .input-text {width:100%;height:44px;padding:0 14px;border:1px solid var(--c-hair-dark);border-radius:10px;font-size:14px;font-family:inherit;background:transparent;color:var(--c-on-primary);outline:none;transition:border-color .2s}

.view-admins .input-text:hover {border-color:var(--c-on-primary)}

.view-admins .input-text:focus {border-color:var(--c-fill);box-shadow:0 0 0 3px rgba(13,148,136,0.15)}

.view-admins .input-text::placeholder {color:#94a3b8}

.view-admins .radio-group {display:flex;gap:20px;align-items:center;padding-top:10px;flex-wrap:wrap}

.view-admins .radio-item {display:flex;align-items:center;gap:6px;font-size:14px;color:var(--c-on-primary);cursor:pointer;user-select:none}

.view-admins .radio-item input[type="radio"] {width:16px;height:16px;accent-color:var(--c-fill);cursor:pointer}

.view-admins .hint {font-size:12px;color:#94a3b8;margin-top:6px;line-height:1.5}

.view-admins .alert {padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:16px;border:1px solid}

.view-admins .alert.err {background:var(--c-danger-soft,#fee2e2);border-color:#ef4444;color:#ef4444}

.view-admins .alert.ok {background:#d1fae5;border-color:#10b981;color:#10b981}


/* 手机卡片 */

.view-admins .mobile-list {display:none}

.view-admins .user-card {background:var(--c-night-soft);border:1px solid var(--c-hair-dark);border-radius:12px;padding:16px;margin-bottom:12px}

.view-admins .user-card-head {display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--c-hair-dark)}

.view-admins .user-card-title {flex:1;min-width:0;font-size:15px;font-weight:700;color:var(--c-on-primary);word-break:break-all;line-height:1.4}

.view-admins .user-card-id {font-size:11px;color:#94a3b8;background:var(--c-hover);padding:3px 8px;border-radius:20px;flex-shrink:0}

.view-admins .user-card-pass {font-size:11px;color:#94a3b8;margin-top:4px;word-break:break-all}

.view-admins .user-card-tags {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}

.view-admins .user-card-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}

.view-admins .user-card-grid-item {padding:10px;background:var(--c-hover);border-radius:8px}

.view-admins .user-card-grid-label {font-size:11px;color:#94a3b8;margin-bottom:4px;letter-spacing:0.02em}

.view-admins .user-card-grid-value {font-size:13px;font-weight:600;color:var(--c-on-primary);word-break:break-all;line-height:1.4}

.view-admins .user-card-actions {display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--c-hair-dark)}

.view-admins .user-card-actions .btn {flex:1 1 calc(50% - 4px);min-height:40px;padding:10px 12px;font-size:12px}


/* 编辑弹窗 */

.view-admins .modal-mask {position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px}

.view-admins .modal-card {background:var(--c-night-soft);border:1px solid var(--c-hair-dark);border-radius:14px;width:min(520px,100%);max-height:88vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,.18);animation:mdIn .22s ease}

@keyframes mdIn {from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.view-admins .modal-head {display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--c-hair-dark);position:sticky;top:0;background:var(--c-night-soft)}

.view-admins .modal-head h3 {margin:0;font-size:17px;font-weight:700;color:var(--c-on-primary)}

.view-admins .modal-close {width:32px;height:32px;border:1px solid var(--c-hair-dark);border-radius:50%;background:transparent;color:var(--c-on-primary);font-size:18px;line-height:1;cursor:pointer}

.view-admins .modal-card form {padding:18px 20px 20px}

.view-admins .m-row {margin-bottom:14px}

.view-admins .m-row label {display:block;font-size:12px;font-weight:600;color:var(--c-on-primary-mute);margin-bottom:6px}

.view-admins .m-row .input-text {height:42px;border-radius:8px;background:var(--c-light);border:1px solid var(--c-hair-dark)}

.view-admins .m-err {padding:10px 12px;border-radius:8px;background:#fee2e2;border:1px solid #ef4444;color:#ef4444;font-size:13px;margin-bottom:12px}

.view-admins .m-actions {display:flex;gap:10px;justify-content:flex-end}

.view-admins .m-actions .btn {min-height:38px;padding:0 18px;border-radius:8px;font-size:13px}

@media (max-width:480px) {

    .view-admins .modal-mask {padding:10px;align-items:flex-end}

    .view-admins .modal-card {width:100%;border-radius:16px 16px 0 0;max-height:92vh}

    .view-admins .m-actions .btn {flex:1}


}


/* 响应式 */

@media (max-width: 720px) {

    .view-admins {padding:12px}

    .view-admins .container-fluid {padding:0}

    .view-admins .card {border-radius:12px}

    .view-admins .card-toolbar {padding:12px 14px}

    .view-admins .card-body {padding:14px}

    .view-admins .toolbar-btn-action {width:100%}

    .view-admins .toolbar-btn-action .btn {flex:1;justify-content:center;padding:10px 12px;font-size:11px}

    .view-admins .table-responsive {display:none}

    .view-admins .mobile-list {display:block}

    .view-admins .pagination a {padding:7px 11px;font-size:12px}


    /* 表单手机适配 */

    .view-admins .form-row {flex-direction:column;align-items:stretch;gap:8px}

    .view-admins .form-label {width:100%;text-align:left;padding-top:0}

    .view-admins .radio-group {padding-top:0}

    .view-admins .btn {width:100%}


}

@media (max-width: 480px) {

    .view-admins .user-card {padding:12px;border-radius:10px}

    .view-admins .user-card-grid {grid-template-columns:1fr;gap:8px}

    .view-admins .user-card-actions .btn {flex:1 1 100%}


}

@supports (padding: max(0px)) {

    .view-admins {padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right))}


}


/* ============================================================
 * 视图 pass 样式 —— 逐字取自 fq/template/Admin_User.inc.php
 * 选择器统一加 .view-pass 前缀，值一个都没动。
 * ============================================================ */
.view-pass * {box-sizing:border-box;margin:0;padding:0}

.view-pass {font-family:var(--font);background:var(--c-night);padding:24px;font-size:16px;color:var(--c-on-primary);letter-spacing:0.32px}

.view-pass .page-container {max-width:600px;background:var(--c-night-soft);border:1px solid var(--c-hair-dark);border-radius:8px;padding:32px;margin:24px auto}

.view-pass .form-horizontal .row {margin-bottom:16px;display:flex;align-items:center;flex-wrap:wrap}

.view-pass .form-label {width:140px;font-weight:700;text-align:right;padding-right:12px;font-size:12px;letter-spacing:0.96px;text-transform:uppercase;color:var(--c-ink-mute)}

.view-pass .formControls {flex:1;min-width:200px}

.view-pass .input-text {width:100%;padding:12px 16px;border:1px solid var(--c-hair-dark);border-radius:4px;outline:none;min-height:44px;background:var(--c-night);color:var(--c-on-primary)}

.view-pass .input-text:focus {border-color:var(--c-on-primary)}

.view-pass .c-red {color:var(--c-on-primary)}

.view-pass .btn {display:inline-flex;align-items:center;justify-content:center;padding:18px 24px;background:var(--c-fill);color:var(--c-on-fill);border:1px solid var(--c-fill);border-radius:32px;cursor:pointer;font-size:13px;font-weight:700;letter-spacing:1.17px;text-transform:uppercase}

.view-pass .btn-primary {background:var(--c-fill);color:var(--c-on-fill)}

.view-pass .radius {border-radius:4px}

.view-pass .col-xs-offset-4 {margin-left:140px}


/* ============================================================
 * 视图 quota 样式 —— 逐字取自 fq/template/Admin_TklQuota.inc.php
 * 选择器统一加 .view-quota 前缀，值一个都没动。
 * ============================================================ */
/* ===== 现代简约 · 全局 ===== */

.view-quota {
    --bg: #f6f8fa;
    --surface: #ffffff;
    --surface-2: #fbfcfd;
    --border: #e2e8f0;
    --border-light: #edf2f7;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --accent: #0d9488;
    --accent-soft: #ccfbf1;
    --accent-glow: rgba(13, 148, 136, 0.08);
    --danger: #ef4444;
    --danger-soft: #fee2e2;
    --ok: #10b981;
    --ok-soft: #d1fae5;
    --warn: #f59e0b;
    --warn-soft: #fef3c7;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    --transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.view-quota html[data-theme="day"] {
    --bg: #f6f8fa;
    --surface: #ffffff;
    --surface-2: #fbfcfd;
    --border: #e2e8f0;
    --border-light: #edf2f7;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --accent: #0d9488;
    --accent-soft: #ccfbf1;
    --accent-glow: rgba(13, 148, 136, 0.08);
    --danger: #ef4444;
    --danger-soft: #fee2e2;
    --ok: #10b981;
    --ok-soft: #d1fae5;
    --warn: #f59e0b;
    --warn-soft: #fef3c7;
}

.view-quota html[data-theme="night"] {
    --bg: #0b1120;
    --surface: #111827;
    --surface-2: #1a2332;
    --border: #1e293b;
    --border-light: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --accent: #2dd4bf;
    --accent-soft: #134e4a;
    --accent-glow: rgba(45, 212, 191, 0.06);
    --danger: #f87171;
    --danger-soft: #450a0a;
    --ok: #34d399;
    --ok-soft: #064e3b;
    --warn: #fbbf24;
    --warn-soft: #451a03;
}

.view-quota * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.view-quota, .view-quota {
    min-height: 100%;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    max-width: 100vw;
}

.view-quota {
    padding: 24px 16px 48px;
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0));
}


.view-quota .wrap {
    max-width: 1100px;
    margin: 0 auto;
}


/* ===== 标题 ===== */

.view-quota h1 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.view-quota .sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.6;
}


/* ===== 提示条 ===== */

.view-quota .alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.55;
    border: 1px solid;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: flashIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes flashIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.view-quota .alert::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    margin-top: 8px;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}

.view-quota .alert.ok {
    background: var(--ok-soft);
    border-color: var(--ok);
    color: var(--ok);
}

.view-quota .alert.err {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}


/* ===== 工具栏 ===== */

.view-quota .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.view-quota .toolbar label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.view-quota .toolbar input[type=number] {
    width: 90px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.view-quota .toolbar input[type=number]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}


/* ===== 按钮 ===== */

.view-quota .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    white-space: nowrap;
}

.view-quota .btn:hover {
    border-color: var(--text-muted);
    background: var(--surface-2);
    box-shadow: var(--shadow-xs);
}

.view-quota .btn:active { transform: scale(0.98); }


.view-quota .btn-primary {
    background: var(--text-primary);
    color: var(--surface);
    border-color: var(--text-primary);
}

.view-quota .btn-primary:hover {
    background: var(--text-secondary);
    border-color: var(--text-secondary);
}

.view-quota .btn-danger {
    border-color: var(--danger);
    color: var(--danger);
}

.view-quota .btn-danger:hover {
    background: var(--danger-soft);
}

.view-quota .btn-ok {
    border-color: var(--ok);
    color: var(--ok);
}

.view-quota .btn-ok:hover {
    background: var(--ok-soft);
}


/* ===== 表格（桌面端） ===== */

.view-quota .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.view-quota table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 860px;
}

.view-quota th, .view-quota td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    vertical-align: middle;
}

.view-quota th {
    background: var(--surface-2);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.view-quota tr:last-child td { border-bottom: none; }

.view-quota tbody tr {
    transition: background var(--transition);
}

.view-quota tbody tr:hover {
    background: var(--surface-2);
}


/* ===== 标签 ===== */

.view-quota .tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid;
    white-space: nowrap;
}

.view-quota .tag-off {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--danger-soft);
}

.view-quota .tag-on {
    color: var(--ok);
    border-color: var(--ok);
    background: var(--ok-soft);
}

.view-quota .tag-super {
    color: var(--warn);
    border-color: var(--warn);
    background: var(--warn-soft);
}


/* ===== 行内操作 ===== */

.view-quota .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.view-quota .row-actions input[type=number] {
    width: 72px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.view-quota .row-actions input[type=number]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.view-quota .row-actions form {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}


/* ===== 通用文本 ===== */

.view-quota .muted {
    color: var(--text-muted);
    font-size: 12px;
}


/* ===== 手机端专用卡片视图（默认隐藏） ===== */

.view-quota .mobile-list { display: none; }


.view-quota .user-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), border-color var(--transition);
}

.view-quota .user-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--text-muted);
}


.view-quota .user-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.view-quota .user-card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.view-quota .user-card-id {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--surface-2);
    padding: 2px 8px;
    border-radius: 20px;
    flex-shrink: 0;
}


.view-quota .user-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.view-quota .stat-item {
    text-align: center;
    padding: 10px 8px;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.view-quota .stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.view-quota .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.view-quota .stat-value.accent { color: var(--accent); }


.view-quota .user-card-status {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 14px;
}


.view-quota .user-card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.view-quota .user-card-actions form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.view-quota .user-card-actions input[type=number] {
    flex: 1;
    min-width: 80px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.view-quota .user-card-actions input[type=number]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.view-quota .user-card-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.view-quota .user-card-actions label input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.view-quota .user-card-actions .btn {
    min-height: 40px;
    padding: 10px 16px;
    font-size: 13px;
}

.view-quota .user-card-actions .btn-primary { flex: 1 1 100%; }

.view-quota .user-card-actions .row-2 { display: flex; gap: 8px; }

.view-quota .user-card-actions .row-2 .btn { flex: 1; }

.view-quota .user-card-actions .row-2 .btn-danger { color: var(--danger); }


.view-quota .user-card-super {
    padding: 14px;
    text-align: center;
    background: var(--warn-soft);
    border: 1px dashed var(--warn);
    border-radius: var(--radius-md);
    color: var(--warn);
    font-size: 13px;
    font-weight: 600;
}


/* ===== 响应式：手机端切换为卡片视图 ===== */

@media (max-width: 720px) {

    .view-quota { padding: 16px 12px 32px; }

    .view-quota h1 { font-size: 20px; }

    .view-quota .sub { font-size: 12px; margin-bottom: 16px; }


    /* 工具栏纵向 */

    .view-quota .toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        gap: 10px;
    }

    .view-quota .toolbar input[type=number] { width: 100%; }

    .view-quota .toolbar .btn { width: 100%; min-height: 42px; }

    .view-quota .toolbar .muted { text-align: center; }


    /* 隐藏表格 */

    .view-quota .table-wrap { display: none; }


    /* 显示手机卡片 */

    .view-quota .mobile-list { display: block; }


}


/* ===== 顶部切换标签 ===== */

.view-quota .tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.view-quota .tabs::-webkit-scrollbar { display: none; }

.view-quota .tab {
    position: relative;
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition), border-color var(--transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    white-space: nowrap;
}

.view-quota .tab:hover { color: var(--text-primary); }

.view-quota .tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

@media (max-width: 480px) {

    .view-quota .tab { padding: 9px 12px; font-size: 13.5px; }


}


/* ============================================================
 * 视图 ledger 样式 —— 逐字取自 fq/template/Admin_PayLedger.inc.php
 * 选择器统一加 .view-ledger 前缀，值一个都没动。
 * ============================================================ */
.view-ledger {
    --bg:#f6f8fa; --surface:#fff; --surface-2:#fbfcfd; --border:#e2e8f0; --border-light:#edf2f7;
    --text-primary:#0f172a; --text-secondary:#475569; --text-muted:#94a3b8;
    --accent:#0d9488; --accent-soft:#ccfbf1; --danger:#ef4444; --ok:#10b981; --warn:#f59e0b;
    --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
    --shadow-xs:0 1px 2px rgba(0,0,0,.02);
    --shadow-sm:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.02);
    --shadow-md:0 4px 12px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.03);
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
    --transition:.2s cubic-bezier(.2,0,0,1);
}

.view-ledger html[data-theme="night"] {
    --bg:#0b1120; --surface:#111827; --surface-2:#1a2332; --border:#1e293b; --border-light:#1e293b;
    --text-primary:#f1f5f9; --text-secondary:#cbd5e1; --text-muted:#64748b;
    --accent:#2dd4bf; --accent-soft:#134e4a; --danger:#f87171; --ok:#34d399; --warn:#fbbf24;
}

.view-ledger * { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

.view-ledger, .view-ledger {
    min-height:100%; background:var(--bg); color:var(--text-primary);
    font-family:var(--font); font-size:14px; line-height:1.5;
    -webkit-font-smoothing:antialiased; letter-spacing:.01em; overflow-x:hidden; max-width:100vw;
}

.view-ledger { padding:24px 16px 48px; padding-bottom:calc(48px + env(safe-area-inset-bottom,0)); }

.view-ledger .wrap { max-width:1200px; margin:0 auto; }


.view-ledger h1 { font-size:22px; font-weight:700; margin-bottom:6px; letter-spacing:-.02em; }

.view-ledger .sub { color:var(--text-muted); font-size:13px; margin-bottom:18px; }


/* 概览卡 */

.view-ledger .stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }

.view-ledger .st {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:16px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}

.view-ledger .st::after { content:''; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--bar,#0d9488); }

.view-ledger .st-bar { --bar:linear-gradient(90deg,#0d9488,#2dd4bf); }

.view-ledger .st-bar2 { --bar:linear-gradient(90deg,#3370ff,#7ba2ff); }

.view-ledger .st-bar3 { --bar:linear-gradient(90deg,#f59e0b,#fbbf24); }

.view-ledger .st-bar4 { --bar:linear-gradient(90deg,#7b61ff,#a794ff); }

.view-ledger .st-label { font-size:12.5px; color:var(--text-secondary); font-weight:600; margin-bottom:8px; }

.view-ledger .st-num { font-size:30px; font-weight:700; letter-spacing:-.6px; font-variant-numeric:tabular-nums; line-height:1.05; }

.view-ledger .st-unit { font-size:12.5px; color:var(--text-muted); font-weight:600; margin-left:4px; }

.view-ledger .st-sub { font-size:12px; color:var(--text-muted); margin-top:6px; }


/* 工具条 */

.view-ledger .toolbar {
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
    padding:12px 14px; box-shadow:var(--shadow-xs); margin-bottom:16px;
}

.view-ledger .toolbar label { font-size:13px; color:var(--text-secondary); font-weight:600; }

.view-ledger .toolbar select, .view-ledger .toolbar input[type=text] {
    font-family:inherit; font-size:13px; padding:7px 10px; border:1px solid var(--border);
    border-radius:var(--radius-sm); background:var(--surface); color:var(--text-primary); min-width:120px;
}

.view-ledger .btn {
    font-family:inherit; font-size:13px; font-weight:600; padding:8px 16px; border-radius:var(--radius-sm);
    border:1px solid var(--border); background:var(--surface); color:var(--text-primary); cursor:pointer;
    transition:background var(--transition); touch-action:manipulation;
}

.view-ledger .btn:hover { background:var(--surface-2); }

.view-ledger .btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }

.view-ledger .btn-primary:hover { filter:brightness(1.06); }


.view-ledger .alert {
    padding:11px 15px; border-radius:var(--radius-md); margin-bottom:16px; font-size:13px;
    border:1px solid var(--accent-soft); background:var(--accent-soft); color:#0f766e;
}

.view-ledger html[data-theme="night"] .alert { color:#5eead4; }


/* 表格 */

.view-ledger .table-wrap {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm); overflow-x:auto; -webkit-overflow-scrolling:touch;
}

.view-ledger table { width:100%; border-collapse:collapse; font-size:13px; min-width:880px; }

.view-ledger thead th {
    text-align:left; padding:11px 12px; background:var(--surface-2); color:var(--text-secondary);
    font-weight:600; font-size:12.5px; border-bottom:1px solid var(--border); white-space:nowrap;
}

.view-ledger tbody td { padding:10px 12px; border-bottom:1px solid var(--border-light); vertical-align:middle; }

.view-ledger tbody tr:last-child td { border-bottom:none; }

.view-ledger tbody tr:hover { background:var(--surface-2); }

.view-ledger .mono { font-variant-numeric:tabular-nums; }

.view-ledger .muted { color:var(--text-muted); }

.view-ledger .tag {
    display:inline-block; padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:600;
    background:var(--accent-soft); color:var(--accent);
}

.view-ledger .tag-hook { background:#d1fae5; color:#059669; }

.view-ledger .tag-back { background:#e0e7ff; color:#4f46e5; }


.view-ledger .pager { display:flex; gap:8px; align-items:center; justify-content:center; margin-top:16px; flex-wrap:wrap; }

.view-ledger .pager a, .view-ledger .pager span {
    padding:6px 12px; border-radius:var(--radius-sm); border:1px solid var(--border);
    background:var(--surface); color:var(--text-secondary); text-decoration:none; font-size:13px;
}

.view-ledger .pager .cur { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }


.view-ledger .byadmin { margin-top:22px; }

.view-ledger .byadmin h2 { font-size:15px; font-weight:700; margin-bottom:10px; }

.view-ledger .chiprow { display:flex; flex-wrap:wrap; gap:8px; }

.view-ledger .chip {
    background:var(--surface); border:1px solid var(--border); border-radius:999px;
    padding:7px 14px; font-size:13px; box-shadow:var(--shadow-xs);
}

.view-ledger .chip b { color:var(--accent); font-variant-numeric:tabular-nums; }


.view-ledger .note {
    margin-top:20px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-md); padding:14px 16px; font-size:12.5px; color:var(--text-muted); line-height:1.9;
}

.view-ledger .note b { color:var(--text-secondary); }


@media (max-width:900px) {
 .view-ledger .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
 
}

@media (max-width:480px) {

    .view-ledger { padding:16px 12px calc(32px + env(safe-area-inset-bottom,0)); }

    .view-ledger h1 { font-size:19px; }

    .view-ledger .stats { gap:10px; }

    .view-ledger .st { padding:13px; border-radius:12px; }

    .view-ledger .st-num { font-size:25px; }

    .view-ledger .toolbar { padding:10px; gap:8px; }

    .view-ledger .toolbar select, .view-ledger .toolbar input[type=text] { min-width:0; flex:1; }


}


/* ============================================================
 * 视图 domain 样式 —— 逐字取自 fq/template/Admin_DomainSwitch.inc.php
 * 选择器统一加 .view-domain 前缀，值一个都没动。
 * ============================================================ */
/* ===== 现代简约 · 全局 ===== */

.view-domain {
    --bg: #f6f8fa;
    --surface: #ffffff;
    --surface-2: #fbfcfd;
    --border: #e2e8f0;
    --border-light: #edf2f7;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --accent: #0d9488;
    --accent-soft: #ccfbf1;
    --accent-glow: rgba(13, 148, 136, 0.08);
    --danger: #ef4444;
    --danger-soft: #fee2e2;
    --ok: #10b981;
    --ok-soft: #d1fae5;
    --warn: #f59e0b;
    --warn-soft: #fef3c7;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    --transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.view-domain html[data-theme="day"] {
    --bg: #f6f8fa;
    --surface: #ffffff;
    --surface-2: #fbfcfd;
    --border: #e2e8f0;
    --border-light: #edf2f7;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --accent: #0d9488;
    --accent-soft: #ccfbf1;
    --accent-glow: rgba(13, 148, 136, 0.08);
    --danger: #ef4444;
    --danger-soft: #fee2e2;
    --ok: #10b981;
    --ok-soft: #d1fae5;
    --warn: #f59e0b;
    --warn-soft: #fef3c7;
}

.view-domain html[data-theme="night"] {
    --bg: #0b1120;
    --surface: #111827;
    --surface-2: #1a2332;
    --border: #1e293b;
    --border-light: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --accent: #2dd4bf;
    --accent-soft: #134e4a;
    --accent-glow: rgba(45, 212, 191, 0.06);
    --danger: #f87171;
    --danger-soft: #450a0a;
    --ok: #34d399;
    --ok-soft: #064e3b;
    --warn: #fbbf24;
    --warn-soft: #451a03;
}

.view-domain * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.view-domain, .view-domain {
    min-height: 100%;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    max-width: 100vw;
}

.view-domain { padding: 24px 16px 48px; }


.view-domain .wrap {
    max-width: 720px;
    margin: 0 auto;
}


.view-domain h1 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.view-domain .sub {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px;
}


/* ===== 卡片 ===== */

.view-domain .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.view-domain .card:hover { box-shadow: var(--shadow-md); }


/* ===== 表单 ===== */

.view-domain label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 16px 0 8px;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.view-domain label:first-of-type { margin-top: 0; }


.view-domain input[type=text] {
    width: 100%;
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.view-domain input[type=text]:hover {
    border-color: var(--text-muted);
}

.view-domain input[type=text]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.view-domain input[type=text][readonly] {
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: not-allowed;
}

.view-domain input[type=text][readonly]:hover {
    border-color: var(--border);
}

.view-domain input[type=text]::placeholder {
    color: var(--text-muted);
}


/* ===== 复选框 ===== */

.view-domain .check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 18px 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.view-domain .check input[type=checkbox] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.view-domain .check span {
    flex: 1;
    min-width: 0;
}


/* ===== 按钮 ===== */

.view-domain button {
    height: 44px;
    padding: 0 20px;
    border: 1px solid var(--text-primary);
    border-radius: var(--radius-md);
    background: var(--text-primary);
    color: var(--surface);
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.view-domain button:hover {
    background: var(--text-secondary);
    border-color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
}

.view-domain button:active {
    transform: scale(0.98);
}


/* ===== 提示条 ===== */

.view-domain .flash {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.55;
    border: 1px solid;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: flashIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes flashIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.view-domain .flash.ok {
    background: var(--ok-soft);
    border-color: var(--ok);
    color: var(--ok);
}

.view-domain .flash.bad {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}

.view-domain .flash::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    margin-top: 8px;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}


/* ===== 底部说明 ===== */

.view-domain .note {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}


/* ===== 响应式 ===== */

@media (max-width: 480px) {

    .view-domain { padding: 18px 12px 36px; }

    .view-domain h1 { font-size: 20px; }

    .view-domain .card { padding: 20px 16px; }

    .view-domain input[type=text], .view-domain button { height: 42px; }


}


/* ============================================================
 * 视图 chat 样式 —— 逐字取自 admin_chat.php + admin_chat_detail.php
 * 选择器统一加 .view-chat 前缀，值一个都没动。
 * ============================================================ */
/* ============ 现代简约 · 全局 ============ */

.view-chat {
    --bg: #f6f8fa;
    --surface: #ffffff;
    --surface-2: #fbfcfd;
    --border: #e2e8f0;
    --border-light: #edf2f7;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --accent: #0d9488;
    --accent-soft: #ccfbf1;
    --accent-glow: rgba(13, 148, 136, 0.08);
    --danger: #ef4444;
    --danger-soft: #fee2e2;
    --ok: #10b981;
    --ok-soft: #d1fae5;
    --warn: #f59e0b;
    --warn-soft: #fef3c7;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    --transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
}


.view-chat html[data-theme="day"] {
    --bg: #f6f8fa;
    --surface: #ffffff;
    --surface-2: #fbfcfd;
    --border: #e2e8f0;
    --border-light: #edf2f7;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --accent: #0d9488;
    --accent-soft: #ccfbf1;
    --accent-glow: rgba(13, 148, 136, 0.08);
    --danger: #ef4444;
    --danger-soft: #fee2e2;
    --ok: #10b981;
    --ok-soft: #d1fae5;
    --warn: #f59e0b;
    --warn-soft: #fef3c7;
}


.view-chat html[data-theme="night"] {
    --bg: #0b1120;
    --surface: #111827;
    --surface-2: #1a2332;
    --border: #1e293b;
    --border-light: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --accent: #2dd4bf;
    --accent-soft: #134e4a;
    --accent-glow: rgba(45, 212, 191, 0.06);
    --danger: #f87171;
    --danger-soft: #450a0a;
    --ok: #34d399;
    --ok-soft: #064e3b;
    --warn: #fbbf24;
    --warn-soft: #451a03;
}


.view-chat * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font);
    -webkit-tap-highlight-color: transparent;
}


.view-chat, .view-chat {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow-x: hidden;                 /* iPhone 上横向 1px 溢出会导致整页可左右晃动 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;     /* 阻止 iOS 横屏时把字号放大 */
    overscroll-behavior-y: contain;     /* 避免 iOS 下拉整页回弹把列表拉飞 */
}


.view-chat {
    background: var(--bg);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.01em;
}


.view-chat #app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* 键盘弹起 / 地址栏收起时 100vh 在 iOS 上是不变的错误值，
       --vvh 由页面底部脚本用 visualViewport 实时写入 */
    min-height: var(--vvh, 100dvh);
    width: 100%;
    max-width: 100vw;
}


/* ============ 顶部导航 ============ */

.view-chat .top-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    align-items: center;
    box-shadow: var(--shadow-xs);
}


.view-chat .nav-tab {
    min-width: 104px;
    text-align: center;
    padding: 8px 18px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    user-select: none;
    touch-action: manipulation;
}


.view-chat .nav-tab:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}


.view-chat .nav-tab.active {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--surface);
}


.view-chat .clear-all-btn {
    margin-left: auto;
    padding: 8px 18px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--danger);
    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
    font-family: inherit;
    touch-action: manipulation;
}


.view-chat .clear-all-btn:hover {
    background: var(--danger-soft);
}


/* ============ 主内容 ============ */

.view-chat .main-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 16px 40px;
}


/* ============ 会话列表 ============ */

.view-chat .session-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}


.view-chat .session-item {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    transition: background var(--transition);
}


.view-chat .session-item:last-child {
    border-bottom: none;
}


.view-chat .session-item:hover {
    background: var(--surface-2);
}


.view-chat .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid var(--border-light);
}


.view-chat .session-info {
    flex: 1;
    min-width: 0;
}


.view-chat .session-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    gap: 8px;
}


.view-chat .user-id {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.view-chat .last-time {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    flex-shrink: 0;
}


.view-chat .last-msg {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.view-chat .unread-badge {
    background: var(--danger);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    padding: 0 6px;
    position: absolute;
    right: 18px;
    bottom: 14px;
    border: 2px solid var(--surface);
}


/* ============ 商品信息 / 在线 / 已读 ============ */

.view-chat .goods-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}


.view-chat .online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c9cdd4;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}


.view-chat .online-dot.is-online {
    background: #00b42a;
    box-shadow: 0 0 0 3px rgba(0, 180, 42, 0.15);
}


.view-chat .goods-line {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.view-chat .goods-price {
    color: #e5484d;
    font-weight: 600;
}


.view-chat .role-tag {
    display: inline-block;
    font-size: 10px;
    padding: 0 6px;
    border-radius: 4px;
    margin-right: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    vertical-align: 1px;
}


.view-chat .role-tag.customer { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }

.view-chat .role-tag.staff { color: var(--ok); border-color: var(--ok-soft); background: var(--ok-soft); }

.view-chat .role-tag.bot { color: var(--warn); border-color: var(--warn-soft); background: var(--warn-soft); }


.view-chat .read-status {
    font-size: 11px;
    color: var(--text-muted);
}


.view-chat .read-status.is-read {
    color: var(--accent);
}


/* ============ 空状态 ============ */

.view-chat .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 14px;
}


.view-chat .empty-state::before {
    content: '✿';
    display: block;
    font-size: 48px;
    color: var(--border);
    margin-bottom: 12px;
}


/* ============ 响应式 ============ */

@media (max-width: 768px) {

    .view-chat .top-nav {
        /* 刘海/灵动岛：顶部安全区 */
        padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px;
        gap: 8px;
    }

    .view-chat .nav-tab {
        min-width: 0;
        flex: 1;
        padding: 9px 12px;
        font-size: 14px;            /* 太小会让 iOS 聚焦时放大整页 */
    }

    .view-chat .clear-all-btn {
        margin-left: 0;
        width: 100%;
        margin-top: 6px;
        order: 3;
        padding: 11px 12px;         /* 触控目标够高，手指好点 */
        font-size: 14px;
    }

    .view-chat .main-content {
        /* 底部横条 + 底部安全区，避免最后一条会话被 Home 条盖住 */
        padding: 14px 12px calc(28px + env(safe-area-inset-bottom, 0px));
    }

    .view-chat .session-item {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }


}


@media (max-width: 480px) {

    .view-chat .avatar {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .view-chat .session-item {
        padding: 12px 14px;
    }


}


/* 窄屏小机（iPhone SE / mini）：再压一档，防止标题把时间挤成两行 */

@media (max-width: 390px) {

    .view-chat .top-nav {
        padding-left: 10px;
        padding-right: 10px;
    }

    .view-chat .session-item {
        padding: 11px 12px;
        gap: 10px;
    }

    .view-chat .session-meta {
        font-size: 12px;
    }


}


/* iOS 平滑滚动，并禁止橡皮筋把内容拉出屏幕 */

.view-chat .main-content, .view-chat .session-list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}


@supports (padding: max(0px)) {

    .view-chat .main-content {
        padding-left: max(16px, constant(safe-area-inset-left));
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, constant(safe-area-inset-right));
        padding-right: max(16px, env(safe-area-inset-right));
    }


}


/* Vue 挂载前先藏住原文案，避免 iPhone 上先闪一下旧按钮名 */

.view-chat [v-cloak] {
    visibility: hidden;
}

/* ============ 抖音风格聊天 · 苹果适配 ============ */

.view-chat {
    --bg:         #ffffff;
    --bg-2:       #f7f7f7;
    --border:     #ededed;

    --text:       #161823;
    --text-sub:   #666666;
    --text-mute:  #b0b0b0;

    --douyin-blue: #4e9eff;
    --douyin-blue-2: #3d7eff;

    --bubble-in:  #f1f1f1;
    --bubble-out: linear-gradient(135deg, #4e9eff 0%, #3d7eff 100%);

    /* 输入框的"抬升"量：默认 0。
       原来固定 38px 是为了躲开 iPhone 底部横条，但会和 keyboard-open 的
       padding 叠加，导致输入栏在键盘弹起时被顶到屏幕中间。交给 --kb 负责。 */
    --input-lift: 0px;

    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    --font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}


.view-chat * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}


.view-chat {
    height: 100%;
    height: -webkit-fill-available;
    overflow: hidden;
}


.view-chat {
    height: 100vh;
    height: 100dvh;
    height: -webkit-fill-available;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;
}


.view-chat #app {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


.view-chat .chat-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* ============ 顶部栏 ============ */

.view-chat .chat-header {
    padding-top: var(--safe-top);
    height: calc(44px + var(--safe-top));
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
    padding-left: 4px;
    padding-right: 4px;
}


.view-chat .back-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    text-decoration: none;
    font-size: 22px;
    flex-shrink: 0;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
}


.view-chat .back-btn:active {
    opacity: 0.5;
}


.view-chat .chat-user-name {
    position: absolute;
    left: 50%;
    top: calc(50% + var(--safe-top) / 2);
    transform: translate(-50%, -50%);
    font-weight: 600;
    font-size: 16px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
    text-align: center;
}


.view-chat .refresh-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sub);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    touch-action: manipulation;
    user-select: none;
}


.view-chat .refresh-btn:active {
    opacity: 0.5;
}


/* ============ 消息区 ============ */

.view-chat .message-pane {
    flex: 1;
    min-height: 0;
    padding: 16px 14px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}


.view-chat .date-divider {
    text-align: center;
    margin: 6px 0;
}


.view-chat .date-divider span {
    color: var(--text-mute);
    font-size: 12px;
}


.view-chat .msg-row {
    display: flex;
    width: 100%;
}


.view-chat .msg-row.received { justify-content: flex-start; }

.view-chat .msg-row.sent { justify-content: flex-end; }


.view-chat .msg {
    display: flex;
    flex-direction: column;
    max-width: 72%;
}


.view-chat .msg.received { align-items: flex-start; }

.view-chat .msg.sent { align-items: flex-end; }


/* ============ 气泡 ============ */

.view-chat .bubble {
    display: inline-block;
    padding: 10px 14px;
    font-size: 15px;
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
    border-radius: 18px;
}


.view-chat .msg.received .bubble {
    background: var(--bubble-in);
    color: var(--text);
    border-top-left-radius: 4px;
}


.view-chat .msg.sent .bubble {
    background: var(--douyin-blue);
    background: var(--bubble-out);
    color: #ffffff;
    border-top-right-radius: 4px;
}


.view-chat .msg-time {
    font-size: 11px;
    color: var(--text-mute);
    margin-top: 4px;
    padding: 0 4px;
}


.view-chat .bubble img {
    display: block;
    width: auto;
    max-width: 200px;
    max-height: 240px;
    object-fit: cover;
    border-radius: 10px;
    margin: 2px 0;
}


.view-chat .bubble.bubble--image {
    padding: 4px;
    background: #ffffff;
    border: 1px solid var(--border);
}


.view-chat .msg.sent .bubble.bubble--image {
    background: #ffffff;
    border: 1px solid var(--border);
}


.view-chat .bubble.bubble--emoji {
    padding: 8px 10px;
}


.view-chat .bubble.bubble--emoji img, .view-chat .bubble img.Image {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    min-width: 24px;
    min-height: 24px;
    object-fit: contain;
    border-radius: 0;
    margin: 0;
    display: inline-block;
    vertical-align: text-bottom;
}


/* ============ 输入区 ============ */

.view-chat .input-container {
    background: var(--bg);
    border-top: 1px solid var(--border);
    /* 底部留白 = 安全区（刘海机 home 条）+ 抬升距离。
       注意：--input-lift 默认已改为 0（原来固定 38px，会把输入栏顶到屏幕中间，
       在 iPhone 上看起来就是"没适配"）。键盘弹起时由 --kb 接管。 */
    padding: 8px 12px calc(8px + var(--safe-bottom) + var(--input-lift));
    flex-shrink: 0;
    margin: 0;
}


.view-chat .toolbar {
    display: flex;
    gap: 4px;
    align-items: center;
    padding-bottom: 8px;
    position: relative;
}


.view-chat .icon-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-sub);
    font-size: 22px;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;
    padding: 0;
}


.view-chat .icon-btn:active {
    background: var(--bg-2);
}


.view-chat .emoji-panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: 10px;
    width: 264px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    z-index: 50;
}


.view-chat .emoji-item {
    border: none;
    background: transparent;
    border-radius: 6px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    touch-action: manipulation;
}


.view-chat .emoji-item:active {
    background: var(--bg-2);
}


.view-chat .emoji-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}


.view-chat .input-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    width: 100%;
}


.view-chat .input-box {
    flex: 1;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    max-height: 120px;
    border: none;
    outline: none;
    resize: none;
    font-size: 16px;
    color: var(--text);
    line-height: 22px;
    background: var(--bg-2);
    border-radius: 20px;
    padding: 9px 16px;
    overflow: hidden;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    touch-action: manipulation;
}


.view-chat .input-box:focus {
    background: #efefef;
}


.view-chat .send-btn {
    height: 40px;
    min-width: 60px;
    padding: 0 16px;
    background: var(--douyin-blue);
    background: var(--bubble-out);
    color: #ffffff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}


.view-chat .send-btn:active {
    opacity: 0.85;
}


.view-chat .send-btn:disabled {
    background: #e0e0e0;
    color: #b0b0b0;
    cursor: not-allowed;
}


.view-chat .mobile-hidden-input { display: none; }


/* ============ 苹果 / iPhone 适配 ============ */

/* 说明：
   1) iOS 上 100vh 在地址栏收起前后不一致，统一用 JS 写入的 --vvh（visualViewport 高度）兜底；
   2) --input-lift 原本固定 38px，会把输入栏顶起来，键盘弹起时输入栏跑到屏幕中间（这就是"不适配"的主因）；
      改成默认 0，只在键盘真的弹起时抬 8px；
   3) 输入框字号保持 ≥16px（input-box 已经是 16px），否则 iOS 聚焦会自动放大整页；
   4) 底部安全区（刘海机 home 条）用 env(safe-area-inset-bottom) 兜住，并用 max() 防止叠加两次。 */


/* 兜底：老 iOS 不认 dvh 时用 JS 给的 --vvh */

.view-chat #app { height: var(--vvh, 100dvh); }

@supports not (height: 100dvh) {

    .view-chat #app { height: var(--vvh, 100vh); }


}


@supports (-webkit-touch-callout: none) {

    .view-chat {
        height: -webkit-fill-available;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .view-chat {
        min-height: -webkit-fill-available;
        /* iOS 橡皮筋回弹时不要整页跟着动 */
        position: relative;
    }

    .view-chat .message-pane {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        /* 输入区下方的安全区交给输入容器，这里不重复留白 */
        padding-bottom: 0;
    }

    /* 输入栏：默认不额外抬高，只保留安全区 */

    .view-chat .input-container {
        padding-bottom: calc(8px + var(--safe-bottom));
        /* 键盘弹起时 JS 会把 body 加上 keyboard-open，并写入 --kb */
        transition: padding-bottom .12s ease-out;
    }

    /* 键盘弹起：不再用固定的 38px，而是用实际键盘高度收敛输入区 */

    .view-chat body.keyboard-open .input-container {
        padding-bottom: calc(8px + var(--kb, 0px));
    }

    /* 弹层/下拉在 iOS 上要能滚动到底 */

    .view-chat .settings-panel, .view-chat .emoji-panel, .view-chat .settings-body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* 防止长按选中导致的操作栏挡住底部按钮 */

    .view-chat .send-btn, .view-chat .clear-all-btn, .view-chat .back-btn, .view-chat .icon-btn {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }


}


/* 小屏（iPhone SE / mini 等）收紧一点间距 */

@media (max-width: 390px) {

    .view-chat .input-box { padding: 8px 12px; }

    .view-chat .send-btn { min-width: 54px; padding: 0 12px; }

    .view-chat .chat-user-name { max-width: 50%; }


}


/* ============ 商品信息栏 / 在线状态 / 自动回复设置 ============ */

.view-chat .chat-subheader {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow: hidden;
}


.view-chat .sub-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--bg-2);
    flex-shrink: 0;
}


.view-chat .sub-goods {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}


.view-chat .sub-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.view-chat .sub-price {
    font-size: 12px;
    color: #e5484d;
    font-weight: 600;
}


.view-chat .sub-online {
    font-size: 12px;
    color: var(--text-mute);
    white-space: nowrap;
    flex-shrink: 0;
}


.view-chat .sub-online.is-online {
    color: #00b42a;
}


.view-chat .sub-settings {
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-sub);
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
}


.view-chat .sub-settings:hover {
    border-color: var(--douyin-blue);
    color: var(--douyin-blue);
}


.view-chat .settings-panel {
    padding: 12px 14px;
    background: #fbfbfd;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}


.view-chat .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}


.view-chat .settings-col {
    flex-direction: column;
    align-items: stretch;
}


.view-chat .settings-label {
    font-size: 13px;
    color: var(--text-sub);
}


.view-chat .settings-textarea {
    width: 100%;
    min-height: 64px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    background: #fff;
    color: var(--text);
}


.view-chat .settings-textarea:focus {
    border-color: var(--douyin-blue);
}


.view-chat .settings-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


.view-chat .save-settings-btn {
    background: var(--bubble-out);
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}


.view-chat .save-settings-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


.view-chat .settings-saved {
    font-size: 12px;
    color: #00b42a;
}


/* 开关 */

.view-chat .switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}


.view-chat .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}


.view-chat .switch .slider {
    position: absolute;
    inset: 0;
    background: #d5d7dc;
    border-radius: 999px;
    transition: background 0.2s;
    cursor: pointer;
}


.view-chat .switch .slider::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}


.view-chat .switch input:checked + .slider {
    background: var(--douyin-blue);
}


.view-chat .switch input:checked + .slider::before {
    transform: translateX(20px);
}


/* 已读状态 */

.view-chat .read-tag {
    font-size: 10px;
    color: var(--text-mute);
}


.view-chat .read-tag.is-read {
    color: var(--douyin-blue);
}


/* ============ 响应式 ============ */

@media (max-width: 480px) {

    .view-chat .msg { max-width: 75%; }

    .view-chat .bubble { font-size: 15px; }

    .view-chat .bubble img { max-width: 160px; max-height: 200px; }

    .view-chat .emoji-panel { width: 228px; grid-template-columns: repeat(5, 1fr); }

    .view-chat .input-box { font-size: 16px; }

    .view-chat .chat-user-name { max-width: 55%; font-size: 15px; }


}


/* ============================================================
 * 新版后台外壳：底部胶囊导航 + 子页返回条 + 半屏弹窗
 *
 * 颜色/圆角/字体全部沿用 fq/assets/tyy.css 那一套 token，
 * 所以和后台其它页面还是同一副皮，只是换了个导航形态。
 * ============================================================ */

/* ---------- 外壳 ---------- */
.app-shell {
    height: 100vh;
    height: 100dvh;
    height: var(--vvh, 100dvh);
    display: flex;
    flex-direction: column;
    background: var(--c-night);
}

/* 内容区：唯一滚动容器（body 自己仍是 overflow:hidden，沿袭原壳层）。
   注意这里【不】留底部空位：留白要留给「视图自己」，否则内容区底部会露出一条
   与视图底色不同的色带（悬浮胶囊后面那条灰带就是这么来的）。见下面的 .has-nav 规则。 */
.app-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.app-body::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- 子页返回条 ---------- */
.sub-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    background: var(--c-light);
    border-bottom: 1px solid var(--c-hair-dark);
    z-index: 50;
}
.sub-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 34px;
    padding: 0 14px 0 10px;
    border: 1px solid var(--c-hair-dark);
    border-radius: 9999px;
    background: var(--c-light);
    color: var(--c-on-primary-mute);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: all .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.sub-back:hover { border-color: var(--c-primary); color: var(--c-primary); }
.sub-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 底部悬浮胶囊导航 ----------
   容器铺满底部但透明、不吃事件（pointer-events:none），真正浮起来的只有中间那颗胶囊。
   这样内容可以一直滚到胶囊底下透出来（毛玻璃），胶囊两侧的空白也不会挡住页面点击。 */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    justify-content: center;
    padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    background: transparent;
    border-top: none;
    pointer-events: none;
}
.bottom-nav-inner {
    position: relative;                             /* 滑动指示条的定位基准 */
    isolation: isolate;                             /* 内部层级自成一组，不和外层串 */
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px;
    color: #4a453f;                                 /* 未选文字压在浅胶囊上，改深暖灰 */
    border-radius: 9999px;                          /* 胶囊 */
    /* ---- 浅暖玻璃（与选中项对调后）：胶囊 = 浅、药丸 = 深 ----
       原参考图的胶囊是「比背景亮」的那一层，我们亮底上用同一个灰会显得发暗；
       对调之后胶囊承担「亮」的角色、药丸承担「深」的角色，关系就顺了。 */
    background: linear-gradient(180deg, rgba(255, 254, 250, .52) 0%, rgba(238, 235, 229, .44) 100%);
    -webkit-backdrop-filter: blur(26px) saturate(125%);
    backdrop-filter: blur(26px) saturate(125%);
    /* ---- 玻璃边缘 + 厚度 + 外部投影 ---- */
    border: 1px solid rgba(255, 255, 255, .58);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -6px 14px -10px rgba(28, 25, 22, .10),
        0 8px 24px -14px rgba(28, 25, 22, .28);
    pointer-events: auto;                           /* 只有胶囊本体收事件 */
}
/* 顶部镜面高光：液态玻璃最显眼的一处特征 */
.bottom-nav-inner::before {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 1px;
    height: 46%;
    border-radius: 9999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .06) 56%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
}
/* 缓慢流动的光泽 —— 「液态」感就来自这里。幅度压得很低，
   否则会变成廉价的高光扫屏（峰值叠起来只到 ~15% 白）。 */
.bottom-nav-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 255, 255, .30) 50%,
        rgba(255, 255, 255, 0) 62%);
    background-size: 260% 100%;
    opacity: .35;
    pointer-events: none;
    z-index: 3;
    animation: nav-liquid 8s ease-in-out infinite;
}
@keyframes nav-liquid {
    0%   { background-position: 135% 0; }
    60%  { background-position: -35% 0; }
    100% { background-position: -35% 0; }
}
@media (prefers-reduced-motion: no-preference) {
    .bottom-nav-inner { transition: box-shadow .25s ease, transform .25s ease; }
    .bottom-nav-inner:active { transform: scale(.985); }
}
/* 不支持 backdrop-filter 的浏览器：给不透明的底，免得文字糊在内容上，但仍保留高光与边缘 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bottom-nav-inner { background: linear-gradient(180deg, rgba(250, 247, 242, .97), rgba(240, 237, 232, .98)); }
}
.nav-pill {
    position: relative;
    z-index: 2;                                     /* 文字压在所有玻璃层之上 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 96px;
    height: 40px;
    padding: 0 18px;
    border: none;
    background: transparent;
    color: #4a453f;                                 /* 未选：深暖灰（浅胶囊上要深色才看得清） */
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border-radius: 9999px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    /* 底色交给指示条去滑，这里只过渡文字色 */
    transition: color .22s ease;
    -webkit-tap-highlight-color: transparent;
}
.nav-pill svg { width: 17px; height: 17px; flex: none; }
.nav-pill:hover:not(.is-active) { color: #2b2723; }
.nav-pill:active { transform: scale(.97); }
.nav-pill.is-active {
    background: transparent;                        /* 填充由 .nav-thumb 提供，否则盖住滑不动 */
    color: #4a453f;                                 /* 选中：药丸调白后白字压不住，改深色（与未选同色，靠药丸色阶区分） */
    box-shadow: none;
}

/* ---------- 滑动指示条 ----------
   切换「主页 / 客服」时从一侧滑到另一侧。
   位置与宽度由 10-shell.js 的 syncThumb() 量出来写进 inline style，
   所以以后多加入口、或者文案变长都不用改样式。 */
.nav-thumb {
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 0;
    border-radius: 9999px;
    overflow: hidden;
    /* 选中项：调白后的暖灰。叠在浅胶囊上 ≈ #b1aeab（原来 .56 是 #878583，明显偏灰） */
    background: linear-gradient(180deg, rgba(66, 63, 59, .34) 0%, rgba(54, 51, 48, .36) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .34),
        inset 0 0 0 .5px rgba(28, 25, 22, .10),
        inset 0 -6px 14px -10px rgba(0, 0, 0, .06),
        0 4px 12px -6px rgba(28, 25, 22, .16);
    z-index: 1;
    pointer-events: none;
}
/* 选中项自己的顶部高光 */
.nav-thumb::before {
    content: '';
    position: absolute;
    left: 7px;
    right: 7px;
    top: 1px;
    height: 46%;
    border-radius: 9999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}
/* 首帧只定位不动画，免得刚进页面时指示条从左边滑进来 */
.nav-thumb.is-ready {
    transition: transform .34s cubic-bezier(.22, 1, .36, 1),
                width .34s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
    .nav-thumb.is-ready { transition: none; }
    .bottom-nav-inner::after { animation: none; opacity: 0; }
}
@media (max-width: 360px) {
    .nav-pill { min-width: 84px; padding: 0 12px; font-size: 13px; }
}

/* 悬浮胶囊占住底部后，把原本贴底的通知抬起来 ----------
   这两个是 position:fixed，容器的 padding 对它们无效，只能直接改 bottom。
   特异性写到 .app-shell .app-body 前缀，保证压得过视图里抽出来的原始规则
   （原规则是 .view-goods .toast 这种 0,2,0）。 */
.app-shell .app-body .view-goods .toast { bottom: calc(16px + 78px); }
.app-shell .app-body .view-orders .new-alert { bottom: calc(18px + 78px); }
/* 编辑页的提交条是 position:sticky;bottom:0，会贴在滚动容器内容区底部，
   已经自动落在胶囊上方；这里只补一点间距让它别贴着。 */
.app-shell .app-body .view-edit .submit-bar { padding-bottom: 8px; }

/* ---------- 悬浮胶囊的底部留白：留给「视图」而不是内容区 ----------
   这样视图自己的背景（以及 45-page-bg.css 里那层涂鸦底纹）会一直铺到屏幕底，
   胶囊后面不再出现一条颜色不同的灰带。
   只在导航可见时留（.has-nav），子页没有导航就不用留。 */
.app-shell.has-nav .app-body .view-home,
.app-shell.has-nav .app-body .view-chat {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 主页：身份卡（磨砂玻璃卡风格，照参考图）----------
   参考图的特征：大圆角玻璃卡（背景透过来）、左上小标题、首字母圆头像 + 名字/副标题、
   左标签右值的行。
   一处必要的偏离：图里白字能读是因为压在深色照片上；我们页面底是 #eef1fa（近白），
   白字直接压上去会看不见。所以玻璃取了偏深的半透明（.52 深灰蓝），白字立得住、
   磨砂质感也在 —— 这是唯一能同时满足「像图」和「能看」的做法。 */
/* 关键修复：视图 CSS 里有 `.view-home * { font-family: var(--font) }`，
   它对卡片里的【每个子元素】直接命中；而只在 .id-card 上写 font-family 只能影响卡片本身，
   管不到里面的文字（继承打不过直接命中）—— 这也是之前几次换字体"看起来没变化"的真正原因。
   所以必须用同级的通配选择器把后代也覆盖掉：0,4,0 > 0,1,0。 */
.app-shell .app-body .view-home .id-card,
.app-shell .app-body .view-home .id-card *,
.app-shell .app-body .view-chat .id-card,
.app-shell .app-body .view-chat .id-card * {
    font-family: 'Noto Sans SC', 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', sans-serif;
}

.id-card {
    position: relative;
    overflow: hidden;
    /* 字体栈：第一顺位 Noto Sans SC（思源黑体的 Google 版，本机已装 NotoSansSC-VF.ttf，
       是可变字体、字重是真的不是合成的）。它比微软雅黑更现代、笔画更匀。
       本机没装的话后面依次落到雅黑 UI / 苹方，不会出现方块或空白。 */
    font-family: 'Noto Sans SC', 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 10px -4px;
    padding: 0;
    /* 白色 + 更透。代价是白字压不住，所以下面所有文字都转深色 */
    background: rgba(255, 255, 255, .42);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 24px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .70),
        0 10px 26px -16px rgba(28, 25, 22, .30);
    text-align: left;
}
/* 顶部镜面高光：玻璃的厚度感 */
.id-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
}
/* 苹果那套液态反光：一条斜向白色光泽带缓慢扫过，压在文字之上（物理上它就是玻璃表面的一层反射） */
.id-card::after {
    content: '';
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: 0;
    width: 46%;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .30) 45%,
        rgba(255, 255, 255, .42) 50%,
        rgba(255, 255, 255, .30) 55%,
        rgba(255, 255, 255, 0) 100%);
    transform: translateX(-160%) rotate(8deg);
    animation: id-liquid 6.5s cubic-bezier(.42, 0, .58, 1) infinite;
    pointer-events: none;
    z-index: 3;
}
@keyframes id-liquid {
    0%   { transform: translateX(-160%) rotate(8deg); }
    100% { transform: translateX(340%) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
    .id-card::after { animation: none; opacity: 0; }
}
.id-card > * { position: relative; z-index: 2; }
/* 标题行：左边「账号信息」，右边身份（超级管理员 / 普通用户）。
   身份原来在头像块的副标题里，两行删掉后挪到这里 —— 不新增行、也不丢信息。 */
.id-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px 0;
    font-size: 15px;
    font-weight: 400;                          /* 全卡都不加粗：避免 500 被字重匹配顶到别档、粗细不一 */                          /* 全卡都不加粗：避免 500 被字重匹配顶到别档、粗细不一 */
    letter-spacing: -.2px;
    color: #1c1c1e;
}
.id-title > i {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    color: rgba(60, 60, 67, .55);
}
/* 头像 + 右边账号名 / 下面到期气泡 */
.id-person {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px 16px;
}
.id-avatar {
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(28, 25, 22, .07);
    box-shadow: 0 0 0 .5px rgba(28, 25, 22, .12);
}
.id-who {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 上下都对齐：这一列撑满整行高度（高度由头像的 54px 决定），
       再 space-between —— 第一行贴上沿、第二行贴下沿，与头像上下沿齐平。 */
    align-self: stretch;
    justify-content: space-between;
    gap: 0;
}
/* 头像右边两行：每行 = 小标签 + 值。标签定宽，所以两个值左边缘对齐成一列 */
.id-line {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    max-width: 100%;
    /* 行高收到 1.15：默认 1.35 的行距留白会让字形相对头像上下沿内缩，
       收窄后第一行的字形顶到头像上沿、第二行贴到下沿。 */
    line-height: 1.15;
}
.id-line > span {
    flex: none;
    width: 3em;                                     /* 「账号」「到期」都是 2 字，定宽对齐 */
    font-size: 13px;
    color: rgba(60, 60, 67, .60);
}
.id-line > b {
    min-width: 0;
    font-size: 17px;
    font-weight: 400;                          /* 与标签同档，不出现粗细混搭 */                          /* 与标签同档，不出现粗细混搭 */
    font-variant-numeric: tabular-nums;         /* 数字等宽，多行数字能对齐 */
    letter-spacing: -.3px;
    color: #1c1c1e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ---------- 主页：入口卡片 ---------- */
.entry-list {
    display: grid;
    /* 必须写 minmax(0, 1fr)：光写 1fr 等价于 minmax(auto, 1fr)，
       列宽会被内容的「最小内容宽度」顶开 —— 哪列文字长哪列就更宽，两列就不等了。 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin: 0 1px 16px;
}
.entry-card {
    display: flex;
    flex-direction: row;                            /* 图标与文字同一行（参考图的排法） */
    align-items: center;
    justify-content: center;                        /* 内容整体居中 */
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 19px 10px;                             /* 宽而矮 */
    /* 简写一次性写全并放在最前：之前 border-color 写在 border 之前被简写重置、
       border-radius 又写了两遍（后者 var(--r-md) 把 20px 顶掉），导致圆角和描边一直没生效。 */
    border: 1px solid rgba(28, 25, 22, .05);        /* 参考图几乎看不出描边 */
    border-radius: 20px;                            /* 参考图圆角明显更大 */
    background: var(--c-night-soft);
    font-family: var(--font);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    -webkit-tap-highlight-color: transparent;
}
/* 点击/划过不再变蓝：原来是 border-color: var(--c-primary)（即品牌蓝 #3370ff），
   手机点一下就会触发 hover，于是出现一圈蓝边 —— 去掉它，改用中性反馈。 */
.entry-card:hover { background: var(--c-hover); }
.entry-card:active { background: var(--c-hover); }
/* 顺带去掉浏览器默认的焦点蓝框；键盘 Tab 时仍给一个中性灰环（鼠标/触摸看不到） */
.entry-card:focus { outline: none; }
.entry-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(28, 25, 22, .28);
}
.entry-ico {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    background: none;                               /* 参考图是纯图标，没有底色块 */
}
.entry-body { min-width: 0; display: flex; align-items: center; }
.entry-arrow { display: none; }
/* 线条图标：尺寸与颜色对齐参考图（深灰描边） */
.entry-ico svg {
    width: 21px;
    height: 21px;
    display: block;
    color: #3a3a3c;
}

/* 被误删后补回：entry 的标题/描述（标题必须 nowrap+省略号，否则长标题会把磁贴顶宽、描述不该显示） */
.entry-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 500;
    color: var(--c-ink);
    line-height: 1.35;
}
.entry-desc {
    display: none;                                  /* 磁贴只留图标+标题 */
    margin-top: 2px;
    font-size: 12px;
    color: var(--c-ink-mute);
}

/* ---------- 闲鱼：半屏弹窗 ---------- */
.sheet-mask {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: flex-end;
    background: rgba(0, 0, 0, .40);
}
.sheet {
    width: 100%;
    padding: 6px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--c-night-soft);
    border-radius: var(--r-md) var(--r-md) 0 0;
    animation: sheet-up .22s ease both;
}
.sheet-head {
    padding: 12px 6px;
    border-bottom: 1px solid var(--c-hair-light);
    font-size: 15px;
    font-weight: 600;
    color: var(--c-ink);
    text-align: center;
}
.sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 6px;
    border: none;
    border-bottom: 1px solid var(--c-hair-light);
    background: transparent;
    font-family: var(--font);
    font-size: 15px;
    color: var(--c-ink);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sheet-item:last-of-type { border-bottom: none; }
.sheet-item:hover { background: transparent; }
.sheet-item-ico {
    width: 34px;
    height: 34px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: var(--c-hair-light);
}
.sheet-item-ico svg {
    width: 20px;
    height: 20px;
    display: block;
    color: #3a3a3c;
}
.sheet-item-body { flex: 1; min-width: 0; }
.sheet-item-title { font-size: 15px; font-weight: 500; color: var(--c-ink); }
.sheet-cancel {
    width: 100%;
    height: 46px;
    margin-top: 10px;
    border: none;
    border-radius: var(--r-sm);
    background: var(--c-hair-light);
    color: var(--c-on-primary-mute);
    font-family: var(--font);
    font-size: 15px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sheet-cancel:hover { background: var(--c-hair-dark); }
@keyframes sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ---------- 客服页顶部：左在线 / 中客服 / 右设置 ---------- */
.app-shell .app-body .view-chat .chat-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 8px;
    font-size: 13px;
    color: #4e5969;
}
.app-shell .app-body .view-chat .chat-head-left {
    display: inline-flex;
    align-items: center;
}
.app-shell .app-body .view-chat .chat-head-center {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
    font-size: 15px;
    font-weight: 600;
    color: #1d2129;
}
.app-shell .app-body .view-chat .chat-head-right {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}
.app-shell .app-body .view-chat .chat-head-btn {
    border: 1px solid #e5e6eb;
    background: #fff;
    color: #4e5969;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
}
.app-shell .app-body .view-chat .chat-head-btn:hover {
    background: #f0f4ff;
    border-color: #bcd0ff;
    color: var(--c-primary, #3370ff);
}
.app-shell .app-body .view-chat .chat-head-btn:active {
    background: #e6edff;
}
.app-shell .app-body .view-chat .chat-head-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00b42a;
    margin-right: 5px;
    box-shadow: 0 0 0 3px rgba(0, 180, 42, .15);
}

/* ---------- 客服页外壳：头栏 + 会话列表 = 一张卡 ---------- */
.app-shell .app-body .view-chat .chat-head {
    margin: 12px 12px 0;
    padding: 13px 14px;
    background: #fff;
    border: 1px solid var(--c-hair-dark, #e5e6eb);
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 2px 10px rgba(29, 33, 41, .04);
}
.app-shell .app-body .view-chat .main-content {
    margin: 0 12px 12px;
    background: #fff;
    border: 1px solid var(--c-hair-dark, #e5e6eb);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 6px 18px rgba(29, 33, 41, .05);
}
.app-shell .app-body .view-chat .session-list {
    padding: 6px 0;
}
.app-shell .app-body .view-chat .session-item {
    margin: 0 8px;
    padding: 12px 10px;
    border-radius: 10px;
    transition: background .15s ease;
}
.app-shell .app-body .view-chat .session-item:hover {
    background: var(--c-hover, #f2f3f5);
}
.app-shell .app-body .view-chat .session-item .avatar {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--c-hair-light, #f2f3f5);
}
.app-shell .app-body .view-chat .settings-panel {
    margin: 8px 12px 0;
    background: #fff;
    border: 1px solid var(--c-hair-dark, #e5e6eb);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(29, 33, 41, .05);
    overflow: hidden;
}
/* ============================================================
 * 主页 / 客服页背景：叠加 assets/xiaoyun.svg 涂鸦纹理
 *
 * 这个 SVG 是 1440×2960 的竖版手绘线稿（745 条 path、纯黑描边、透明底、
 * 没有 fill 也没有渐变），本来就是一整张密集的涂鸦图案，适合平铺当底纹。
 *
 * 两个要点：
 *   1. 它是纯黑的，直接铺满整页内容就没法看了 —— 所以走 ::before 伪元素，
 *      用 opacity 压成很淡的水印纹理（background-image 本身不支持设透明度）。
 *   2. 视图自己的背景（主页那层淡蓝径向渐变、客服页的 #f6f8fa）要保留，
 *      所以伪元素用 z-index:-1：在视图背景之上、内容之下。
 *      这要求视图根节点是定位上下文且自成堆叠上下文 → position:relative + isolation:isolate。
 *
 * 选择器写足 .app-shell .app-body 前缀（0,3,0），保证压得过从模板抽出来的 .view-x 规则。
 * ============================================================ */

/* ---------- 两页统一背景 ----------
   按指定色值 #eef1fa 平铺（原来主页是 #f4f6fa + 顶部一层淡蓝径向渐变、客服页只有纯灰，
   两页不一致；后统一过，现在再按要求改成 #eef1fa）。
   去掉渐变是因为给了确切色值 —— 留着渐变渲染出来就不是 #eef1fa 了。
   选择器 0,3,0 压得过模板抽出来的 .view-x（0,1,0）。 */
.app-shell .app-body .view-home,
.app-shell .app-body .view-chat {
    background: #eef1fa;
}

.app-shell .app-body .view-home,
.app-shell .app-body .view-chat {
    position: relative;
    isolation: isolate;
}

.app-shell .app-body .view-home::before,
.app-shell .app-body .view-chat::before {
    content: '';
    position: absolute;
    inset: 0;                       /* 覆盖整页可滚动高度，纹理随内容一起滚 */
    z-index: -1;                    /* 在视图背景之上、内容之下 */
    pointer-events: none;           /* 纯装饰，不挡点击 */
    background-image: url("/assets/xiaoyun.svg");
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 420px;         /* 只给宽度，高度按 1440:2960 自动 ≈ 863px 一格 */
    opacity: .10;                   /* 纯黑线稿压到 10% ≈ 淡灰水印 */
}

/* 手机上格子小一点，图案不至于太大 */
@media (max-width: 480px) {
    .app-shell .app-body .view-home::before,
    .app-shell .app-body .view-chat::before {
        background-size: 320px;
    }
}

/* ============================================================
 * 底色改为 #FBFBF9，并去掉 xiaoyun.svg 水印
 * 写在同一个文件末尾 ✗ 选择器权重相同 ✗ 后写的必然生效（不会再被上面盖掉）。
 * 原水印规则保留在上方 ✗ 只关掉伪元素 ✗ 想恢复删掉这段即可。
 * ============================================================ */
.app-shell .app-body .view-home,
.app-shell .app-body .view-chat {
    background: #FBFBF9;
}
.app-shell .app-body .view-home::before,
.app-shell .app-body .view-chat::before {
    content: none;
    background-image: none;
    opacity: 0;
}

/* ============================================================
 * ★ 全新 · 极简白 主题（后台主页 / 外壳 / 底部导航）
 * 覆盖上方「暖色液态玻璃」皮：纯白底、白卡、细灰描边、克制阴影、
 * 黑色墨色文字、单一蓝色点缀。只改外观，不动任何结构与交互。
 * 想恢复旧皮肤：删掉本区块（到「极简白主题结束」为止）即可。
 * ============================================================ */
:root {
    --w-bg: #f6f7f9;        /* 页面底：近白冷灰 */
    --w-card: #ffffff;      /* 卡片底：纯白 */
    --w-line: #eceef1;      /* 细描边 */
    --w-ink: #16181c;       /* 主文字 */
    --w-sub: #8a919c;       /* 次要文字 */
    --w-primary: #2f6bff;   /* 唯一品牌蓝点缀 */
    --w-soft: #f2f5ff;      /* 品牌蓝浅底 */
    --w-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -18px rgba(16, 24, 40, .18);
    --w-radius: 18px;
}

/* ---------- 页面底：干净近白，去掉暖色/涂鸦/渐变 ---------- */
.app-shell,
.app-shell .app-body .view-home,
.app-shell .app-body .view-chat {
    background: var(--w-bg) !important;
}
.app-shell .app-body .view-home {
    padding-top: 22px;
}

/* ---------- 身份卡：磨砂玻璃 → 纯白简洁卡 ---------- */
.app-shell .app-body .view-home .id-card {
    position: relative;
    margin: 4px 0 18px;
    padding: 0;
    background: var(--w-card) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid var(--w-line) !important;
    border-radius: var(--w-radius) !important;
    box-shadow: var(--w-shadow) !important;
}
.app-shell .app-body .view-home .id-card::before,
.app-shell .app-body .view-home .id-card::after {
    content: none !important;          /* 去掉镜面高光与流动反光 */
    animation: none !important;
}
.app-shell .app-body .view-home .id-card .id-title {
    padding: 16px 18px 0;
    color: var(--w-ink);
    font-weight: 600;
    font-size: 15px;
}
.app-shell .app-body .view-home .id-card .id-title > i {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    color: var(--w-primary);
    background: var(--w-soft);
    padding: 3px 10px;
    border-radius: 9999px;
}
.app-shell .app-body .view-home .id-card .id-person { padding: 12px 18px 18px; gap: 14px; }
.app-shell .app-body .view-home .id-card .id-avatar {
    width: 52px;
    height: 52px;
    background: #f1f3f6;
    box-shadow: none;
    border: 1px solid var(--w-line);
}
.app-shell .app-body .view-home .id-card .id-line > span { color: var(--w-sub); }
.app-shell .app-body .view-home .id-card .id-line > b { color: var(--w-ink); font-weight: 500; }

/* ---------- 功能磁贴：纯白卡 + 细边 + 图标浅底块 ---------- */
.app-shell .app-body .view-home .entry-list {
    gap: 12px;
    margin: 0 0 8px;
}
.app-shell .app-body .view-home .entry-card {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--w-card) !important;
    border: 1px solid var(--w-line) !important;
    border-radius: var(--w-radius) !important;
    box-shadow: var(--w-shadow);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.app-shell .app-body .view-home .entry-card:hover,
.app-shell .app-body .view-home .entry-card:active {
    background: var(--w-card) !important;
    border-color: #dfe3e9 !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 14px 30px -18px rgba(16,24,40,.28);
}
.app-shell .app-body .view-home .entry-card:focus-visible {
    box-shadow: 0 0 0 3px rgba(47, 107, 255, .18);
}
.app-shell .app-body .view-home .entry-card .entry-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--w-soft);
    color: var(--w-primary);
}
.app-shell .app-body .view-home .entry-card .entry-ico svg {
    width: 20px;
    height: 20px;
    color: var(--w-primary);
}
.app-shell .app-body .view-home .entry-card .entry-body { display: block; }
.app-shell .app-body .view-home .entry-card .entry-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--w-ink);
}
/* 危险项（退出登录）：浅红底块 + 红字 */
.app-shell .app-body .view-home .entry-card.is-danger .entry-ico {
    background: #fef0f0;
    color: #f04438;
}
.app-shell .app-body .view-home .entry-card.is-danger .entry-ico svg { color: #f04438; }
.app-shell .app-body .view-home .entry-card.is-danger .entry-title { color: #d92d20; }

/* ---------- 子页返回条：白底细线 ---------- */
.sub-bar {
    background: var(--w-card) !important;
    border-bottom: 1px solid var(--w-line) !important;
}
.sub-back {
    background: var(--w-card);
    border: 1px solid var(--w-line);
    color: var(--w-sub);
}
.sub-back:hover { border-color: var(--w-primary); color: var(--w-primary); }
.sub-title { color: var(--w-ink); }

/* ---------- 底部导航：暖玻璃胶囊 → 白色简洁胶囊 ---------- */
.bottom-nav-inner {
    gap: 4px;
    padding: 5px;
    color: var(--w-sub);
    background: rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--w-line) !important;
    box-shadow: 0 6px 24px -12px rgba(16, 24, 40, .22) !important;
}
.bottom-nav-inner::before,
.bottom-nav-inner::after {
    content: none !important;
    animation: none !important;
}
.nav-pill { color: var(--w-sub) !important; font-weight: 600; }
.nav-pill svg { color: inherit; }
.nav-pill:hover:not(.is-active) { color: var(--w-ink) !important; }
.nav-pill.is-active { color: #fff !important; }
.nav-thumb {
    background: var(--w-ink) !important;
    box-shadow: 0 4px 12px -6px rgba(16, 24, 40, .45) !important;
}
.nav-thumb::before { content: none !important; }

/* ---------- 闲鱼半屏弹窗：白色简洁 ---------- */
.sheet { background: var(--w-card) !important; }
.sheet-head { border-bottom: 1px solid var(--w-line); color: var(--w-ink); }
.sheet-item { border-bottom: 1px solid var(--w-line); }
.sheet-item-ico { background: var(--w-soft); }
.sheet-item-ico svg { color: var(--w-primary); }
.sheet-item-title { color: var(--w-ink); }
.sheet-cancel {
    background: #f2f4f7;
    color: var(--w-sub);
    border-radius: 12px;
}
.sheet-cancel:hover { background: #e9edf2; }
/* ===================== 极简白主题结束 ===================== */

/* ============================================================
 * ★ 后台客服页 · 极简白（view-chat 列表模式 / 设置面板）
 * 与主页同一套白色语言：近白底、独立白卡、细灰边、柔和阴影、
 * 青色点缀统一为品牌蓝。只改列表页与设置外壳，不碰对话气泡/消息区。
 * 想恢复：删掉本区块（到「客服页极简白结束」为止）。
 * ============================================================ */
.app-shell .app-body .view-chat {
    --w2-line: #eceef1;
    --w2-line-soft: #f2f3f5;
}

/* ---------- 顶部条：独立白卡（不再和列表拼成一张卡） ---------- */
.app-shell .app-body .view-chat .chat-head {
    margin: 14px 12px 0;
    padding: 13px 16px;
    background: var(--w-card);
    border: 1px solid var(--w2-line);
    border-radius: var(--w-radius);
    box-shadow: var(--w-shadow);
}
.app-shell .app-body .view-chat .chat-head-center { color: var(--w-ink); font-size: 15px; }
.app-shell .app-body .view-chat .chat-head-left { color: var(--w-sub); font-size: 12.5px; }
.app-shell .app-body .view-chat .chat-head-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .14);
}
.app-shell .app-body .view-chat .chat-head-btn {
    border: 1px solid var(--w2-line);
    background: var(--w-soft);
    color: var(--w-primary);
    font-weight: 500;
    border-radius: 9999px;
    padding: 5px 14px;
}
.app-shell .app-body .view-chat .chat-head-btn:hover {
    background: #e7eeff;
    border-color: #cdddff;
    color: var(--w-primary);
}
.app-shell .app-body .view-chat .chat-head-btn:active { background: #dde8ff; }

/* ---------- 会话列表：独立白卡 ---------- */
.app-shell .app-body .view-chat .main-content {
    margin: 12px;
    padding: 0;
    background: var(--w-card);
    border: 1px solid var(--w2-line);
    border-radius: var(--w-radius);
    box-shadow: var(--w-shadow);
    overflow: hidden;
}
.app-shell .app-body .view-chat .session-list {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.app-shell .app-body .view-chat .session-item {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--w2-line-soft);
    border-radius: 0;
}
.app-shell .app-body .view-chat .session-item:last-child { border-bottom: none; }
.app-shell .app-body .view-chat .session-item:hover { background: #f8fafc; }

/* 头像：青底方块 → 浅蓝底块 */
.app-shell .app-body .view-chat .session-item .avatar {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--w-soft);
    border: 1px solid #e7eeff;
    box-shadow: none;
    color: var(--w-primary);
}
.app-shell .app-body .view-chat .session-item .avatar img { border-radius: 12px; }

.app-shell .app-body .view-chat .user-id { color: var(--w-ink); font-weight: 600; }
.app-shell .app-body .view-chat .last-time { color: var(--w-sub); }
.app-shell .app-body .view-chat .last-msg { color: #6b7280; }
.app-shell .app-body .view-chat .goods-line { color: #8a919c; }
.app-shell .app-body .view-chat .unread-badge {
    background: #f04438;
    border-color: var(--w-card);
    box-shadow: 0 2px 6px -2px rgba(240, 68, 56, .5);
}

/* 角色标签：访客=蓝，客服=绿，机器人=琥珀（语义色保留，底色调浅） */
.app-shell .app-body .view-chat .role-tag { border-radius: 6px; }
.app-shell .app-body .view-chat .role-tag.customer {
    color: var(--w-primary);
    background: var(--w-soft);
    border-color: #e2eaff;
}
.app-shell .app-body .view-chat .role-tag.staff { color: #16a34a; background: #ecfdf3; border-color: #d7f5e2; }
.app-shell .app-body .view-chat .role-tag.bot { color: #d97706; background: #fffbeb; border-color: #fdeec8; }
.app-shell .app-body .view-chat .read-status.is-read { color: var(--w-primary); }
.app-shell .app-body .view-chat .online-dot.is-online {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .14);
}

/* 空状态 */
.app-shell .app-body .view-chat .empty-state { color: var(--w-sub); padding: 72px 20px; }
.app-shell .app-body .view-chat .empty-state::before { color: #e2e6ec; }

/* ---------- 设置面板（外壳）：白卡统一 ---------- */
.app-shell .app-body .view-chat .settings-panel {
    margin: 12px;
    background: var(--w-card);
    border: 1px solid var(--w2-line);
    border-radius: var(--w-radius);
    box-shadow: var(--w-shadow);
    overflow: hidden;
}
.app-shell .app-body .view-chat .settings-label { color: #4b5563; }
.app-shell .app-body .view-chat .settings-textarea {
    border-color: var(--w2-line);
    border-radius: 10px;
    background: #f8fafc;
}
.app-shell .app-body .view-chat .settings-textarea:focus {
    border-color: var(--w-primary);
    background: #fff;
}
.app-shell .app-body .view-chat .save-settings-btn {
    background: var(--w-primary);
    border-radius: 9999px;
    padding: 8px 20px;
}
.app-shell .app-body .view-chat .save-settings-btn:hover { background: #245df0; }
.app-shell .app-body .view-chat .switch input:checked + .slider { background: var(--w-primary); }

/* 窄屏收紧卡片外边距 */
@media (max-width: 480px) {
    .app-shell .app-body .view-chat .chat-head { margin-left: 10px; margin-right: 10px; }
    .app-shell .app-body .view-chat .main-content,
    .app-shell .app-body .view-chat .settings-panel { margin-left: 10px; margin-right: 10px; }
    .app-shell .app-body .view-chat .session-item { padding: 13px 14px; }
}
/* ===================== 客服页极简白结束 ===================== */

/* ============================================================
 * ★ 主页全新极简样式 · 账号卡 + 分组功能列表（2026-10-14）
 * 覆盖上方「极简白」磁贴皮，只改外观不动交互：
 *   1. 顶部账号卡：头像 + 名称/角色 一行，细分隔线下一条到期信息
 *   2. 功能入口：2 列磁贴 → 一张白卡内的整行列表（图标 + 标题/描述 + 箭头）
 * 想恢复旧样式：删掉本区块（到「主页新样式结束」为止）即可。
 * ============================================================ */

/* ---------- 顶部账号卡 ---------- */
.app-shell .app-body .view-home .id-card {
    margin: 2px 0 14px;
    padding: 16px;
    border-radius: 16px !important;
    background: var(--w-card) !important;
    border: 1px solid var(--w-line) !important;
    box-shadow: var(--w-shadow) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    gap: 0;
}
.app-shell .app-body .view-home .id-card::before,
.app-shell .app-body .view-home .id-card::after {
    content: none !important;
    animation: none !important;
}
/* 头像 + 名称/角色 同一行 */
.app-shell .app-body .view-home .id-card .id-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
}
.app-shell .app-body .view-home .id-card .id-avatar {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: #f1f3f6;
    border: 1px solid var(--w-line);
    box-shadow: none;
}
.app-shell .app-body .view-home .id-card .id-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.app-shell .app-body .view-home .id-card .id-name {
    max-width: 100%;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.2px;
    color: var(--w-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-shell .app-body .view-home .id-card .id-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.2;
    font-style: normal;
    color: var(--w-sub);
}
.app-shell .app-body .view-home .id-card .id-role .id-dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: #b7bdc8;
}
/* 超级管理员：蓝色状态点 + 蓝字，克制地点缀 */
.app-shell .app-body .view-home .id-card.is-super .id-role { color: var(--w-primary); }
.app-shell .app-body .view-home .id-card.is-super .id-role .id-dot { background: var(--w-primary); }

/* 分隔线下的到期信息行 */
.app-shell .app-body .view-home .id-card .id-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 0 0;
    border-top: 1px solid var(--w-line);
}
.app-shell .app-body .view-home .id-card .id-foot-k {
    font-size: 13px;
    color: var(--w-sub);
}
.app-shell .app-body .view-home .id-card .id-foot-v {
    font-size: 13px;
    font-weight: 600;
    color: var(--w-ink);
    font-variant-numeric: tabular-nums;
}

/* ---------- 功能入口：2 列磁贴 → 分组整行列表 ---------- */
.app-shell .app-body .view-home .entry-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 12px;
    background: var(--w-card);
    border: 1px solid var(--w-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--w-shadow);
}
.app-shell .app-body .view-home .entry-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    background: var(--w-card) !important;
    border: none;
    border-bottom: 1px solid var(--w-line);
    border-radius: 0 !important;
    box-shadow: none;
    transform: none;
    text-align: left;
    transition: background .12s ease;
}
.app-shell .app-body .view-home .entry-card:last-child { border-bottom: none; }
.app-shell .app-body .view-home .entry-card:hover,
.app-shell .app-body .view-home .entry-card:active {
    background: #f7f8fa !important;
    border-color: transparent;
    transform: none;
    box-shadow: none;
}
.app-shell .app-body .view-home .entry-card:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(47, 107, 255, .25);
}
.app-shell .app-body .view-home .entry-card .entry-ico {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    background: var(--w-soft);
    color: var(--w-primary);
}
.app-shell .app-body .view-home .entry-card .entry-ico svg {
    width: 18px;
    height: 18px;
    color: var(--w-primary);
}
.app-shell .app-body .view-home .entry-card .entry-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.app-shell .app-body .view-home .entry-card .entry-title {
    display: block;
    max-width: 100%;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--w-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-shell .app-body .view-home .entry-card .entry-desc {
    display: block;
    margin-top: 0;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.3;
    color: var(--w-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-shell .app-body .view-home .entry-card .entry-arrow {
    display: block;
    flex: none;
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
    color: #c3c9d3;
}
/* 退出登录：浅红图标块 + 红色标题 */
.app-shell .app-body .view-home .entry-card.is-danger .entry-ico { background: #fef0f0; color: #f04438; }
.app-shell .app-body .view-home .entry-card.is-danger .entry-ico svg { color: #f04438; }
.app-shell .app-body .view-home .entry-card.is-danger .entry-title { color: #d92d20; }

/* 窄屏微调 */
@media (max-width: 480px) {
    .app-shell .app-body .view-home .id-card { padding: 14px; border-radius: 14px; }
    .app-shell .app-body .view-home .entry-list { border-radius: 14px; }
    .app-shell .app-body .view-home .entry-card { padding: 12px 13px; }
}
/* ===================== 主页新样式结束 ===================== */

/* ============================================================
 * ★ 客服列表 · 全新极简（与主页功能列表同一套语言）2026-10-14
 * 只改【列表外壳】：顶部条 / 会话卡 / 头像 / 未读角标；
 * 对话详情（消息气泡、输入区）一律不碰，页面背景保持不变。
 * 每行从 3 行收到 2 行：会话名+时间 / 角色+最新消息
 * （会话名本身就是商品标题，原商品行重复显示同款名+价格，故隐藏，价格进详情页可见）。
 * 想恢复：删掉本区块（到「客服列表新样式结束」为止）。
 * ============================================================ */

/* ---------- 顶部条：白卡、细边、16px 圆角，与主页卡片统一 ---------- */
.app-shell .app-body .view-chat .chat-head {
    margin: 14px 12px 0;
    padding: 13px 16px;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -18px rgba(16, 24, 40, .18);
}
.app-shell .app-body .view-chat .chat-head-center {
    font-size: 16px;
    font-weight: 600;
    color: #16181c;
}
.app-shell .app-body .view-chat .chat-head-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #8a919c;
}
.app-shell .app-body .view-chat .chat-head-dot {
    width: 7px;
    height: 7px;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .14);
}
.app-shell .app-body .view-chat .chat-head-btn {
    border: 1px solid #e2eaff;
    background: #f2f5ff;
    color: #2f6bff;
    font-size: 13px;
    font-weight: 500;
    border-radius: 9999px;
    padding: 5px 14px;
}
.app-shell .app-body .view-chat .chat-head-btn:active { background: #e7eeff; }

/* ---------- 会话卡：一张白卡内的整行列表 ---------- */
.app-shell .app-body .view-chat .main-content {
    margin: 12px;
    padding: 0;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -18px rgba(16, 24, 40, .18);
    overflow: hidden;
}
.app-shell .app-body .view-chat .session-list {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.app-shell .app-body .view-chat .session-item {
    margin: 0;
    padding: 13px 14px;
    gap: 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f2f3f5;
    border-radius: 0;
    box-shadow: none;
}
.app-shell .app-body .view-chat .session-item:last-child { border-bottom: none; }
.app-shell .app-body .view-chat .session-item:hover { background: transparent; }
.app-shell .app-body .view-chat .session-item:active { background: #f7f8fa; }

/* 头像：圆形中性灰（与主页账号头像一致）；有商品图时圆形铺满 */
.app-shell .app-body .view-chat .session-item .avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #f1f3f6;
    border: 1px solid #eceef1;
    color: #4b5563;
    font-size: 17px;
    font-weight: 600;
    box-shadow: none;
}
.app-shell .app-body .view-chat .session-item .avatar .goods-thumb-img { border-radius: 50%; }

/* 第一行：在线点 + 会话名（左） / 时间（右） */
.app-shell .app-body .view-chat .session-top { margin-bottom: 3px; gap: 8px; }
.app-shell .app-body .view-chat .user-id {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: #16181c;
}
.app-shell .app-body .view-chat .online-dot {
    width: 7px;
    height: 7px;
    margin-right: 7px;
    background: #c3c9d3;
    box-shadow: none;
}
.app-shell .app-body .view-chat .online-dot.is-online {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .14);
}
.app-shell .app-body .view-chat .last-time {
    font-size: 11.5px;
    font-weight: 400;
    color: #aab0ba;
}

/* 隐藏重复商品行（会话名已是商品标题；价格在对话详情页仍可见） */
.app-shell .app-body .view-chat .goods-line { display: none; }

/* 第二行：角色标签 + 最新消息 + 已读 */
.app-shell .app-body .view-chat .last-msg {
    font-size: 13px;
    line-height: 1.45;
    color: #6b7280;
}
.app-shell .app-body .view-chat .role-tag {
    font-size: 10px;
    line-height: 1.5;
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-weight: 500;
}
.app-shell .app-body .view-chat .role-tag.customer { color: #2f6bff; background: #f2f5ff; border-color: #e7eeff; }
.app-shell .app-body .view-chat .role-tag.staff { color: #16a34a; background: #ecfdf3; border-color: #dcfce7; }
.app-shell .app-body .view-chat .role-tag.bot { color: #d97706; background: #fffbeb; border-color: #fdeec8; }
.app-shell .app-body .view-chat .read-status { font-size: 11.5px; }
.app-shell .app-body .view-chat .read-status.is-read { color: #2f6bff; }

/* 未读角标：右下悬浮 → 行内最右、垂直居中的小胶囊 */
.app-shell .app-body .view-chat .unread-badge {
    position: static;
    align-self: center;
    flex: none;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border: none;
    border-radius: 9999px;
    background: #f04438;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    box-shadow: none;
}

/* 空状态 */
.app-shell .app-body .view-chat .empty-state {
    color: #aab0ba;
    padding: 76px 20px;
    font-size: 13px;
}

/* 窄屏收紧 */
@media (max-width: 480px) {
    .app-shell .app-body .view-chat .chat-head { margin-left: 10px; margin-right: 10px; border-radius: 14px; }
    .app-shell .app-body .view-chat .main-content { margin-left: 10px; margin-right: 10px; border-radius: 14px; }
    .app-shell .app-body .view-chat .session-item { padding: 12px 13px; }
}
/* ===================== 客服列表新样式结束 ===================== */

/* ============================================================
 * ★ 客服对话详情页 · 整体重改（极简白，与主页/会话列表统一）2026-10-15
 * 纯 CSS，只改外观与交互反馈，不动结构/逻辑：
 *   顶栏 → 白底细线 + 圆形浅灰按钮；商品条 → 白底细边；
 *   消息 → 修复气泡（模板类名是 customer/staff/bot，旧 .received/.sent 从未命中，
 *           所以此前消息无气泡底色、全部靠左）：访客白泡左、客服/机器人蓝泡右；
 *   输入区 → 白底，浅灰输入框 + 品牌蓝发送胶囊。
 * 想恢复：删掉本区块（到「对话详情页新样式结束」为止）。
 * ============================================================ */

/* ---------- 顶栏：白底细线 ---------- */
.app-shell .app-body .view-chat .chat-header {
    background: #fff;
    border-bottom: 1px solid #eceef1;
    padding-left: 10px;
    padding-right: 10px;
}
.app-shell .app-body .view-chat .back-btn,
.app-shell .app-body .view-chat .refresh-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f2f3f5;
    color: #4b5563;
    transition: background .12s ease;
}
.app-shell .app-body .view-chat .back-btn { font-size: 20px; line-height: 1; }
.app-shell .app-body .view-chat .refresh-btn { font-size: 16px; line-height: 1; }
.app-shell .app-body .view-chat .back-btn:active,
.app-shell .app-body .view-chat .refresh-btn:active {
    opacity: 1;
    background: #e6e9ee;
}
.app-shell .app-body .view-chat .chat-user-name {
    color: #16181c;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
}

/* ---------- 商品条：白底、细边、浅蓝自动回复胶囊 ---------- */
.app-shell .app-body .view-chat .chat-subheader {
    background: #fff;
    border-bottom: 1px solid #eceef1;
    padding: 9px 12px;
    gap: 10px;
}
.app-shell .app-body .view-chat .sub-thumb {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f2f3f5;
}
.app-shell .app-body .view-chat .sub-title { color: #16181c; font-size: 13px; }
.app-shell .app-body .view-chat .sub-price { color: #f04438; font-size: 12px; font-weight: 600; }
.app-shell .app-body .view-chat .sub-online {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #aab0ba;
}
/* 在线文字前补一个绿点（模板只有文字没有点） */
.app-shell .app-body .view-chat .sub-online::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    background: #c3c9d3;
}
.app-shell .app-body .view-chat .sub-online.is-online { color: #16a34a; }
.app-shell .app-body .view-chat .sub-online.is-online::before {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .14);
}
.app-shell .app-body .view-chat .sub-settings {
    border: 1px solid #e7eeff;
    background: #f2f5ff;
    color: #2f6bff;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 9999px;
    transition: background .12s ease;
}
.app-shell .app-body .view-chat .sub-settings:active { background: #e7eeff; }

/* ---------- 消息区：浅灰底 ---------- */
.app-shell .app-body .view-chat .message-pane {
    background: #f6f7f9;
    padding: 16px 14px 18px;
    gap: 14px;
}

/* 日期分隔：浅灰小字 */
.app-shell .app-body .view-chat .date-divider { margin: 2px 0; }
.app-shell .app-body .view-chat .date-divider span {
    color: #aab0ba;
    font-size: 11.5px;
}

/* ---------- 气泡：访客白泡靠左 / 客服·机器人蓝泡靠右 ---------- */
.app-shell .app-body .view-chat .msg { max-width: 76%; }

.app-shell .app-body .view-chat .msg-row.customer { justify-content: flex-start; }
.app-shell .app-body .view-chat .msg-row.staff,
.app-shell .app-body .view-chat .msg-row.bot { justify-content: flex-end; }

.app-shell .app-body .view-chat .msg.customer { align-items: flex-start; }
.app-shell .app-body .view-chat .msg.staff,
.app-shell .app-body .view-chat .msg.bot { align-items: flex-end; }

.app-shell .app-body .view-chat .msg .bubble {
    position: relative;
    padding: 9px 13px;
    font-size: 15px;
    line-height: 1.5;
    border-radius: 16px;
    box-shadow: 0 1px 1px rgba(16, 24, 40, .04);
    animation: chat-bubble-in .18s ease both;
}
@keyframes chat-bubble-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .app-shell .app-body .view-chat .msg .bubble { animation: none; }
}

/* 访客：白底深字，左上角小切角 */
.app-shell .app-body .view-chat .msg.customer .bubble {
    background: #fff;
    color: #16181c;
    border: 1px solid #eef0f3;
    border-top-left-radius: 5px;
}
/* 客服 / 机器人：品牌蓝底白字，右上角小切角 */
.app-shell .app-body .view-chat .msg.staff .bubble,
.app-shell .app-body .view-chat .msg.bot .bubble {
    background: #2f6bff;
    color: #fff;
    border: 1px solid #2f6bff;
    border-top-right-radius: 5px;
}

/* 时间 / 已读 */
.app-shell .app-body .view-chat .msg-time {
    margin-top: 4px;
    padding: 0 3px;
    font-size: 11px;
    color: #aab0ba;
}
.app-shell .app-body .view-chat .read-tag { margin-left: 4px; }
.app-shell .app-body .view-chat .read-tag.is-read { color: #2f6bff; }

/* 图片消息：气泡内留细边，图片本身圆角 */
.app-shell .app-body .view-chat .bubble.bubble--image {
    padding: 3px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
}
.app-shell .app-body .view-chat .msg.staff .bubble.bubble--image,
.app-shell .app-body .view-chat .msg.bot .bubble.bubble--image {
    background: #fff;
    border-color: #eef0f3;
}
.app-shell .app-body .view-chat .bubble img {
    max-width: 200px;
    max-height: 240px;
    border-radius: 10px;
}
/* 表情消息：去底色、去边框，放大显示（6 类选择器压过同权重的左/右气泡配色规则） */
.app-shell .app-body .view-chat .msg .bubble.bubble--emoji {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    animation: none;
}
.app-shell .app-body .view-chat .msg.staff .bubble.bubble--emoji,
.app-shell .app-body .view-chat .msg.bot .bubble.bubble--emoji {
    background: transparent;
    border: none;
}

/* ---------- 输入区：白底顶线 ---------- */
.app-shell .app-body .view-chat .input-container {
    background: #fff;
    border-top: 1px solid #eceef1;
    padding: 8px 12px calc(8px + var(--safe-bottom) + var(--input-lift));
}
.app-shell .app-body .view-chat .toolbar { padding-bottom: 7px; }
.app-shell .app-body .view-chat .icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    color: #8a919c;
    font-size: 20px;
    transition: background .12s ease;
}
.app-shell .app-body .view-chat .icon-btn:active { background: #f2f3f5; }

/* 表情面板：白卡细边柔和阴影 */
.app-shell .app-body .view-chat .emoji-panel {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 14px;
    box-shadow: 0 10px 30px -12px rgba(16, 24, 40, .25);
    padding: 10px;
}
.app-shell .app-body .view-chat .emoji-item:active { background: #f2f3f5; }

/* 输入框：浅灰胶囊，聚焦微加深（不加蓝框，保持安静） */
.app-shell .app-body .view-chat .input-box {
    background: #f2f3f5;
    color: #16181c;
    border-radius: 20px;
    padding: 9px 16px;
}
.app-shell .app-body .view-chat .input-box:focus { background: #eceef1; }
.app-shell .app-body .view-chat .input-box::placeholder { color: #aab0ba; }

/* 发送：品牌蓝胶囊；禁用浅灰 */
.app-shell .app-body .view-chat .send-btn {
    height: 40px;
    min-width: 60px;
    padding: 0 18px;
    background: #2f6bff;
    color: #fff;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    transition: background .12s ease, transform .1s ease;
}
.app-shell .app-body .view-chat .send-btn:active:not(:disabled) {
    opacity: 1;
    background: #245df0;
    transform: scale(.96);
}
.app-shell .app-body .view-chat .send-btn:disabled {
    background: #e9edf2;
    color: #aab0ba;
}

/* ---------- 详情页内的自动回复设置：贴边展开的一条（覆盖列表页浮卡规则） ---------- */
.app-shell .app-body .view-chat .chat-shell .settings-panel {
    margin: 0;
    padding: 12px 14px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #eceef1;
    border-radius: 0;
    box-shadow: none;
}
.app-shell .app-body .view-chat .chat-shell .settings-label { color: #4b5563; }
.app-shell .app-body .view-chat .chat-shell .settings-textarea {
    background: #f7f8fa;
    border: 1px solid #eceef1;
    border-radius: 10px;
}
.app-shell .app-body .view-chat .chat-shell .settings-textarea:focus {
    background: #fff;
    border-color: #2f6bff;
}
/* ===================== 对话详情页新样式结束 ===================== */

/* ============================================================
 * ★ 客服页 · 微信白风格（2026-10-15 第三版，覆盖前两版客服区块）
 * 语言：整页纯白、通栏细线（不用浮卡/阴影）；
 *       消息 = 收到浅灰泡靠左 / 发出微信绿泡靠右黑字；
 *       绿色统一用微信绿 #07c160（在线点/已读/发送）。
 * 纯 CSS，不动结构逻辑。想恢复：删掉本区块（到「客服微信白结束」）。
 * ============================================================ */

/* ---------- 整页底色：白（列表与对话统一） ---------- */
.app-shell .app-body .view-chat,
.app-shell .app-body .view-chat .message-pane {
    background: #ffffff !important;
}

/* ================= 会话列表 ================= */

/* 顶部条：通栏白底 + 底部细线（无圆角无外边距） */
.app-shell .app-body .view-chat .chat-head {
    margin: 0;
    padding: 12px 14px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #ededed;
    border-radius: 0;
    box-shadow: none;
}
.app-shell .app-body .view-chat .chat-head-center {
    font-size: 17px;
    font-weight: 600;
    color: #1c1c1e;
}
.app-shell .app-body .view-chat .chat-head-left {
    font-size: 12px;
    color: #9aa0aa;
    gap: 5px;
}
.app-shell .app-body .view-chat .chat-head-dot {
    width: 7px;
    height: 7px;
    background: #07c160;
    box-shadow: none;
}
/* 设置：白底灰边灰字小胶囊 */
.app-shell .app-body .view-chat .chat-head-btn {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #5b6472;
    font-size: 13px;
    font-weight: 400;
    padding: 5px 14px;
}
.app-shell .app-body .view-chat .chat-head-btn:active { background: #f2f3f5; border-color: #d8dbe0; }

/* 列表设置面板：通栏白底细底线 */
.app-shell .app-body .view-chat .settings-panel {
    margin: 0;
    padding: 12px 14px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #ededed;
    border-radius: 0;
    box-shadow: none;
}

/* 会话容器：通栏白，无卡片边框/阴影 */
.app-shell .app-body .view-chat .main-content {
    margin: 0;
    padding: 0;
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.app-shell .app-body .view-chat .session-list {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.app-shell .app-body .view-chat .session-item {
    padding: 13px 14px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #f2f3f5;
    border-radius: 0;
    box-shadow: none;
}
.app-shell .app-body .view-chat .session-item:last-child { border-bottom: none; }
.app-shell .app-body .view-chat .session-item:hover { background: #fff; }
.app-shell .app-body .view-chat .session-item:active { background: #f5f6f7; }

/* 头像：中性浅灰圆 */
.app-shell .app-body .view-chat .session-item .avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #eef0f3;
    border: none;
    color: #5b6472;
    font-size: 17px;
    font-weight: 500;
}
.app-shell .app-body .view-chat .session-item .avatar .goods-thumb-img { border-radius: 50%; }

/* 第一行 */
.app-shell .app-body .view-chat .user-id { font-size: 15px; font-weight: 500; color: #1c1c1e; }
.app-shell .app-body .view-chat .online-dot { background: #c9cdd4; box-shadow: none; }
.app-shell .app-body .view-chat .online-dot.is-online { background: #07c160; box-shadow: none; }
.app-shell .app-body .view-chat .last-time { font-size: 11.5px; color: #b2b6bd; }
.app-shell .app-body .view-chat .goods-line { display: none; }

/* 第二行 */
.app-shell .app-body .view-chat .last-msg { font-size: 13px; color: #8a8f99; }
.app-shell .app-body .view-chat .role-tag {
    font-weight: 400;
    border-radius: 4px;
    padding: 0 5px;
}
.app-shell .app-body .view-chat .role-tag.customer { color: #576b95; background: #f0f4ff; border-color: transparent; }
.app-shell .app-body .view-chat .role-tag.staff { color: #07a350; background: #e8f9f0; border-color: transparent; }
.app-shell .app-body .view-chat .role-tag.bot { color: #b26a00; background: #fff7e8; border-color: transparent; }
.app-shell .app-body .view-chat .read-status.is-read { color: #07c160; }

/* 未读角标：微信小红点胶囊 */
.app-shell .app-body .view-chat .unread-badge {
    background: #fa5151;
    border: none;
    border-radius: 9999px;
    font-weight: 500;
}
.app-shell .app-body .view-chat .empty-state { color: #b2b6bd; }

/* ================= 对话详情 ================= */

/* 顶栏白底细线 */
.app-shell .app-body .view-chat .chat-header {
    background: #fff;
    border-bottom: 1px solid #ededed;
}
.app-shell .app-body .view-chat .back-btn,
.app-shell .app-body .view-chat .refresh-btn { background: #f2f3f5; color: #4b5563; }
.app-shell .app-body .view-chat .back-btn:active,
.app-shell .app-body .view-chat .refresh-btn:active { background: #e6e9ee; }
.app-shell .app-body .view-chat .chat-user-name { color: #1c1c1e; }

/* 商品条白底 */
.app-shell .app-body .view-chat .chat-subheader {
    background: #fff;
    border-bottom: 1px solid #f2f3f5;
}
.app-shell .app-body .view-chat .sub-title { color: #1c1c1e; }
.app-shell .app-body .view-chat .sub-price { color: #fa5151; }
.app-shell .app-body .view-chat .sub-online { color: #b2b6bd; }
/* 模板文字自带 ●/○ 字符，不再用 ::before 补点，避免双点 */
.app-shell .app-body .view-chat .sub-online::before { content: none; }
.app-shell .app-body .view-chat .sub-online.is-online { color: #07a350; }
/* 自动回复：白底绿边绿字 */
.app-shell .app-body .view-chat .sub-settings {
    border: 1px solid #b2eccf;
    background: #fff;
    color: #07a350;
    font-weight: 400;
}
.app-shell .app-body .view-chat .sub-settings:active { background: #e8f9f0; }

/* 消息区留白 */
.app-shell .app-body .view-chat .message-pane { padding: 14px 12px 16px; gap: 13px; }
.app-shell .app-body .view-chat .date-divider span { color: #b2b6bd; font-size: 11.5px; }

/* 气泡：收到浅灰泡 / 发出微信绿泡黑字 */
.app-shell .app-body .view-chat .msg .bubble {
    padding: 9px 12px;
    font-size: 15.5px;
    line-height: 1.5;
    border-radius: 6px;
    box-shadow: none;
    border: 1px solid transparent;
    animation: none;
}
/* 收到(访客)浅灰泡：接口真实类名为 received（customer 为旧名冗余兼容） */
.app-shell .app-body .view-chat .msg.received .bubble,
.app-shell .app-body .view-chat .msg.customer .bubble {
    background: #f2f3f5;
    color: #1c1c1e;
    border-color: transparent;
    border-top-left-radius: 2px;
}
/* 发出(客服/机器人)微信绿泡：真实类名 sent（staff/bot 冗余兼容） */
.app-shell .app-body .view-chat .msg.sent .bubble,
.app-shell .app-body .view-chat .msg.staff .bubble,
.app-shell .app-body .view-chat .msg.bot .bubble {
    background: #95ec69;
    color: #1c1c1e;
    border-color: transparent;
    border-top-right-radius: 2px;
}
.app-shell .app-body .view-chat .msg-time { color: #b2b6bd; }
.app-shell .app-body .view-chat .read-tag.is-read { color: #07c160; }

/* 图片消息（6 类选择器，压过同区块气泡配色；sent 为真实类名） */
.app-shell .app-body .view-chat .msg .bubble.bubble--image {
    padding: 3px;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 8px;
}
.app-shell .app-body .view-chat .msg.sent .bubble.bubble--image,
.app-shell .app-body .view-chat .msg.staff .bubble.bubble--image,
.app-shell .app-body .view-chat .msg.bot .bubble.bubble--image {
    background: #fff;
    border-color: #ededed;
}
.app-shell .app-body .view-chat .bubble img { border-radius: 6px; }

/* 表情消息：透明无框（6 类选择器，压过同区块气泡配色） */
.app-shell .app-body .view-chat .msg .bubble.bubble--emoji {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
.app-shell .app-body .view-chat .msg.sent .bubble.bubble--emoji,
.app-shell .app-body .view-chat .msg.staff .bubble.bubble--emoji,
.app-shell .app-body .view-chat .msg.bot .bubble.bubble--emoji {
    background: transparent;
    border: none;
}

/* 输入区白底 */
.app-shell .app-body .view-chat .input-container {
    background: #f7f7f7;
    border-top: 1px solid #ededed;
}
.app-shell .app-body .view-chat .icon-btn { color: #5b6472; }
.app-shell .app-body .view-chat .icon-btn:active { background: #e6e9ee; }
.app-shell .app-body .view-chat .input-box { background: #fff; color: #1c1c1e; border: 1px solid #e5e7eb; }
.app-shell .app-body .view-chat .input-box:focus { background: #fff; border-color: #07c160; }
.app-shell .app-body .view-chat .input-box::placeholder { color: #b2b6bd; }

/* 发送：微信绿 */
.app-shell .app-body .view-chat .send-btn {
    background: #07c160;
    color: #fff;
    border-radius: 6px;
    font-weight: 500;
}
.app-shell .app-body .view-chat .send-btn:active:not(:disabled) { background: #06ad56; transform: none; }
.app-shell .app-body .view-chat .send-btn:disabled { background: #e4e6e9; color: #a6abb4; }

/* 表情面板 */
.app-shell .app-body .view-chat .emoji-panel {
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 12px;
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .18);
}

/* 详情页设置面板：通栏白 */
.app-shell .app-body .view-chat .chat-shell .settings-panel {
    background: #fff;
    border-bottom: 1px solid #ededed;
    border-radius: 0;
}
.app-shell .app-body .view-chat .chat-shell .settings-textarea {
    background: #f7f7f7;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.app-shell .app-body .view-chat .chat-shell .settings-textarea:focus { background: #fff; border-color: #07c160; }
.app-shell .app-body .view-chat .chat-shell .save-settings-btn {
    background: #07c160;
    border-radius: 6px;
}
.app-shell .app-body .view-chat .chat-shell .save-settings-btn:hover { background: #06ad56; }
.app-shell .app-body .view-chat .chat-shell .switch input:checked + .slider { background: #07c160; }
/* ===================== 客服微信白结束 ===================== */

/* ============================================================
 * ★ 客服会话列表 · 大字 IP 版（按参考图，2026-10-15）
 * 只覆盖列表行：IP 大号黑粗体、消息预览大号灰字、行高宽松、分隔线极淡。
 * 头像尺寸/样式不动。想恢复：删掉本区块（到「大字IP版结束」）。
 * ============================================================ */
.app-shell .app-body .view-chat .session-item {
    padding: 16px 14px;
    gap: 14px;
    border-bottom: 1px solid #f0f0f1;
}
/* 第一行：IP 常规黑字 + 右上角极小淡灰时间 */
.app-shell .app-body .view-chat .session-top { margin-bottom: 4px; gap: 10px; }
.app-shell .app-body .view-chat .user-id {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.1px;
    color: #1c1c1e;
    line-height: 1.3;
}
.app-shell .app-body .view-chat .last-time {
    font-size: 11px;
    font-weight: 400;
    color: #c4c8cf;
    padding-top: 3px;
}
/* 第二行：消息预览灰字 */
.app-shell .app-body .view-chat .last-msg {
    font-size: 13.5px;
    line-height: 1.4;
    color: #9aa0aa;
}
/* 角色小标签在大字版下收敛，不抢视线（仅客服/机器人消息出现） */
.app-shell .app-body .view-chat .last-msg .role-tag {
    font-size: 10px;
    padding: 1px 5px;
    margin-right: 5px;
    vertical-align: 1px;
}
.app-shell .app-body .view-chat .read-status { font-size: 12px; }

/* 未读角标在大行高里仍垂直居中 */
.app-shell .app-body .view-chat .unread-badge { align-self: center; }

/* 窄屏字号微调，避免长 IP 把时间挤掉 */
@media (max-width: 360px) {
    .app-shell .app-body .view-chat .user-id { font-size: 15px; }
    .app-shell .app-body .view-chat .last-msg { font-size: 13px; }
}
/* ===================== 大字IP版结束 ===================== */

/* ============================================================
 * ★ 客服对话页 · 中性极简（2026-10-15 第四版，仅覆盖对话详情页）
 * 三色体系：白 / 浅灰 / 炭黑；无绿色、无渐变、无切角、无动画。
 * 访客 = 白底细边灰泡靠左；客服 = 炭黑泡白字靠右。
 * 只写对话页类（.chat-header/.chat-subheader/.message-pane/.input-container…），
 * 不碰会话列表（.chat-head/.session-* 维持现有样式）。
 * 想恢复：删掉本区块（到「中性极简结束」）。
 * ============================================================ */

/* ---------- 顶栏：白底细线，圆钮浅灰 ---------- */
.app-shell .app-body .view-chat .chat-header {
    background: #fff;
    border-bottom: 1px solid #eceef1;
}
.app-shell .app-body .view-chat .back-btn,
.app-shell .app-body .view-chat .refresh-btn {
    background: #f2f3f5;
    color: #4b5563;
}
.app-shell .app-body .view-chat .back-btn:active,
.app-shell .app-body .view-chat .refresh-btn:active { background: #e6e9ee; }
.app-shell .app-body .view-chat .chat-user-name { color: #16181c; font-weight: 600; }

/* ---------- 商品条：白底，自动回复中性灰描边 ---------- */
.app-shell .app-body .view-chat .chat-subheader {
    background: #fff;
    border-bottom: 1px solid #f2f3f5;
}
.app-shell .app-body .view-chat .sub-title { color: #16181c; }
.app-shell .app-body .view-chat .sub-price { color: #16181c; font-weight: 500; }
.app-shell .app-body .view-chat .sub-online { color: #aab0ba; }
.app-shell .app-body .view-chat .sub-online.is-online { color: #6b7280; }
.app-shell .app-body .view-chat .sub-settings {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-weight: 400;
}
.app-shell .app-body .view-chat .sub-settings:active { background: #f5f6f7; }

/* ---------- 消息区：浅灰底，气泡有层次 ---------- */
.app-shell .app-body .view-chat .message-pane {
    background: #f7f8fa !important;
    padding: 16px 14px 18px;
    gap: 14px;
}
.app-shell .app-body .view-chat .date-divider span {
    color: #aab0ba;
    font-size: 11.5px;
}

/* 气泡：统一 14px 圆角，无切角无阴影无动画 */
.app-shell .app-body .view-chat .msg .bubble {
    padding: 9px 13px;
    font-size: 15.5px;
    line-height: 1.5;
    border-radius: 14px;
    box-shadow: none;
    border: 1px solid transparent;
    animation: none;
}
/* 访客：白泡细边深字靠左（received 为接口真实类名，customer 冗余兼容） */
.app-shell .app-body .view-chat .msg.received .bubble,
.app-shell .app-body .view-chat .msg.customer .bubble {
    background: #fff;
    color: #16181c;
    border-color: #eceef1;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}
/* 客服/机器人：炭黑泡白字靠右（sent 为真实类名，staff/bot 冗余兼容） */
.app-shell .app-body .view-chat .msg.sent .bubble,
.app-shell .app-body .view-chat .msg.staff .bubble,
.app-shell .app-body .view-chat .msg.bot .bubble {
    background: #2b2f36;
    color: #fff;
    border-color: #2b2f36;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}
.app-shell .app-body .view-chat .msg-time { color: #aab0ba; }
.app-shell .app-body .view-chat .read-tag.is-read { color: #8a919c; }

/* 图片消息：白底细边 */
.app-shell .app-body .view-chat .msg .bubble.bubble--image {
    padding: 3px;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 12px;
}
.app-shell .app-body .view-chat .msg.sent .bubble.bubble--image,
.app-shell .app-body .view-chat .msg.staff .bubble.bubble--image,
.app-shell .app-body .view-chat .msg.bot .bubble.bubble--image {
    background: #fff;
    border-color: #eceef1;
}
.app-shell .app-body .view-chat .bubble img { border-radius: 9px; }

/* 表情消息：透明无框 */
.app-shell .app-body .view-chat .msg .bubble.bubble--emoji {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
.app-shell .app-body .view-chat .msg.sent .bubble.bubble--emoji,
.app-shell .app-body .view-chat .msg.staff .bubble.bubble--emoji,
.app-shell .app-body .view-chat .msg.bot .bubble.bubble--emoji {
    background: transparent;
    border: none;
}

/* ---------- 输入区：白底 ---------- */
.app-shell .app-body .view-chat .input-container {
    background: #fff;
    border-top: 1px solid #eceef1;
}
.app-shell .app-body .view-chat .icon-btn { color: #8a919c; }
.app-shell .app-body .view-chat .icon-btn:active { background: #f2f3f5; }
.app-shell .app-body .view-chat .input-box {
    background: #f2f3f5;
    color: #16181c;
    border: 1px solid transparent;
}
.app-shell .app-body .view-chat .input-box:focus { background: #eceef1; border-color: transparent; }
.app-shell .app-body .view-chat .input-box::placeholder { color: #aab0ba; }

/* 发送：炭黑；禁用浅灰 */
.app-shell .app-body .view-chat .send-btn {
    background: #2b2f36;
    color: #fff;
    border-radius: 9999px;
    font-weight: 500;
}
.app-shell .app-body .view-chat .send-btn:active:not(:disabled) { background: #1f2329; transform: none; }
.app-shell .app-body .view-chat .send-btn:disabled { background: #e9edf2; color: #a6abb4; }

/* 表情弹层 */
.app-shell .app-body .view-chat .emoji-panel {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 12px;
    box-shadow: 0 8px 24px -10px rgba(16, 24, 40, .16);
}

/* 详情页设置面板：白底中性 */
.app-shell .app-body .view-chat .chat-shell .settings-panel {
    background: #fff;
    border-bottom: 1px solid #eceef1;
}
.app-shell .app-body .view-chat .chat-shell .settings-textarea {
    background: #f7f8fa;
    border: 1px solid #eceef1;
    border-radius: 10px;
}
.app-shell .app-body .view-chat .chat-shell .settings-textarea:focus { background: #fff; border-color: #c9cdd4; }
.app-shell .app-body .view-chat .chat-shell .save-settings-btn {
    background: #2b2f36;
    border-radius: 9999px;
}
.app-shell .app-body .view-chat .chat-shell .save-settings-btn:hover { background: #1f2329; }
.app-shell .app-body .view-chat .chat-shell .switch input:checked + .slider { background: #2b2f36; }
/* ===================== 中性极简结束 ===================== */