/* ============================================================================
   洛杉矶 · 共享组件层
   ----------------------------------------------------------------------------
   1) 商品卡 / 楼层头 —— 两端共用同一份 DOM（LA.card 渲染），
      结构与视觉主体放这里，端特有的微调各自在 Pc.Page.css / App.Page.css。
   2) 平台组件换肤 —— layer 弹层、layui、toastr、bootstrap-table、select2、
      .mcy-card。这些由共享控制器生成，主题改不了结构，只能改皮。
   ========================================================================= */

/* ================================================================ 商品卡

   拼多多那一路的卡：图占大头、名两行、**价格是整张卡上最大的东西**。
   卡片本身不做描边、不做投影、不做 hover 位移 —— 灰底已经把白卡分出来了，
   再加边框和投影，六列并排就变成一片网格牢笼。hover 只给一点点底色变化。   */

.la-goods {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;              /* 填满网格格子：同一行里的卡永远一样高 */
    border-radius: var(--la-r-md);
    background: var(--la-surface);
    overflow: hidden;
    color: inherit;
    transition: box-shadow var(--la-d2) var(--la-e-smooth);
}

.la-goods:hover { box-shadow: var(--la-sh-3); }
.la-goods:active { opacity: .92; }

.la-goods__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--la-surface-3);
    overflow: hidden;
}

/* 淡入靠"还挂着 data-src 就透明"，加载完 LA.lazy 会把属性摘掉，
   不需要 JS 再补一个类 —— 少一次 DOM 写入，也不会因为类名对不上而全白。 */
.la-goods__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity var(--la-d3) var(--la-e-smooth);
}

.la-goods__img[data-src] { opacity: 0; }

/* 秒杀角标压在图左上角，斜切一刀，是电商里最省地方的"抢"信号 */
.la-goods__flag {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    padding: 3px 9px 3px 7px;
    font-size: var(--la-t-2xs);
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
    background: var(--la-blaze);
    border-end-end-radius: var(--la-r-md);
}

.la-goods__out {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: var(--la-t-md);
    font-weight: 800;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.la-goods.is-out .la-goods__img { filter: grayscale(.8); }

.la-goods__body {
    display: flex;
    flex-direction: column;
    flex: 1;                   /* 卡身吃掉多出来的高度…… */
    gap: 5px;
    padding: var(--la-card-pad);
}

.la-goods__name {
    font-size: var(--la-t-base);
    font-weight: 400;          /* 名字不加粗：加粗了就和价格抢视线 */
    line-height: var(--la-lh-snug);
    color: var(--la-ink);
    /* 两行定高，六列并排时基线才对得齐 */
    min-height: calc(var(--la-t-base) * var(--la-lh-snug) * 2);
}

.la-goods__tags { display: flex; gap: 4px; overflow: hidden; height: 16px; }
.la-goods__tags:empty { display: none; }

/* 价格行：价格 + 会员价 + 已售，一行装完。这三个数放一起才成立 */
/* ……价格行贴底。有标签的卡和没标签的卡在同一行里，价格和已售必须压在同一条线上，
   否则没标签的那张价格会"浮"在半空，下面留一块空白 —— 一眼就看得出参差。 */
.la-goods__buy {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: auto;
    padding-top: 1px;
}

.la-goods__member {
    font-size: var(--la-t-2xs);
    color: var(--la-c1);
    background: var(--la-tint);
    padding: 1px 4px;
    border-radius: var(--la-r-xs);
    white-space: nowrap;
    align-self: center;
}

/* 已售 / 库存靠右，能被压缩 —— 卡片窄的时候先牺牲它们，绝不牺牲价格 */
.la-goods__meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-inline-start: auto;
    min-width: 0;
    font-size: var(--la-t-2xs);
    color: var(--la-ink-3);
    white-space: nowrap;
    overflow: hidden;
}

.la-goods__sold, .la-goods__stock { overflow: hidden; text-overflow: ellipsis; }
/* 库存状态按**语义色**着色，不用品牌色：
   0 售罄=灰  1 所剩无几=红（赶紧下单）  2 数量有限=橙  3/4 现货充足·库存爆棚=绿 */
.la-goods__stock[data-state="0"] { color: var(--la-ink-4); }
.la-goods__stock[data-state="1"] { color: var(--la-bad); font-weight: 600; }
.la-goods__stock[data-state="2"] { color: var(--la-warn); }
.la-goods__stock[data-state="3"], .la-goods__stock[data-state="4"] { color: var(--la-ok); }

.la-goods__shop {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--la-t-2xs);
    color: var(--la-ink-3);
    min-width: 0;
}

.la-goods__shopimg { width: 13px; height: 13px; border-radius: 50%; object-fit: cover; flex: none; }

/* 「立即购买」胶囊：只有横向轨道卡和秒杀位才出，密集栅格里不出 */
.la-goods__go {
    display: block;
    margin-top: 2px;
    padding: 5px 0;
    border-radius: var(--la-r-pill);
    text-align: center;
    font-size: var(--la-t-xs);
    font-weight: 700;
    color: #fff;
    background: var(--la-sunset);
}

.la-goods--ghost { pointer-events: none; }
.la-goods--ghost:hover { box-shadow: none; }

/* ================================================================ 商品栅格

   密度就在这里。1200 版心 / 六列 / 8px 缝，卡片落在 190px 左右 ——
   和拼多多 PC 的卡宽是一个量级。            */

.la-grid {
    display: grid;
    grid-template-columns: repeat(var(--la-grid-cols), minmax(0, 1fr));
    gap: var(--la-card-gap);
}

.la-grid--side { grid-template-columns: repeat(var(--la-grid-cols-2), minmax(0, 1fr)); }
.la-grid__full { grid-column: 1 / -1; }

@media (max-width: 1240px) {
    .la-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .la-grid--side { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .la-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .la-grid--side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 横向轨道（秒杀 / 楼层） */
.la-rail {
    display: flex;
    gap: var(--la-card-gap);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.la-rail::-webkit-scrollbar { display: none; }
.la-rail > .la-goods { flex: none; width: 160px; scroll-snap-align: start; }

/* ================================================================ 楼层

   楼层头压到最小：一行小标题 + 右侧「更多」。
   原来那种大标题+副标题占掉的两行，在货源站上应该拿去放商品。   */

.la-floor { margin-top: var(--la-s5); }

.la-floor__head {
    display: flex;
    align-items: center;
    gap: var(--la-s4);
    padding: var(--la-s4) 0 var(--la-s3);
}

.la-floor__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--la-t-lg);
    font-weight: 800;
}

.la-floor__title .la-i { width: 18px; height: 18px; color: var(--la-c1); }

.la-floor__sub {
    font-size: var(--la-t-xs);
    font-weight: 400;
    color: var(--la-ink-3);
}

.la-floor__more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-inline-start: auto;
    font-size: var(--la-t-xs);
    color: var(--la-ink-3);
    white-space: nowrap;
    transition: color var(--la-d2) var(--la-e-smooth);
}

.la-floor__more:hover { color: var(--la-c1); }
.la-floor__more .la-i { width: 13px; height: 13px; }

/* 秒杀楼层：整条红带，白字，倒计时压在带子里 */
.la-floor--seckill { border-radius: var(--la-r-lg); overflow: hidden; background: var(--la-surface); }

.la-floor--seckill .la-floor__band {
    display: flex;
    align-items: center;
    gap: var(--la-s4);
    padding: 9px var(--la-s5);
    color: #fff;
    background: var(--la-blaze);
}

.la-floor--seckill .la-floor__title { color: #fff; font-size: var(--la-t-md); }
.la-floor--seckill .la-floor__title .la-i { color: #fff; width: 16px; height: 16px; }
.la-floor--seckill .la-floor__sub { color: rgba(255, 255, 255, .85); }
.la-floor--seckill .la-floor__more { color: rgba(255, 255, 255, .9); }
.la-floor--seckill .la-floor__more:hover { color: #fff; }
.la-floor--seckill .la-floor__body { padding: var(--la-s4); }

.la-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--la-r-pill);
    font-size: var(--la-t-2xs);
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .22);
}

.la-live__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: la-pulse 1.4s var(--la-e-in-out) infinite;
}

/* 倒计时（商详用；列表接口不下发结束时间，首页不做假倒计时） */
.la-count { display: inline-flex; align-items: center; gap: 3px; font-family: var(--la-font-num); }

.la-count__cell {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: var(--la-r-xs);
    font-size: var(--la-t-sm);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--la-ink-inv);
    background: var(--la-ink);
}

