/* ===== 浅色 BI 看板风格作品集（index.html） =====
   依赖 css/style.css（保留灯箱 / Demo 穿透 / 滚动动画等通用能力），
   本文件仅覆盖主题色与新增看板布局。 */

body.dash{
  --bg:#eef2f9; --bg2:#f7fafd; --card:#ffffff; --card2:#f7fafd;
  --line:#e4ecf4; --line2:#d3e0ec;
  --txt:#0b2b44; --sub:#5b7791; --mut:#8ea7bd;
  --teal:#0e8f86; --blue:#1e6fd9; --amber:#d9860f; --rose:#d94a63; --violet:#6b52d4;
  --grad:linear-gradient(120deg,#1e6fd9,#2fa8d6);
  background:var(--bg); color:var(--txt);
}
body.dash::before{background:
  radial-gradient(900px 460px at 90% -10%,rgba(30,111,217,.10),transparent 62%),
  radial-gradient(720px 420px at -8% 38%,rgba(14,143,134,.08),transparent 62%);}

.dash .chip{background:#f2f7fc;border-color:#dbe7f3;color:#4a6a85}
.dash .chip.c-teal{color:#0b7d75;border-color:#c2e5e1;background:#eaf7f5}
.dash .chip.c-blue{color:#1a63c4;border-color:#c5ddf7;background:#ecf4fe}
.dash .chip.c-amber{color:#a9670a;border-color:#f4ddb8;background:#fdf6e9}
.dash .chip.c-rose{color:#bc3f56;border-color:#f6d3da;background:#fdeef1}
.dash .chip.c-violet{color:#5b45bd;border-color:#dcd5f7;background:#f1effe}
.dash .btn-pri{color:#fff;box-shadow:0 6px 18px rgba(30,111,217,.22)}
.dash .btn-pri:hover{box-shadow:0 10px 24px rgba(30,111,217,.32)}
.dash .btn-ghost{background:#fff;border-color:var(--line2);color:#25455e}
.dash .btn-ghost:hover{border-color:#9dc4ea;color:#1e6fd9}

/* ---- 左侧深色导航 ---- */
.dsb{position:fixed;left:0;top:0;bottom:0;width:190px;z-index:90;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0b2b44 0%,#1a5d7d 100%);color:#fff;overflow-y:auto}
.dsb::-webkit-scrollbar{width:5px}
.dsb::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:9px}
.dsb-logo{display:flex;align-items:center;gap:10px;padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.13)}
.dsb-logo i{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.15);font-style:normal;
  font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dsb-logo b{font-size:13.5px;line-height:1.35;display:block}
.dsb-logo span{font-size:10.5px;color:rgba(255,255,255,.6)}
.dsb-g{padding:8px 10px 0}
.dsb-g-t{font-size:10px;letter-spacing:1.8px;color:rgba(255,255,255,.42);padding:8px 10px;font-weight:700}
.dsb-a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;margin-bottom:3px;
  color:rgba(255,255,255,.82);font-size:13.5px;cursor:pointer;transition:.16s;position:relative}
.dsb-a:hover{background:rgba(255,255,255,.1);color:#fff}
.dsb-a.on{background:#2c7da0;color:#fff;font-weight:600}
.dsb-a .i{width:20px;text-align:center;font-size:14px;flex-shrink:0}
.dsb-a .t{margin-left:auto;font-size:10px;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.22);padding:1px 6px;border-radius:5px}
.dsb-foot{margin-top:auto;padding:14px 16px;border-top:1px solid rgba(255,255,255,.13);
  font-size:11px;color:rgba(255,255,255,.62);line-height:1.95}
.dsb-foot .live{display:inline-block;width:6px;height:6px;border-radius:50%;background:#43d9a3;margin-right:6px}

/* ---- 主区 ---- */
.dsw{margin-left:190px;min-height:100vh;padding:24px 26px 46px}
.dsw-in{max-width:1420px;margin:0 auto}
.ds-title{text-align:center;font-size:31px;font-weight:800;color:#0b2b44;letter-spacing:.4px}
.ds-sub{text-align:center;font-size:13px;color:var(--sub);margin-top:7px}
.ds-filter{display:flex;justify-content:center;flex-wrap:wrap;gap:11px;margin:20px 0 22px}
.ds-f{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-size:13px;color:var(--sub)}
.ds-f .k{color:var(--sub)}
.ds-f .v{background:#f2f7fc;border-radius:999px;padding:3px 11px;color:#1e6fd9;font-weight:700}
.ds-f .ar{font-size:10px;color:var(--mut)}

/* ---- 三列看板卡片 ---- */
.ds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.ds-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 20px;
  box-shadow:0 6px 22px rgba(11,43,68,.05)}
.ds-card-h{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.ds-card-h .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:17px;flex-shrink:0}
.ds-card-h h3{font-size:17px;font-weight:800}
.ds-sub-t{font-size:12.5px;color:var(--mut);margin:2px 0 0}

.ds-tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ds-tile{background:#fbfdff;border:1px solid #edf3f9;border-radius:13px;padding:11px 11px 10px;text-align:center}
.ds-tile .bar{height:3px;border-radius:9px;background:#e8f0f8;overflow:hidden;margin-bottom:9px}
.ds-tile .bar i{display:block;height:100%;border-radius:9px;width:0;transition:width 1s cubic-bezier(.2,.7,.3,1)}
.ds-tile .lb{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-tile .nm{font-size:22px;font-weight:800;color:#0b2b44;line-height:1.25;margin:2px 0}
.ds-tile .cmp{font-size:11.5px;color:var(--mut)}
.ds-tile.b1 .bar i{background:linear-gradient(90deg,#1e6fd9,#54a8ea)}
.ds-tile.b2 .bar i{background:linear-gradient(90deg,#0e8f86,#4ac4b6)}
.ds-tile.b3 .bar i{background:linear-gradient(90deg,#d9860f,#f0b45c)}
.ds-tile.b4 .bar i{background:linear-gradient(90deg,#6b52d4,#a394ee)}

.ds-chart-t{font-size:13.5px;font-weight:700;color:#0b2b44;margin:18px 0 6px;padding-left:10px;border-left:3px solid #2c7da0}
.ds-chart{height:200px}
.ds-note{font-size:11.5px;color:var(--mut);margin-top:8px;line-height:1.7}

.ds-rank{margin-bottom:10px}
.ds-rank-hd{display:flex;align-items:baseline;justify-content:space-between;font-size:12.5px;color:var(--sub);margin-bottom:5px}
.ds-rank-hd .v{color:#0b2b44;font-weight:800;font-size:14px}
.ds-rank-b{height:9px;border-radius:9px;background:#f0f4f8;overflow:hidden}
.ds-rank-b i{display:block;height:100%;border-radius:9px;width:0;transition:width 1s cubic-bezier(.2,.7,.3,1)}
.ds-rank.r1 .ds-rank-b i{background:linear-gradient(90deg,#e08a12,#f3b24b)}
.ds-rank.r2 .ds-rank-b i{background:linear-gradient(90deg,#1e6fd9,#54a8ea)}
.ds-rank.r3 .ds-rank-b i{background:linear-gradient(90deg,#0e8f86,#4ac4b6)}

/* ---- 浅色版通用区块 ---- */
.dash .sec{padding:52px 0 0}
.dash .sec-k{color:#1e6fd9;letter-spacing:2.6px}
.dash .sec-t{color:#0b2b44;font-size:26px;font-weight:800}
.dash .sec-d{color:var(--sub);font-size:14px}
.dash .info-card{background:#fff;box-shadow:0 6px 22px rgba(11,43,68,.05)}
.dash .info-card h4{color:#1e6fd9}
.dash .info-card li::before{color:#1e6fd9}
.dash .pj-card{background:#fff;box-shadow:0 6px 22px rgba(11,43,68,.05)}
.dash .pj-card:hover{border-color:#9dc4ea;box-shadow:0 16px 40px rgba(11,43,68,.13)}
.dash .pj-cover::after{background:linear-gradient(180deg,transparent 48%,rgba(255,255,255,.92))}
.dash .pj-foot{border-top-color:var(--line)}
.dash .pj-go{color:#1e6fd9}
.dash .tl::before{background:linear-gradient(180deg,#2c7da0,#1e6fd9,transparent)}
.dash .tl-it::before{background:#fff;border-color:#2c7da0}
.dash .tl-date{color:#1e6fd9}
.dash .gal-it{background:#fff;box-shadow:0 6px 22px rgba(11,43,68,.05)}
.dash .gal-it:hover{border-color:#9dc4ea;box-shadow:0 14px 34px rgba(11,43,68,.13)}
.dash .gal-it::after{background:rgba(11,43,68,.82);color:#8fd8ff}
.dash .res-card{background:#fff;box-shadow:0 6px 22px rgba(11,43,68,.05)}
.dash .res-n{background:linear-gradient(120deg,#1e6fd9,#2fa8d6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dash footer{border-top:1px solid var(--line)}
.dash .back-home a{background:#fff;border-color:var(--line2);color:#1e6fd9}

/* ---- 底部联系条 ---- */
.ds-foot{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:stretch}
.ds-foot .ds-card{display:flex;flex-direction:column;justify-content:center}
.ds-contact{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

@media (max-width:1240px){
  .ds-grid{grid-template-columns:1fr 1fr}
  .ds-foot{grid-template-columns:1fr}
}
@media (max-width:900px){
  .dsb{position:static;width:100%;flex-direction:column}
  .dsb-g{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
  .dsb-g-t{display:none}
  .dsb-a{display:inline-flex;width:auto;margin:0}
  .dsb-foot{margin-top:8px}
  .dsw{margin-left:0;padding:18px 16px 40px}
  .ds-grid{grid-template-columns:1fr}
  .ds-title{font-size:24px}
}