/* 顶栏毛玻璃 —— 官网的招牌观感：内容从半透明顶栏下面透出来一点。
   AppbarBackground 在 AppTheme 里已经设成 0.8 透明度，这里补上模糊。
   两个模式都要，backdrop-filter 不吃颜色所以不用分开写 */
.app-bar {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* 主内容区跟着抽屉走，MudBlazor 已经处理了，这里只补一个最小高度，
   内容少的页面底部不至于空一大块白 */
.app-main {
    min-height: 100vh;
    background-color: var(--mud-palette-background-gray);
}

/* 表格：MudBlazor 默认没有竖线，字段多的表（订单、任务详情）眼睛容易串行。
   给需要的表加 table-grid 类 —— 用 CSS 变量取色，明暗自动跟着变 */
.table-grid td,
.table-grid th {
    border-right: 1px solid var(--mud-palette-table-lines);
}

.table-grid td:last-child,
.table-grid th:last-child {
    border-right: none;
}

/* 表头底色，有竖线之后表头不区分会显得很平 */
.table-grid thead th {
    background-color: var(--mud-palette-background-gray);
}

/* 滚动条收细并淡化，默认那条在浅色抽屉上很扎眼 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-action-default);
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ============ 登录页 ============ */
/* 尺寸和留白照 Masa Pro 模板那版：卡片 510x680，比 MudBlazor 默认宽松得多。
   后台的登录页一天只看一次，宽松点显得郑重，密集了像个弹窗 */
.empty-layout {
    min-height: 100vh;
    background-color: var(--mud-palette-background-gray);
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 510px;
    max-width: 100%;
    min-height: 680px;
    padding: 48px 45px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
}

.login-head {
    text-align: center;
    padding-top: 12px;
    padding-bottom: 40px;
}

/* 表单撑开剩余空间，页脚永远贴底 —— 有无错误提示都不会让按钮上下跳 */
.login-form {
    flex: 1;
}

/* 提示区固定高度，出不出错都占这么多 */
.login-hint {
    min-height: 24px;
    margin: 8px 0 16px;
}

.login-foot {
    text-align: center;
}

/* 窄屏不强求 680 高，手机上会顶出一屏多 */
@media (max-height: 760px), (max-width: 560px) {
    .login-card {
        min-height: auto;
        padding: 32px 24px;
    }

    .login-head {
        padding-bottom: 24px;
    }
}

/* ============ 详情表 ============ */
/* 「标签 : 值」两列：标签列给点底色跟数值分开。
   用 CSS 变量取色，明暗自动跟着变 —— 写死 #FAFBFE 的话暗色下会白晃晃一条 */
.detail-label {
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    font-size: 0.8125rem;
}

/* 原始报文：等宽字体 + 可滚动，长 JSON 不至于把弹窗撑爆 */
.raw-payload {
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 12px;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow: auto;
    margin: 0;
}

/* ============ 支付二维码 ============ */
.qr-frame {
    display: inline-block;
    padding: 12px;
    border-radius: 12px;
    border: 2px solid var(--mud-palette-lines-default);
    /* 码必须是白底黑块才扫得出来，暗色模式下也不能跟着变深 */
    background: #fff;
}

/* 扫过的码连边框一起变红，隔着几步远也看得出来这张别再扫了 */
.qr-frame--scanned {
    border-color: var(--mud-palette-error);
}

/* 订单号这类要逐字核对的内容用等宽字体，看错一位就是另一单 */
.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============ 状态标签浅色底 ============ */
/* Masa 那种「浅色底 + 深色字」的标签观感，MudBlazor 的 Variant.Text 是透明底，
   在密集表格里跟普通文字分不开。用主色的 12% 透明度当底 ——
   走 rgb 变量而不是写死颜色，明暗两套自动跟着变 */
.mud-chip.mud-chip-text.mud-chip-color-primary { background-color: rgba(var(--mud-palette-primary-rgb), 0.12); }
.mud-chip.mud-chip-text.mud-chip-color-secondary { background-color: rgba(var(--mud-palette-secondary-rgb), 0.12); }
.mud-chip.mud-chip-text.mud-chip-color-info { background-color: rgba(var(--mud-palette-info-rgb), 0.12); }
.mud-chip.mud-chip-text.mud-chip-color-success { background-color: rgba(var(--mud-palette-success-rgb), 0.12); }
.mud-chip.mud-chip-text.mud-chip-color-warning { background-color: rgba(var(--mud-palette-warning-rgb), 0.12); }
.mud-chip.mud-chip-text.mud-chip-color-error { background-color: rgba(var(--mud-palette-error-rgb), 0.12); }
.mud-chip.mud-chip-text.mud-chip-color-default { background-color: var(--mud-palette-background-gray); }

/* 表格里的标签不要撑高行 */
.mud-table-cell .mud-chip {
    height: 22px;
}

/* ============ 名单批量导入 ============ */
/* 拖放区外观。拖放行为本身归 MudFileUpload 管（DragAndDrop="true"），
   这里只画样子 —— 之前是自己拿 InputFile 铺一层透明输入框实现的，删掉了 */
.import-drop {
    height: 96px;
    border-style: dashed;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.import-drop:hover {
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
}

/* MudFileUpload 拖拽悬停时给整个拖放区上色 */
.mud-file-upload-dragarea .import-drop {
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
}

/* 步骤条在弹窗里不需要额外内边距，内容区已经有了 */
.import-stepper {
    box-shadow: none;
}

/* 校验不过的行整行标出来，扫一眼就知道要改哪几条 */
.import-row--error {
    background-color: rgba(var(--mud-palette-error-rgb), 0.06);
}

.import-row--error td {
    color: var(--mud-palette-error);
}

/* ============ 二维码墙 ============ */
.wall-item {
    position: relative;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 8px;
    text-align: center;
    /* 码必须白底黑块才扫得出来，暗色模式下也不能跟着变深 */
    background: #fff;
    height: 100%;
}

/* 扫过的整块变红，隔着几步远也看得出来这张别再扫了 */
.wall-item--scanned {
    border-color: var(--mud-palette-error);
    background: #FFF8F8;
}

.wall-item img {
    width: 100%;
    max-width: 150px;
    aspect-ratio: 1;
    display: block;
    margin: 0 auto;
}

/* 这几行字压在白底二维码卡片上，不能用主题色变量 —— 暗色下会变成白字白底 */
.wall-amount {
    font-size: 14px;
    font-weight: 700;
    color: #1B2559;
    margin-top: 6px;
}

.wall-line {
    font-size: 12px;
    color: #1B2559;
    margin-top: 2px;
}

/* 白底上原来是 #6B77A3，只有 4.38:1，差一点到 AA 线。11px 的小字更该给足对比 */
.wall-sub {
    font-size: 11px;
    color: #66719B;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wall-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #E53935;
    color: #fff;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 10px;
}

/* 链接很长，等宽 + 允许断行，免得把表格撑出横向滚动条 */
.link-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--mud-palette-primary);
    word-break: break-all;
}

