/* ============================================================
   业务管理系统 — Vue 版设计系统 (assets/vue/app.css)
   ------------------------------------------------------------
   与旧的 assets/ui.css 并存、互不影响：
     · 旧页面继续用 ui.css（未迁移，零风险）
     · 新页面（Vue）只用本文件 + assets/vue/app-core.js
   迁移完成一个页面，就少一个页面依赖 ui.css。

   设计原则：
     1) 移动优先（iOS / Android 手机优先），再向上适配平板与桌面
     2) 所有尺寸走变量，改 :root 即可整体换肤
     3) 触摸友好：热区 ≥44px、输入框 ≥16px（防 iOS 聚焦自动放大）
     4) 适配刘海屏/小白条：safe-area-inset
   ============================================================ */

/* ---------------- 设计变量 ---------------- */
:root{
    /* 品牌色 */
    --c-primary:#2563eb;
    --c-primary-hover:#1d4ed8;
    --c-primary-active:#1e40af;
    --c-primary-soft:#eff6ff;
    --c-primary-line:#bfdbfe;

    /* 语义色 */
    --c-success:#16a34a;
    --c-success-soft:#f0fdf4;
    --c-success-line:#bbf7d0;
    --c-warn:#d97706;
    --c-warn-soft:#fffbeb;
    --c-warn-line:#fde68a;
    --c-danger:#dc2626;
    --c-danger-hover:#b91c1c;
    --c-danger-soft:#fef2f2;
    --c-danger-line:#fecaca;
    --c-info-soft:#f0f9ff;
    --c-info-line:#bae6fd;

    /* 中性色 */
    --c-text:#0f172a;
    --c-text-sub:#64748b;
    --c-text-mute:#94a3b8;
    --c-border:#e8ecf2;
    --c-border-strong:#d3dae5;
    --c-bg:#f4f6fa;
    --c-bg-soft:#f8fafc;
    --c-card:#ffffff;
    --c-head:#f7f9fc;

    /* 侧栏（深色） */
    --c-side-bg:#131c2e;
    --c-side-bg2:#0b1220;
    --c-side-text:#a9b6cc;
    --c-side-text-hi:#ffffff;
    --c-side-hover:rgba(255,255,255,.07);
    --c-side-line:rgba(255,255,255,.08);

    /* 圆角 */
    --r-xs:6px;
    --r-sm:8px;
    --r:12px;
    --r-lg:16px;
    --r-pill:999px;

    /* 阴影 */
    --sh-xs:0 1px 2px rgba(15,23,42,.05);
    --sh-sm:0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
    --sh:0 4px 14px rgba(15,23,42,.08);
    --sh-lg:0 18px 46px rgba(15,23,42,.18);
    --sh-focus:0 0 0 3px rgba(37,99,235,.16);

    /* 间距刻度 */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
    --sp-5:20px; --sp-6:24px; --sp-8:32px;

    /* 字体 */
    --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
           "Microsoft YaHei","Noto Sans SC","Helvetica Neue",Arial,sans-serif;
    --font-num:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

    /* 布局 */
    --side-w:236px;
    --side-w-mini:64px;
    --top-h:56px;

    /* 安全区（刘海屏 / 小白条） */
    --sa-top:env(safe-area-inset-top,0px);
    --sa-bottom:env(safe-area-inset-bottom,0px);
    --sa-left:env(safe-area-inset-left,0px);
    --sa-right:env(safe-area-inset-right,0px);
}

/* ---------------- 基础重置 ---------------- */
*,*::before,*::after{box-sizing:border-box;}

html{
    height:100%;
    -webkit-text-size-adjust:100%;      /* iOS 横屏不放大字体 */
    text-size-adjust:100%;
}

body{
    margin:0;
    min-height:100%;
    font-family:var(--font);
    font-size:14px;
    line-height:1.55;
    color:var(--c-text);
    background:var(--c-bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-tap-highlight-color:transparent;   /* 去掉安卓/iOS 点击灰块 */
    overscroll-behavior-y:none;
}

h1,h2,h3,h4,h5{margin:0;font-weight:600;line-height:1.35;}
p{margin:0;}
a{color:var(--c-primary);text-decoration:none;}
img{max-width:100%;display:block;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}

/* 键盘可达性：只在键盘操作时显示焦点环 */
:focus{outline:none;}
:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px;}