.la-floor--seckill .la-count__cell { color: var(--la-c1); background: #fff; }
.la-floor--seckill .la-count__sep { color: #fff; }

.la-count__sep { font-weight: 800; opacity: .6; }
.la-count__day { display: inline-flex; align-items: center; gap: 3px; }
.la-count .is-hidden { display: none; }

/* ================================================================ 平台组件换肤 */

.layui-layer {
    border-radius: var(--la-r-xl) !important;
    box-shadow: var(--la-sh-4) !important;
    background: var(--la-surface) !important;
    color: var(--la-ink) !important;
    border: 1px solid var(--la-line) !important;
    overflow: hidden;
}

.layui-layer-title {
    height: 52px !important;
    line-height: 52px !important;
    padding: 0 52px 0 20px !important;
    font-size: var(--la-t-md) !important;
    font-weight: 700 !important;
    color: var(--la-ink) !important;
    background: var(--la-surface) !important;
    border-bottom: 1px solid var(--la-line) !important;
}

.layui-layer-content { color: var(--la-ink); }
.layui-layer-page .layui-layer-content { background: var(--la-surface); }
.layui-layer-setwin { top: 17px !important; right: 16px !important; }
.layui-layer-setwin a { color: var(--la-ink-3) !important; }
.layui-layer-shade { background-color: var(--la-scrim) !important; }

.layui-layer-btn { padding: 0 20px 18px !important; border-top: 0 !important; text-align: right !important; }

.layui-layer-btn a {
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 20px !important;
    margin-left: 8px !important;
    border: 0 !important;
    border-radius: var(--la-r-pill) !important;
    font-weight: 600 !important;
    color: var(--la-ink-2) !important;
    background: var(--la-surface-2) !important;
}

.layui-layer-btn .layui-layer-btn0 {
    color: var(--la-on-brand) !important;
    background: var(--la-sunset) !important;
    box-shadow: var(--la-sh-brand);
}

.layui-layer-dialog .layui-layer-content { padding: 22px 20px !important; font-size: var(--la-t-md) !important; line-height: var(--la-lh); }
.layui-layer-msg { border-radius: var(--la-r-pill) !important; }
.layui-layer-loading { background: transparent !important; border: 0 !important; box-shadow: none !important; }

#toast-container > div {
    border-radius: var(--la-r-md) !important;
    box-shadow: var(--la-sh-3) !important;
    opacity: 1 !important;
    font-family: var(--la-font);
    padding: 14px 16px 14px 48px !important;
}

#toast-container > .toast-success { background-color: var(--la-ok) !important; }
#toast-container > .toast-error { background-color: var(--la-bad) !important; }
#toast-container > .toast-warning { background-color: var(--la-warn) !important; }
#toast-container > .toast-info { background-color: var(--la-sea) !important; }

:root[data-theme] .layui-input, :root[data-theme] .layui-textarea, :root[data-theme] .layui-select {
    height: 40px !important;
    line-height: 38px;
    border-radius: var(--la-r-md) !important;
    border-color: var(--la-line) !important;
    background: var(--la-surface-2) !important;
    color: var(--la-ink) !important;
}

:root[data-theme] .layui-input:focus, :root[data-theme] .layui-textarea:focus {
    border-color: var(--la-c1) !important;
    box-shadow: var(--la-focus) !important;
}

.layui-form-select dl {
    border-radius: var(--la-r-md);
    border-color: var(--la-line);
    background: var(--la-surface);
    box-shadow: var(--la-sh-3);
}

.layui-form-select dl dd.layui-this { color: var(--la-c1); background: var(--la-tint); }
.layui-btn { border-radius: var(--la-r-pill); background: var(--la-c1); }
.layui-btn-primary { border-color: var(--la-line-2); color: var(--la-ink-2); background: transparent; }

/* 平台表格：行高压到 40 上下，字号 13，表头浅灰底。
   会员中心的表格是站长每天看的东西，一屏能多看五行比什么都强。
   平台的 md-components.css 用 :root[data-theme] 前缀写规则，这里必须同样带前缀才压得住。 */
:root[data-theme] .bootstrap-table .fixed-table-container { border-radius: var(--la-r-md); border-color: var(--la-line); }

:root[data-theme] .bootstrap-table .table > thead > tr > th {
    padding: 9px 10px !important;
    border-bottom-color: var(--la-line) !important;
    background: var(--la-surface-2) !important;
    color: var(--la-ink-2) !important;
    font-weight: 600;
    font-size: var(--la-t-sm);
    white-space: nowrap;
}

:root[data-theme] .bootstrap-table .table > tbody > tr > td {
    padding: 8px 10px !important;
    border-color: var(--la-line) !important;
    color: var(--la-ink);
    font-size: var(--la-t-base);
    line-height: 1.45;
    vertical-align: middle;
}

:root[data-theme] .bootstrap-table .table > tbody > tr:hover > td { background: var(--la-hover) !important; }
/* 表头的真实高度来自 bootstrap-table 自己塞的 .th-inner：平台用
   `.fixed-table-container thead th .th-inner { padding: 13px … !important }` 写死了，
   只能用更长的选择器压回去 */
:root[data-theme] .bootstrap-table .fixed-table-container thead th .th-inner { padding: 0 !important; line-height: 1.4 !important; }
:root[data-theme] .bootstrap-table .fixed-table-container thead th .th-inner.sortable { padding-right: 18px !important; }
:root[data-theme] .bootstrap-table .fixed-table-container thead th .fht-cell { display: none; }
/* 单元格横向内边距 8：六七列的表在 984 宽主区里正好放下，不出横向滚动条 */
:root[data-theme] .bootstrap-table .table > tbody > tr > td,
:root[data-theme] .bootstrap-table .table > thead > tr > th { padding-left: 8px !important; padding-right: 8px !important; }
:root[data-theme] .bootstrap-table .fixed-table-body { scrollbar-width: thin; }
:root[data-theme] .fixed-table-toolbar .search input { border-radius: var(--la-r-pill); height: 34px; }
:root[data-theme] .fixed-table-pagination .pagination .page-link { border-radius: var(--la-r-sm) !important; margin: 0 2px; min-width: 30px; height: 30px; line-height: 28px; padding: 0 8px; font-size: var(--la-t-sm); }
:root[data-theme] .fixed-table-pagination .pagination-detail,
:root[data-theme] .fixed-table-pagination .pagination-info { font-size: var(--la-t-xs); color: var(--la-ink-3); }
:root[data-theme] .fixed-table-pagination .page-list .btn { height: 28px; padding: 0 10px; font-size: var(--la-t-xs); border-radius: var(--la-r-sm); }

/* 平台 Table 组件生成的筛选工具栏（form.table-search）
   结构是一排 .layui-input-inline：下拉、文本、起止日期（中间夹一个只装 "~" 的 div）、查询按钮。
   平台给每个格子固定 190px、下拉 44 高、"~" 那格 20 高 —— 一行放不下就散成两行，分隔符还悬在半空。
   这里：统一 40 高、按类型给宽度、分隔符居中、行内间距收紧，六个控件 + 按钮在 984 主区里一行放下。 */
:root[data-theme] .table-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0 0 12px;
}

:root[data-theme] .table-search .layui-input-inline { width: 170px; height: auto; margin: 0; }
:root[data-theme] .table-search .layui-input-inline[class*="e-equal-"] { width: 140px; }        /* 下拉 */
:root[data-theme] .table-search .layui-input-inline[class*="e-between-"] { width: 150px; }      /* 日期 */
:root[data-theme] .table-search .layui-input-inline.text-center { width: auto; height: 40px; line-height: 40px; padding: 0 2px; color: var(--la-ink-4); margin: 0 -4px; }
:root[data-theme] .table-search .mui-sf { min-height: 40px; }
:root[data-theme] .table-search .layui-form-select .layui-input { height: 40px !important; line-height: 38px; }
:root[data-theme] .table-search .layui-btn { height: 40px; line-height: 40px; padding: 0 16px; font-size: var(--la-t-base); }
/* 平台在工具栏后面再吐一排状态胶囊（全部 / 已支付 / 未支付），和工具栏之间留一口气 */
:root[data-theme] .table-search + .layui-btn-group,
:root[data-theme] .table-search + div { margin-bottom: 12px; }

/* 手机端：竖排，但起止日期并排、"~" 夹中间，别让四个输入框叠成一柱 */
body.la--app :root[data-theme] .table-search,
:root[data-theme] body.la--app .table-search { gap: 8px; }
:root[data-theme] body.la--app .table-search .layui-input-inline { width: 100%; }
/* 起止日期各占一半：两个日期 + 12px 的 "~" + 两个 8px 间距必须 ≤ 100%，
   多 1px 就会换行，换行后 flex-grow 又把它们各自撑满一整行 —— 所以每边扣 22px，并禁止伸缩 */
/* 平台在 @media (max-width:767.98px) 里给 .table-search .layui-input-inline 写了 width:100% !important，
   要并排只能同样 !important（同为 important 时按特异性比，这条更长，赢） */
:root[data-theme] body.la--app .table-search .layui-input-inline[class*="e-between-"] { width: calc(50% - 22px) !important; flex: 0 0 auto; }
:root[data-theme] body.la--app .table-search .layui-input-inline.text-center { width: 12px !important; flex: 0 0 auto; height: 40px; line-height: 40px; margin: 0; text-align: center; padding: 0; }
:root[data-theme] body.la--app .table-search .layui-input-inline:last-child { width: 100%; }
:root[data-theme] body.la--app .table-search .layui-btn { width: 100%; }

/* 单元格里的两行组合（编号 / 时间、数量 / 金额）：主行 13、副行 11 灰 */
:root[data-theme] .md-pair { gap: 2px; }
:root[data-theme] .md-pair__row { display: flex; align-items: baseline; gap: 4px; }
:root[data-theme] .md-pair__k { font-size: var(--la-t-2xs); color: var(--la-ink-3); }
:root[data-theme] .md-pair__v { font-size: var(--la-t-base); color: var(--la-ink); font-variant-numeric: tabular-nums; }
:root[data-theme] .md-pair__v--muted { font-size: var(--la-t-2xs) !important; color: var(--la-ink-3); }

/* 徽章：矮、方角、淡底深字，和商品卡上的标签一个口径 */
:root[data-theme] .a-badge,
:root[data-theme] .acg-badge,
:root[data-theme] .table-item,
:root[data-theme] .badge-soft,
:root[data-theme] .shipment-badge {
    height: 22px;
    padding: 0 8px !important;
    gap: 4px;
    border: 0 !important;
    border-radius: var(--la-r-xs) !important;
    font-size: var(--la-t-sm) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--la-ink-2) !important;
    background: var(--la-surface-3) !important;
    white-space: nowrap;
}

:root[data-theme] .a-badge-success, :root[data-theme] .badge-light-success, :root[data-theme] .shipment-paid { color: var(--la-ok) !important; background: var(--la-ok-bg) !important; }
:root[data-theme] .a-badge-warning, :root[data-theme] .badge-light-warning, :root[data-theme] .shipment-waiting { color: var(--la-warn) !important; background: var(--la-warn-bg) !important; }
:root[data-theme] .a-badge-danger, :root[data-theme] .badge-light-danger { color: var(--la-bad) !important; background: var(--la-bad-bg) !important; }
:root[data-theme] .a-badge-primary, :root[data-theme] .badge-light-primary { color: var(--la-c1) !important; background: var(--la-tint) !important; }
:root[data-theme] .a-badge-info, :root[data-theme] .badge-light-info { color: var(--la-sea) !important; background: var(--la-info-bg) !important; }
:root[data-theme] .a-badge-dark, :root[data-theme] .a-badge-secondary { color: var(--la-ink-2) !important; background: var(--la-surface-3) !important; }

/* ================================================================ 表内统一尺度
   平台各个控制器往单元格里吐的是五花八门的组件：.md-pair 两行组合、.table-item 商品胶囊、
   .pay-item 支付方式、.a-badge 状态徽章、.a-badge-glass 操作按钮、内联 color:green 的金额……
   各自带各自的字号和高度（实测 10 / 12 / 13 / 13.5 / 14px，22 / 30 / 36px 高），放在一行里就是一锅粥。
   这里定死一套：正文 13、次要 11；**凡是胶囊一律 24 高、12 号字、6px 圆角**；金额品牌色加粗等宽。 */
