/* ===================================================================
   云枢付费社区空间 · 独立后台（ThinkPHP 8）
   三栏布局：固定侧栏 + 顶部标题栏 + 栅格看板
   视觉：浅渐变底色 + 玻璃拟态圆角面板
   只重绘既有类名，模板结构不动
   =================================================================== */
:root{
    --text:#16212f; --muted:#7b8a9f; --label:#3f4a5c;
    --brand:#1aaf78; --brand-deep:#0f8f60; --brand-lite:#2fd79a; --brand-soft:rgba(26,175,120,.14);
    --blue:#3a8ff0; --violet:#8b6cf0; --amber:#e09a2b; --danger:#d2453e;
    --line:rgba(255,255,255,.85); --line-soft:rgba(24,52,84,.08);
    --glass:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.9);
    --radius:24px; --radius-sm:10px;
    --side-w:236px; --side-w-min:76px; --side-gap:10px;
    --shadow-xs:0 1px 2px rgba(16,40,70,.05);
    --shadow-sm:0 16px 36px -26px rgba(16,40,70,.45);
    --shadow:0 28px 64px -30px rgba(16,40,70,.5);
    --blur:saturate(180%) blur(18px);
    --glass-blur:blur(16px);
    --glass-border:rgba(255,255,255,.55);
    --glass-a:rgba(255,255,255,.6); --glass-b:rgba(255,255,255,.48);
    --glass-sheen:radial-gradient(130% 96% at 0% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 62%);
    --glass-ring:0 0 0 1px rgba(24,52,84,.07);
    --glass-a-hover:rgba(255,255,255,.72); --glass-b-hover:rgba(255,255,255,.6);
    --glass-shadow:0 18px 44px -32px rgba(16,40,70,.32);
    --glass-shadow-hover:0 22px 52px -32px rgba(16,40,70,.38);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    color:var(--text);
    background:#eef3f9;
    font:14px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
    -webkit-font-smoothing:antialiased;
}
/* 浅渐变底色：柔光斑 + 细网格，纯 CSS 不引图片 */
.bg-deco{
    position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
    background:
        radial-gradient(circle 620px at 8% 2%,rgba(72,124,206,.4),rgba(72,124,206,.22) 60%,transparent 82%),
        radial-gradient(circle 560px at 62% 6%,rgba(110,124,226,.32),rgba(110,124,226,.17) 60%,transparent 82%),
        radial-gradient(circle 640px at 104% 26%,rgba(48,106,206,.36),rgba(48,106,206,.19) 60%,transparent 82%),
        radial-gradient(circle 600px at 2% 50%,rgba(126,116,228,.3),rgba(126,116,228,.15) 60%,transparent 84%),
        radial-gradient(circle 660px at 66% 62%,rgba(64,132,220,.32),rgba(64,132,220,.16) 60%,transparent 84%),
        radial-gradient(circle 620px at 16% 94%,rgba(56,124,214,.34),rgba(56,124,214,.17) 60%,transparent 84%),
        radial-gradient(circle 580px at 92% 96%,rgba(118,142,234,.3),rgba(118,142,234,.15) 60%,transparent 84%),
        linear-gradient(165deg,#cfe0f7 0,#adc9ee 44%,#d2e2f8 100%);
}
.bg-deco::before{
    content:"";position:absolute;inset:-2px;
    background-image:
        linear-gradient(rgba(26,60,132,.17) 1px,transparent 1px),
        linear-gradient(90deg,rgba(26,60,132,.17) 1px,transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(140% 128% at 50% 0,#000 0,rgba(0,0,0,.72) 58%,transparent 96%);
    mask-image:radial-gradient(140% 128% at 50% 0,#000 0,rgba(0,0,0,.72) 58%,transparent 96%);
}


a{color:var(--brand-deep);text-decoration:none}
a:hover{color:var(--brand)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(24,52,84,.16);border:3px solid transparent;border-radius:8px;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(24,52,84,.28);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 布局 ----------
   壳层（app shell）：**整页不滚动**，只有 .content 内部滚。
   这样侧栏和顶栏都是「天然不动」的——不需要任何吸顶技巧，滚动时它们连 1px 都不会位移。
   写法上就是给 .layout 一个确定的 100vh + overflow:hidden，把高度约束住，再让 .content
   做唯一的滚动容器（min-height:0 是必须的，否则 flex 子项的最小高度会让它顶破父容器、
   整页又开始滚）。不要改回 min-height:100vh：那样 .layout 会被内容撑高，整页就会跟着滚，
   顶栏就又「跟着页面走」了 */
.layout{display:flex;height:100vh;overflow:hidden}

.sidebar{
    width:var(--side-w);flex:0 0 calc(var(--side-w) + var(--side-gap));
    height:calc(100vh - var(--side-gap) * 2);position:sticky;top:var(--side-gap);
    margin:var(--side-gap) 0 var(--side-gap) var(--side-gap);
    z-index:10;display:flex;flex-direction:column;color:#e8f1ff;overflow:hidden;
    border-radius:26px;
    background:
        radial-gradient(130% 46% at 6% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 62%),
        radial-gradient(120% 40% at 50% 104%,rgba(122,192,255,.26),rgba(122,192,255,0) 72%),
        linear-gradient(180deg,#5384c6 0%,#3d72b8 34%,#2a58ac 66%,#214ea3 100%);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 28px 60px -34px rgba(6,24,66,.8),inset 0 1px 0 rgba(255,255,255,.24);
    transition:width .24s cubic-bezier(.22,.8,.3,1),flex-basis .24s cubic-bezier(.22,.8,.3,1);
}
.sidebar .brand{display:flex;align-items:center;gap:11px;padding:18px 16px 16px;border-bottom:1px solid rgba(255,255,255,.15)}
.sidebar .logo{
    width:38px;height:38px;flex:0 0 38px;border-radius:12px;color:#12a06c;
    display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;
    background:linear-gradient(180deg,#fff,#e9f1fc);
    box-shadow:0 12px 22px -12px rgba(6,24,66,.9),inset 0 1px 0 #fff;
}
.sidebar .logo img{width:26px;height:26px;display:block;object-fit:contain}
.sidebar .brand-text{
    font-size:15px;font-weight:600;color:#fff;letter-spacing:.3px;line-height:1.3;
    white-space:nowrap;overflow:hidden;transition:opacity .16s,width .24s;
}
.sidebar .brand-text small{display:block;font-size:11px;color:rgba(220,235,255,.66);font-weight:400;margin-top:3px;letter-spacing:0}

/* ---------- 左侧菜单：一级（主菜单）/ 二级（子菜单）同字号 ---------- */
.menu{padding:9px 0 6px;flex:1;overflow:auto;scrollbar-width:thin}
.menu::-webkit-scrollbar{width:6px}
.menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);border-radius:3px}

/* 一级：普通链接 + 可展开的组标题，共用同一套行高 / 字号 / 图标砖 */
.menu a,
.menu-group{
    position:relative;display:flex;align-items:center;gap:11px;margin:3px 11px;padding:6px 11px;
    border-radius:13px;color:rgba(236,244,255,.92);font-size:13.5px;letter-spacing:.2px;white-space:nowrap;
    transition:background .16s,color .16s,box-shadow .16s;
}
/* <button> 的 width:auto 在 Chrome 里按 intrinsic 宽度收缩（不像 <a> 那样撑满），
   组标题的气泡就只有 140px，比子菜单的 213px 短一截。这里显式撑满：
   100% 是 .menu 的宽度，减掉的 22px 是左右各 11px 的 margin（按钮是 border-box） */
.menu-group{
    border:0;background:none;font-family:inherit;text-align:left;cursor:pointer;
    width:calc(100% - 22px);
}
.menu a .ico,
.menu-group .ico{
    width:26px;height:26px;flex:0 0 26px;padding:5px;box-sizing:border-box;border-radius:8px;
    background:linear-gradient(180deg,#fff,#eef4fd);color:#2f6ac4;
    box-shadow:0 6px 14px -9px rgba(5,22,64,.9);
    transition:background .16s,color .16s;
}
.menu a span{min-width:0;overflow:hidden;text-overflow:ellipsis;transition:opacity .14s}
.menu-group span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:opacity .14s}
.menu-group .caret{width:15px;height:15px;flex:0 0 15px;opacity:.5;transition:transform .24s cubic-bezier(.22,.8,.3,1),opacity .16s}
.menu a:hover,
.menu-group:hover{background:rgba(255,255,255,.15);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.menu a:hover .ico,
.menu-group:hover .ico{background:#fff}
.menu-group[aria-expanded="true"]{background:rgba(255,255,255,.1);color:#fff}
.menu-group[aria-expanded="true"] .caret{transform:rotate(180deg);opacity:.9}

/* 二级：默认收起，展开后缩进一级（字号与一级一致） */
.menu-sub{display:none}
.menu-group[aria-expanded="true"]+.menu-sub{display:block}
.menu-sub a{margin:2px 11px 2px 20px;padding:5px 11px;gap:10px;color:rgba(228,239,255,.88)}
.menu-sub a .ico{
    width:24px;height:24px;flex:0 0 24px;padding:5px;border-radius:7px;stroke-width:2;
    background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(233,241,252,.92));
}
.menu-sub a:hover{color:#fff}

/* 选中项 */
.menu a.active{
    color:#fff;font-weight:600;
    background:linear-gradient(180deg,#a3c0fb 0%,#6390ee 44%,#4d77de 100%);
    box-shadow:0 22px 38px -22px rgba(3,16,54,.95),0 0 22px -8px rgba(132,182,255,.7),inset 0 1px 0 rgba(255,255,255,.66),inset 0 0 0 1px rgba(255,255,255,.26);
}
.menu a.active .ico{background:#fff;color:#2a63bd;box-shadow:0 6px 14px -9px rgba(4,20,62,.9)}
.menu a.active::before{
    content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);
    width:3px;height:20px;border-radius:3px;background:#fff;
    box-shadow:0 0 10px rgba(255,255,255,.85);
}

/* 侧栏底部：环形进度 */
.side-ring{
    display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px 12px;align-items:center;
    margin:10px 12px 8px;padding:13px 14px;border-radius:18px;
    border:1px solid rgba(255,255,255,.2);
    background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.06));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
    transition:opacity .16s;
}
.side-ring .ring-label{grid-column:1/-1;font-size:11.5px;color:rgba(216,232,255,.72)}
.side-ring .ring{grid-area:2/1;width:52px;height:52px}
.ring-bg{fill:none;stroke:rgba(255,255,255,.18);stroke-width:7}
.ring-val{fill:none;stroke:#57c9f8;stroke-width:7;stroke-linecap:round;transition:stroke-dasharray .6s cubic-bezier(.22,.8,.3,1)}
.side-ring .ring-text{display:contents}
.side-ring .ring-text b{
    grid-area:2/1;place-self:center;z-index:1;
    font-size:13px;font-weight:700;color:#fff;line-height:1;font-variant-numeric:tabular-nums;
}
.side-ring .ring-text span{grid-area:2/2;align-self:center;font-size:11.5px;color:rgba(216,232,255,.82);white-space:nowrap}

.sidebar .foot{
    padding:10px 19px 16px;border-top:1px solid rgba(255,255,255,.15);
    font-size:11px;color:rgba(214,231,255,.6);white-space:nowrap;overflow:hidden;
    display:flex;flex-direction:column;gap:6px;
}
.sidebar .foot a{color:#c9e6ff;font-weight:500}
.sidebar .foot a:hover{color:#fff}

/* 侧栏底部：折叠按钮（与顶栏 .side-toggle 同一套 js） */
.side-collapse{
    flex:none;width:34px;height:34px;margin:0 auto 12px;padding:0;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;border-radius:11px;
    color:rgba(232,242,255,.9);background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
    transition:background .16s,color .16s;
}
.side-collapse:hover{background:rgba(255,255,255,.24);color:#fff}
.side-collapse .ico{width:17px;height:17px;transition:transform .24s cubic-bezier(.22,.8,.3,1)}

/* 折叠态（class 由 head 内联脚本 + admin.js 维护） */
html.side-collapsed .sidebar{width:var(--side-w-min);flex-basis:calc(var(--side-w-min) + var(--side-gap))}
html.side-collapsed .sidebar .brand{justify-content:center;padding:18px 0 16px;gap:0}
html.side-collapsed .brand-text{opacity:0;width:0}
html.side-collapsed .menu-group{justify-content:center;gap:0;padding:5px 0}
html.side-collapsed .menu-group .caret{display:none}
html.side-collapsed .menu-sub{display:block}
html.side-collapsed .menu-sub a{justify-content:center;gap:0;margin:3px 12px;padding:5px 0}
html.side-collapsed .menu-group .ico{display:none}
html.side-collapsed .menu-group span{flex:0 1 0;opacity:0;width:0;overflow:hidden}
html.side-collapsed .menu-group::after{content:"";width:20px;height:2px;border-radius:2px;background:rgba(255,255,255,.3)}
html.side-collapsed .menu a{justify-content:center;gap:0;margin:3px 12px;padding:5px 0}
html.side-collapsed .menu a span{opacity:0;width:0;overflow:hidden}
html.side-collapsed .side-ring{opacity:0;height:0;margin:0;padding:0;border:0;overflow:hidden}
html.side-collapsed .sidebar .foot{display:none}
html.side-collapsed .side-toggle .ico{transform:rotate(180deg)}
html.side-collapsed .side-collapse .ico{transform:rotate(180deg)}
html.side-collapsed .menu a.active::before{left:50%;transform:translate(-50%,-50%);top:auto;bottom:-3px;width:20px;height:3px;border-radius:3px}

/* ---------- 顶栏 ---------- */
.main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
/* 顶栏：26px 圆角 + 同一套玻璃参数。位置固定在 y=10（和侧栏顶边齐平），
   靠的是上面那套壳层布局——整页不滚动，所以它天然不动，不需要 sticky / fixed。
   留着 position:relative 只是给下面 z-index 一个定位上下文。
   左右各 24px 是刻意对齐 .content 的 padding:20px 24px 48px，顶栏的左右边缘和整页卡片
   落在同两条竖线上，不然会各自缩进、看着错位 */
.topbar{
    min-height:72px;position:relative;z-index:20;
    display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 22px;
    margin:var(--side-gap) 24px 0;
    border-radius:26px;
    background:var(--glass-sheen),linear-gradient(158deg,var(--glass-a),var(--glass-b));
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-ring),var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.85);
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
}
.topbar-left{display:flex;align-items:center;gap:13px;min-width:0}
.side-toggle{
    width:38px;height:38px;flex:0 0 38px;padding:0;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;border-radius:12px;color:#45536b;
    background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.95);
    box-shadow:0 10px 20px -18px rgba(16,40,70,.9);
    transition:background .16s,color .16s,transform .16s,box-shadow .16s;
}
.side-toggle:hover{background:#fff;color:var(--brand-deep);box-shadow:0 12px 24px -16px rgba(16,40,70,.9)}
.side-toggle:active{transform:scale(.94)}
.side-toggle .ico{width:18px;height:18px;transition:transform .24s cubic-bezier(.22,.8,.3,1)}
.title-block{min-width:0}
.page-title{margin:0;font-size:17px;font-weight:650;letter-spacing:.2px;color:#152233;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .crumb{
    display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;white-space:nowrap;
    color:var(--muted);font-size:12.5px;margin-top:2px;
}
.topbar .crumb::before{content:"";width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

.topbar-right{display:flex;align-items:center;gap:10px;min-width:0}
.searchbox{
    display:flex;align-items:center;gap:8px;padding:0 12px;height:38px;min-width:200px;
    border-radius:12px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
    transition:border-color .16s,box-shadow .16s,background .16s;
}
.searchbox .ico{width:16px;height:16px;flex:0 0 16px;color:#8a97ab}
.searchbox .search-go{padding:0;border:0;background:none;display:inline-flex;align-items:center;cursor:pointer;transition:color .16s}
.searchbox .search-go:hover .ico{color:var(--brand-deep)}
.searchbox input{
    width:100%;min-width:0;border:0;background:transparent;padding:0;height:100%;
    font-size:13px;color:var(--text);outline:none;
}
.searchbox input::-webkit-search-cancel-button{display:none}
.searchbox:focus-within{background:#fff;border-color:rgba(26,175,120,.45);box-shadow:0 0 0 4px var(--brand-soft)}
.icon-btn{
    position:relative;width:38px;height:38px;flex:0 0 38px;
    display:inline-flex;align-items:center;justify-content:center;border-radius:12px;color:#4b5a70;
    background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);
    box-shadow:0 10px 20px -18px rgba(16,40,70,.9);
    transition:background .16s,color .16s,transform .16s;
}
.icon-btn .ico{width:18px;height:18px}
.icon-btn:hover{background:#fff;color:var(--brand-deep);transform:translateY(-1px)}
.icon-btn .dot{
    position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:10.5px;font-style:normal;font-weight:600;color:#fff;line-height:1;
    background:linear-gradient(135deg,#ff7a6b,#e0524c);border-radius:10px;
    box-shadow:0 6px 14px -6px rgba(224,82,76,.95),0 0 0 2px rgba(255,255,255,.9);
}
.topbar .who{display:flex;align-items:center;gap:10px;font-size:13px;color:#3c4a61;white-space:nowrap}
.who-name{color:#243}
.who-name{color:#243043}
.avatar{
    width:34px;height:34px;border-radius:50%;color:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;
    background:linear-gradient(135deg,#2ad394,#12a06c);
    box-shadow:0 10px 20px -10px rgba(18,160,108,.95),inset 0 1px 0 rgba(255,255,255,.4);
}
.topbar .logout{
    color:#6d7b91;font-size:12.5px;padding:7px 13px;border-radius:20px;
    background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);
    transition:all .15s;
}
.topbar .logout:hover{color:var(--danger);background:#fff;border-color:#f6d2d0}
/* 内容区是整页唯一的滚动容器：min-height:0 + overflow:auto，滚轮只作用在这里 */
.content{padding:20px 24px 48px;flex:1;min-width:0;min-height:0;width:100%;max-width:1680px;overflow:auto}

/* ===================================================================
   第 2 部分：通用组件（卡片 / 表格 / 表单 / 按钮 / 分页 / 提示）
   同一套浅色玻璃拟态变量，类名与旧版保持一致
   =================================================================== */
html{color-scheme:light}

/* ---------- 玻璃卡片 ---------- */
.card{
    position:relative;border-radius:var(--radius);overflow:hidden;
    background:var(--glass-sheen),linear-gradient(158deg,var(--glass-a),var(--glass-b));
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-ring),var(--glass-shadow),inset 0 0 0 1px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.85);
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    transition:background .2s ease,box-shadow .2s ease;
}
.card:hover{background:var(--glass-sheen),linear-gradient(158deg,var(--glass-a-hover),var(--glass-b-hover));box-shadow:var(--glass-ring),var(--glass-shadow-hover),inset 0 1px 0 rgba(255,255,255,.85)}
.card::before{
    content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
}
/* 相邻卡片留出模块间距（原来是 0，卡片直接贴在一起，看着很挤） */
.card+.card{margin-top:18px}
/* 卡片被 <form> 包起来时，「上一块」和卡片不是兄弟，兄弟选择器够不到 */
form+.card{margin-top:18px}
/* <form> 里紧跟的第一张卡片：前面常有个隐藏 input（_return），:first-child 匹配不到，只能用 :first-of-type */
form>.card:first-of-type{margin-top:18px}
/* 已经用 gap 排好的栅格 / 弹性列里别再叠一层外边距 */
.grid-2>.card+.card,
.board-main>.card+.card,
.board-rail>.card+.card{margin-top:0}
.card-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    padding:14px 18px;border-bottom:1px solid var(--line-soft);
}
.card-head h3{
    margin:0;display:flex;align-items:center;gap:9px;
    font-size:14.5px;font-weight:600;color:#152233;letter-spacing:.2px;
}
.card-head h3::before{
    content:"";width:3px;height:14px;flex:0 0 3px;border-radius:2px;
    background:linear-gradient(180deg,var(--brand-lite),var(--brand-deep));
    box-shadow:0 0 8px -1px rgba(26,175,120,.8);
}
.card-head .desc{font-size:12px}
.card-body{padding:18px}
.card-body.tight{padding:0}
.card-body.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- 概览小卡 ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:16px;margin-bottom:18px}
.stat{
    position:relative;overflow:hidden;padding:16px 18px;border-radius:var(--radius);
    background:var(--glass-sheen),linear-gradient(158deg,var(--glass-a),var(--glass-b));
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-ring),var(--glass-shadow),inset 0 0 0 1px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.85);
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    transition:background .2s ease,box-shadow .2s ease;
}
.stat:hover{background:var(--glass-sheen),linear-gradient(158deg,var(--glass-a-hover),var(--glass-b-hover));box-shadow:var(--glass-ring),var(--glass-shadow-hover),inset 0 1px 0 rgba(255,255,255,.85)}
.stat::after{
    content:"";position:absolute;right:-34px;top:-46px;width:130px;height:130px;border-radius:50%;
    background:radial-gradient(circle,rgba(26,175,120,.16),transparent 70%);pointer-events:none;
}
.stat.ok::after{background:radial-gradient(circle,rgba(58,143,240,.18),transparent 70%)}
.stat .label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.stat .value{
    margin:7px 0 4px;font-size:24px;font-weight:650;letter-spacing:.2px;color:#132033;
    font-variant-numeric:tabular-nums;line-height:1.2;
}
.stat .sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.stat.accent{border-color:rgba(26,175,120,.36);box-shadow:var(--glass-ring),0 18px 44px -34px rgba(18,160,108,.55),inset 0 0 0 1px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.85)}
.stat.accent .value{color:var(--brand-deep)}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
table th{
    padding:11px 12px;text-align:left;white-space:nowrap;font-size:11.5px;font-weight:600;
    letter-spacing:.6px;color:#8391a8;background:rgba(255,255,255,.7);
    border-bottom:1px solid var(--line-soft);
}
table td{padding:11px 12px;color:#33404f;border-bottom:1px solid rgba(24,52,84,.06);vertical-align:middle}
table th:first-child,table td:first-child{padding-left:18px}
table th:last-child,table td:last-child{padding-right:18px}
table tbody tr{transition:background .14s}
table tbody tr:hover{background:rgba(255,255,255,.68)}
table tbody tr:last-child td{border-bottom:0}
table tfoot td{
    padding:12px;font-weight:600;color:#12202f;
    background:rgba(26,175,120,.07);border-top:1px solid rgba(26,175,120,.16);border-bottom:0;
}
table td.num,table th.num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;font-size:12.5px;letter-spacing:0}
td.mono{color:#5c6b80}
.card-body>:first-child:is(table){border-top:0}

/* ---------- 按钮 ---------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    padding:9px 16px;border-radius:11px;font-size:13px;font-weight:500;line-height:1.25;
    color:#33404f;cursor:pointer;text-align:center;white-space:nowrap;
    border:1px solid rgba(255,255,255,.95);
    background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.72));
    box-shadow:0 10px 22px -18px rgba(16,40,70,.9),inset 0 1px 0 rgba(255,255,255,.9);
    transition:transform .14s,box-shadow .16s,background .16s,color .16s,border-color .16s;
}
.btn:hover{color:#16212f;transform:translateY(-1px);box-shadow:0 16px 28px -18px rgba(16,40,70,.85)}
.btn:active{transform:translateY(0) scale(.985)}
.btn .ico{width:16px;height:16px}
.btn-primary{
    color:#fff;border-color:rgba(255,255,255,.34);
    background:linear-gradient(135deg,#26c98d,#12a06c);
    box-shadow:0 16px 30px -18px rgba(18,160,108,.95),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{color:#fff;border-color:rgba(255,255,255,.4);background:linear-gradient(135deg,#2ed598,#0f9666)}
.btn-danger{color:var(--danger);border-color:#f6d2d0;background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,240,239,.78))}
.btn-danger:hover{color:#fff;border-color:transparent;background:linear-gradient(135deg,#e2605a,#c93f39)}
.btn-xs{padding:5px 11px;font-size:12px;border-radius:9px}
.btn-block{width:100%}
.btn-solid{
    width:100%;padding:11px 16px;font-weight:600;color:#052a1d;border-color:rgba(255,255,255,.5);
    background:linear-gradient(135deg,#8bf3ca,#22c58c);
    box-shadow:0 18px 34px -20px rgba(6,40,28,.95),inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-solid:hover{color:#052a1d;background:linear-gradient(135deg,#9cffe1,#1cb983)}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
table .actions{gap:6px}

/* ---------- 状态徽标 ---------- */
.badge{
    display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
    font-size:11.5px;font-weight:500;line-height:1.5;white-space:nowrap;
    color:#7b8a9f;background:rgba(24,52,84,.07);border:1px solid rgba(24,52,84,.1);
}
.badge-on{color:#0e7f57;background:rgba(26,175,120,.14);border-color:rgba(26,175,120,.28)}
.badge-off{color:#7b8a9f;background:rgba(24,52,84,.07);border-color:rgba(24,52,84,.12)}
.badge-warn{color:#9a6b13;background:rgba(224,154,43,.15);border-color:rgba(224,154,43,.3)}
.badge-info{color:#2a6bbd;background:rgba(58,143,240,.14);border-color:rgba(58,143,240,.28)}
.badge-danger{color:#b5322c;background:rgba(210,69,62,.13);border-color:rgba(210,69,62,.28)}
a.badge{cursor:pointer;transition:transform .14s,box-shadow .16s}
a.badge:hover{transform:translateY(-1px);box-shadow:0 10px 18px -14px rgba(16,40,70,.95)}
.tag-empty{
    display:inline-flex;align-items:center;padding:2px 8px;border-radius:7px;
    font-size:11.5px;color:#8b98ad;background:rgba(24,52,84,.05);border:1px dashed rgba(24,52,84,.16);
}

/* ---------- 表单 ---------- */
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px 18px}
.form-item{display:flex;flex-direction:column;gap:6px;min-width:0}
.form-item.full{grid-column:1/-1}
.form-item>label{font-size:12.5px;font-weight:500;color:var(--label)}
:is(.content,.login) input[type=text],
:is(.content,.login) input[type=number],
:is(.content,.login) input[type=date],
:is(.content,.login) input[type=password],
:is(.content,.login) input[type=search],
:is(.content,.login) input[type=email],
:is(.content,.login) textarea,
:is(.content,.login) select{
    width:100%;padding:9px 12px;font-size:13px;color:var(--text);outline:none;font-family:inherit;
    border-radius:11px;border:1px solid rgba(24,52,84,.13);
    background:rgba(255,255,255,.9);
    box-shadow:inset 0 1px 2px rgba(16,40,70,.045);
    transition:border-color .16s,box-shadow .16s,background .16s;
}
:is(.content,.login) input[type=text]:focus,
:is(.content,.login) input[type=number]:focus,
:is(.content,.login) input[type=date]:focus,
:is(.content,.login) input[type=password]:focus,
:is(.content,.login) input[type=search]:focus,
:is(.content,.login) textarea:focus,
:is(.content,.login) select:focus{
    background:#fff;border-color:rgba(26,175,120,.5);
    box-shadow:0 0 0 4px var(--brand-soft),inset 0 1px 2px rgba(16,40,70,.03);
}
:is(.content,.login) textarea{resize:vertical;line-height:1.65}
:is(.content,.login) select{
    appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238a97ab' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:11px;
}
.form-item input:disabled,.form-item textarea:disabled{color:#8b98ad;background:rgba(24,52,84,.05)}
input[type=color]{border:0;background:none}
:is(.content,.login) input[type=checkbox]{width:16px;height:16px;accent-color:#12a06c;cursor:pointer;vertical-align:-2px}
.tip{margin-top:6px;font-size:11.5px;color:var(--muted);line-height:1.55}
.check{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--label);cursor:pointer}
.color-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.color-row input[type=text]{flex:1 1 132px;min-width:110px;font-family:ui-monospace,Menlo,Consolas,monospace}
.color-pick{
    width:42px;height:38px;flex:0 0 42px;padding:3px;border-radius:11px;cursor:pointer;
    border:1px solid rgba(24,52,84,.13);background:rgba(255,255,255,.8);
}
.swatch{
    width:24px;height:24px;flex:0 0 24px;border-radius:8px;background:#fff;
    border:1px solid rgba(24,52,84,.14);box-shadow:inset 0 1px 3px rgba(16,40,70,.09);
}
.img-preview{max-width:180px;max-height:120px;padding:4px;border-radius:10px;background:#fff;border:1px solid rgba(24,52,84,.12)}
.card-body>.img-preview{margin-top:2px}

/* 高级选项开关：checkbox 藏起来，label 画成胶囊 */
:is(.content,.login) input[type=checkbox].adv-check{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.adv-switch{
    display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;padding:7px 15px 7px 11px;
    font-size:12.5px;color:var(--label);cursor:pointer;user-select:none;border-radius:999px;
    background:rgba(255,255,255,.82);border:1px solid rgba(24,52,84,.1);
    box-shadow:var(--shadow-xs);transition:color .16s,border-color .16s;
}
/* order:-1 把两个伪元素提到文字之前：默认 ::after 排在文字后面，滑块会压在字上 */
.adv-switch::before{
    content:"";order:-1;width:30px;height:17px;flex:0 0 30px;border-radius:999px;
    background:rgba(24,52,84,.18);transition:background .18s;
}
.adv-switch::after{
    content:"";order:-1;width:12px;height:12px;flex:0 0 12px;margin-left:-36px;margin-right:12px;border-radius:50%;
    background:#fff;box-shadow:0 1px 3px rgba(16,40,70,.45);transition:transform .18s;
}
.adv-check:checked+.adv-switch{color:var(--brand-deep);border-color:rgba(26,175,120,.4)}
.adv-check:checked+.adv-switch::before{background:linear-gradient(135deg,#2ed598,#12a06c)}
.adv-check:checked+.adv-switch::after{transform:translateX(12px)}
.form-item.is-adv{display:none}
.adv-check:checked~.form-row .form-item.is-adv{display:flex}
.src-note{
    margin-top:6px;padding:6px 10px;border-radius:9px;font-size:11.5px;color:#6f7d92;line-height:1.6;
    background:rgba(58,143,240,.08);border:1px solid rgba(58,143,240,.16);word-break:break-all;
}
.src-note.is-locked{color:#9a6b13;background:rgba(224,154,43,.1);border-color:rgba(224,154,43,.22)}
.url-base{
    display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:13px 18px;
    font-size:12.5px;color:#4b5a70;background:rgba(255,255,255,.5);border-bottom:1px solid var(--line-soft);
}
.url-base .tip{margin:0}
.url-base b{color:#16212f}

/* ---------- 筛选条 ---------- */
.filter{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:12px 14px;align-items:end;
    padding:14px 16px;border-radius:16px;
    background:rgba(24,52,84,.038);border:1px solid rgba(255,255,255,.62);
    transition:background .2s ease;
}
.filter:hover{background:rgba(24,52,84,.045)}
.filter .form-item{gap:5px}
.filter .form-item:last-child{flex-direction:row;align-items:center;gap:8px}
.filter .form-item:last-child>label{display:none}

/* ---------- 分页 ---------- */
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:14px 18px 16px}
.pager-info{margin-right:auto;font-size:12px;color:var(--muted)}
.pager-btn{
    display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 10px;
    border-radius:9px;font-size:12.5px;color:#41506a;
    background:rgba(255,255,255,.82);border:1px solid rgba(24,52,84,.1);
    box-shadow:var(--shadow-xs);transition:transform .14s,color .16s,border-color .16s,box-shadow .16s;
}
.pager-btn:hover{color:var(--brand-deep);border-color:rgba(26,175,120,.38);transform:translateY(-1px)}
.pager-btn.on{
    color:#fff;border-color:transparent;background:linear-gradient(135deg,#26c98d,#12a06c);
    box-shadow:0 12px 22px -14px rgba(18,160,108,.95);
}
.pager-btn.on:hover{color:#fff}

/* ---------- 轻提示 ---------- */
.toast{
    position:fixed;left:50%;bottom:26px;z-index:60;padding:11px 20px;border-radius:12px;
    font-size:13px;color:#16212f;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
    background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.95);
    box-shadow:0 26px 50px -24px rgba(16,40,70,.9);
    animation:toastIn .28s cubic-bezier(.22,.8,.3,1);
}
.toast-success{color:#0e7f57;border-left:3px solid var(--brand)}
.toast-error{color:#b5322c;border-left:3px solid var(--danger)}
@keyframes toastIn{
    from{opacity:0;transform:translate(-50%,14px)}
    to{opacity:1;transform:translate(-50%,0)}
}

/* ---------- 其它 ---------- */
.desc{font-size:12.5px;color:var(--muted)}
.empty{padding:36px 18px;text-align:center;font-size:13px;color:var(--muted)}
.tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tabs a{
    padding:8px 15px;border-radius:11px;font-size:13px;color:#4b5a70;
    background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);
    box-shadow:var(--shadow-xs);transition:transform .14s,color .16s,box-shadow .16s;
}
.tabs a:hover{color:var(--brand-deep);transform:translateY(-1px);box-shadow:0 14px 26px -20px rgba(16,40,70,.95)}
.tabs a.on{
    color:#fff;font-weight:600;border-color:transparent;
    background:linear-gradient(135deg,#26c98d,#12a06c);
    box-shadow:0 14px 26px -16px rgba(18,160,108,.95);
}
.tabs a.on:hover{color:#fff}
/* ===================================================================
   第 3 部分：工作台看板（三栏栅格 / 指标卡 / 图表 / 待办 / 浮层）
   =================================================================== */
.board{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.board-main,.board-rail{display:flex;flex-direction:column;gap:18px;min-width:0}

/* ---------- 顶部指标卡 ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.metric{
    position:relative;display:flex;flex-direction:column;overflow:hidden;
    padding:15px 16px 13px;border-radius:var(--radius);
    background:var(--glass-sheen),linear-gradient(158deg,var(--glass-a),var(--glass-b));
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-ring),var(--glass-shadow),inset 0 0 0 1px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.85);
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    transition:background .2s ease,box-shadow .2s ease;
}
.metric::after{
    content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.98),transparent);
}
.metric:hover{background:var(--glass-sheen),linear-gradient(158deg,var(--glass-a-hover),var(--glass-b-hover));box-shadow:var(--glass-ring),var(--glass-shadow-hover),inset 0 1px 0 rgba(255,255,255,.85)}
.metric-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.metric-ico{
    width:40px;height:40px;flex:0 0 40px;border-radius:13px;color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.metric-ico .ico{width:19px;height:19px}
.more-btn{
    width:28px;height:28px;flex:0 0 28px;border-radius:9px;color:#93a0b4;
    display:inline-flex;align-items:center;justify-content:center;transition:color .15s,background .15s;
}
.more-btn .ico{width:16px;height:16px}
.more-btn:hover{color:var(--brand-deep);background:rgba(255,255,255,.95)}
.metric-label{margin-top:12px;font-size:12.5px;color:var(--muted)}
.metric-value{margin-top:2px;font-size:25px;font-weight:650;line-height:1.2;letter-spacing:.2px;color:#132033;font-variant-numeric:tabular-nums}
.metric-delta{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:11.5px;font-weight:500}
.metric-delta .ico{width:13px;height:13px}
.metric-delta.is-up{color:#0e7f57}
.metric-delta.is-down{color:#c2402f}
.metric-delta.is-flat{color:var(--muted)}
.metric-foot{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.metric-sub{font-size:11.5px;color:#93a0b4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spark{width:100%;height:30px;display:block;overflow:visible}
.spark-line{fill:none;stroke:#1aaf78;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.spark-area{fill:rgba(26,175,120,.15);stroke:none}

/* 图标底色（指标卡 / 待办列表共用） */
.tone-green{background:linear-gradient(135deg,#34d79c,#12a06c);box-shadow:0 14px 26px -16px rgba(18,160,108,.95),inset 0 1px 0 rgba(255,255,255,.45)}
.tone-blue{background:linear-gradient(135deg,#66b5ff,#2f7fe0);box-shadow:0 14px 26px -16px rgba(47,127,224,.95),inset 0 1px 0 rgba(255,255,255,.45)}
.tone-violet{background:linear-gradient(135deg,#a992ff,#7a5cf0);box-shadow:0 14px 26px -16px rgba(122,92,240,.95),inset 0 1px 0 rgba(255,255,255,.45)}
.tone-amber{background:linear-gradient(135deg,#ffc661,#e09a2b);box-shadow:0 14px 26px -16px rgba(224,154,43,.95),inset 0 1px 0 rgba(255,255,255,.45)}

/* ---------- 图表卡 ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.grid-2>.card{height:100%;display:flex;flex-direction:column}
.grid-2>.card>.card-body{flex:1 1 auto}
.chart-card .card-body{display:flex;flex-direction:column;justify-content:center;gap:10px;flex:1;padding-top:16px}
.chart-plot{position:relative;width:100%;height:196px}
.line-chart{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.grid-line{stroke:rgba(24,52,84,.1);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.grid-line.soft{stroke:rgba(24,52,84,.055)}
.line-area{fill:rgba(26,175,120,.14);stroke:none}
.line-path{fill:none;stroke:#1aaf78;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.line-path.alt{stroke:#3a8ff0}
.line-path.dash{stroke:#8b6cf0;stroke-width:2;stroke-dasharray:5 6}

/* 悬浮提示层：band 是 0 宽定位点，命中区靠 ::before 加宽 */
.hover-layer{position:absolute;inset:0}
.hover-layer .band{position:absolute;top:0;bottom:0;width:0;z-index:2}
.hover-layer .band::before{content:"";position:absolute;left:-15px;top:0;bottom:0;width:30px}
.hover-layer .band::after{
    content:"";position:absolute;left:0;top:0;bottom:0;width:1px;opacity:0;transition:opacity .16s;
    background:linear-gradient(180deg,rgba(26,175,120,.45),rgba(26,175,120,0));
}
.hover-layer .band:hover::after{opacity:1}
.hover-layer .pt{
    position:absolute;left:0;width:7px;height:7px;margin:0 0 -3.5px -3.5px;border-radius:50%;
    background:#fff;border:2px solid #1aaf78;opacity:0;transform:scale(.6);
    box-shadow:0 5px 12px -4px rgba(18,160,108,.95);
    transition:opacity .16s,transform .16s;
}
.hover-layer .pt.future{border-color:#8b6cf0;box-shadow:0 5px 12px -4px rgba(122,92,240,.95)}
.hover-layer .band:hover .pt{opacity:1;transform:scale(1)}
.hover-layer .bubble{
    position:absolute;left:0;transform:translate(-50%,-100%);margin-bottom:11px;
    padding:7px 11px;border-radius:11px;white-space:nowrap;opacity:0;pointer-events:none;
    background:rgba(20,32,48,.94);color:#fff;backdrop-filter:blur(6px);
    box-shadow:0 18px 34px -18px rgba(9,18,30,.95);
    transition:opacity .16s;
}
.hover-layer .bubble b{display:block;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.hover-layer .bubble em{display:block;font-style:normal;font-size:10.5px;color:rgba(255,255,255,.72);margin-top:1px}
.hover-layer .band:hover .bubble{opacity:1}
.chart-legend{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    font-size:12px;color:var(--muted);
    border-top:1px dashed rgba(24,52,84,.1);
}
.chart-legend .lg{display:inline-flex;align-items:center;gap:6px;padding-top:10px}
.chart-legend .lg b{font-size:12.5px;color:#132033;font-variant-numeric:tabular-nums}
.chart-legend .lg.desc{color:#93a0b4}
.chart-legend .lg-spacer{flex:1 1 auto}
.lg-dot{display:inline-block;width:14px;height:3px;flex:0 0 14px;border-radius:2px;background:#1aaf78}
.lg-dot.lg-area{height:9px;border-radius:3px;background:rgba(26,175,120,.2)}
.lg-dot.alt{background:#3a8ff0}
.lg-dot.lg-dash{background:repeating-linear-gradient(90deg,#8b6cf0 0 4px,transparent 4px 7px)}

/* ---------- 环形饼图 ---------- */
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donut{position:relative;width:150px;height:150px;flex:0 0 150px}
.donut svg{width:100%;height:100%;display:block;overflow:visible}
.donut-bg{fill:none;stroke:rgba(24,52,84,.08);stroke-width:16}
.donut-slice{fill:none;stroke-width:16;transition:stroke-dasharray .5s cubic-bezier(.22,.8,.3,1)}
.donut-center{
    position:absolute;inset:0;pointer-events:none;
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.donut-center b{display:block;font-size:17px;font-weight:650;color:#132033;font-variant-numeric:tabular-nums}
.donut-center b .ico{display:none}
.donut-center span{font-size:11.5px;color:var(--muted)}
.donut-legend{
    list-style:none;margin:0;padding:0;flex:1 1 168px;min-width:158px;
    display:flex;flex-direction:column;gap:9px;
}
.donut-legend li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#41506a;min-width:0}
.donut-legend li i{width:9px;height:9px;flex:0 0 9px;border-radius:3px}
.donut-legend li b{font-weight:500;color:#33404f;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donut-legend li span{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.donut-legend li em{font-style:normal;font-weight:600;color:#132033;min-width:46px;text-align:right;font-variant-numeric:tabular-nums}
.chart-note{margin:0;font-size:11.5px;color:#93a0b4}

/* ---------- 底部指标条 ---------- */
.metric-bar{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;
    padding-top:12px;border-top:1px dashed rgba(24,52,84,.1);
}
.mb-item{display:flex;flex-direction:column;gap:3px;min-width:0}
.mb-label{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-item b{display:inline-flex;align-items:center;gap:4px;font-size:14.5px;font-weight:600;color:#132033;font-variant-numeric:tabular-nums}
.mb-item b .ico{width:13px;height:13px}
.mb-item b.is-up{color:#0e7f57}
.mb-item b.is-down{color:#c2402f}
.mb-item b.is-flat{color:var(--muted)}

/* ---------- 右列：待办 + 浮层 ---------- */
.todo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.todo-list li+li{border-top:1px solid rgba(24,52,84,.06)}
.todo-list li a{display:flex;align-items:center;gap:11px;padding:11px 16px;color:inherit;transition:background .16s}
.todo-list li a:hover{background:rgba(255,255,255,.72)}
.todo-ico{
    width:34px;height:34px;flex:0 0 34px;border-radius:11px;color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
}
.todo-ico .ico{width:17px;height:17px}
.todo-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.todo-text b{font-size:13px;font-weight:600;color:#1b2836}
.todo-text em{font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.todo-list li a>.ico{width:15px;height:15px;flex:0 0 15px;color:#a9b4c4;transition:transform .16s,color .16s}
.todo-list li a:hover>.ico{color:var(--brand-deep);transform:translate(2px,-2px)}

.float-card{
    position:relative;overflow:hidden;padding:18px;border-radius:var(--radius);color:#fff;
    background:linear-gradient(150deg,#2fd79a,#12a06c 56%,#0c8d64);
    box-shadow:0 30px 60px -30px rgba(13,143,102,.95),inset 0 1px 0 rgba(255,255,255,.35);
}
.float-card::before{
    content:"";position:absolute;right:-44px;top:-64px;width:186px;height:186px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.42),transparent 66%);
}
.float-card::after{
    content:"";position:absolute;left:-56px;bottom:-76px;width:186px;height:186px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.2),transparent 68%);
}
.float-card h4{position:relative;margin:0 0 6px;font-size:15px;font-weight:650;letter-spacing:.2px}
.float-card p{position:relative;margin:0 0 14px;font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.88)}
.float-card .btn-solid{position:relative;font-size:13px}

/* ---------- 卡片头部小下拉 ---------- */
.select-mini{display:inline-flex;align-items:center}
.select-mini select{
    appearance:none;-webkit-appearance:none;cursor:pointer;
    padding:6px 30px 6px 12px;font-size:12px;color:#4b5a70;outline:none;
    border-radius:10px;border:1px solid rgba(24,52,84,.11);
    background:rgba(255,255,255,.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238a97ab' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center/10px;
    box-shadow:var(--shadow-xs);transition:border-color .16s,box-shadow .16s,color .16s;
}
.select-mini select:hover{color:var(--brand-deep);border-color:rgba(26,175,120,.4)}
.select-mini select:focus{box-shadow:0 0 0 4px var(--brand-soft);border-color:rgba(26,175,120,.5)}

/* ---------- 表格里的头像条 ---------- */
.mini-user{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.mini-user i{
    width:22px;height:22px;flex:0 0 22px;border-radius:50%;font-style:normal;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:600;color:#fff;
    background:linear-gradient(135deg,#66b5ff,#2f7fe0);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}

/* ---------- 窄屏降级 ---------- */
@media (max-width:1280px){
    .board{grid-template-columns:minmax(0,1fr)}
    .board-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
    .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid-2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
    .layout{display:flex;flex-direction:column}
    .sidebar{
        width:100%;flex-basis:auto;height:auto;position:relative;
        margin:0;top:auto;border-radius:0;border:0;overflow:visible;
        flex-direction:row;align-items:center;gap:4px;padding:0 12px;
    }
    .sidebar .brand{padding:12px 14px;border-bottom:0;border-right:1px solid var(--line-soft)}
    .sidebar .brand-text small{display:none}
    .menu{display:flex;align-items:center;gap:4px;flex:1;overflow-x:auto;padding:8px 2px}
    .menu-group{display:none}
    .menu-sub,
    .menu-group[aria-expanded="true"]+.menu-sub{display:contents}
    .menu a{margin:0;padding:6px 12px}
    .menu-sub a{margin:0;padding:6px 12px;gap:11px;color:rgba(236,244,255,.92)}
    .menu-sub a .ico{width:26px;height:26px;flex:0 0 26px;padding:5px;border-radius:8px;stroke-width:1.7}
    .menu-sub a:hover{color:#fff}
    .side-ring,.sidebar .foot,.side-collapse{display:none}
    .side-toggle{display:none}
    .topbar{position:relative;z-index:30;padding:12px 16px;flex-wrap:wrap;margin:10px 12px 0}
    .content{padding:16px 12px 40px}
    .metrics,.board-rail{grid-template-columns:minmax(0,1fr)}
    .chart-plot{height:170px}
    .searchbox{min-width:150px}
    .who-name{display:none}

    html.side-collapsed .sidebar{width:100%;flex-basis:auto}
    html.side-collapsed .sidebar .brand{justify-content:flex-start;padding:12px 14px;gap:11px}
    html.side-collapsed .brand-text{opacity:1;width:auto}
    html.side-collapsed .menu a{justify-content:flex-start;gap:11px;padding:6px 12px}
    html.side-collapsed .menu a.active::before{display:none}
    html.side-collapsed .menu a span{opacity:1;width:auto}
    html.side-collapsed .menu-sub{display:contents}
}
/* 待收款表：社群名 + 订单号两行，窄列自动省略 */
.cell-title{display:block;font-size:13px;font-weight:500;color:#1b2836;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-sub{display:block;font-size:11px;color:#93a0b4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-head .actions{gap:10px}
.todo-card .card-body.actions{padding:0 18px 16px}