/* iOS 上撑满高度的坑：优先 dvh（地址栏收起/展开时不会跳动），不支持的浏览器回退 vh。
   注意顺序——回退声明必须写在 @supports 之前，否则同优先级下会被后者覆盖。 */
:root{--dvh:100vh;}
@supports (height:100dvh){
    :root{--dvh:100dvh;}
}

/* ============================================================
   1) 外壳布局（index.html）—— 桌面侧栏 / 手机抽屉
   ============================================================ */
.shell{
    display:flex;
    height:var(--dvh);
    overflow:hidden;
}

.side{
    flex:none;
    width:var(--side-w);
    display:flex;
    flex-direction:column;
    background:linear-gradient(180deg,var(--c-side-bg) 0%,var(--c-side-bg2) 100%);
    color:var(--c-side-text);
    padding-left:var(--sa-left);
    transition:width .24s cubic-bezier(.4,0,.2,1);
    z-index:60;
}
.side.is-collapsed{width:var(--side-w-mini);}

.side__brand{
    height:var(--top-h);
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 16px;
    padding-top:var(--sa-top);
    border-bottom:1px solid var(--c-side-line);
    flex:none;
    min-height:calc(var(--top-h) + var(--sa-top));
}
.side__logo{
    width:28px;height:28px;flex:none;border-radius:8px;
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    display:grid;place-items:center;color:#fff;font-size:14px;font-weight:700;
    box-shadow:0 3px 10px rgba(37,99,235,.45);
}
.side__name{
    font-size:14.5px;font-weight:600;color:var(--c-side-text-hi);
    letter-spacing:.4px;white-space:nowrap;overflow:hidden;
    transition:opacity .18s,width .18s;
}
.side.is-collapsed .side__name{opacity:0;width:0;}

.side__scroll{
    flex:1;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:10px 10px calc(14px + var(--sa-bottom));
}
.side__group{
    font-size:11px;font-weight:600;letter-spacing:1px;
    color:rgba(255,255,255,.32);
    padding:12px 12px 6px;
    white-space:nowrap;
}
.side.is-collapsed .side__group{opacity:0;height:8px;padding:0;overflow:hidden;}

.side__item{
    display:flex;align-items:center;gap:11px;
    min-height:42px;
    padding:0 12px;
    margin-bottom:2px;
    border-radius:var(--r-sm);
    cursor:pointer;
    font-size:13.5px;
    color:var(--c-side-text);
    white-space:nowrap;
    transition:background .16s,color .16s;
}
.side__item:hover{background:var(--c-side-hover);color:var(--c-side-text-hi);}
.side__item.is-active{
    background:linear-gradient(90deg,rgba(37,99,235,.92),rgba(59,130,246,.62));
    color:#fff;font-weight:500;
    box-shadow:0 3px 12px rgba(37,99,235,.34);
}
.side__ico{
    width:20px;flex:none;text-align:center;font-size:15px;line-height:1;
}
.side__label{
    overflow:hidden;transition:opacity .18s,width .18s;
}
.side.is-collapsed .side__label{opacity:0;width:0;}
.side.is-collapsed .side__item{justify-content:center;padding:0;}

/* 手机端：侧栏变抽屉 */
.side__close{display:none;}