:root[data-theme] .bootstrap-table .table > tbody > tr > td { font-size: var(--la-t-base) !important; }
/* 次要文字 11px（--la-t-xs）。--la-t-2xs 是 10px，在表格里贴着 13px 正文看会显得像脚注 */
:root[data-theme] .bootstrap-table .md-pair__k,
:root[data-theme] .bootstrap-table .md-pair__v--muted,
:root[data-theme] .bootstrap-table td small { font-size: var(--la-t-xs) !important; color: var(--la-ink-3); }

/* 推广中心「N 组 ⓘ」这类行内链接：12 号、品牌色、图标同字号 */
:root[data-theme] .bootstrap-table a.sku-detail { display: inline-flex; align-items: center; gap: 4px; font-size: var(--la-t-sm); color: var(--la-c1); font-weight: 600; }
:root[data-theme] .bootstrap-table a.sku-detail i { font-size: 12px; }
:root[data-theme] .bootstrap-table .md-pair__row { min-height: 18px; }

/* 胶囊统一：徽章 / 商品 / 支付方式 / 操作按钮 / 工单状态 / 发货标 */
:root[data-theme] .bootstrap-table .a-badge,
:root[data-theme] .bootstrap-table .acg-badge,
:root[data-theme] .bootstrap-table .table-item,
:root[data-theme] .bootstrap-table .pay-item,
:root[data-theme] .bootstrap-table .a-badge-glass,
:root[data-theme] .bootstrap-table .badge-soft,
:root[data-theme] .bootstrap-table .shipment-badge,
:root[data-theme] .bootstrap-table .uc-ticket-pill,
:root[data-theme] .bootstrap-table .layui-btn-sm,
:root[data-theme] .bootstrap-table .btn-sm {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    height: 24px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border-radius: var(--la-r-sm) !important;
    font-size: var(--la-t-sm) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: none !important;
}

/* 中性胶囊（商品、支付方式）：浅灰底深灰字，18px 圆头像 */
:root[data-theme] .bootstrap-table .table-item,
:root[data-theme] .bootstrap-table .pay-item { color: var(--la-ink-2) !important; background: var(--la-surface-3) !important; border: 0 !important; max-width: 100%; }
:root[data-theme] .bootstrap-table .table-item-icon,
:root[data-theme] .bootstrap-table .pay-item .item-icon { width: 18px !important; height: 18px !important; border-radius: 50%; object-fit: cover; flex: none; margin: 0 !important; }
:root[data-theme] .bootstrap-table .table-item-name,
:root[data-theme] .bootstrap-table .pay-item .item-name { font-size: var(--la-t-sm) !important; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }

/* 操作按钮（查看卡密 / 详情 / 删除…）：品牌色描边，hover 淡底；图标和文字一个字号 */
:root[data-theme] .bootstrap-table .a-badge-glass {
    color: var(--la-c1) !important;
    background: transparent !important;
    border: 1px solid rgba(var(--la-c1-rgb), .55) !important;
    cursor: pointer;
    transition: background-color var(--la-d2) var(--la-e-smooth), border-color var(--la-d2) var(--la-e-smooth);
}

:root[data-theme] .bootstrap-table .a-badge-glass:hover { background: var(--la-tint) !important; border-color: var(--la-c1) !important; }
:root[data-theme] .bootstrap-table .a-badge-glass .btn-title { font-size: var(--la-t-sm) !important; }
:root[data-theme] .bootstrap-table .a-badge-glass i,
:root[data-theme] .bootstrap-table .a-badge-glass .material-icons-outlined { font-size: 13px !important; width: auto; height: auto; line-height: 1; }
/* 危险类操作（删除 / 取消）保持语义红 */
:root[data-theme] .bootstrap-table .a-badge-glass.text-danger { color: var(--la-bad) !important; border-color: rgba(var(--la-bad-rgb), .55) !important; }
:root[data-theme] .bootstrap-table .a-badge-glass.text-danger:hover { background: var(--la-bad-bg) !important; }

/* 金额：控制器内联的 color:green 统一成品牌色、加粗、等宽数字 */
:root[data-theme] .bootstrap-table .md-pair__v > span[style*="color"],
:root[data-theme] .bootstrap-table td > span[style*="color: green"],
:root[data-theme] .bootstrap-table td > span[style*="color:green"] {
    color: var(--la-c1) !important;
    font-weight: 600;
    font-family: var(--la-font-num);
    font-variant-numeric: tabular-nums;
}

/* 商品 / 用户胶囊（带头像的 .table-item、.md-user-cell）：头像 22，名字 13，去掉阴影和边框 */
:root[data-theme] .table-item { max-width: 100%; }
:root[data-theme] .table-item-icon, :root[data-theme] .md-user-cell__avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
:root[data-theme] .table-item-name { font-size: var(--la-t-base); color: var(--la-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
:root[data-theme] .md-user-cell { gap: 8px; }
:root[data-theme] .md-user-cell__name { font-size: var(--la-t-base); }
:root[data-theme] .md-user-cell__id { font-size: var(--la-t-2xs); color: var(--la-ink-3); }

/* 表格里的小按钮 */
:root[data-theme] .bootstrap-table .layui-btn,
:root[data-theme] .bootstrap-table .btn { height: 28px; line-height: 28px; padding: 0 12px; font-size: var(--la-t-sm); border-radius: var(--la-r-pill); }

.mcy-card {
    border-radius: var(--la-r-lg);
    background: var(--la-surface);
}

.select2-container--default .select2-selection--single {
    height: 40px;
    border-radius: var(--la-r-md);
    border-color: var(--la-line);
    background: var(--la-surface-2);
}

.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; color: var(--la-ink); }
.select2-dropdown { border-radius: var(--la-r-md); border-color: var(--la-line); background: var(--la-surface); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--la-c1); }

/* 弹窗内容区：统一 20px 内边距。平台控制器往 layer 里塞的是裸 HTML，不带任何留白 */
:root[data-theme] .layui-layer-page .layui-layer-content { padding: 16px 20px 20px; max-height: 72vh; overflow: auto; }
:root[data-theme] .layui-layer-page .layui-layer-content > .md-secret,
:root[data-theme] .layui-layer-page .layui-layer-content > .uc-cardtip { margin: 0; }

/* 弹窗里的裸表格（SKU 收益明细、批发阶梯之类）：细线、浅灰表头、等宽数字、可横向滚动 */
:root[data-theme] .layui-layer-content table:not(.table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 10px;
    font-size: var(--la-t-sm);
    border: 1px solid var(--la-line);
    border-radius: var(--la-r-md);
    overflow: hidden;
}

:root[data-theme] .layui-layer-content table:not(.table) th,
:root[data-theme] .layui-layer-content table:not(.table) td { padding: 7px 10px; text-align: start; white-space: nowrap; border-bottom: 1px solid var(--la-line); }
:root[data-theme] .layui-layer-content table:not(.table) th { background: var(--la-surface-2); color: var(--la-ink-2); font-weight: 600; font-size: var(--la-t-xs); }
:root[data-theme] .layui-layer-content table:not(.table) td { font-variant-numeric: tabular-nums; }
:root[data-theme] .layui-layer-content table:not(.table) tr:last-child td { border-bottom: 0; }
:root[data-theme] .layui-layer-content table:not(.table) tbody tr:hover td { background: var(--la-hover); }
:root[data-theme] .layui-layer-content .goods-sku { display: block; overflow-x: auto; }

/* ================================================================ 平台弹窗表单（component.popup）
   结构：.layui-layer.component-popup > .layui-layer-content > .layui-card-body > form.layui-form.layui-form-pane
         > .layui-form-item.block-xxx > label.layui-form-label + .layui-input-block > 控件
   平台自己那套皮（md-components 的 mui-float 浮动标签）在级联层里输给了 layui.css，
   露出的是 layui 原生：标签左浮 140px、大 textarea 带拉伸角、粉色开关、最小化/最大化钮。
   这里按主题口径重做：标签在上、控件通栏、开关做成 40×22 胶囊、去掉窗口钮、收紧留白。 */
:root[data-theme] .component-popup .layui-layer-min,
:root[data-theme] .component-popup .layui-layer-max { display: none !important; }
/* layui 打开弹窗的瞬间按当时的内容高度给 .layui-layer-content 写死一个内联 height；
   我的 textarea min-height 随后把内容撑高 36px，内容区就溢出、出滚动条、把开关行顶没了。
   让内容区高度跟着内容走（上限 72vh 内滚动），弹窗自然长高。 */
:root[data-theme] .component-popup .layui-layer-content { padding: 14px 20px 4px !important; height: auto !important; max-height: 72vh; overflow: auto; }
:root[data-theme] .component-popup .layui-card-body { padding: 0; }

:root[data-theme] .component-popup .layui-form-item { margin: 0 0 14px; display: block; }
:root[data-theme] .component-popup .layui-form-item.hide { display: none; }
:root[data-theme] .component-popup .layui-form-item::after { content: none; }

/* 标签在上 */
:root[data-theme] .component-popup .layui-form-pane .layui-form-label,
:root[data-theme] .component-popup .layui-form-label {
    position: static;
    float: none;
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    background: none;
    line-height: 1.4;
    text-align: start;
    font-size: var(--la-t-sm);
    font-weight: 600;
    color: var(--la-ink-2);
    transform: none;
}

:root[data-theme] .component-popup .layui-input-block,
:root[data-theme] .component-popup .layui-input-inline { margin: 0; min-height: 0; width: 100%; display: block; }

/* 控件通栏，和页面上的 .la-input 一个口径 */
:root[data-theme] .component-popup .layui-input,
:root[data-theme] .component-popup .layui-textarea,
:root[data-theme] .component-popup .layui-select {
    width: 100%;
    padding: 0 12px;
    font-size: var(--la-t-base);
}

:root[data-theme] .component-popup .layui-textarea {
    min-height: 84px !important;      /* component.css 写了 min-height:auto !important，必须同样 important */
    height: auto !important;          /* 控制器给的 style="height:48px" 太矮 */
    padding: 10px 12px;
    line-height: 1.6;
    resize: vertical;
}

:root[data-theme] .component-popup .layui-textarea::-webkit-resizer { display: none; }

