/* ============================================================
   火星糖果盒 · 控制台统一 UI（candy-ui.css）
   ------------------------------------------------------------
   为什么存在：此前每个页面各自内联一份 ~200 行 CSS，主色调虽然都抄了同一组
   变量，但组件类名与实现已经分叉（首页用 .glass-card + .stat-value +
   .stat-track，云文件页用 .stat-card + .stat-num + .stat-icon-wrap），
   改一处要同步四五个文件，且必然漏。这里收敛成唯一真源。

   用法（v3.9.5 起全站自动生效）：
     include.html 的 header 片段里已统一引入，普通页面不用再写 <link>；
     不引用 header 片段的独立页（login / index / lock / error 等）自己加：
     <link th:href="@{/css/candy-ui.css?v=20260915b}" rel="stylesheet"/>
   页面只保留自己特有的部分，公共组件一律用本文件的类。

   为什么样式长这样：以「天气实况」页（/weather/webView）为基准 —— 白卡片 +
   1px 粉描边 + 20px 圆角 + 粉色柔光投影，标题粉色、正文灰、数字等宽对齐。

   组件类索引：
     布局      .wrapper-content  .container-div  .candy-section
     卡片      .candy-card  .stat-card(.stat-{blue,green,orange,pink,purple,teal})
               .stat-header  .stat-label  .stat-icon-wrap  .stat-icon-box
               .stat-num  .stat-value  .stat-sub
     业务卡    .focus-card  .card-head  .card-title  .card-sub  .card-foot
               .kpi-card  .kpi-value  .kpi-label  .sec-title  .hint-strong
     横幅      .candy-hero  .hero-content  .hero-title  .hero-desc  .hero-meta
               .hero-actions  .version-tag
     面板      .chart-panel  .panel-header  .chart-tag  .chart-box
     进度      .progress-header  .progress-label  .progress-percent
               .progress-track  .progress-fill(level-warn/level-danger)  .progress-foot
               .stat-track  .stat-track-fill
     统计行    .stat-line(.k/.v)  .row-equal  .stat-head-block  .panel-foot  .card-foot
     键值网格  .kv-grid  .kv-item  .kv-key  .kv-val(.mono)
     条形构成  .bar-list  .bar-item  .bar-head  .bar-track  .bar-fill  .bar-empty
     标签      .badge-candy(.badge-warn/.badge-danger/.badge-info)  .meta-chip
               .candy-tag(.tag-done/.tag-fail/.tag-safe/.tag-enc/.tag-warn/.tag-info)
               .candy-pill(.pill-strong)
     表单      .candy-select  .candy-code（等宽日志/路径块）  .candy-meta  .candy-grow
     按钮      .btn-candy(.btn-search/.btn-reset/.btn-lg/:disabled)  .btn-refresh
     工具栏    .candy-toolbar  .toolbar-left  .toolbar-right  .toolbar-title
     文件卡    .file-item  .thumb-box(.thumb-{img,pdf,doc,xls,zip,video,default})
               .file-name  .file-meta  .enc-badge
     空态      .empty-state  .empty-card  .empty-title  .empty-desc  .chart-empty
     提示      .err-tip  .foot-note  .skeleton  .spin-candy  .num（等宽数字）
     认证页    body.signin 的 signinpanel / form-control / label.error / imgcode
     弹窗      .layui-layer 系列糖果皮肤
     站点皮肤  .ibox / .box / search-collapse / bootstrap-table / 表单控件
     移动端    768px / 375px 断点
   ============================================================ */

/* ========== 设计 token（唯一真源） ========== */
:root {
    --bg: #fff8fb;
    --card: #ffffff;
    --border: #ffd6e3;
    --text: #4a4a4a;
    --text-secondary: #888888;
    --pink-main: #ff9eb5;
    --pink-deep: #ff6b9d;
    --pink-light: #ffe4ec;
    --pink-soft: #fff5f7;
    --shadow: 0 8px 32px rgba(255, 158, 181, 0.15);
    --shadow-hover: 0 12px 40px rgba(255, 107, 157, 0.2);
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 12px;
    --ok: #22C55E;
    --warn: #F59E0B;
    --danger: #EF4444;
    --mono: "SF Mono", Menlo, Consolas, "Courier New", monospace;
}

