/* ============================================================
   投放数据中台 · 全局样式（深色驾驶舱风格）
   基于用户提供的 HTML 驾驶舱样式扩展为管理后台布局
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:#0a0a23;color:#e2e8f0;line-height:1.5;font-size:14px;
}
a{color:inherit;text-decoration:none}
:root{
  --bg:#0a0a23; --bg2:#16162c; --bg3:#1e1e3c; --bg4:#262650;
  --c1:#6366f1; --c1d:#4f46e5; --c2:#fbbf24; --c3:#10b981; --c4:#f87171; --c5:#06b6d4; --c6:#a855f7;
  --tx:#e2e8f0; --tx2:#94a3b8; --tx3:#64748b; --bd:rgba(255,255,255,0.08);
}

/* ===== Layout ===== */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:232px;flex-shrink:0;background:#111130;border-right:1px solid var(--bd);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar .logo{padding:22px 20px 18px;border-bottom:1px solid var(--bd)}
.sidebar .logo .t{font-size:17px;font-weight:700;color:#fff;letter-spacing:0.5px}
.sidebar .logo .s{font-size:11px;color:var(--tx3);margin-top:3px}
.nav{padding:12px 10px;flex:1}
.nav .group{font-size:11px;color:var(--tx3);padding:12px 10px 6px}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;
  color:var(--tx2);font-size:13.5px;cursor:pointer;transition:all .18s;margin-bottom:2px;
}
.nav-item:hover{background:var(--bg3);color:var(--tx)}
.nav-item.active{background:linear-gradient(135deg,var(--c1d),var(--c6));color:#fff;font-weight:600;box-shadow:0 4px 14px rgba(99,102,241,0.35)}
.nav-item .badge{margin-left:auto;font-size:10px;background:var(--c4);color:#fff;border-radius:8px;padding:1px 7px}
.sidebar .user{padding:14px 18px;border-top:1px solid var(--bd);font-size:12px}
.sidebar .user .n{color:var(--tx);font-weight:600}
.sidebar .user .e{color:var(--tx3);font-size:11px;word-break:break-all}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:14px 26px;background:rgba(10,10,35,0.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--bd);
}
.topbar h2{font-size:17px;font-weight:700;color:#fff}
.topbar .spacer{flex:1}
.topbar .sync-btn{font-size:12.5px}
.content{padding:24px 26px 60px;flex:1}

.wrap{max-width:1500px;margin:0 auto}

/* ===== Flash ===== */
.flash{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:13.5px;border:1px solid}
.flash-success{background:rgba(16,185,129,0.12);border-color:rgba(16,185,129,0.35);color:#34d399}
.flash-error{background:rgba(248,113,113,0.12);border-color:rgba(248,113,113,0.35);color:#f87171}

/* ===== Banner ===== */
.banner{
  margin:0 0 22px;border-radius:16px;
  background:linear-gradient(135deg,#4f46e5 0%,#6366f1 50%,#7c3aed 100%);
  padding:24px 28px;position:relative;overflow:hidden;
  box-shadow:0 12px 40px rgba(99,102,241,0.25);
}
.banner::before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.12),transparent 70%)}
.banner h1{font-size:24px;font-weight:700;color:#fff;margin-bottom:6px;letter-spacing:0.5px}
.banner .sub{color:rgba(255,255,255,0.85);font-size:13px;margin-bottom:12px}
.banner .tags{display:flex;gap:20px;flex-wrap:wrap}
.banner .tags div{font-size:12.5px;color:rgba(255,255,255,0.85)}
.banner .tags b{color:#fbbf24;font-weight:600;margin-right:5px}

/* ===== KPI ===== */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}
.kpi{
  background:linear-gradient(180deg,var(--bg3),var(--bg2));
  border:1px solid var(--bd);border-radius:13px;padding:16px 18px;position:relative;overflow:hidden;
}
.kpi::before{content:"";position:absolute;top:0;right:0;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,var(--c1)18%,transparent 70%);opacity:0.16;transform:translate(18px,-18px)}
.kpi.k2::before{background:radial-gradient(circle,var(--c2)18%,transparent 70%)}
.kpi.k3::before{background:radial-gradient(circle,var(--c3)18%,transparent 70%)}
.kpi.k4::before{background:radial-gradient(circle,var(--c6)18%,transparent 70%)}
.kpi.k5::before{background:radial-gradient(circle,var(--c4)18%,transparent 70%)}
.kpi .label{font-size:12.5px;color:var(--tx2);margin-bottom:8px}
.kpi .num{font-size:27px;font-weight:700;color:#fff;letter-spacing:0.3px;line-height:1.1}
.kpi .unit{font-size:13px;color:var(--tx2);margin-left:3px;font-weight:400}
.kpi .delta{margin-top:8px;font-size:11.5px;color:var(--tx3);display:flex;align-items:center;gap:5px}
.kpi .delta.up{color:var(--c3)}
.kpi .delta.dn{color:var(--c4)}

/* ===== Section ===== */
.sec{margin-bottom:26px}
.sec-h{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;margin-bottom:14px;padding-left:9px;border-left:3px solid var(--c1)}
.sec-h .tag{font-size:11px;background:var(--c3);color:#022;padding:2px 8px;border-radius:6px;font-weight:500}
.sec-h .tag-w{font-size:11px;background:var(--c2);color:#422;padding:2px 8px;border-radius:6px;font-weight:500}
.sec-h .tag-p{font-size:11px;background:var(--c6);color:#fff;padding:2px 8px;border-radius:6px;font-weight:500}
.sec-h .spacer{flex:1}
.sec-h a.more{font-size:12px;color:var(--c1)}

.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

.card{background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--bd);border-radius:13px;padding:16px 18px;margin-bottom:16px}
.card-h{font-size:13.5px;color:var(--tx2);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;font-weight:500}
.card-h .more{font-size:12px;color:var(--c1);cursor:pointer}

/* ===== Table ===== */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;font-weight:500;color:var(--tx2);padding:10px 8px;border-bottom:1px solid var(--bd);font-size:12px;white-space:nowrap}
.tbl td{padding:12px 8px;border-bottom:1px solid var(--bd);color:var(--tx);white-space:nowrap}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:rgba(99,102,241,0.05)}

.bdg{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:500}
.bdg-g{background:rgba(16,185,129,0.15);color:var(--c3)}
.bdg-r{background:rgba(248,113,113,0.15);color:var(--c4)}
.bdg-y{background:rgba(251,191,36,0.15);color:var(--c2)}
.bdg-b{background:rgba(99,102,241,0.18);color:#a5b4fc}
.bdg-p{background:rgba(168,85,247,0.18);color:#d8b4fe}
.bdg-cy{background:rgba(6,182,212,0.15);color:var(--c5)}

/* ===== Bar ===== */
.bar-list{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.bar-row .lab{display:flex;justify-content:space-between;font-size:12px;color:var(--tx2);margin-bottom:4px}
.bar-bg{height:8px;border-radius:4px;background:var(--bg4);overflow:hidden;position:relative}
.bar-fg{position:absolute;left:0;top:0;height:100%;border-radius:4px}
.bar-fg.c1{background:linear-gradient(90deg,var(--c1),var(--c6))}
.bar-fg.c2{background:linear-gradient(90deg,var(--c2),var(--c5))}
.bar-fg.c3{background:linear-gradient(90deg,var(--c3),var(--c5))}
.bar-fg.c4{background:linear-gradient(90deg,var(--c4),var(--c2))}
.bar-fg.c5{background:linear-gradient(90deg,var(--c6),var(--c4))}
.bar-fg.c6{background:linear-gradient(90deg,var(--c5),var(--c1))}

/* ===== Funnel ===== */
.funnel{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0}
.fnl-step{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#fff;font-weight:500;font-size:12.5px;border-radius:0 22px 22px 0;position:relative;overflow:hidden}
.fnl-step::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0.1) 0%,transparent 100%)}
.fnl-step.s1{background:linear-gradient(90deg,#3b3bcf,#6366f1);width:100%}
.fnl-step.s2{background:linear-gradient(90deg,#5454e3,#818cf8);width:88%}
.fnl-step.s3{background:linear-gradient(90deg,#7373e8,#a78bfa);width:75%}
.fnl-step.s4{background:linear-gradient(90deg,#8b5cf6,#c084fc);width:62%}
.fnl-step.s5{background:linear-gradient(90deg,#a855f7,#f0abfc);width:48%}
.fnl-step .v{font-size:15px;font-weight:700;margin-left:10px}
.fnl-step .t{font-size:11px;color:rgba(255,255,255,0.85);margin-left:10px}
.fn-converter{text-align:center;font-size:11px;color:var(--c2);padding:2px 0;font-weight:600}

/* ===== Risk list ===== */
.risk-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:10px;background:var(--bg2);border:1px solid var(--bd);margin-bottom:8px}
.risk-row:hover{background:var(--bg3)}
.risk-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.risk-ico.high{background:rgba(248,113,113,0.18);color:var(--c4)}
.risk-ico.mid{background:rgba(251,191,36,0.18);color:var(--c2)}
.risk-ico.low{background:rgba(6,182,212,0.18);color:var(--c5)}
.risk-body{flex:1}
.risk-body .t{font-size:13px;color:var(--tx);margin-bottom:2px;font-weight:500}
.risk-body .s{font-size:11px;color:var(--tx3)}
.risk-status{font-size:11px;color:var(--tx2);flex-shrink:0}
.risk-time{font-size:11px;color:var(--tx3);min-width:76px;text-align:right;flex-shrink:0}
.risk-actions{flex-shrink:0;display:flex;gap:6px}

/* ===== Forms ===== */
.form-card{max-width:760px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-grid .full{grid-column:1/-1}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-group label{font-size:12.5px;color:var(--tx2)}
.form-group label .req{color:var(--c4)}
.input,.select,textarea.input{
  background:var(--bg2);border:1px solid var(--bd);border-radius:9px;color:var(--tx);
  padding:9px 12px;font-size:13.5px;font-family:inherit;width:100%;outline:none;transition:border .15s;
}
.input:focus,.select:focus,textarea.input:focus{border-color:var(--c1)}
.input::placeholder{color:var(--tx3)}
textarea.input{resize:vertical;min-height:70px}
.select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%2394a3b8'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
.form-actions{display:flex;gap:10px;margin-top:8px}
.help{font-size:11px;color:var(--tx3)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:9px;
  font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .15s;font-family:inherit;
}
.btn-primary{background:linear-gradient(135deg,var(--c1d),var(--c6));color:#fff;box-shadow:0 4px 14px rgba(99,102,241,0.3)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-success{background:rgba(16,185,129,0.18);color:#34d399}
.btn-success:hover{background:rgba(16,185,129,0.28)}
.btn-warn{background:rgba(251,191,36,0.16);color:#fbbf24}
.btn-warn:hover{background:rgba(251,191,36,0.26)}
.btn-danger{background:rgba(248,113,113,0.16);color:#f87171}
.btn-danger:hover{background:rgba(248,113,113,0.28)}
.btn-ghost{background:transparent;color:var(--tx2);border:1px solid var(--bd)}
.btn-ghost:hover{background:var(--bg3);color:var(--tx)}
.btn-sm{padding:4px 10px;font-size:12px;border-radius:7px}
.btn-sm-danger{background:transparent;color:#f87171;border:1px solid rgba(248,113,113,0.3);padding:4px 10px;font-size:12px;border-radius:7px;cursor:pointer}
.btn-sm-danger:hover{background:rgba(248,113,113,0.15)}

/* ===== Filters ===== */
.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.filter-bar .input,.filter-bar .select{width:auto;min-width:150px}

/* ===== Pagination ===== */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.pagination a,.pagination span{
  padding:6px 12px;border-radius:8px;background:var(--bg2);border:1px solid var(--bd);
  color:var(--tx2);font-size:12.5px;
}
.pagination .active{background:linear-gradient(135deg,var(--c1d),var(--c6));color:#fff;border-color:transparent}
.pagination .disabled{opacity:0.4}

/* ===== Creative cards ===== */
.video-card{border-radius:12px;overflow:hidden;background:var(--bg4);position:relative;aspect-ratio:9/16;display:flex;align-items:center;justify-content:center;cursor:pointer}
.video-card .frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;color:rgba(255,255,255,0.8);letter-spacing:2px;text-align:center;padding:0 10px}
.video-card.v1{background:linear-gradient(135deg,#ef4444,#f59e0b)}
.video-card.v2{background:linear-gradient(135deg,#3b82f6,#6366f1)}
.video-card.v3{background:linear-gradient(135deg,#ec4899,#a855f7)}
.video-card.v4{background:linear-gradient(135deg,#10b981,#06b6d4)}
.video-card.v5{background:linear-gradient(135deg,#f59e0b,#ec4899)}
.video-card .tags{position:absolute;top:10px;left:10px;display:flex;gap:4px;flex-wrap:wrap}
.video-card .stats{position:absolute;bottom:0;left:0;right:0;padding:10px;background:linear-gradient(transparent,rgba(0,0,0,0.85));color:#fff;font-size:11.5px}
.video-card .stats b{font-size:15px}

/* ===== Donut ===== */
.donut-wrap{display:flex;align-items:center;gap:22px}
.donut{position:relative;width:160px;height:160px;flex-shrink:0}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-center .n{font-size:24px;font-weight:700;color:#fff}
.donut-center .l{font-size:11px;color:var(--tx2)}
.donut-legend{flex:1;display:flex;flex-direction:column;gap:7px}
.legend-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx)}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ===== Tag cloud ===== */
.tagcloud{line-height:2.3}
.tagcloud .bdg{font-size:12.5px;padding:5px 11px;margin:2px}

/* ===== Radar rows ===== */
.radar-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx2);margin-bottom:8px}
.radar-row .nm{flex:0 0 74px}
.radar-row .b{flex:1;height:6px;border-radius:3px;background:var(--bg4);overflow:hidden;position:relative}
.radar-row .f{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--c1),var(--c6))}

/* ===== Path flow ===== */
.path-flow{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:18px 0;flex-wrap:wrap}
.path-node{padding:10px 14px;border-radius:10px;background:var(--bg4);font-size:12px;color:var(--tx);text-align:center;border:1px solid var(--bd);min-width:88px}
.path-node.pn-primary{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;border:none;font-weight:600;box-shadow:0 4px 12px rgba(99,102,241,0.35)}
.path-arrow{flex:1;font-size:11px;color:var(--c2);text-align:center;font-weight:600;min-width:40px}

/* ===== Misc ===== */
.muted{color:var(--tx2)}
.tiny{font-size:11px;color:var(--tx3)}
.right{text-align:right}
.center{text-align:center}
.flex{display:flex;align-items:center}
.between{display:flex;justify-content:space-between;align-items:center}
.gap{gap:8px}
.gap2{gap:14px}
.mt-1{margin-top:8px}
.mt-2{margin-top:14px}
.mt-3{margin-top:20px}
.mb-1{margin-bottom:8px}
.mb-2{margin-bottom:14px}
.mb-3{margin-bottom:20px}
.foot{margin-top:40px;padding:20px 0;border-top:1px solid var(--bd);text-align:center;color:var(--tx3);font-size:12px}

.chart-box{position:relative;height:240px}
.empty{padding:40px;text-align:center;color:var(--tx3);font-size:13px}

@media (max-width:1200px){.kpis{grid-template-columns:repeat(2,1fr)}.grid2,.grid3,.grid4{grid-template-columns:1fr}}
@media (max-width:900px){.sidebar{display:none}.form-grid{grid-template-columns:1fr}}