/* 开关：40×22 胶囊，开=品牌色。隐藏 layui 塞在里面的 ON/OFF 文字 */
:root[data-theme] .component-popup .layui-form-switch {
    position: relative;
    display: inline-block;
    width: 40px !important;
    min-width: 0 !important;          /* layui 给开关的 min-width 会把 40 顶成 44，滑块就到不了右边 */
    height: 22px !important;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: var(--la-surface-3);
    transition: background-color var(--la-d2) var(--la-e-smooth);
    vertical-align: middle;
}

:root[data-theme] .component-popup .layui-form-switch > div { display: none; }
:root[data-theme] .component-popup .layui-form-switch > i {
    position: absolute;
    margin: 0;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    transition: left var(--la-d2) var(--la-e-spring);
}

/* 尺寸、位置、底色写在 @layer la-first 里（文件末尾）：
   md-components 给开关的是一整套带 !important 的 MD2 皮（滑块 left / transform / 开态半透明底），
   它在 la-platform 层里，层内 important 压层外 important，只有更早的层能赢。 */

/* 复选 / 单选：方角圆角化、选中品牌色 */
:root[data-theme] .component-popup .layui-form-checkbox { margin: 0 12px 0 0; padding-right: 10px; height: 30px; line-height: 28px; border-radius: var(--la-r-sm); border-color: var(--la-line-2); }
:root[data-theme] .component-popup .layui-form-checkbox span { height: 28px; line-height: 28px; background: var(--la-surface-2); color: var(--la-ink-2); font-size: var(--la-t-sm); border-radius: var(--la-r-sm) 0 0 var(--la-r-sm); }
:root[data-theme] .component-popup .layui-form-checkbox i { height: 28px; line-height: 28px; border-color: var(--la-line-2); }
:root[data-theme] .component-popup .layui-form-checked span { background: var(--la-c1); color: #fff; }
:root[data-theme] .component-popup .layui-form-checked i { color: var(--la-c1); border-color: var(--la-c1); }
:root[data-theme] .component-popup .layui-form-radio > i { color: var(--la-ink-4); }
:root[data-theme] .component-popup .layui-form-radioed > i { color: var(--la-c1); }

/* 弹窗里的说明文字 */
:root[data-theme] .component-popup .layui-form-mid,
:root[data-theme] .component-popup .layui-word-aux { padding: 4px 0 0; font-size: var(--la-t-xs); color: var(--la-ink-3); }

/* 平台弹层里的卡密结构（dashboard / purchase.record 控制器生成的 .md-secret） */
.md-secret__code {
    padding: 16px;
    border-radius: var(--la-r-md);
    background: var(--la-surface-2);
    border: 1px dashed var(--la-line-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--la-t-base);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 46vh;
    overflow: auto;
}

.md-secret__bar { display: flex; gap: 8px; margin-top: 14px; }

.md-secret__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--la-r-pill);
    font-weight: 600;
    color: var(--la-ink-2);
    background: var(--la-surface-2);
    cursor: pointer;
}

.md-secret__btn--primary { color: var(--la-on-brand); background: var(--la-sunset); box-shadow: var(--la-sh-brand); }

/* 卡密弹窗里的备注 / 使用说明：控制器吐的是一个没有类名、只带 style="margin-top:12px" 的裸 div，
   贴在弹窗左下角像漏出来的文字。做成一条浅底提示行（.md-secret 下不带类名的 div 就是它） */
.md-secret > div:not([class]),
.md-secret__meta,
.uc-cardtip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--la-r-md);
    background: var(--la-surface-2);
    font-size: var(--la-t-sm);
    line-height: 1.6;
    color: var(--la-ink-2);
    white-space: pre-wrap;
    word-break: break-word;
}

.uc-cardtip__warn { color: var(--la-warn); }

/* SKU 收益明细弹窗（推广中心）：基准行 + 表格 */
.uc-skupop__meta { font-size: var(--la-t-base); color: var(--la-ink-2); }
.uc-skupop__meta b { color: var(--la-c1); font-family: var(--la-font-num); font-variant-numeric: tabular-nums; }
.uc-skupop__delta { color: var(--la-ink-3); }
.uc-skupop__delta--up, .uc-skupop__delta.is-up { color: var(--la-ok); }
.uc-skupop__delta--down, .uc-skupop__delta.is-down { color: var(--la-bad); }
.uc-cardtip__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--la-surface-3); padding: 1px 6px; border-radius: var(--la-r-xs); }
.uc-cardtip__legend { font-size: var(--la-t-2xs); color: var(--la-ink-3); }

/* ================================================================ 下单表单（两端共用） */

.la-buy { display: flex; flex-direction: column; gap: var(--la-s4); }

.la-buy__row { display: flex; flex-direction: column; gap: 8px; }
.la-buy__row--inline { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
.la-buy__label { font-size: var(--la-t-sm); font-weight: 700; color: var(--la-ink-2); }
.la-buy__row--inline .la-buy__label { margin: 0; }
.la-buy__hint { display: flex; gap: 10px; font-size: var(--la-t-xs); color: var(--la-ink-3); }
.la-buy__widgets { gap: 12px; }
.la-buy__widgets > div { display: flex; flex-direction: column; gap: 6px; }

/* 规格 / 种类按钮 */

.la-optgrid { display: flex; flex-wrap: wrap; gap: 8px; }

.la-opt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 6px 14px;
    border-radius: var(--la-r-md);
    border: 1.5px solid var(--la-line);
    background: var(--la-surface-2);
    font-size: var(--la-t-base);
    color: var(--la-ink-2);
    cursor: pointer;
    transition: color var(--la-d2) var(--la-e-smooth),
    border-color var(--la-d2) var(--la-e-smooth),
    background-color var(--la-d2) var(--la-e-smooth),
    transform var(--la-d1) var(--la-e-out);
}

.la-opt:hover { color: var(--la-ink); border-color: var(--la-line-2); }
.la-opt:active { transform: scale(.97); }
.la-opt__name { font-weight: 600; }
.la-opt__price { font-family: var(--la-font-num); font-size: var(--la-t-sm); font-weight: 700; color: var(--la-c1); }

.la-opt.is-primary {
    color: var(--la-c1);
    border-color: var(--la-c1);
    background: rgba(var(--la-c1-rgb), .08);
    box-shadow: 0 0 0 3px rgba(var(--la-c1-rgb), .10);
}

.la-opt.is-primary .la-opt__price { color: var(--la-c1); }

/* 数量步进器 */

.la-stepper {
    display: inline-flex;
    align-items: center;
    height: 40px;
    border-radius: var(--la-r-md);
    border: 1px solid var(--la-line);
    background: var(--la-surface-2);
    overflow: hidden;
}

.la-stepper__btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 100%;
    color: var(--la-ink-2);
    transition: color var(--la-d1) var(--la-e-smooth), background-color var(--la-d1) var(--la-e-smooth);
}

.la-stepper__btn:hover { color: var(--la-c1); background: var(--la-tint); }
.la-stepper__btn .la-i { width: 15px; height: 15px; }

.la-stepper__input {
    width: 62px;
    height: 100%;
    border: 0;
    border-inline: 1px solid var(--la-line);
    background: transparent;
    text-align: center;
    font-family: var(--la-font-num);
    font-size: var(--la-t-md);
    font-weight: 700;
    color: var(--la-ink);
    -moz-appearance: textfield;
}

.la-stepper__input::-webkit-outer-spin-button,
.la-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 验证码 / 指定卡密 */

.la-captcha { display: flex; align-items: center; gap: 10px; }
.la-captcha .la-input { flex: 1; min-width: 0; }
.la-captcha__img { width: 116px; height: 44px; border-radius: var(--la-r-md); cursor: pointer; object-fit: cover; background: var(--la-surface-2); flex: none; }

.la-draft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.la-draft__picked { font-size: var(--la-t-sm); color: var(--la-c1); font-weight: 600; }
.la-draft__fee { font-size: var(--la-t-xs); color: var(--la-ink-3); }

/* 批发阶梯 */

.la-ladder {
    padding: 12px 14px;
    border-radius: var(--la-r-md);
    background: linear-gradient(120deg, rgba(var(--la-sea-rgb), .07), rgba(var(--la-c1-rgb), .06));
    border: 1px dashed rgba(var(--la-sea-rgb), .28);
}

.la-ladder__head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: var(--la-t-sm); font-weight: 700; color: var(--la-sea); }
.la-ladder__head .la-i { width: 16px; height: 16px; }
.la-ladder__table { display: flex; flex-wrap: wrap; gap: 8px; }

.la-ladder__cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 82px;
    padding: 7px 12px;
    border-radius: var(--la-r-sm);
    background: var(--la-surface);
    border: 1px solid var(--la-line);
}

.la-ladder__cell b { font-size: var(--la-t-md); font-weight: 800; color: var(--la-c1); }
.la-ladder__cell span { font-size: var(--la-t-xs); color: var(--la-ink-3); }

/* 支付方式 / 卡密挑选（弹层与 Sheet 共用） */

.la-panel { padding: 14px 18px 18px; }
.la-pays, .la-cards { display: flex; flex-direction: column; gap: 8px; }

.la-pays__row, .la-cards__row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    border-radius: var(--la-r-md);
    border: 1.5px solid var(--la-line);
    background: var(--la-surface-2);
    text-align: start;
    cursor: pointer;
    transition: border-color var(--la-d2) var(--la-e-smooth), background-color var(--la-d2) var(--la-e-smooth), transform var(--la-d1) var(--la-e-out);
}

.la-pays__row:hover, .la-cards__row:hover { border-color: var(--la-c1); background: rgba(var(--la-c1-rgb), .07); }
.la-pays__row:active, .la-cards__row:active { transform: scale(.99); }
.la-pays__ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; color: var(--la-c1); font-size: 20px; }
.la-pays__ico img, .la-pays__ico .image-icon { width: 26px; height: 26px; object-fit: contain; }
.la-pays__name { flex: 1; min-width: 0; font-size: var(--la-t-md); font-weight: 600; }
.la-pays__row .la-i { width: 16px; height: 16px; color: var(--la-ink-4); }
.la-cards { max-height: 52vh; overflow-y: auto; }
.la-cards__txt { flex: 1; min-width: 0; font-size: var(--la-t-base); word-break: break-all; }
.la-cards__fee { font-family: var(--la-font-num); font-size: var(--la-t-sm); font-weight: 700; color: var(--la-c1); flex: none; }