@media (max-width:1023px){
    .side{
        position:fixed;inset:0 auto 0 0;
        width:280px;
        transform:translateX(-100%);
        transition:transform .26s cubic-bezier(.4,0,.2,1);
        box-shadow:none;
        padding-top:var(--sa-top);
        padding-bottom:var(--sa-bottom);
    }
    .side.is-open{
        transform:translateX(0);
        box-shadow:var(--sh-lg);
    }
    .side.is-collapsed{width:280px;}
    .side.is-collapsed .side__name,
    .side.is-collapsed .side__label{opacity:1;width:auto;}
    .side.is-collapsed .side__item{justify-content:flex-start;padding:0 12px;}
    .side.is-collapsed .side__group{opacity:1;height:auto;padding:12px 12px 6px;}
    .side__close{
        display:grid;place-items:center;
        margin-left:auto;
        width:32px;height:32px;flex:none;
        border-radius:var(--r-sm);
        color:#94a3b8;font-size:18px;cursor:pointer;
        background:transparent;border:none;
    }
    .side__close:hover{background:rgba(255,255,255,.1);color:#fff;}
    .side__brand{padding-right:8px;}
}

/* 抽屉遮罩 */
.scrim{
    position:fixed;inset:0;z-index:55;
    background:rgba(15,23,42,.45);
    border:none;padding:0;margin:0;
    opacity:0;pointer-events:none;
    transition:opacity .22s;
}
.scrim.is-on{opacity:1;pointer-events:auto;}
@media (min-width:1024px){.scrim{display:none;}}

/* 主区 */
.main{
    flex:1;display:flex;flex-direction:column;min-width:0;
}

.top{
    flex:none;
    min-height:calc(var(--top-h) + var(--sa-top));
    padding-top:var(--sa-top);
    padding-right:calc(16px + var(--sa-right));
    padding-left:16px;
    background:#fff;
    border-bottom:1px solid var(--c-border);
    display:flex;align-items:center;gap:12px;
    box-shadow:var(--sh-xs);
    position:relative;z-index:20;
}
.top__burger{
    display:none;
    width:40px;height:40px;flex:none;
    border:1px solid var(--c-border);
    border-radius:var(--r-sm);
    background:#fff;cursor:pointer;
    place-items:center;font-size:17px;color:var(--c-text-sub);
}
.top__burger:active{background:var(--c-bg-soft);}
@media (max-width:1023px){.top__burger{display:grid;}}

.top__title{
    font-size:15.5px;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    min-width:0;
}
.top__crumb{
    font-size:12px;color:var(--c-text-mute);
    white-space:nowrap;
}
.top__right{
    margin-left:auto;display:flex;align-items:center;gap:6px;flex:none;
}

/* 顶栏用户胶囊 */
.uchip{
    display:flex;align-items:center;gap:8px;
    padding:5px 12px 5px 5px;
    border-radius:var(--r-pill);
    background:var(--c-bg-soft);
    border:1px solid var(--c-border);
    cursor:pointer;
    transition:background .16s,border-color .16s;
}
.uchip:hover{background:var(--c-primary-soft);border-color:var(--c-primary-line);}
.uchip__ava{
    width:26px;height:26px;flex:none;border-radius:50%;
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    color:#fff;font-size:12px;font-weight:600;
    display:grid;place-items:center;
}
.uchip__name{font-size:12.5px;font-weight:500;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.uchip__role{font-size:11px;color:var(--c-text-mute);}
@media (max-width:560px){
    .uchip__name,.uchip__role{display:none;}
    .uchip{padding:5px;}
}

/* 顶栏下拉菜单 */
.menu-pop{
    position:absolute;top:calc(100% + 8px);right:16px;
    min-width:178px;
    background:#fff;border:1px solid var(--c-border);
    border-radius:var(--r);box-shadow:var(--sh-lg);
    padding:6px;z-index:70;
}
.menu-pop__item{
    display:flex;align-items:center;gap:9px;
    padding:10px 12px;border-radius:var(--r-sm);
    font-size:13.5px;cursor:pointer;color:var(--c-text);
    min-height:42px;
}
.menu-pop__item:hover{background:var(--c-bg-soft);}
.menu-pop__item.is-danger{color:var(--c-danger);}
.menu-pop__item.is-danger:hover{background:var(--c-danger-soft);}
.menu-pop__sep{height:1px;background:var(--c-border);margin:5px 4px;}

.content{
    flex:1;min-height:0;
    background:var(--c-bg);
    position:relative;
}
.content iframe{
    width:100%;height:100%;border:none;display:block;background:var(--c-bg);
}

/* ============================================================
   2) 页面容器与标题
   ============================================================ */
.page{
    max-width:1440px;
    margin:0 auto;
    padding:var(--sp-4);
    padding-left:calc(var(--sp-4) + var(--sa-left));
    padding-right:calc(var(--sp-4) + var(--sa-right));
    padding-bottom:calc(var(--sp-6) + var(--sa-bottom));
}
@media (min-width:768px){ .page{padding:var(--sp-6);} }

.card{
    background:var(--c-card);
    border:1px solid var(--c-border);
    border-radius:var(--r);
    box-shadow:var(--sh-sm);
}

.page-head{
    display:flex;align-items:center;gap:var(--sp-3);
    flex-wrap:wrap;
    margin-bottom:var(--sp-4);
}
.page-title{
    display:flex;align-items:center;gap:10px;
    font-size:17px;font-weight:600;
}
@media (min-width:768px){ .page-title{font-size:19px;} }
.page-title::before{
    content:"";width:4px;height:17px;border-radius:2px;
    background:var(--c-primary);flex:none;
}
.page-head__ops{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}

/* ============================================================
   3) 按钮
   ============================================================ */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    min-height:36px;padding:0 14px;
    border:1px solid var(--c-border-strong);
    border-radius:var(--r-sm);
    background:#fff;color:var(--c-text);
    font-size:13.5px;font-weight:500;
    cursor:pointer;white-space:nowrap;
    transition:background .15s,border-color .15s,color .15s,transform .06s;
    user-select:none;
}
.btn:hover{border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-soft);}
.btn:active{transform:translateY(1px);}
.btn:disabled,.btn.is-disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn--primary{background:var(--c-primary);border-color:var(--c-primary);color:#fff;}
.btn--primary:hover{background:var(--c-primary-hover);border-color:var(--c-primary-hover);color:#fff;}
.btn--danger{background:var(--c-danger);border-color:var(--c-danger);color:#fff;}
.btn--danger:hover{background:var(--c-danger-hover);border-color:var(--c-danger-hover);color:#fff;}
.btn--success{background:var(--c-success);border-color:var(--c-success);color:#fff;}
.btn--success:hover{background:#15803d;border-color:#15803d;color:#fff;}
.btn--ghost{background:transparent;border-color:transparent;color:var(--c-primary);}
.btn--ghost:hover{background:var(--c-primary-soft);border-color:transparent;}
.btn--ghost.is-danger{color:var(--c-danger);}
.btn--ghost.is-danger:hover{background:var(--c-danger-soft);}
.btn--sm{min-height:30px;padding:0 10px;font-size:12.5px;}
.btn--block{width:100%;}
.btn--icon{width:36px;padding:0;}

/* 触摸设备放大热区到 44px */
@media (hover:none){
    .btn{min-height:42px;}
    .btn--sm{min-height:36px;}
}

/* ============================================================
   4) 表单
   ============================================================ */
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field__label{
    font-size:12.5px;color:var(--c-text-sub);font-weight:500;
    display:flex;align-items:center;gap:4px;
}
.field__label .req{color:var(--c-danger);}
.field__hint{font-size:11.5px;color:var(--c-text-mute);line-height:1.5;}
.field__err{font-size:12px;color:var(--c-danger);}

.input,.select,.textarea{
    width:100%;
    min-height:38px;
    padding:8px 11px;
    border:1px solid var(--c-border-strong);
    border-radius:var(--r-sm);
    background:#fff;
    color:var(--c-text);
    font-size:14px;
    transition:border-color .15s,box-shadow .15s;
    -webkit-appearance:none;
    appearance:none;
}
/* 关键：手机端输入框字号 ≥16px，否则 iOS 聚焦时会把整页放大 */
@media (max-width:767px){
    .input,.select,.textarea{font-size:16px;min-height:44px;}
}
.input:focus,.select:focus,.textarea:focus{
    border-color:var(--c-primary);
    box-shadow:var(--sh-focus);
}
.input::placeholder,.textarea::placeholder{color:var(--c-text-mute);}
.input:disabled,.input[readonly],.select:disabled{
    background:var(--c-bg-soft);color:var(--c-text-sub);cursor:not-allowed;
}
.textarea{min-height:84px;resize:vertical;line-height:1.55;padding-top:9px;}
/* 下拉自绘箭头（原生箭头在安卓上丑且位置不一） */
.select{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 11px center;
    padding-right:32px;
    cursor:pointer;
}

/* 表单栅格：手机 1 列 → 平板 2 列 → 桌面 3 列 */
.form-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:var(--sp-3) var(--sp-4);
}
@media (min-width:560px){ .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1024px){ .form-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
.form-grid .span-2{grid-column:span 2;}
.form-grid .span-all{grid-column:1 / -1;}
@media (max-width:559px){ .form-grid .span-2{grid-column:span 1;} }

/* 开关 */
.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;}
.switch input{position:absolute;opacity:0;width:0;height:0;}
.switch__track{
    width:42px;height:24px;flex:none;border-radius:var(--r-pill);
    background:var(--c-border-strong);position:relative;transition:background .18s;
}
.switch__track::after{
    content:"";position:absolute;top:3px;left:3px;
    width:18px;height:18px;border-radius:50%;background:#fff;
    box-shadow:var(--sh-xs);transition:transform .18s;
}
.switch input:checked + .switch__track{background:var(--c-primary);}
.switch input:checked + .switch__track::after{transform:translateX(18px);}
.switch__text{font-size:13.5px;}

/* ============================================================
   5) 工具栏 / 筛选条
   ============================================================ */
.toolbar{
    display:flex;align-items:center;gap:var(--sp-2);
    flex-wrap:wrap;
    padding:var(--sp-3);
    background:var(--c-card);
    border:1px solid var(--c-border);
    border-radius:var(--r);
    box-shadow:var(--sh-sm);
    margin-bottom:var(--sp-3);
}
.toolbar__grow{flex:1;min-width:0;}

.filters{
    display:grid;
    grid-template-columns:1fr;
    gap:var(--sp-3);
    padding:var(--sp-3);
    background:var(--c-bg-soft);
    border:1px solid var(--c-border);
    border-radius:var(--r);
    margin-bottom:var(--sp-3);
}
@media (min-width:560px){ .filters{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1024px){ .filters{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;} }
.filters__ops{display:flex;gap:8px;align-items:center;}
@media (min-width:1024px){ .filters__ops{grid-column:-2 / -1;} }
.filters__count{
    font-size:12.5px;color:var(--c-text-sub);white-space:nowrap;
    padding-bottom:9px;
}
.filters__count b{color:var(--c-primary);}

.search{
    position:relative;min-width:0;flex:1;
}
.search .input{padding-left:34px;}
.search__ico{
    position:absolute;left:11px;top:50%;transform:translateY(-50%);
    color:var(--c-text-mute);font-size:14px;pointer-events:none;
}

/* ============================================================
   6) 可搜索下拉（SearchSelect）
   ============================================================ */
.sselect{position:relative;}
/* 触发器内部：已选文本可省略、清除按钮固定右侧 */
.sselect__val{
    flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sselect__clear{
    flex:none;color:var(--c-text-mute);font-size:13px;
    padding:2px 4px;border-radius:4px;line-height:1;
}
.sselect__clear:hover{background:var(--c-bg-soft);color:var(--c-text);}
.sselect__panel{
    position:absolute;left:0;right:0;top:calc(100% + 4px);
    z-index:1300;
    background:#fff;
    border:1px solid var(--c-border-strong);
    border-radius:var(--r-sm);
    box-shadow:var(--sh-lg);
    overflow:hidden;
}
.sselect.is-up .sselect__panel{top:auto;bottom:calc(100% + 4px);}
.sselect__search{
    width:100%;border:none;border-bottom:1px solid var(--c-border);
    border-radius:0;padding:11px 12px;font-size:16px;
}
@media (min-width:768px){ .sselect__search{font-size:13.5px;} }
.sselect__search:focus{box-shadow:none;}
.sselect__list{max-height:46vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
@media (min-width:768px){ .sselect__list{max-height:260px;} }
.sselect__item{
    padding:11px 13px;font-size:13.5px;
    cursor:pointer;min-height:44px;
    display:flex;align-items:center;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sselect__item:hover,.sselect__item.is-active{background:var(--c-primary-soft);color:var(--c-primary);}
.sselect__item.is-selected{font-weight:600;color:var(--c-primary);}
.sselect__empty{padding:18px;text-align:center;font-size:13px;color:var(--c-text-mute);}
.sselect__foot{
    padding:6px 12px;font-size:12px;color:var(--c-text-mute);
    border-top:1px solid var(--c-border);background:var(--c-head);
}

/* ============================================================
   7) 表格（桌面） / 卡片（手机）
   ============================================================ */
/* 桌面表格 */
.dtable-wrap{
    overflow:auto;
    border:1px solid var(--c-border);
    border-radius:var(--r);
    background:#fff;
    box-shadow:var(--sh-sm);
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
}
.dtable{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:13px;
}
.dtable thead th{
    position:sticky;top:0;z-index:2;
    background:var(--c-head);
    color:var(--c-text-sub);
    font-weight:600;text-align:left;
    padding:11px 12px;
    border-bottom:1px solid var(--c-border);
    white-space:nowrap;
}
.dtable tbody td{
    padding:10px 12px;
    border-bottom:1px solid #f1f4f8;
    vertical-align:middle;
}
.dtable tbody tr:last-child td{border-bottom:none;}
.dtable tbody tr{transition:background .13s;}
.dtable tbody tr:nth-child(even){background:#fcfdfe;}
.dtable tbody tr:hover{background:var(--c-primary-soft);}
.dtable__num{text-align:right;font-variant-numeric:tabular-nums;}
.dtable__ell{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 2026-09-27 全站统一：复选框列 + 操作列固定右侧 */
.dtable__check{width:36px;text-align:center;padding:8px 4px !important;}
.dtable__check input[type=checkbox]{width:15px;height:15px;cursor:pointer;vertical-align:-2px;accent-color:var(--c-primary);}
th.dtable__ops,td.dtable__ops{
    position:sticky;
    right:0;
    z-index:3;
    background:#fff;
    box-shadow:-8px 0 10px -8px rgba(15,23,42,.22);
    white-space:nowrap;
    text-align:center;
}
thead th.dtable__ops{background:var(--c-head);z-index:4;}
.dtable tbody tr:nth-child(even) td.dtable__ops{background:#fcfdfe;}
.dtable tbody tr:hover td.dtable__ops{background:var(--c-primary-soft);}
/* 手机卡片复选框 */
.rec__check{flex:none;display:flex;align-items:center;padding-right:8px;}
.rec__check input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--c-primary);}
/* 批量操作条 */
.batch-bar{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap;}
.batch-info{font-size:13px;color:var(--c-text-sub);}
.batch-info b{color:var(--c-primary);}

/* 手机卡片列表 */
.cards{display:flex;flex-direction:column;gap:var(--sp-3);}
.rec{
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--r);
    box-shadow:var(--sh-sm);
    overflow:hidden;
}
.rec__head{
    display:flex;align-items:center;gap:10px;
    padding:12px 14px;
    background:var(--c-bg-soft);
    border-bottom:1px solid var(--c-border);
}
.rec__title{
    font-size:14.5px;font-weight:600;
    flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rec__body{padding:4px 14px 12px;}
.rec__row{
    display:flex;align-items:flex-start;gap:12px;
    padding:8px 0;
    border-bottom:1px dashed #f0f3f8;
    font-size:13.5px;
}
.rec__row:last-child{border-bottom:none;}
.rec__k{
    flex:none;width:84px;
    color:var(--c-text-sub);font-size:12.5px;
}
.rec__v{
    flex:1;min-width:0;word-break:break-all;
}
.rec__v .empty-val{color:var(--c-text-mute);}
.rec__ops{
    display:flex;gap:8px;
    padding:11px 14px;
    border-top:1px solid var(--c-border);
    background:var(--c-bg-soft);
}
.rec__ops .btn{flex:1;}

/* ============================================================
   8) 弹窗（桌面居中对话框 / 手机底部抽屉）
   ============================================================ */
.mask{
    position:fixed;inset:0;z-index:1000;
    background:rgba(15,23,42,.48);
    display:flex;
    align-items:flex-end;            /* 手机：贴底 */
    justify-content:center;
    padding:0;
    animation:maskIn .16s ease-out;
}
@keyframes maskIn{from{opacity:0}to{opacity:1}}

.dlg{
    width:100%;
    max-height:92dvh;
    display:flex;flex-direction:column;
    background:#fff;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:var(--sh-lg);
    animation:sheetIn .24s cubic-bezier(.4,0,.2,1);
    padding-bottom:var(--sa-bottom);
}
@keyframes sheetIn{from{transform:translateY(18px);opacity:.6}to{transform:translateY(0);opacity:1}}

@media (min-width:768px){
    .mask{align-items:center;padding:24px;}
    .dlg{
        width:auto;
        min-width:520px;
        max-width:min(900px,92vw);
        border-radius:var(--r-lg);
        max-height:min(88dvh,860px);
        animation:dlgIn .18s cubic-bezier(.4,0,.2,1);
    }
    @keyframes dlgIn{from{transform:scale(.97);opacity:.5}to{transform:scale(1);opacity:1}}
}
/* 手机上的抓取条 */
.dlg__grip{
    width:38px;height:4px;border-radius:2px;background:var(--c-border-strong);
    margin:9px auto 0;flex:none;
}
@media (min-width:768px){ .dlg__grip{display:none;} }

.dlg__head{
    flex:none;
    display:flex;align-items:center;gap:12px;
    padding:14px 18px;
    border-bottom:1px solid var(--c-border);
}
@media (min-width:768px){ .dlg__head{padding:18px 22px;} }
.dlg__title{font-size:15.5px;font-weight:600;flex:1;min-width:0;}
.dlg__x{
    width:34px;height:34px;flex:none;
    border:none;background:transparent;border-radius:var(--r-sm);
    color:var(--c-text-mute);font-size:19px;cursor:pointer;
    display:grid;place-items:center;
}
.dlg__x:hover{background:var(--c-bg-soft);color:var(--c-text);}

.dlg__body{
    flex:1;min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:18px;
}
@media (min-width:768px){ .dlg__body{padding:20px 22px;} }

.dlg__foot{
    flex:none;
    display:flex;gap:10px;
    padding:12px 18px;
    border-top:1px solid var(--c-border);
    background:var(--c-bg-soft);
}
@media (min-width:768px){ .dlg__foot{padding:14px 22px;justify-content:flex-end;} }
@media (max-width:767px){
    .dlg__foot .btn{flex:1;min-height:46px;}
}

/* 分区标题（弹窗内） */
.sect{
    font-size:12px;font-weight:600;color:var(--c-text-mute);
    letter-spacing:.6px;
    padding:14px 0 10px;
    margin-top:6px;
    border-top:1px dashed var(--c-border);
}
.sect:first-child{border-top:none;padding-top:0;margin-top:0;}

/* ============================================================
   9) 提示条 / 徽标 / 统计卡
   ============================================================ */
.note{
    display:flex;gap:9px;align-items:flex-start;
    padding:11px 14px;
    border-radius:var(--r-sm);
    font-size:13px;line-height:1.6;
    margin-bottom:var(--sp-3);
}
.note--info{background:var(--c-info-soft);border-left:3px solid #0284c7;color:#075985;}
.note--warn{background:var(--c-warn-soft);border-left:3px solid var(--c-warn);color:#92400e;}
.note--ok{background:var(--c-success-soft);border-left:3px solid var(--c-success);color:#166534;}
.note--danger{background:var(--c-danger-soft);border-left:3px solid var(--c-danger);color:#991b1b;}

.chip{
    display:inline-flex;align-items:center;gap:5px;
    padding:2px 9px;border-radius:var(--r-pill);
    font-size:12px;font-weight:500;
    background:var(--c-primary-soft);color:var(--c-primary);
    border:1px solid var(--c-primary-line);
    white-space:nowrap;
}
.chip--ok{background:var(--c-success-soft);color:#15803d;border-color:var(--c-success-line);}
.chip--warn{background:var(--c-warn-soft);color:#b45309;border-color:var(--c-warn-line);}
.chip--danger{background:var(--c-danger-soft);color:#b91c1c;border-color:var(--c-danger-line);}
.chip--mute{background:var(--c-bg-soft);color:var(--c-text-sub);border-color:var(--c-border);}

.stats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--sp-3);
    margin-bottom:var(--sp-4);
}
@media (min-width:768px){ .stats{grid-template-columns:repeat(4,minmax(0,1fr));} }
.stat{
    background:#fff;border:1px solid var(--c-border);
    border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-sm);
}
.stat__lab{font-size:12.5px;color:var(--c-text-sub);}
.stat__val{
    font-size:22px;font-weight:700;margin-top:4px;
    font-variant-numeric:tabular-nums;
    color:var(--c-primary);
}
.stat__val small{font-size:12.5px;font-weight:600;margin-left:3px;}
.stat__val.is-money{color:var(--c-warn);}

/* ============================================================
   10) 空态 / 加载
   ============================================================ */
.empty{
    padding:48px 20px;
    text-align:center;
    color:var(--c-text-mute);
}
.empty__ico{font-size:34px;opacity:.45;margin-bottom:10px;}
.empty__txt{font-size:13.5px;}

.loading{
    display:flex;align-items:center;justify-content:center;gap:9px;
    padding:40px 20px;
    color:var(--c-text-mute);font-size:13.5px;
}
.spin{
    width:16px;height:16px;flex:none;
    border:2px solid var(--c-border-strong);
    border-top-color:var(--c-primary);
    border-radius:50%;
    animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   11) Toast（全局提示）
   ============================================================ */
.toasts{
    position:fixed;left:50%;bottom:calc(28px + var(--sa-bottom));
    transform:translateX(-50%);
    z-index:3000;
    display:flex;flex-direction:column;gap:8px;
    align-items:center;
    pointer-events:none;
    width:max-content;max-width:calc(100vw - 32px);
}
.toast{
    display:flex;align-items:center;gap:9px;
    padding:11px 18px;
    border-radius:var(--r-pill);
    background:#1f2937;color:#fff;
    font-size:13.5px;
    box-shadow:var(--sh-lg);
    animation:tIn .22s cubic-bezier(.4,0,.2,1);
}
@keyframes tIn{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.toast--ok{background:#15803d;}
.toast--err{background:#b91c1c;}
.toast--warn{background:#b45309;}

/* ============================================================
   12) 登录页
   ============================================================ */
.login{
    min-height:var(--dvh);
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    padding-top:calc(20px + var(--sa-top));
    padding-bottom:calc(20px + var(--sa-bottom));
    background:
        radial-gradient(1000px 520px at 12% -10%,rgba(59,130,246,.16),transparent 62%),
        radial-gradient(820px 460px at 100% 108%,rgba(37,99,235,.14),transparent 58%),
        linear-gradient(160deg,#f7f9fc 0%,#eef2f9 100%);
}
.login__card{
    width:100%;max-width:392px;
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--r-lg);
    box-shadow:0 20px 52px rgba(15,23,42,.13);
    padding:30px 26px 26px;
}
@media (min-width:768px){ .login__card{padding:36px 34px 30px;} }
.login__logo{
    width:52px;height:52px;margin:0 auto 16px;
    border-radius:15px;
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    display:grid;place-items:center;
    font-size:24px;color:#fff;
    box-shadow:0 8px 22px rgba(37,99,235,.34);
}
.login__title{font-size:19px;font-weight:600;text-align:center;}
.login__sub{
    font-size:12.5px;color:var(--c-text-mute);
    text-align:center;margin:6px 0 24px;
}
.login__form{display:flex;flex-direction:column;gap:15px;}
.login__foot{
    margin-top:22px;padding-top:16px;
    border-top:1px solid var(--c-border);
    text-align:center;font-size:12px;color:var(--c-text-mute);
    line-height:1.7;
}
.login__row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.login__btn{min-height:44px;font-size:14.5px;font-weight:600;}

/* ============================================================
   13) 工具类
   ============================================================ */
.mt-2{margin-top:8px;} .mt-3{margin-top:12px;} .mt-4{margin-top:16px;}
.mb-2{margin-bottom:8px;} .mb-3{margin-bottom:12px;} .mb-4{margin-bottom:16px;}
.row{display:flex;align-items:center;gap:8px;}
.row--wrap{flex-wrap:wrap;}
.row--end{margin-left:auto;}
.grow{flex:1;min-width:0;}
.muted{color:var(--c-text-sub);}
.mute{color:var(--c-text-mute);}
.small{font-size:12.5px;}
.tnum{font-variant-numeric:tabular-nums;}
.bold{font-weight:600;}
.center{text-align:center;}
.nowrap{white-space:nowrap;}
.break{word-break:break-all;}
.gap-3{gap:12px;}
.no-print{}

/* 长内容横向滚动容器 */
.scroll-x{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
}

/* 只给屏幕阅读器 */
.sr-only{
    position:absolute;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Vue 进入过渡（列表/弹窗内容） */
.fade-enter-active,.fade-leave-active{transition:opacity .16s;}
.fade-enter-from,.fade-leave-to{opacity:0;}

/* ============ 顶栏天气条（2026-09-25） ============ */
.wx{
    display:inline-flex;align-items:center;gap:6px;
    padding:4px 12px;border-radius:999px;
    background:var(--c-bg-soft,#f4f5f7);
    border:1px solid var(--c-border,#e5e7eb);
    font-size:13px;line-height:1.4;white-space:nowrap;
    cursor:default;user-select:none;
}
.wx__ico{font-size:16px;line-height:1;}
.wx__temp{font-weight:700;color:var(--c-text,#1f2937);}
.wx__txt{color:var(--c-text-mute,#6b7280);}
@media (max-width:767px){
    .wx{padding:3px 9px;font-size:12px;}
    .wx__ico{font-size:14px;}
}