/* ============ 公开支付页 ============ */
/* 这一页发给外人，在手机上打开。固定浅色不跟随主题 ——
   付款的人没有「切主题」这个上下文，而且二维码必须白底才扫得出来 */
.pay-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 24px 12px 40px;
    box-sizing: border-box;
    background: #F4F7FE;
}

/* margin:auto 而不是 align-items:center：同样能垂直居中，
   但内容比屏幕高的时候不会把顶部裁掉滚不上去 */
.pay-shell {
    width: 100%;
    max-width: 520px;
    margin: auto;
}

.pay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 16px;
    padding: 18px 22px;
    box-shadow: 0 4px 20px rgba(112, 144, 176, .12);
    margin-bottom: 12px;
}

.pay-head-title { font-size: 17px; font-weight: 700; color: #2B3674; }
.pay-head-sub { font-size: 12px; color: #7681AB; margin-top: 3px; }
.pay-head-stat { text-align: right; }
.pay-head-num { font-size: 24px; font-weight: 700; color: #594AE2; line-height: 1.1; }

.pay-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(112, 144, 176, .12);
}

.pay-state { padding: 56px 24px; text-align: center; }
.pay-state-title { font-size: 16px; font-weight: 600; color: #2B3674; margin-top: 16px; }
.pay-state-sub { font-size: 12px; color: #7681AB; margin-top: 8px; line-height: 1.7; }

/* 手机上两列，屏幕宽了自动变三列 */
.qr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 480px) {
    .qr-grid { grid-template-columns: repeat(3, 1fr); }
}

.qr-item {
    position: relative;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 12px 10px 14px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(112, 144, 176, .12);
    transition: border-color .15s, background-color .15s;
}

/* 扫过的整块变红：隔着一臂远也能一眼看出这张跳过 */
.qr-item--done {
    border-color: #E53935;
    background: #FFF6F6;
}

.qr-item--done .qr-img { opacity: .45; }

.qr-done-mark {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #E53935;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.qr-img img { width: 100%; aspect-ratio: 1; display: block; }

.qr-amount { font-size: 15px; font-weight: 700; color: #2B3674; margin-top: 8px; }
.qr-name { font-size: 11px; color: #7681AB; margin-top: 2px; }

.pay-progress { margin-top: 14px; text-align: center; font-size: 13px; color: #2B3674; }
.pay-progress-hint { display: block; font-size: 11px; color: #7681AB; margin-top: 3px; }

.pay-actions { margin-top: 18px; }

/* 用原生 button 不用 MudButton：这一页要固定浅色，
   MudButton 会跟着主题变色，暗色下按钮会变成深底 */
.pay-btn-main {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 24px;
    background: #594AE2;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.pay-btn-main:disabled { opacity: .6; cursor: default; }

/* 次要操作：边框浅一点、字小一点，看得出是按钮但不跟主按钮抢 */
.pay-btn-release {
    width: 100%;
    height: 40px;
    margin-top: 12px;
    border: 1px solid #D6DEF0;
    border-radius: 20px;
    background: #fff;
    color: #707EAE;
    font-size: 13px;
    cursor: pointer;
}

.pay-foot {
    margin-top: 14px;
    text-align: center;
    font-size: 11px;
    color: #7681AB;
    line-height: 1.7;
}

/* ============ 左侧抽屉 ============ */
/* drawer 里现在只有 MudNavMenu 一个元素（logo 挪去 AppBar 了）——
   多个元素在 .mud-drawer-content 这个 flex column 里抢高度时，
   菜单会被整体推到半屏以下，怎么调 flex 都按不住。
   一个元素就没有分配问题。 */
/* drawer 内部：banner 固定，菜单吃掉剩余空间并自己滚。
   **每个子项的 flex 都要写死** —— 不写的话浏览器按内容分配，
   banner 会被拉高、菜单被挤到半屏以下（这个坑踩过一次） */
.drawer-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.drawer-banner {
    flex: 0 0 auto;
    /* 左右不留 padding：图片自己 210px 定宽居中，drawer 是 240px */
    padding: 24px 0 2px;
}

.drawer-banner img {
    display: block;
    width: 210px;
    max-width: calc(100% - 16px);
    height: 85px;
    margin: 0 auto;

    /* 原图左边有俄文标题和第三方商标，不能直接放进后台。
       没有 ImageMagick 能按偏移裁剪（sips 只会居中裁），
       改用 object-position 把可见区域推到右边那三台手机上 ——
       原图一个像素没动，换图时只要调这个百分比 */
    object-fit: cover;
    object-position: 68% 46%;

    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}

/* 产品图是纯白底，深色界面里会白得刺眼 */
@media (prefers-color-scheme: dark) {
    .drawer-banner img {
        filter: brightness(.86);
    }
}

:root[data-theme="dark"] .drawer-banner img {
    filter: brightness(.86);
}

:root[data-theme="light"] .drawer-banner img {
    filter: none;
}

.drawer-inner .mud-navmenu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 上边距不写在这里 —— MudNavMenu 上挂的 pa-* 间距类带 !important，
   外部样式表的 padding 压不过去。改在组件的 Class 上（见 NavMenu.razor） */

/* 抽屉里的滚动条收细，默认那条在浅色侧边栏上很扎眼 */
.mud-drawer .mud-navmenu::-webkit-scrollbar {
    width: 4px;
}

/* 折叠菜单的箭头：**向左是合上，向下是打开**。

   MudBlazor 默认给的是 ArrowDropDown（▼），展开时 rotate(-180deg) 翻成 ▲ ——
   两个状态都是三角形，只差一个翻转，扫一眼分不出当前是开是合。

   改成 ChevronLeft（◀）之后，合上是 ◀、展开逆时针转 90° 变 ▼。

   ⚠️ 是 -90deg 不是 90deg：ChevronLeft 的尖端朝左，
   顺时针转会变成朝上（▲），只有逆时针才朝下。

   选择器要带 .mud-nav-link 才压得过 MudBlazor 自己那条
   （它是 .mud-nav-link .mud-nav-link-expand-icon.mud-transform，两级） */
.mud-navmenu .mud-nav-link .mud-nav-link-expand-icon.mud-transform,
.mud-navmenu .mud-nav-link .mud-nav-link-expand-icon.mud-transform-disabled {
    transform: rotate(-90deg);
}

/* 箭头位置保持 MudBlazor 默认的行尾右对齐（.mud-nav-link-text 是 width:100%
   把它顶过去的）。试过挪到标题旁边，太挤，还是靠右舒服 —— 别再改了 */

/* 菜单图标放大一点。默认 20px 配实心款显得局促，24px 跟 14px 的文字比例更稳 */
.mud-navmenu .mud-nav-link-icon {
    font-size: 1.4rem;
    width: 1.4rem;
    height: 1.4rem;
}

/* 子菜单的图标收一点，层级才看得出来。

   ⚠️ 容器必须写 .mud-navgroup-collapse，不能写 .mud-nav-group ——
   分组的 DOM 是这样的：

     <nav class="mud-nav-group">
       <button class="mud-nav-link">        ← 组自己（一级菜单）
       <div class="mud-navgroup-collapse">  ← 展开的部分
         <MudNavMenu><a class="mud-nav-link">  ← 子项

   写 .mud-nav-group .mud-nav-link 会把那个 button 一起选中，
   结果「结算管理 / 任务配置 / 系统设置」的图标跟着子项一起缩小，
   跟其他一级菜单不齐 */
.mud-navmenu .mud-navgroup-collapse .mud-nav-link-icon {
    font-size: 1.15rem;
    width: 1.15rem;
    height: 1.15rem;
}

/* AppBar 上的站名：窄屏藏起来，给页面标题让位 */
@media (max-width: 600px) {
    .app-brand {
        display: none;
    }
}

/* ============ 中性状态 chip ============ */
/* MudChip 的 Color.Default 用的是 action-default，明暗两套底下都只有 2 点几比一，
   「待下发」这种要看清的状态挂上去就糊了。改用 text-secondary（浅色 8.6:1、
   深色 5.6:1，主题里专门校过），背景用 hover 那档灰把 chip 的形状留住 */
.mud-chip.chip-neutral {
    color: var(--mud-palette-text-secondary) !important;
    background-color: var(--mud-palette-action-default-hover) !important;
}

/* ============ 表格操作列 ============ */
/* 操作列整列靠右：内容和表头必须一起右对齐，
   只对内容做的话表头文字还在左边，两者对不上 */
.action-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* 表头这一侧。MudDataGrid 的表头单元格里还有一层 .column-header，
   它是 flex + justify-content: space-between —— 所以光给 th 设
   text-align 推不动，标题会一直贴在左边。要改的是那一层。 */
.action-head .column-header {
    justify-content: flex-end;
}

/* ============ 抢购任务 ============ */
.row-pick {
    cursor: pointer;
}

/* 姓名首字头像。没有真实照片，但一列灰字里有个色块，扫视时容易定位到某个人 */
.ava {
    flex: none;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    user-select: none;
}

/* 占用账号数：这一页最要紧的数，给个底色让它跳出来 */
.acc-count {
    display: inline-block;
    min-width: 24px;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

/* 表格铺满宽度 —— 固定像素在宽屏上加起来只占一半，右边空一大片 */
.task-table table {
    width: 100%;
    table-layout: fixed;
}

/* table-layout:fixed 之后超长内容会顶破单元格，统一截断 */
.task-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cursor-pointer {
    cursor: pointer;
}

/* ============ 结算统计 ============ */
/* 代理小计行加个底色，一眼能从明细里分出来 */
.stat-agent-row {
    cursor: pointer;
}

.stat-agent-row td {
    background-color: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.stat-agent-row:hover td {
    background-color: var(--mud-palette-table-hover);
}

/* 展开时箭头转成向下，比换一个图标省事且有过渡 */
.stat-caret {
    transition: transform .15s;
}

.stat-caret--open {
    transform: rotate(90deg);
}

/* ============ 主操作按钮 ============ */
/* 备份到历史：这一页唯一的写操作，而且不可逆（订单移出结算范围）。
   给它比普通按钮更重的份量 —— 实心主色 + 一点阴影 + 加宽内边距，
   在一排描边控件里第一眼就能看到。
   禁用态走 MudBlazor 默认（变灰），不另外描 —— 灰下去本身就是「现在不能点」 */
.btn-backup {
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 500;
    letter-spacing: .3px;
    box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), 0.28);
}

.btn-backup:hover:not(:disabled) {
    box-shadow: 0 4px 14px rgba(var(--mud-palette-primary-rgb), 0.38);
}

.btn-backup:disabled {
    box-shadow: none;
}

/* 异常信息这一列不许换行 —— 「付款后 35 小时没提货」断成两行反而更难读 */
.overdue-cell {
    white-space: nowrap;
}

/* 抢购任务：数字列居中且不换行。内容最多三位数，
   左对齐的话一排数字参差不齐，扫不出大小关系 */
.task-table .num-col {
    text-align: center;
    white-space: nowrap;
}

/* 「任务详情」按钮不许被压成两行 */
.task-table .text-right {
    text-align: right;
    white-space: nowrap;
}

/* 手写表格里的「操作」表头靠右 —— MudSimpleTable 没有 HeaderClass 参数，
   直接给 th 加类。它内部没有 .column-header 那层，text-align 就够 */
.action-head-cell {
    text-align: right;
}

/* ============ 商品管理 ============ */
/* 抢购顺序：这一栏的先后就是抢购程序打的顺序，序号要一眼能看清 */
.prio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.prio-item:last-child {
    border-bottom: none;
}

.prio-num {
    flex: none;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.prio-text {
    flex: 1;
    min-width: 0;
}

.prio-ops {
    flex: none;
    display: flex;
    gap: 2px;
}

/* 表格里的优先级角标 */
.prio-badge {
    display: inline-block;
    min-width: 20px;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

/* 整行可点。复选框不接事件，点击一律交给行处理 —— 
   两边都绑的话点中方框会触发两次、状态原地不动 */
.product-table .row-pick {
    cursor: pointer;
}

.product-table .pick-box {
    pointer-events: none;
}

.city-count {
    opacity: .7;
    font-size: 11px;
}

/* 标题下那行说明里的数字。原来整行是 caption + text-secondary，
   人数、款数全糊在灰色小字里，得凑近了看 —— 而这几个数正是这一页的主语：
   「谁、多少人、选了几款」。放大一档 + 加粗，让它们从句子里跳出来 */
.stat-num {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* 城市名跟下面那排选中的城市标签同色，一眼对得上 */
.stat-hl {
    color: #7B1FA2;
    font-weight: 700;
}

/* 「已选 N 款」是唯一会被这一页改动的数，给它同一个紫 */
.stat-on {
    color: #7B1FA2;
}

@media (prefers-color-scheme: dark) {
    .stat-hl, .stat-on { color: #CE93D8; }
}

:root[data-theme="dark"] .stat-hl,
:root[data-theme="dark"] .stat-on { color: #CE93D8; }

:root[data-theme="light"] .stat-hl,
:root[data-theme="light"] .stat-on { color: #7B1FA2; }

/* 选中的城市用紫色，不用主色 —— 主色是 #594AE2（蓝紫），
   页面上按钮、别的 chip 全是它，选中的那个混在里面一眼挑不出来。
   紫色跟蓝紫拉开了色相，明暗两套都是白字，对比度 8.0:1 / 6.6:1 */
.city-chip-on {
    background-color: #7B1FA2 !important;
    color: #fff !important;
}

/* 紫底上 .7 的白字偏灰，提一点 */
.city-chip-on .city-count {
    opacity: .85;
}

@media (prefers-color-scheme: dark) {
    .city-chip-on {
        background-color: #8E24AA !important;
    }
}

:root[data-theme="dark"] .city-chip-on {
    background-color: #8E24AA !important;
}

:root[data-theme="light"] .city-chip-on {
    background-color: #7B1FA2 !important;
}


/* 通知设置里那排数字框。装的都是两三位数（300、30、5），
   默认宽度撑满一格，一屏扫过去全是空白输入框，看着比实际复杂得多 */
.num-field {
    max-width: 190px;
}

.num-field input {
    font-size: 0.9rem;
}