/* 详情 Tab */

.la-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--la-line); }

.la-tabs__btn {
    position: relative;
    padding: 13px 20px;
    font-size: var(--la-t-md);
    font-weight: 700;
    color: var(--la-ink-3);
    transition: color var(--la-d2) var(--la-e-smooth);
}

.la-tabs__btn::after {
    content: "";
    position: absolute;
    inset-inline: 20px;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--la-sunset);
    transform: scaleX(0);
    transition: transform var(--la-d3) var(--la-e-out);
}

.la-tabs__btn:hover { color: var(--la-ink); }
.la-tabs__btn.is-on { color: var(--la-c1); }
.la-tabs__btn.is-on::after { transform: scaleX(1); }
.la-tabs__pane { padding: var(--la-s6) 0; }

/* 分段胶囊变体：会员中心卡片里用。一条浅灰槽，选中项白底浮起 */
.la-tabs--pill {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 0;
    border-radius: var(--la-r-pill);
    background: var(--la-surface-3);
}

.la-tabs--pill .la-tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    border-radius: var(--la-r-pill);
    font-size: var(--la-t-base);
    font-weight: 600;
    color: var(--la-ink-2);
    transition: color var(--la-d2) var(--la-e-smooth), background-color var(--la-d2) var(--la-e-smooth), box-shadow var(--la-d2) var(--la-e-smooth);
}

.la-tabs--pill .la-tabs__btn::after { display: none; }
.la-tabs--pill .la-tabs__btn .la-i { width: 15px; height: 15px; }
.la-tabs--pill .la-tabs__btn:hover { color: var(--la-ink); }
.la-tabs--pill .la-tabs__btn.is-on { color: var(--la-c1); background: var(--la-surface); box-shadow: var(--la-sh-1); }
.la-tabs--pill + .la-tabs__pane { padding-top: var(--la-s5); }

/* 我的店铺：Tab 条与面板 */
.la-shop__tabs { margin-top: var(--la-s5); }
.la-shop__pane { padding: var(--la-s5) 0 0; }
.la-shop__pane > .la-card { margin-top: 0; }

.la-shop__filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: var(--la-r-md);
    background: var(--la-tint);
    font-size: var(--la-t-sm);
    color: var(--la-ink-2);
}

.la-shop__filter .la-i { width: 14px; height: 14px; color: var(--la-c1); }
.la-shop__filter b { color: var(--la-c1); font-weight: 700; }
.la-shop__filter a { margin-inline-start: auto; color: var(--la-c1); font-weight: 600; }

/* ================================================================ 订单卡片（查询 / 记录共用） */

.la-ocard {
    border-radius: var(--la-r-lg);
    border: 1px solid var(--la-line);
    background: var(--la-surface);
    box-shadow: var(--la-sh-1);
    overflow: hidden;
}

.la-ocard + .la-ocard { margin-top: 12px; }

.la-ocard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    background: var(--la-surface-2);
    border-bottom: 1px solid var(--la-line);
}

.la-ocard__no { font-size: var(--la-t-sm); font-weight: 700; color: var(--la-ink-2); letter-spacing: .02em; }

.la-ostat {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--la-r-pill);
    font-size: var(--la-t-xs);
    font-weight: 700;
}

.la-ostat--wait { color: var(--la-warn); background: var(--la-warn-bg); }
.la-ostat--ship { color: var(--la-sea); background: var(--la-info-bg); }
.la-ostat--done { color: var(--la-ok); background: var(--la-ok-bg); }

.la-ocard__body { display: flex; gap: 12px; padding: 14px 16px; }
.la-ocard__img { width: 62px; height: 62px; border-radius: var(--la-r-sm); object-fit: cover; background: var(--la-surface-2); flex: none; }
.la-ocard__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.la-ocard__name { font-size: var(--la-t-base); font-weight: 600; }
.la-ocard__spec { font-size: var(--la-t-xs); color: var(--la-ink-3); }
.la-ocard__meta { display: flex; gap: 12px; font-size: var(--la-t-xs); color: var(--la-ink-3); flex-wrap: wrap; }
.la-ocard__meta b { color: var(--la-ink-2); font-weight: 700; }
.la-ocard__right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.la-ocard__pay { font-size: var(--la-t-xs); color: var(--la-ink-3); }

.la-ocard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    border-top: 1px dashed var(--la-line);
    flex-wrap: wrap;
}

.la-ocard__contact { font-size: var(--la-t-xs); color: var(--la-ink-3); word-break: break-all; }
.la-ocard__tip { font-size: var(--la-t-xs); color: var(--la-ink-3); }

.la-queryload { display: grid; place-items: center; padding: var(--la-s9) 0; }

/* ================================================================ 输入弹窗 */

.la-prompt { display: flex; flex-direction: column; gap: 12px; }
.la-prompt__desc { font-size: var(--la-t-sm); color: var(--la-ink-2); line-height: var(--la-lh); }
.la-prompt__acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.la--app .la-prompt { padding-bottom: 8px; }
.la--app .la-prompt__acts .la-btn { flex: 1; }

/* ================================================================ 表单原语（会员中心共用） */

.la-form { display: flex; flex-direction: column; gap: var(--la-s5); }
.la-form--card { padding: var(--la-s6); border-radius: var(--la-r-lg); border: 1px solid var(--la-line); background: var(--la-surface); box-shadow: var(--la-sh-1); }
.la-field { display: flex; flex-direction: column; gap: 7px; }
.la-field b { color: var(--la-bad); }
.la-field em { font-style: normal; font-weight: 400; }
.la-sendrow { display: flex; gap: 8px; }
.la-sendrow .la-input { flex: 1; min-width: 0; }
.la-sendrow .la-btn { flex: none; height: 44px; }
.la-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: var(--la-t-base); color: var(--la-ink-2); }
.la-link { color: var(--la-c1); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.la-editor { min-height: 180px; border-radius: var(--la-r-md); border: 1px solid var(--la-line); overflow: hidden; background: var(--la-surface-2); }
.la-domainrow { display: flex; gap: 8px; }
.la-domainrow .la-input:first-child { flex: 1; }
.la-domainrow select { flex: none; width: 40%; max-width: 190px; }

.la-cname {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--la-r-xs);
    background: var(--la-surface-2);
    border: 1px dashed var(--la-line-2);
    cursor: pointer;
    font-size: var(--la-t-xs);
}

.la-cname .la-i { width: 13px; height: 13px; color: var(--la-ink-3); }
.la-cname:hover { border-color: var(--la-c1); }

.la-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.la-upload__preview { width: 64px; height: 64px; border-radius: var(--la-r-md); object-fit: cover; background: var(--la-surface-2); }
.la-upload__qr { width: 108px; height: 108px; display: grid; place-items: center; border-radius: var(--la-r-md); background: var(--la-surface-2); overflow: hidden; }
.la-upload__qr canvas, .la-upload__qr img { max-width: 100%; height: auto; }

.la-amountbox {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 16px;
    border-radius: var(--la-r-md);
    background: var(--la-surface-2);
    border: 1.5px solid transparent;
    transition: border-color var(--la-d2) var(--la-e-smooth), background-color var(--la-d2) var(--la-e-smooth);
}

.la-amountbox:focus-within { border-color: var(--la-c1); background: var(--la-surface); }
.la-amountbox__unit { font-size: var(--la-t-xl); font-weight: 800; color: var(--la-c1); }

.la-amountbox__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font-family: var(--la-font-num);
    font-size: var(--la-t-2xl);
    font-weight: 800;
    color: var(--la-ink);
    -moz-appearance: textfield;
}

.la-amountbox__input::-webkit-outer-spin-button,
.la-amountbox__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.la-amountbox__all { flex: none; padding: 6px 12px; border-radius: var(--la-r-pill); font-size: var(--la-t-sm); font-weight: 700; color: var(--la-c1); background: var(--la-tint); }

/* ================================================================ 统计卡 */

.la-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--la-s3); }
.la-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.la-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 统计卡：扁平白卡，不悬浮。数字才是主角 —— 卡片自己别动 */
.la-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--la-s4) var(--la-s5);
    border-radius: var(--la-r-lg);
    background: var(--la-surface);
    overflow: hidden;
}

.la-stat__ico {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 6px;
    border-radius: var(--la-r-md);
    color: var(--la-c1);
    background: rgba(var(--la-c1-rgb), .10);
}

.la-stat__ico .la-i { width: 18px; height: 18px; }
.la-stat__label { font-size: var(--la-t-sm); color: var(--la-ink-3); }
.la-stat__value { font-family: var(--la-font-num); font-size: var(--la-t-2xl); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.la-stat__value em { font-style: normal; font-size: var(--la-t-sm); font-weight: 600; color: var(--la-ink-3); margin-inline-start: 3px; }
.la-stat__foot { font-size: var(--la-t-xs); color: var(--la-ink-4); }
.la-stat--brand { color: #fff; background: var(--la-sunset); border-color: transparent; box-shadow: var(--la-sh-brand); }
.la-stat--brand .la-stat__ico { color: #fff; background: rgba(255, 255, 255, .22); }
.la-stat--brand .la-stat__label, .la-stat--brand .la-stat__foot { color: rgba(255, 255, 255, .84); }
.la-stat--brand .la-stat__value em { color: rgba(255, 255, 255, .8); }

/* ================================================================ 汇总 / 状态 / 提示 */

.la-sumlist { display: flex; flex-direction: column; gap: 10px; }
.la-sumlist > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.la-sumlist dt { font-size: var(--la-t-sm); color: var(--la-ink-3); }
.la-sumlist dd { font-size: var(--la-t-base); font-weight: 700; text-align: end; }
.la-sumlist__gift { color: var(--la-ok); }
.la-sumlist__fee { color: var(--la-bad); }
.la-sumlist__total { padding-top: 10px; border-top: 1px dashed var(--la-line); }
.la-sumlist__total dt { font-size: var(--la-t-base); color: var(--la-ink); font-weight: 700; }

.la-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: var(--la-s4) 0;
    padding: 10px 14px;
    border-radius: var(--la-r-md);
    font-size: var(--la-t-sm);
}

.la-status .la-i { width: 16px; height: 16px; flex: none; }
.la-status__ok, .la-status__wait { display: none; }
.la-status.is-ready, .la-status.is-ok { color: var(--la-ok); background: var(--la-ok-bg); }
.la-status.is-ready .la-status__ok, .la-status.is-ok .la-status__ok { display: inline-flex; }
.la-status.is-waiting, .la-status.is-error { color: var(--la-warn); background: var(--la-warn-bg); }
.la-status.is-waiting .la-status__wait, .la-status.is-error .la-status__wait { display: inline-flex; }
.la-status.is-error { color: var(--la-bad); background: var(--la-bad-bg); }

.la-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: var(--la-r-md);
    font-size: var(--la-t-sm);
    color: var(--la-ink-2);
    background: var(--la-surface-2);
}

.la-note .la-i { width: 16px; height: 16px; flex: none; color: var(--la-ink-3); }
.la-note--warn { color: var(--la-warn); background: var(--la-warn-bg); }
.la-note--warn .la-i { color: var(--la-warn); }

.la-progress { height: 6px; border-radius: var(--la-r-pill); background: var(--la-surface-3); overflow: hidden; }
.la-progress__bar { display: block; height: 100%; border-radius: var(--la-r-pill); background: var(--la-sunset); transition: width var(--la-d5) var(--la-e-out); }

.la-tag--green { color: var(--la-ok); background: var(--la-ok-bg); }

/* ================================================================ 表格卡 / 子导航 */

.la-tablecard { padding: 0; overflow: hidden; }
.la-tablecard + .la-tablecard { margin-top: var(--la-s4); }

.la-tablecard__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: var(--la-s4) var(--la-s5) var(--la-s3);
    flex-wrap: wrap;
}