/* ========== 动画 ========== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========== 布局 ========== */
body.gray-bg {
    background: var(--bg) !important;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    overscroll-behavior-y: none;
}
/* 等宽数字：统计类数字一律等宽对齐（跨页面高频复用，收进真源） */
.num { font-variant-numeric: tabular-nums; }
.wrapper-content { padding: 20px; position: relative; z-index: 1; }
.container-div   { padding: 0 4px; position: relative; }

/* ========== 卡片基类 ========== */
.candy-card,
.stat-card,
.chart-panel,
.focus-card,
.kpi-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.5s ease backwards;
    transition: all 0.35s ease;
}

/* ========== 统计卡片 ========== */
.stat-card { padding: 22px; }
.stat-card:hover,
.candy-card:hover,
.focus-card:hover,
.kpi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.stat-row { margin-bottom: 24px; }

.stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.stat-icon-wrap,
.stat-icon-box {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    background: linear-gradient(135deg, #FFF1F5, #FFE4EC);
    color: var(--pink-deep);
    flex-shrink: 0;
}
.stat-card:hover .stat-icon-wrap,
.stat-card:hover .stat-icon-box { transform: scale(1.1); }

.stat-num,
.stat-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
    display: block;
    line-height: 1.2;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}
.stat-sub {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* 卡片配色（图标底色） */
.stat-blue   .stat-icon-wrap,   .stat-blue   .stat-icon-box { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); color: #4A90E2; }
.stat-green  .stat-icon-wrap,   .stat-green  .stat-icon-box { background: linear-gradient(135deg, #F0FDF4, #DCFCE7); color: #22C55E; }
.stat-orange .stat-icon-wrap,   .stat-orange .stat-icon-box { background: linear-gradient(135deg, #FEFCE8, #FEF9C3); color: #F59E0B; }
.stat-pink   .stat-icon-wrap,   .stat-pink   .stat-icon-box { background: linear-gradient(135deg, #FFF1F5, #FFE4EC); color: #FF6B9D; }
.stat-purple .stat-icon-wrap,   .stat-purple .stat-icon-box { background: linear-gradient(135deg, #F5F3FF, #EDE9FE); color: #8B5CF6; }
.stat-teal   .stat-icon-wrap,   .stat-teal   .stat-icon-box { background: linear-gradient(135deg, #F0FDFA, #CCFBF1); color: #14B8A6; }

/* ========== 业务卡片（focus / 云文件等共用） ========== */
.focus-card { padding: 18px 20px; margin-bottom: 20px; animation-duration: 0.45s; }
.kpi-card {
    padding: 16px 12px;
    margin-bottom: 20px;
    text-align: center;
}
.kpi-value {
    font-size: 21px;
    font-weight: 700;
    color: var(--pink-deep);
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}
.kpi-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-top: 4px;
}
.card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pink-deep);
}
.card-title i { margin-right: 6px; }
.card-sub {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
}
/* 卡片底部说明：配合 .row-equal 会沉到卡片底部 */
.card-foot {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.card-foot i { margin-right: 4px; }
.card-foot .hint-strong,
.hint-strong { color: var(--pink-deep); font-weight: 600; }
.sec-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 4px 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sec-title i { color: var(--pink-main); }
/* 图表容器固定高度（ECharts 需要显式高度） */
.h-320 { height: 320px; }

/* ========== 横幅 Hero ========== */
.candy-hero {
    background: linear-gradient(135deg, #FFF4F8 0%, #FFFFFF 45%, #FFF9FB 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.5s ease backwards;
}
.candy-hero::after {
    content: '';
    position: absolute;
    top: -80px; right: -60px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,158,181,0.18), rgba(255,107,157,0.05));
    pointer-events: none;
}
.hero-content { position: relative; z-index: 1; }
.hero-title {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.hero-title span { color: var(--pink-deep); }
.hero-title i { color: var(--pink-deep); }
.hero-desc {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    font-weight: 600;
    max-width: 600px;
}
.hero-desc strong {
    color: var(--text);
    background: linear-gradient(transparent 60%, var(--pink-light) 60%);
    padding: 0 2px;
}
.hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.hero-meta i { color: var(--pink-main); margin-right: 4px; }
.hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-banner { padding: 36px 32px; margin-bottom: 24px; }
.version-tag {
    font-size: 12px;
    font-weight: 800;
    color: var(--pink-deep);
    background: #fff;
    padding: 5px 12px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid var(--border);
    letter-spacing: 0.5px;
}

/* ========== 面板 ========== */
.chart-panel { padding: 24px; margin-bottom: 24px; }
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.panel-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.panel-header h5 i { color: var(--pink-main); font-size: 18px; }
.chart-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--pink-deep);
    background: var(--pink-light);
    padding: 5px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    animation: bounce 2s ease-in-out infinite;
}
.chart-box { width: 100%; height: 300px; position: relative; }
/* .chart-box 与 .h-320 同优先级时会按源序打架，故用复合选择器锁定 320 高度 */
.chart-box.h-320 { height: 320px; }

/* ========== 进度条 ========== */
.progress-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.progress-label { color: var(--text-secondary); font-weight: 600; }
.progress-percent {
    color: var(--pink-deep);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}
.progress-track {
    width: 100%;
    height: 16px;
    border-radius: 10px;
    background: var(--pink-light);
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: inset 0 2px 6px rgba(255, 133, 162, 0.12);
}
.progress-fill {
    height: 100%;
    width: 0;                     /* 初值 0：不声明宽度时块级元素会铺满轨道，进度条会假满格 */
    border-radius: 10px;
    background: linear-gradient(135deg, var(--pink-main), var(--pink-deep));
    transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    background-size: 200% 100%;
    animation: shimmer 2.4s linear infinite;
}
.progress-fill.level-warn   { background: linear-gradient(135deg, #FCD34D, var(--warn)); }
.progress-fill.level-danger { background: linear-gradient(135deg, #FCA5A5, var(--danger)); }
.progress-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
}

/* 细进度条（卡片内） */
.stat-track {
    height: 8px;
    background: var(--pink-light);
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid var(--border);
    position: relative;
    z-index: 1;
}
.stat-track-fill {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--pink-main), var(--pink-deep));
    transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== 等高行：同一行内卡片高度对齐 ==========
   问题：Bootstrap 的 col-* 是浮动列，卡片各按自己内容撑高 —— 同一行里
   一张卡有 4 行明细、另一张 3 行，底部就参差不齐。
   用法：把 .row 换成 .row .row-equal，列内卡片会自动拉伸到本行最高者。
   卡片内部若想「底部元素贴底」，给该元素加 .card-foot。 */
.row-equal { display: flex; flex-wrap: wrap; }
/* flex:0 0 auto 保留 Bootstrap 用 width 定义的列宽，避免被 flex 收缩 */
.row-equal > [class*="col-"] { display: flex; align-items: stretch; flex: 0 0 auto; }
.row-equal > [class*="col-"] > .stat-card,
.row-equal > [class*="col-"] > .chart-panel,
.row-equal > [class*="col-"] > .candy-card,
.row-equal > [class*="col-"] > .focus-card,
.row-equal > [class*="col-"] > .kpi-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.row-equal .card-foot { margin-top: auto; }

/* 卡片顶部「大数字 + 副标题」区块：固定最小高度，保证多张卡从同一基线开始排明细行 */
.stat-head-block { min-height: 64px; }
.stat-num.has-unit { font-size: 22px; }
.stat-num.has-unit small {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0;
}

/* 明细行统一最小高度：跨卡片的第 N 行落在同一水平线上 */
.stat-line { min-height: 42px; }

/* 面板底部汇总行（贴上边一条虚线，配合 .card-foot 沉到卡片底部） */
.panel-foot {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.panel-foot b { color: var(--pink-deep); font-variant-numeric: tabular-nums; }

/* 明细行数不足时，让条形列表把剩余高度摊开，不留突兀空白 */
.bar-list.fill { flex: 1 1 auto; justify-content: flex-start; }

/* ========== 统计行 ========== */
.stat-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 13px;
    border-bottom: 1px dashed var(--border);
}
.stat-line:last-child { border-bottom: none; }
.stat-line .k { color: var(--text-secondary); font-weight: 600; }
.stat-line .v {
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ========== 键值网格 ========== */
.kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.kv-item {
    background: linear-gradient(135deg, #FFF8FB, #FFFDFE);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    transition: all 0.3s ease;
}
.kv-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(255, 107, 157, 0.12); }
.kv-key {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.4px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.kv-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    word-break: break-all;
    font-variant-numeric: tabular-nums;
}
.kv-val.mono { font-family: var(--mono); font-size: 12.5px; }

/* ========== 条形构成 ========== */
.bar-list { display: flex; flex-direction: column; gap: 16px; }
.bar-item { position: relative; }
.bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.bar-head .bar-name { display: flex; align-items: center; gap: 7px; }
.bar-head .bar-name i { color: var(--pink-main); font-size: 12px; }
.bar-head .bar-val { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-weight: 700; }
.bar-track { height: 10px; border-radius: 7px; background: var(--pink-light); overflow: hidden; }
.bar-fill {
    height: 100%;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--pink-main), var(--pink-deep));
    transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.bar-empty {
    text-align: center;
    padding: 28px 12px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}
.bar-empty i { display: block; font-size: 28px; margin-bottom: 10px; color: var(--pink-main); opacity: 0.55; }

/* ========== 标签 ========== */.badge-candy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.3px;
    white-space: nowrap;
    border: 1px solid transparent;
    background: #F0FDF4;
    color: #16A34A;
    border-color: #BBF7D0;
}
.badge-candy.badge-warn   { background: #FFFBEB; color: #D97706; border-color: #FDE68A; }
.badge-candy.badge-danger { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.badge-candy.badge-info   { background: #FFF1F5; color: #FF6B9D; border-color: var(--border); }

/* 元信息小胶囊（工具栏 / 卡片副标题用） */
.meta-chip {
    display: inline-flex;
    align-items: center;
    background: var(--pink-light);
    color: var(--pink-deep);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    margin-left: 8px;
    margin-top: 4px;
    white-space: nowrap;
}
.meta-chip i { margin-right: 4px; }

/* 状态标签（业务页共用） */
.candy-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    background: var(--pink-light);
    color: var(--pink-deep);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.candy-tag.tag-done,
.candy-tag.tag-safe { background: #F0FDF4; color: #16A34A; border-color: #BBF7D0; }
.candy-tag.tag-fail { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.candy-tag.tag-warn { background: #FFFBEB; color: #D97706; border-color: #FDE68A; }
.candy-tag.tag-enc  { background: #F5F3FF; color: #8B5CF6; border-color: #EDE9FE; }
.candy-tag.tag-info { background: #EFF6FF; color: #4A90E2; border-color: #DBEAFE; }
.candy-tag.tag-muted { background: var(--pink-soft); color: var(--text-secondary); border-color: var(--border); font-weight: 600; }

/* 状态胶囊（比 .candy-tag 更圆、更轻，用于列表行内状态） */
.candy-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    line-height: 18px;
    padding: 2px 12px;
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--text-secondary);
    background: var(--pink-soft);
    white-space: nowrap;
}
.candy-pill.pill-strong {
    color: var(--pink-deep);
    background: var(--pink-light);
    font-weight: 700;
}

/* ========== 表单控件（页内筛选下拉 / 输入） ========== */
.candy-select {
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    padding: 0 10px;
    max-width: 260px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}
.candy-select:focus { border-color: var(--pink-main); box-shadow: 0 0 0 3px rgba(255, 158, 181, 0.18); }

/* ========== 等宽块（日志 / 路径 / 证据） ========== */
.candy-code {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-secondary);
    background: #FBFBFB;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    white-space: pre-wrap;
    word-break: break-all;
    text-align: left;
}

/* 小工具类 */
.candy-meta { font-size: 11px; color: var(--text-secondary); }
.candy-grow { flex: 1 1 auto; min-width: 0; }

/* ========== 按钮 ========== */
.btn-candy {
    border-radius: var(--radius-sm) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 6px 14px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer;
    letter-spacing: 0.5px;
}
.btn-candy:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
/* 禁用态：压掉 hover 上浮，避免 disabled 期间按钮还会“跳” */
.btn-candy:disabled,
.btn-candy.disabled {
    background: var(--pink-light) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
}
.btn-search {
    background: linear-gradient(135deg, var(--pink-main), var(--pink-deep)) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
}
.btn-search:hover { box-shadow: 0 10px 28px rgba(255, 107, 157, 0.45); }
.btn-reset {
    background: linear-gradient(135deg, #FFF9C4, #FFE4B5) !important;
    color: #D97706 !important;
    box-shadow: 0 4px 12px rgba(255, 249, 196, 0.3);
}
.btn-candy.btn-lg { font-size: 13px !important; padding: 9px 18px !important; border-radius: var(--radius-md) !important; }
/* 白底描边刷新按钮 */
.btn-refresh {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    color: var(--pink-deep) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 5px 14px !important;
    transition: all 0.25s ease;
}
.btn-refresh:hover { background: var(--pink-light) !important; box-shadow: 0 4px 14px rgba(255, 107, 157, 0.2); }

/* ========== 工具栏（focus / 云文件页共用） ========== */
.candy-toolbar,
.focus-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 12px 18px;
    margin-bottom: 20px;
}
.toolbar-left, .toolbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.toolbar-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pink-deep);
    margin-right: 14px;
}
.toolbar-title i { margin-right: 6px; }

/* ========== 文件卡（云文件页共用） ========== */
.file-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}
.file-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.thumb-box {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    transition: all 0.3s ease;
}
.file-item:hover .thumb-box { transform: scale(1.06); box-shadow: var(--shadow); }
.thumb-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-box i { font-size: 24px; transition: all 0.3s ease; }
.thumb-box.thumb-img     { background: linear-gradient(135deg, #e0f2fe, #f0f9ff); } .thumb-box.thumb-img i     { color: #3b82f6; }
.thumb-box.thumb-pdf     { background: linear-gradient(135deg, #fff7ed, #ffedd5); } .thumb-box.thumb-pdf i     { color: #f97316; }
.thumb-box.thumb-doc     { background: linear-gradient(135deg, #f5f3ff, #ede9fe); } .thumb-box.thumb-doc i     { color: #8b5cf6; }
.thumb-box.thumb-xls     { background: linear-gradient(135deg, #f0fdf4, #dcfce7); } .thumb-box.thumb-xls i     { color: #22c55e; }
.thumb-box.thumb-zip     { background: linear-gradient(135deg, #fefce8, #fef9c3); } .thumb-box.thumb-zip i     { color: #eab308; }
.thumb-box.thumb-video   { background: linear-gradient(135deg, #faf5ff, #f3e8ff); } .thumb-box.thumb-video i   { color: #a855f7; }
.thumb-box.thumb-default { background: linear-gradient(135deg, #f8fafc, #f1f5f9); } .thumb-box.thumb-default i { color: #94a3b8; }
.file-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.file-meta {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.file-meta span { display: inline-flex; align-items: center; gap: 4px; }
.enc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #8B5CF6;
    background: #F5F3FF;
    border: 1px solid #EDE9FE;
    border-radius: var(--radius-sm);
    padding: 3px 9px;
}

/* ========== 空态 ========== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    animation: fadeInUp 0.5s ease backwards;
}
.empty-state i { display: block; margin-bottom: 12px; font-size: 48px; color: var(--pink-main); }
.empty-state p { font-size: 14px; font-weight: 600; }
.empty-card { text-align: center; padding: 60px 24px; }
.empty-card > i { font-size: 46px; color: var(--pink-main); }
.empty-title { font-size: 18px; font-weight: 700; color: var(--pink-deep); margin: 14px 0 8px; }
.empty-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.8; }
.chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 13px;
}
.chart-empty i { margin-right: 6px; }

/* ========== 提示 / 骨架 ========== */
.err-tip {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #B45309;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    line-height: 1.6;
}
.err-tip i { margin-top: 2px; }
/* 错误条里的操作按钮（如「重试」）统一靠右 */
.err-tip .btn { margin: 0 0 0 auto; }
.foot-note {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.8;
    padding: 4px 10px 24px;
}
.foot-note i { margin-right: 4px; color: var(--pink-main); }
.foot-note b { color: var(--pink-deep); font-weight: 700; }
.skeleton {
    display: inline-block;
    min-width: 54px;
    height: 1em;
    border-radius: 6px;
    background: linear-gradient(90deg, #FFE4EC 25%, #FFF5F8 50%, #FFE4EC 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    vertical-align: middle;
}
.spin-candy { display: inline-block; animation: spin 0.9s linear infinite; }
/* JS 模板里用的转圈图标类（按钮内联 loading 图标） */
.btn-spin { display: inline-block; animation: spin 1.2s linear infinite; margin-right: 4px; }

/* ========== layui 弹窗糖果皮肤（全站共用） ========== */
.layui-layer {
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 8px 32px rgba(255, 133, 162, 0.25) !important;
    border: 2px solid var(--border) !important;
    overflow: hidden !important;
    animation: fadeInUp 0.4s ease !important;
}
.layui-layer-title {
    background: linear-gradient(135deg, #FFB6C1, #FF85A2) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 14px 20px !important;
    border-bottom: none !important;
    letter-spacing: 1px;
    /* layer.css 基线是 height/line-height:50px + padding 0 81px 0 16px，
       与上面的内边距叠加会把标题撑高，这里复位 */
    height: auto !important;
    line-height: 1.4 !important;
}
.layui-layer-content {
    font-size: 14px !important;
    color: #8B5A6B !important;
    font-weight: 600 !important;
    padding: 24px !important;
    line-height: 1.6 !important;
    background: var(--pink-soft) !important;
}
.layui-layer-btn {
    padding: 0 20px 20px !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    background: var(--pink-soft) !important;
    border-top: 1px dashed var(--border) !important;
}
.layui-layer-btn a {
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 10px 24px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    height: auto !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}
.layui-layer-btn .layui-layer-btn0,
.layui-layer-btn0 {
    background: linear-gradient(135deg, #FF85A2, #FFB6C1) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(255, 133, 162, 0.35) !important;
}
.layui-layer-btn .layui-layer-btn0:hover,
.layui-layer-btn0:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255, 133, 162, 0.45) !important; }
.layui-layer-btn .layui-layer-btn1,
.layui-layer-btn1 {
    background: linear-gradient(135deg, #FFE4B5, #FFD1DC) !important;
    color: #8B5A6B !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.layui-layer-btn .layui-layer-btn1:hover,
.layui-layer-btn1:hover { transform: translateY(-2px); }
.layui-layer-ico { display: none !important; }
.layui-layer-setwin .layui-layer-close { color: #fff !important; }
.layui-layer-msg,
.layui-layer-hui {
    border-radius: 16px !important;
    border: 2px solid #fff !important;
    box-shadow: 0 8px 32px rgba(255, 133, 162, 0.2) !important;
    background: #fff !important;
    color: #8B5A6B !important;
    font-weight: 700 !important;
    padding: 12px 20px !important;
}
.layui-layer-hui { background: linear-gradient(135deg, #FFB6C1, #FF85A2) !important; }
.layui-layer-hui .layui-layer-content {
    color: #fff !important;
    background: transparent !important;
    padding: 12px 24px !important;
}
.layui-layer-prompt .layui-layer-title { border-radius: 18px 18px 0 0 !important; }
.layui-layer-prompt .layui-layer-content { background: var(--pink-soft) !important; padding: 20px !important; }
.layui-layer-input {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 9px 12px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    outline: none !important;
}
.layui-layer-input:focus { border-color: var(--pink-main) !important; box-shadow: 0 0 0 3px rgba(255, 158, 181, 0.18) !important; }

/* ========== 站点皮肤：H+ 组件（RuoYi 标准页统一到糖果风） ========== */
/* 面板 .ibox / .box */
.ibox,
.box {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    background: var(--card);
}
.ibox-title,
.box-header {
    background: linear-gradient(135deg, #FFF8FB, #FFFFFF);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    color: var(--text);
    font-weight: 700;
}
.ibox-title h5,
.box-title { font-weight: 700; color: var(--text); }
.ibox-title h5 i,
.box-title i { color: var(--pink-main); margin-right: 5px; }
.ibox-content { background: var(--card); border-color: var(--border); }
.ibox-tools a { color: var(--text-secondary); }
.ibox-tools a:hover { color: var(--pink-deep); }

/* 查询条件区（.search-collapse + .select-list） */
.search-collapse {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 14px 18px 6px;
    margin-bottom: 16px;
}
.search-collapse .select-list ul { margin: 0; padding: 0; list-style: none; }
.search-collapse .select-list li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 18px 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.search-collapse .select-list input,
.search-collapse .select-list select { min-width: 150px; }

/* 表单控件 */
.gray-bg .form-control,
.search-collapse .form-control {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: none;
    color: var(--text);
    font-weight: 600;
    transition: all 0.25s ease;
}
.gray-bg .form-control:focus,
.search-collapse .form-control:focus {
    border-color: var(--pink-main);
    box-shadow: 0 0 0 3px rgba(255, 158, 181, 0.18);
}
.gray-bg .btn {
    border-radius: var(--radius-sm);
    font-weight: 700;
    transition: all 0.25s ease;
}
.gray-bg .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.search-collapse .btn-primary {
    background: linear-gradient(135deg, var(--pink-main), var(--pink-deep));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
}
.search-collapse .btn-primary:hover { background: linear-gradient(135deg, #FF8FA8, #FF5C93); border-color: transparent; }

/* bootstrap-table 表格皮肤 */
.bootstrap-table .table thead th {
    background: linear-gradient(135deg, #FFF8FB, #FFF1F5);
    color: var(--text);
    font-weight: 700;
    border-bottom: 1px solid var(--border);
}
.bootstrap-table .table tbody td { border-top: 1px solid #FFF1F5; color: var(--text); }
.bootstrap-table .table-hover > tbody > tr:hover { background: var(--pink-soft); }
.bootstrap-table .fixed-table-toolbar,
.bootstrap-table .fixed-table-pagination { font-weight: 600; }
.bootstrap-table .pagination > .active > a,
.bootstrap-table .pagination > .active > span {
    background: linear-gradient(135deg, var(--pink-main), var(--pink-deep));
    border-color: transparent;
    color: #fff;
}
.bootstrap-table .pagination > li > a { color: var(--pink-deep); border-radius: 8px; margin: 0 3px; }

/* 分页（独立 .pagination 场景） */
.pagination > .active > a,
.pagination > .active > span {
    background: linear-gradient(135deg, var(--pink-main), var(--pink-deep));
    border-color: transparent;
    color: #fff;
}

/* ========== 认证页共用（登录 / 注册 / 锁屏：body.signin / body.lockscreen） ==========
   login.min.css 里 H+ 的照片底会被这里覆盖成糖果底；校验提示与验证码在
   login.html 与 register.html 各写过一份，收敛到这里。 */
body.signin {
    background: var(--bg) !important;
    color: var(--text);
    overscroll-behavior-y: none;
}
body.signin label.error {
    position: inherit !important;
    display: block;
    margin: -14px 0 12px;
    color: var(--pink-deep) !important;
    font-size: 12px;
    font-weight: 700;
}
body.signin .signinpanel {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 28px;
    margin: 8% auto;
    max-width: 960px;
}
body.signin .form-control {
    height: 48px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--pink-soft);
    color: var(--text);
    font-weight: 600;
    box-shadow: none;
}
body.signin .form-control:focus {
    border-color: var(--pink-main);
    background: var(--card);
    box-shadow: 0 0 0 3px rgba(255, 158, 181, 0.18);
}
/* 验证码图（login / register 共用，高度由页面自己定） */
body.signin .imgcode {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--card);
    padding: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}
body.signin .imgcode:hover { border-color: var(--pink-main); box-shadow: 0 4px 12px rgba(255, 107, 157, 0.22); }

/* ========== 移动端 ========== */
@media (max-width: 768px) {
    .wrapper-content { padding: 12px !important; }
    .container-div { padding: 0 !important; }
    .candy-card, .stat-card, .chart-panel, .focus-card, .kpi-card, .candy-hero { padding: 18px; border-radius: 16px; }
    .candy-toolbar, .focus-toolbar { padding: 10px 14px; border-radius: 16px; }

    .stat-row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .stat-row::-webkit-scrollbar { display: none; }
    .stat-row > [class*="col-"] { flex: 0 0 auto; width: 240px; padding: 0; }
    .stat-num, .stat-value { font-size: 22px; }
    .stat-icon-wrap, .stat-icon-box { width: 38px; height: 38px; font-size: 15px; border-radius: var(--radius-sm); }

    .kv-grid { grid-template-columns: 1fr; }
    .chart-box { height: 240px; }
    .h-320, .chart-box.h-320 { height: 260px; }
    .panel-header { flex-wrap: wrap; gap: 10px; }
    .panel-header h5 { font-size: 14px; }
    .hero-banner { padding: 24px 20px; }
    .hero-title { font-size: 20px; }
    .thumb-box { width: 48px; height: 48px; border-radius: var(--radius-sm); }
    .thumb-box i { font-size: 20px; }
    .file-name { font-size: 13px; }
}
@media (max-width: 375px) {
    .stat-row > [class*="col-"] { width: 210px; }
    .chart-box { height: 200px; }
    .thumb-box { width: 44px; height: 44px; }
}

/* ========== 控制台外壳（index.html / index-topnav.html 共用） ==========
   框架布局类（.navbar-static-side / .content-tabs / .page-tabs / .RuoYi_iframe /
   .fixed-sidebar）的尺寸与结构一律由 style.min.css 决定，这里只覆盖**颜色**，
   并且前景背景成组替换（浅底配深字），避免只换一半导致看不清。
   原先两个框架页各写一份（13 条逐字相同），收进真源后改一处两个外壳同时生效。 */
body.skin-rabbit.theme-rabbit { background: var(--bg) !important; }
body.skin-rabbit.theme-rabbit .navbar-static-side {
    background: var(--card) !important;
    border-right: 1px solid var(--border) !important;
}
body.skin-rabbit.theme-rabbit .navbar {
    background: linear-gradient(135deg, var(--pink-main), var(--pink-deep)) !important;
    box-shadow: var(--shadow) !important;
}
body.skin-rabbit.theme-rabbit .logo {
    background: linear-gradient(135deg, var(--pink-deep), var(--pink-main)) !important;
}
/* 框架 style.min.css 把侧栏与顶栏链接钉成 #8B5A6B!important / #fff，浅底侧栏会看不清，
   故统一顶成 --text（顶栏深粉渐变 + 深字，对比度 3.1~4.6:1，比原来 1.95:1 好） */
body.skin-rabbit.theme-rabbit .nav > li > a,
.user-panel .pull-left.info p,
.user-panel .pull-left.info a,
.navbar-top-links .hidden-xs { color: var(--text) !important; }

/* 页签栏（框架默认 #fafafa 底 + #23508e 蓝选中） */
.content-tabs { background: var(--card); border-bottom: 1px solid var(--border); }
.content-tabs button { background: var(--card); color: var(--text-secondary); }
.content-tabs .roll-left { border-right: 1px solid var(--border); }
.content-tabs .roll-right { border-left: 1px solid var(--border); }
.content-tabs .roll-nav { color: var(--text-secondary); }
.content-tabs .roll-nav:hover { background: var(--pink-soft); color: var(--pink-deep); }
.page-tabs a { color: var(--text-secondary); border-right: 1px solid var(--border); }
.page-tabs a:hover,
.page-tabs a.active:hover { background: var(--pink-light); color: var(--pink-deep); }
.page-tabs a.active {
    background: var(--pink-light);
    color: var(--pink-deep);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--pink-deep);
}