.la-tablecard__head > .la-i { width: 17px; height: 17px; color: var(--la-c1); flex: none; }
.la-tablecard__head > div { flex: 1; min-width: 0; }
.la-tablecard__head strong { display: block; font-size: var(--la-t-base); font-weight: 800; }
.la-tablecard__head small { font-size: var(--la-t-xs); color: var(--la-ink-3); }
.la-tablecard__acts { display: flex; gap: 6px; flex-wrap: wrap; }

.la-subnav { display: flex; gap: 3px; margin-bottom: var(--la-s4); overflow-x: auto; scrollbar-width: none; }
.la-subnav::-webkit-scrollbar { display: none; }

.la-subnav__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--la-r-pill);
    font-size: var(--la-t-sm);
    font-weight: 600;
    color: var(--la-ink-2);
    background: var(--la-surface-2);
    white-space: nowrap;
    flex: none;
    transition: color var(--la-d2) var(--la-e-smooth), background-color var(--la-d2) var(--la-e-smooth);
}

.la-subnav__item .la-i { width: 15px; height: 15px; }
.la-subnav__item:hover { color: var(--la-ink); background: var(--la-surface-3); }
.la-subnav__item.is-on, .la-subnav__item.active { color: var(--la-on-brand); background: var(--la-sunset); box-shadow: var(--la-sh-brand); }
.la-panelbox { display: none; }
.la-panelbox.active { display: block; animation: la-fade var(--la-d3) var(--la-e-smooth) both; }

/* 账户信息表 */
.la-infocard { padding: var(--la-s6); }
.la-infocard__head { display: flex; align-items: center; gap: 14px; padding-bottom: var(--la-s5); border-bottom: 1px solid var(--la-line); }
.la-infocard__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--la-surface-2); }
.la-infocard__id strong { display: block; font-size: var(--la-t-xl); font-weight: 800; }
.la-info { display: flex; flex-direction: column; }
.la-info__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px dashed var(--la-line); }
.la-info__row:last-child { border-bottom: 0; }
.la-info dt { font-size: var(--la-t-sm); color: var(--la-ink-3); flex: none; }
.la-info dd { font-size: var(--la-t-base); text-align: end; word-break: break-all; }
.la-info__key { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.la-info__key code { padding: 4px 10px; border-radius: var(--la-r-xs); background: var(--la-surface-2); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--la-t-sm); }
.la-info__warn { display: flex; align-items: center; gap: 7px; margin-top: var(--la-s4); font-size: var(--la-t-xs); color: var(--la-warn); }
.la-info__warn .la-i { width: 14px; height: 14px; }

/* ================================================================ 充值 / 兑现 / 推广 / 店铺 */

.la-topup, .la-cash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--la-s5); align-items: start; }
.la-topup__box, .la-cash__box { display: flex; flex-direction: column; gap: var(--la-s5); padding: var(--la-s6); }

.la-topup__balance {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--la-s4) var(--la-s5);
    border-radius: var(--la-r-md);
    background: linear-gradient(120deg, rgba(var(--la-c1-rgb), .10), rgba(var(--la-c2-rgb), .07));
}

.la-topup__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--la-r-md); color: #fff; background: var(--la-sunset); box-shadow: var(--la-sh-brand); flex: none; }
.la-topup__balance > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.la-topup__balance > div span { font-size: var(--la-t-xs); }
.la-topup__balance > div b { font-size: var(--la-t-xl); font-weight: 800; color: var(--la-c1); }
.la-topup__presets { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.la-topup__presets .la-chip.active { color: var(--la-on-brand); background: var(--la-sunset); box-shadow: var(--la-sh-brand); }
.la-topup__bonuses { padding: var(--la-s4); border-radius: var(--la-r-md); background: rgba(var(--la-c2-rgb), .10); }
.la-topup__bonustitle { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; font-size: var(--la-t-sm); font-weight: 700; color: var(--la-c2); }
.la-topup__bonustitle .la-i { width: 15px; height: 15px; }
.la-topup__bonuslist { display: flex; flex-wrap: wrap; gap: 7px; }
.la-topup__bonus { padding: 4px 11px; border-radius: var(--la-r-pill); font-size: var(--la-t-xs); font-weight: 600; color: var(--la-ink-2); background: var(--la-surface); }
.la-topup__summary { position: sticky; top: 94px; padding: var(--la-s6); }
.la-topup__summary h3 { margin-bottom: var(--la-s4); font-size: var(--la-t-md); font-weight: 800; }
.la-topup__growth { margin-top: var(--la-s5); padding-top: var(--la-s4); border-top: 1px dashed var(--la-line); display: flex; flex-direction: column; gap: 8px; }
.la-topup__growthhead { display: flex; align-items: center; gap: 6px; font-size: var(--la-t-sm); }
.la-topup__growthhead .la-i { width: 15px; height: 15px; color: var(--la-c2); }
.la-topup__growthhead b { color: var(--la-c1); }

.la-paylist { display: flex; flex-wrap: wrap; gap: 8px; }

.la-paylist .btn-pay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 8px 16px;
    border-radius: var(--la-r-md);
    border: 1.5px solid var(--la-line);
    background: var(--la-surface-2);
    font-size: var(--la-t-base);
    font-weight: 600;
    color: var(--la-ink-2) !important;
    cursor: pointer;
    line-height: 1.4 !important;
    transition: color var(--la-d2) var(--la-e-smooth), border-color var(--la-d2) var(--la-e-smooth), background-color var(--la-d2) var(--la-e-smooth);
}

.la-paylist .btn-pay:hover { border-color: var(--la-line-2); }
.la-paylist .btn-pay.checked { color: var(--la-c1) !important; border-color: var(--la-c1); background: rgba(var(--la-c1-rgb), .08); box-shadow: 0 0 0 3px rgba(var(--la-c1-rgb), .10); }
.la-paylist .pay-icon { width: 22px; height: 22px; object-fit: contain; }

.la-paylist--wallet { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.la-wallet {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 13px 15px;
    border-radius: var(--la-r-md);
    border: 1.5px solid var(--la-line);
    background: var(--la-surface-2);
    cursor: pointer;
    text-align: start;
    transition: color var(--la-d2) var(--la-e-smooth), border-color var(--la-d2) var(--la-e-smooth), background-color var(--la-d2) var(--la-e-smooth);
}

.la-wallet .la-i { width: 18px; height: 18px; color: var(--la-ink-3); }
.la-wallet__name { font-size: var(--la-t-base); font-weight: 700; }
.la-wallet__note { font-size: var(--la-t-xs); color: var(--la-ink-3); }
.la-wallet.checked { border-color: var(--la-c1); background: rgba(var(--la-c1-rgb), .08); }
.la-wallet.checked .la-i, .la-wallet.checked .la-wallet__name { color: var(--la-c1); }
.la-wallet.is-off { opacity: .5; }
.la-cash__tip { margin-top: 8px; font-size: var(--la-t-xs); }

/* 推广 */
.la-promo { display: flex; flex-direction: column; gap: var(--la-s5); }
.la-promo__link { display: flex; align-items: center; gap: var(--la-s7); padding: var(--la-s6); }
.la-promo__main { flex: 1; min-width: 0; }
.la-promo__title { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: var(--la-t-md); font-weight: 800; }
.la-promo__title .la-i { width: 18px; height: 18px; color: var(--la-c1); }
.la-promo__urlbox { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: var(--la-r-pill); background: var(--la-surface-2); margin-bottom: 10px; }
.la-promo__url { flex: 1; min-width: 0; font-family: var(--la-font-num); font-size: var(--la-t-sm); }
.la-promo__qr { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.la-promo__qr > div { width: 108px; height: 108px; display: grid; place-items: center; padding: 6px; border-radius: var(--la-r-md); background: #fff; }

/* 套餐 */
.la-plans { display: flex; flex-direction: column; gap: var(--la-s6); }
.la-plans__head { display: flex; align-items: center; gap: 14px; }
.la-plans__head .la-i { color: var(--la-c1); }
.la-plans__head h2 { font-size: var(--la-t-2xl); font-weight: 800; letter-spacing: -.02em; }
.la-plans__head p { font-size: var(--la-t-sm); color: var(--la-ink-3); }
.la-plans__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--la-s4); }

.la-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: var(--la-s6);
    border-radius: var(--la-r-lg);
    border: 1.5px solid var(--la-line);
    background: var(--la-surface);
    cursor: pointer;
    text-align: start;
    transition: transform var(--la-d3) var(--la-e-out), border-color var(--la-d2) var(--la-e-smooth), box-shadow var(--la-d3) var(--la-e-out);
}

.la-plan:hover { transform: translateY(-4px); box-shadow: var(--la-sh-3); }
.la-plan.checked { border-color: var(--la-c1); box-shadow: 0 0 0 4px rgba(var(--la-c1-rgb), .12), var(--la-sh-3); }
.la-plan--reco { border-color: rgba(var(--la-c2-rgb), .5); }
.la-plan__badge { position: absolute; top: 12px; inset-inline-end: 12px; padding: 3px 10px; border-radius: var(--la-r-pill); font-size: var(--la-t-2xs); font-weight: 800; color: #fff; background: var(--la-sunset); }
.la-plan__name { font-size: var(--la-t-lg); font-weight: 800; }
.la-plan__feats { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.la-plan__feat { display: flex; align-items: center; gap: 6px; font-size: var(--la-t-sm); color: var(--la-ink-2); }
.la-plan__feat .la-i { width: 15px; height: 15px; color: var(--la-ok); }
.la-plan__feat.is-off { color: var(--la-ink-4); text-decoration: line-through; }
.la-plan__feat.is-off .la-i { color: var(--la-ink-4); }
.la-plan__fee { font-size: var(--la-t-xs); color: var(--la-ink-3); }
.la-plan__fee b { color: var(--la-c1); }
.la-plans__acts { display: flex; gap: 10px; }

/* 店铺 */
.la-shop { display: flex; flex-direction: column; gap: var(--la-s5); }
.la-shop__status { display: flex; align-items: center; gap: var(--la-s5); padding: var(--la-s5) var(--la-s6); flex-wrap: wrap; }
.la-shop__crown { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--la-r-md); color: #fff; background: var(--la-sunset); box-shadow: var(--la-sh-brand); flex: none; }
.la-shop__level strong { display: block; font-size: var(--la-t-lg); font-weight: 800; }
.la-shop__feats { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }
.la-shop__feat { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--la-r-pill); font-size: var(--la-t-xs); font-weight: 600; color: var(--la-ok); background: var(--la-ok-bg); }
.la-shop__feat .la-i { width: 14px; height: 14px; }
.la-shop__feat.is-off { color: var(--la-ink-4); background: var(--la-surface-2); }
.la-shop__form { padding: var(--la-s6); display: flex; flex-direction: column; gap: var(--la-s7); }
.la-shop__sec { display: flex; flex-direction: column; gap: var(--la-s5); }
.la-shop__sec h3 { display: flex; align-items: center; gap: 8px; font-size: var(--la-t-md); font-weight: 800; padding-bottom: 10px; border-bottom: 1px solid var(--la-line); }
.la-shop__sec h3 .la-i { width: 18px; height: 18px; color: var(--la-c1); }

/* 收益走势条 */
.la-chart { padding: var(--la-s5) var(--la-s6) var(--la-s4); }
.la-chart__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--la-s5); }
.la-chart__head strong { font-size: var(--la-t-md); font-weight: 800; }
.la-chart__bars { display: flex; align-items: flex-end; gap: 10px; height: 140px; }
.la-chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }

.la-chart__bar {
    width: 100%;
    max-width: 42px;
    border-radius: var(--la-r-sm) var(--la-r-sm) 3px 3px;
    background: var(--la-sunset);
    opacity: .85;
    transition: opacity var(--la-d2) var(--la-e-smooth), transform var(--la-d3) var(--la-e-out);
    transform-origin: bottom;
    animation: la-bar-grow var(--la-d5) var(--la-e-out) both;
}

.la-chart__col:hover .la-chart__bar { opacity: 1; }
.la-chart__x { font-size: var(--la-t-xs); color: var(--la-ink-3); }

@keyframes la-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ================================================================ 工单 */

.la-ticket { display: flex; flex-direction: column; gap: var(--la-s5); }

.la-ticket__new {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--la-s5) var(--la-s6);
    border-radius: var(--la-r-lg);
    color: #fff;
    background: var(--la-sunset);
    background-size: 180% 100%;
    box-shadow: var(--la-sh-brand);
    transition: background-position var(--la-d4) var(--la-e-out), transform var(--la-d3) var(--la-e-out);
}

.la-ticket__new:hover { color: #fff; background-position: 100% 0; transform: translateY(-2px); }
.la-ticket__newico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--la-r-md); background: rgba(255, 255, 255, .22); flex: none; }
.la-ticket__newcopy { flex: 1; min-width: 0; }
.la-ticket__newcopy strong { display: block; font-size: var(--la-t-md); font-weight: 800; }
.la-ticket__newcopy small { font-size: var(--la-t-xs); opacity: .86; }

.la-ticket__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }

.la-tstat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 8px;
    border-radius: var(--la-r-md);
    border: 1.5px solid var(--la-line);
    background: var(--la-surface);
    cursor: pointer;
    transition: color var(--la-d2) var(--la-e-smooth), border-color var(--la-d2) var(--la-e-smooth), background-color var(--la-d2) var(--la-e-smooth);
}

.la-tstat b { font-family: var(--la-font-num); font-size: var(--la-t-xl); font-weight: 800; }
.la-tstat span { font-size: var(--la-t-xs); color: var(--la-ink-3); }
.la-tstat:hover { border-color: var(--la-line-2); }
.la-tstat.is-active { color: var(--la-c1); border-color: var(--la-c1); background: rgba(var(--la-c1-rgb), .07); }
.la-tstat.is-active span { color: var(--la-c1); }

.la-ticket__board { padding: var(--la-s5) var(--la-s6) var(--la-s6); }
.la-ticket__tools { display: flex; gap: 10px; margin-bottom: var(--la-s5); flex-wrap: wrap; }

.la-ticket__search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 200px;
    height: 42px;
    padding: 0 14px;
    border-radius: var(--la-r-md);
    background: var(--la-surface-2);
    border: 1.5px solid transparent;
    transition: border-color var(--la-d2) var(--la-e-smooth);
}

.la-ticket__search:focus-within { border-color: var(--la-c1); background: var(--la-surface); }
.la-ticket__search .la-i { width: 17px; height: 17px; color: var(--la-ink-3); flex: none; }
.la-ticket__search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--la-ink); }
.la-ticket__search input::-webkit-search-cancel-button { display: none; }
.uc-ticket-search__clear { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--la-ink-3); flex: none; }
.uc-ticket-search__clear:hover { background: var(--la-hover); }
.la-ticket__filter { flex: none; min-width: 150px; }
.la-ticket__filter select { height: 42px; }
.la-ticket__loading { display: flex; flex-direction: column; gap: 10px; }
.la-ticket__loading .la-skeleton { height: 74px; }
.la-ticket__list { display: flex; flex-direction: column; gap: 10px; }
.la-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: var(--la-s5); }
.la-pager__meta { font-size: var(--la-t-sm); color: var(--la-ink-3); }

/* 工单详情 */
.la-tdetail { display: flex; flex-direction: column; gap: var(--la-s5); }
.la-tdetail__loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: var(--la-s10) 0; color: var(--la-ink-3); }
.la-tdetail__head { padding: var(--la-s6); display: flex; flex-direction: column; gap: 12px; }
.la-tdetail__headtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.la-tdetail__head h2 { font-size: var(--la-t-xl); font-weight: 800; }
.la-tdetail__ctx { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding-top: 12px; border-top: 1px dashed var(--la-line); }
.la-tdetail__ctx dt { font-size: var(--la-t-xs); color: var(--la-ink-3); margin-bottom: 3px; }
.la-tdetail__ctx dd { font-size: var(--la-t-sm); font-weight: 600; }
.la-tdetail__thread { padding: var(--la-s6); display: flex; flex-direction: column; gap: var(--la-s4); }
.la-tdetail__msgs { display: flex; flex-direction: column; gap: var(--la-s4); }
.la-tdetail__reply { padding: var(--la-s6); display: flex; flex-direction: column; gap: 12px; }
.la-tdetail__proof img { max-width: 320px; border-radius: var(--la-r-md); }

/* 工单创建 */
.la-tcreate__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--la-s5); align-items: start; }
.la-tcreate__form { padding: var(--la-s6); display: flex; flex-direction: column; gap: var(--la-s8); }
.la-tcreate__sec { display: flex; flex-direction: column; gap: var(--la-s5); }
.la-tcreate__head { display: flex; align-items: center; gap: 12px; }
.la-tcreate__step { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: var(--la-t-sm); font-weight: 800; color: #fff; background: var(--la-sunset); flex: none; }
.la-tcreate__head strong { display: block; font-size: var(--la-t-md); font-weight: 800; }
.la-tcreate__head small { font-size: var(--la-t-xs); color: var(--la-ink-3); }
.la-tcreate__types { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }

.la-tcreate__type {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--la-r-md);
    border: 1.5px solid var(--la-line);
    background: var(--la-surface-2);
    cursor: pointer;
    text-align: start;
    transition: border-color var(--la-d2) var(--la-e-smooth), background-color var(--la-d2) var(--la-e-smooth);
}

.la-tcreate__type .uc-ticket-type__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--la-r-md); color: var(--la-c1); background: rgba(var(--la-c1-rgb), .10); flex: none; }
.la-tcreate__type .uc-ticket-type__copy { flex: 1; min-width: 0; }
.la-tcreate__type strong { display: block; font-size: var(--la-t-base); font-weight: 700; }
.la-tcreate__type small { font-size: var(--la-t-xs); color: var(--la-ink-3); }
.la-tcreate__type.is-active { border-color: var(--la-c1); background: rgba(var(--la-c1-rgb), .08); }
.la-tcreate__prio { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }

.la-prio {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: var(--la-r-md);
    border: 1.5px solid var(--la-line);
    background: var(--la-surface-2);
    cursor: pointer;
    text-align: start;
}

.la-prio__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--la-ink-4); }
.uc-ticket-priority-dot--low { background: var(--la-ok); }
.uc-ticket-priority-dot--medium { background: var(--la-c2); }
.uc-ticket-priority-dot--high { background: var(--la-bad); }
.la-prio strong { display: block; font-size: var(--la-t-sm); font-weight: 700; }
.la-prio small { font-size: var(--la-t-xs); color: var(--la-ink-3); }
.la-prio.is-active { border-color: var(--la-c1); background: rgba(var(--la-c1-rgb), .08); }

.la-segment { display: inline-flex; padding: 3px; border-radius: var(--la-r-pill); background: var(--la-surface-2); }
.la-segment__btn { padding: 8px 18px; border-radius: var(--la-r-pill); font-size: var(--la-t-sm); font-weight: 600; color: var(--la-ink-2); }
.la-segment__btn.is-active { color: var(--la-on-brand); background: var(--la-sunset); box-shadow: var(--la-sh-brand); }

.la-drop {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    border-radius: var(--la-r-md);
    border: 1.5px dashed var(--la-line-2);
    background: var(--la-surface-2);
    cursor: pointer;
    text-align: start;
    transition: border-color var(--la-d2) var(--la-e-smooth), background-color var(--la-d2) var(--la-e-smooth);
}

.la-drop:hover { border-color: var(--la-c1); background: rgba(var(--la-c1-rgb), .05); }
.la-drop .uc-ticket-proof__icon { color: var(--la-c1); flex: none; }
.la-drop .uc-ticket-proof__copy { flex: 1; min-width: 0; }
.la-drop strong { display: block; font-size: var(--la-t-base); font-weight: 700; }
.la-drop small { font-size: var(--la-t-xs); color: var(--la-ink-3); }
.la-drop__preview { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px; border-radius: var(--la-r-md); background: var(--la-surface-2); }
.la-drop__preview img { width: 56px; height: 56px; border-radius: var(--la-r-sm); object-fit: cover; }
.la-drop__preview > div { flex: 1; min-width: 0; }
.la-tcreate__summary { position: sticky; top: 94px; padding: var(--la-s6); display: flex; flex-direction: column; gap: var(--la-s4); }
.la-tcreate__summary .uc-ticket-summary__head { display: flex; align-items: center; gap: 8px; font-size: var(--la-t-md); font-weight: 800; }
.la-tcreate__summary .uc-ticket-summary__head .la-i { width: 18px; height: 18px; color: var(--la-c1); }

/* ================================================================ 两端共用的页面级组件
   下面这些原本写在 Pc.css / Pc.Page.css 里，但手机端模板同样在用 ——
   手机端不加载 Pc.*，留在那边就是一片没有样式的裸 DOM。 */

/* 维护页（两端共用） */

.la-closed {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--la-s8) var(--la-s5);
    overflow: hidden;
}

.la-closed__glow {
    position: absolute;
    top: -20vh;
    left: 50%;
    width: 120vw;
    max-width: 1400px;
    height: 80vh;
    margin-left: -60vw;
    background: radial-gradient(50% 50% at 50% 50%, rgba(var(--la-c1-rgb), .20), transparent 70%),
    radial-gradient(40% 45% at 72% 40%, rgba(var(--la-c2-rgb), .18), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}

.la-closed__card {
    position: relative;
    width: 100%;
    max-width: 520px;
    padding: var(--la-s8) var(--la-s7);
    text-align: center;
    border-radius: var(--la-r-2xl);
    border: 1px solid var(--la-line);
    background: var(--la-surface);
    box-shadow: var(--la-sh-4);
}

.la-closed__mark {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto var(--la-s5);
    border-radius: var(--la-r-xl);
    color: #fff;
    background: var(--la-sunset);
    box-shadow: var(--la-sh-brand);
}

.la-closed__mark .la-i { width: 32px; height: 32px; animation: la-spin 9s linear infinite; }
.la-closed__title { font-size: var(--la-t-2xl); margin-bottom: var(--la-s3); }
.la-closed__msg { color: var(--la-ink-2); line-height: var(--la-lh); }
.la-closed__msg p { margin: 0 0 8px; }
.la-closed__acts { display: flex; justify-content: center; gap: 10px; margin-top: var(--la-s6); }
.la-closed__sign { margin-top: var(--la-s6); font-size: var(--la-t-sm); color: var(--la-ink-4); }


/* 排序箭头 */
.la-sortbar { display: flex; gap: 6px; }
.la-sortbar__ar { display: inline-flex; transition: transform var(--la-d2) var(--la-e-out); }
.la-sortbar__ar .la-i { width: 12px; height: 12px; }
.la-sortbar__ar.is-desc { transform: rotate(180deg); }

/* 开关 */
/* 开关 */

.la-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.la-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.la-switch__track {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: var(--la-r-pill);
    background: var(--la-line-2);
    transition: background var(--la-d3) var(--la-e-smooth);
}

.la-switch__knob {
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--la-sh-1);
    transition: transform var(--la-d3) var(--la-e-spring);
}

.la-switch input:checked + .la-switch__track { background: var(--la-sunset); }
.la-switch input:checked + .la-switch__track .la-switch__knob { transform: translateX(16px); }
.la-switch input:focus-visible + .la-switch__track { box-shadow: var(--la-focus); }
.la-switch__txt { font-size: var(--la-t-sm); font-weight: 600; color: var(--la-ink-2); }


/* 分类树 —— 可折叠。
   服务端只渲染一级 + 当前所在的那一支，其余分支点开由 JS 现建；
   缩进靠行内的 --d（深度）算，不靠一层层嵌套的 padding，
   这样 JS 建出来的节点和服务端渲染的节点结构完全一致。 */

.la-tree { display: flex; flex-direction: column; }
.la-tree__row { display: flex; align-items: center; gap: 2px; padding-inline-start: calc(var(--d, 0) * 14px); }

.la-tree__toggle {
    display: grid;
    place-items: center;
    width: 22px;
    height: 30px;
    flex: none;
    border: 0;
    background: none;
    color: var(--la-ink-4);
    cursor: pointer;
    border-radius: var(--la-r-xs);
}

/* 箭头用 CSS 画，不出 SVG —— 一棵树里几百个 SVG 就是几十 KB 纯白开销 */
.la-tree__arr {
    width: 6px;
    height: 6px;
    border-top: 1.6px solid currentColor;
    border-inline-end: 1.6px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--la-d2) var(--la-e-spring);
}

.la-tree__toggle:hover { color: var(--la-c1); }
.la-tree__toggle.is-leaf { cursor: default; }
.la-tree__node.is-open > .la-tree__row > .la-tree__toggle .la-tree__arr { transform: rotate(135deg) translate(-1px, -1px); }

.la-tree__link {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--la-r-sm);
    font-size: var(--la-t-sm);
    color: var(--la-ink-2);
    transition: color var(--la-d1) var(--la-e-smooth), background-color var(--la-d1) var(--la-e-smooth);
}

.la-tree__row:has(> .la-tree__toggle:not(.is-leaf)) .la-tree__link { font-weight: 600; }
.la-tree__link:hover { color: var(--la-c1); background: var(--la-hover); }
.la-tree__row.is-on > .la-tree__link { color: var(--la-c1); background: var(--la-tint); font-weight: 700; }
.la-tree__link > span { flex: 1; min-width: 0; }
.la-tree__link small { display: block; font-size: var(--la-t-2xs); font-weight: 400; color: var(--la-ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-tree__row:has(small) { align-items: flex-start; }
.la-tree__row:has(small) .la-tree__link { height: auto; padding-block: 5px; }

.la-tree__num {
    flex: none;
    padding: 0 6px;
    height: 17px;
    line-height: 17px;
    border-radius: var(--la-r-pill);
    background: var(--la-surface-3);
    color: var(--la-ink-4);
    font-size: var(--la-t-2xs);
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.la-tree__row.is-on .la-tree__num { background: rgba(var(--la-c1-rgb), .16); color: var(--la-c1); }
.la-tree__ico { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; flex: none; }
.la-tree__load { display: grid; place-items: center; padding: 10px 0; }
.la-tree__empty { padding: var(--la-s6) 10px; text-align: center; font-size: var(--la-t-sm); color: var(--la-ink-4); }
.la-tree__rest { padding: 10px; text-align: center; font-size: var(--la-t-2xs); line-height: 1.5; color: var(--la-ink-4); border-top: 1px dashed var(--la-line); margin-top: 6px; }

/* 展开动画：只动 opacity/transform，不动 height —— 子级数量不确定，
   高度动画会在几十个节点时明显掉帧 */
.la-tree__kids { animation: la-tree-in var(--la-d2) var(--la-e-out) both; }

@keyframes la-tree-in {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .la-tree__kids { animation: none; }
}

/* 侧栏筛选框 */
.la-treefilter {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 4px var(--la-s3);
    padding: 0 10px;
    height: 34px;
    border-radius: var(--la-r-md);
    border: 1px solid var(--la-line);
    background: var(--la-surface-2);
    transition: border-color var(--la-d2) var(--la-e-smooth), box-shadow var(--la-d2) var(--la-e-smooth);
}

.la-treefilter:focus-within { border-color: var(--la-c1); box-shadow: 0 0 0 3px rgba(var(--la-c1-rgb), .13); }
.la-treefilter .la-i { width: 15px; height: 15px; flex: none; color: var(--la-ink-4); }
.la-treefilter input { flex: 1; min-width: 0; border: 0; background: none; color: var(--la-ink); font: inherit; font-size: var(--la-t-sm); }
.la-treefilter input:focus { outline: none; }
.la-treefilter input::-webkit-search-cancel-button { -webkit-appearance: none; }


/* 会员等级徽章 */
.la-mnav__lv {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: var(--la-r-pill);
    font-size: var(--la-t-2xs);
    font-style: normal;
    font-weight: 600;
    color: var(--la-c2);
    background: rgba(var(--la-c2-rgb), .16);
}

/* 查询结果容器 */
.la-query__result { margin-top: var(--la-s6); }

/* 手机端表格卡外壳 */
.la-tablecard--app { border-radius: 0; border-inline: 0; }


/* ================================================================ @layer la-first
   级联层对 !important 是反着算的：更早声明的层里的 important 优先。
   Head 里声明了 `@layer la-first, la-platform`，md-components 装在 la-platform，
   所以凡是要压过它 !important 规则的声明，只能放在这里、并且同样 !important。
   只放确有此需要的几条，别把普通规则搬进来（层内普通声明反而输给层外）。 */
@layer la-first {
    :root[data-theme] .component-popup .layui-form-switch {
        width: 40px !important;
        min-width: 0 !important;
        height: 22px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 11px !important;
        background: var(--la-surface-3) !important;
    }

    :root[data-theme] .component-popup .layui-form-switch > i {
        display: block !important;
        left: 2px !important;
        top: 2px !important;
        right: auto !important;
        width: 18px !important;
        height: 18px !important;
        transform: none !important;
        background: #fff !important;
    }

    :root[data-theme] .component-popup .layui-form-onswitch { background: var(--la-c1) !important; }
    :root[data-theme] .component-popup .layui-form-onswitch > i { left: 20px !important; background: #fff !important; }
}