:root{
  --bg:#0b0d12; --panel:#14171e; --panel2:#181c24; --line:#272c36;
  --text:#f4f5f7; --muted:#858d9c; --purple:#927cff; --green:#65d69b;
  --amber:#ffb454; --red:#ff7777; --blue:#6da7ff;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
button,input,select{font:inherit}
.app{display:flex;min-height:100vh}
.sidebar{width:225px;background:#11141b;border-right:1px solid var(--line);padding:24px 14px;position:fixed;inset:0 auto 0 0;overflow:auto}
.brand{font-size:24px;font-weight:850;letter-spacing:2px;padding:0 10px 4px}
.brand span{color:var(--purple)}
.brand-sub{font-size:8px;color:#656e7d;letter-spacing:1.35px;padding:0 10px 23px}
.nav{display:flex;gap:11px;align-items:center;padding:11px 12px;margin:4px 0;border-radius:8px;color:#aeb4c0;text-decoration:none;font-size:13px;cursor:pointer}
.nav:hover,.nav.active{background:#29243e;color:white}
.section{color:#626a78;font-size:9px;letter-spacing:1.5px;margin:23px 12px 8px}
.main{margin-left:225px;width:calc(100% - 225px);padding:30px 36px 60px}
.top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:24px}
.top h1{margin:0;font-size:27px}
.sub{color:var(--muted);margin-top:6px;font-size:13px}
.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.button{border:0;background:var(--purple);color:#fff;padding:10px 14px;border-radius:8px;font-weight:700;cursor:pointer}
.button.secondary{background:#20242d;color:#d9dde5;border:1px solid #2d333d}
.button.small{padding:7px 10px;font-size:11px}
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.filter{background:#14171e;color:#aeb4c0;border:1px solid #2b303a;border-radius:20px;padding:8px 12px;font-size:11px;cursor:pointer}
.filter.active{background:#2d2748;color:#fff;border-color:#443d67}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:18px}
.label{font-size:10px;color:#89909d;text-transform:uppercase;letter-spacing:.3px}
.value{font-size:27px;font-weight:750;margin-top:8px}
.note{font-size:10px;color:#777f8d;margin-top:6px}
.good{color:var(--green)} .warn{color:var(--amber)} .danger{color:var(--red)} .purple{color:#a694ff} .blue{color:var(--blue)}
.grid{display:grid;grid-template-columns:1.65fr 1fr;gap:17px}
.grid.equal{grid-template-columns:1fr 1fr}
.title{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.smalllink{font-size:10px;color:var(--purple);cursor:pointer}
.row{padding:13px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.spread{display:flex;justify-content:space-between;gap:15px;align-items:center}
.name{font-size:13px;font-weight:650}
.meta{font-size:10px;color:#79818e;margin-top:4px}
.badge{display:inline-block;padding:5px 7px;border-radius:5px;font-size:9px;margin:6px 4px 0 0;background:#222630;color:#b6bdc7}
.badge.ok{background:#153526;color:#6cdaa0}.badge.need{background:#3a2a13;color:#ffc16c}.badge.red{background:#3b1f23;color:#ff8c94}.badge.blue{background:#172d48;color:#83b9ff}.badge.purple{background:#2c2645;color:#b2a6ff}
.progress{height:7px;background:#242832;border-radius:8px;overflow:hidden;margin-top:11px}
.progress > i{display:block;height:100%;background:var(--purple);border-radius:inherit}
.progress.green > i{background:var(--green)} .progress.amber > i{background:var(--amber)} .progress.red > i{background:var(--red)}
.campaign-row{display:grid;grid-template-columns:1.8fr 1fr .7fr 1fr 1fr .9fr;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);cursor:pointer}
.campaign-row:hover{background:#181c24}
.campaign-row.header{font-size:9px;color:#6f7784;text-transform:uppercase;cursor:default}
.campaign-row.header:hover{background:transparent}
.kpi{font-size:12px;font-weight:650}
.stage{font-size:9px;border-radius:10px;padding:5px 7px;display:inline-block}
.stage.plan{background:#252935;color:#aab1bd}.stage.launch{background:#1c2f45;color:#7eb6ff}.stage.build{background:#2b2745;color:#ac9dff}.stage.accelerate{background:#493817;color:#ffcb77}.stage.final{background:#432126;color:#ff9299}.stage.live{background:#17362a;color:#75dca7}
.attn{padding:12px 0;border-bottom:1px solid var(--line)}
.attn:last-child{border-bottom:0}
.channel{display:grid;grid-template-columns:1.1fr .8fr .8fr .8fr;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.channel:last-child{border-bottom:0}
.toolbar{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.search,.select{background:#14171e;border:1px solid #2a2f39;color:#eee;border-radius:8px;padding:10px 12px}
.search{flex:1;min-width:220px}
.event-card{cursor:pointer}.event-card:hover{background:#181c24}
.event-list-row{display:grid;grid-template-columns:1.5fr .9fr .7fr .9fr;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.event-list-row:last-child{border-bottom:0}
.person{display:grid;grid-template-columns:auto 1.4fr 1fr .8fr .8fr;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.person:last-child{border-bottom:0}
.avatar{width:34px;height:34px;border-radius:50%;background:#292440;display:flex;align-items:center;justify-content:center;font-size:10px}
.status{font-size:8px;background:#153526;color:#6cdaa0;padding:4px 7px;border-radius:10px;width:max-content}
.tabs{display:flex;gap:8px;border-bottom:1px solid #292e38;margin:18px 0;overflow:auto}
.tab{padding:10px 11px;color:#89919e;font-size:12px;white-space:nowrap;cursor:pointer}
.tab.active{color:#fff;border-bottom:2px solid var(--purple)}
.detailgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:17px}
.hero-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}
.hero-kpis .card{padding:14px}
.back{cursor:pointer;color:#9c8cff;font-size:12px;margin-bottom:15px}
.lifecycle{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:14px 0 20px}
.life{padding:10px 6px;border:1px solid var(--line);border-radius:7px;text-align:center;font-size:9px;color:#737b88;background:#11141b}
.life.done{color:#87909c;background:#171a21}.life.active{background:#332a53;color:white;border-color:#4e4277}
.chart-wrap{height:260px;position:relative}
canvas{width:100%;height:100%;display:block}
.legend{display:flex;gap:18px;font-size:10px;color:#858d9c;margin-top:8px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.dot.plan{background:#58606f}.dot.actual{background:#927cff}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.info{background:#11141b;border:1px solid #242a34;border-radius:8px;padding:12px}
.info strong{display:block;font-size:13px;margin-top:5px}
.role{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.role:last-child{border-bottom:0}
.unfilled{color:var(--amber)}
.timeline-item{display:grid;grid-template-columns:90px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.timeline-item:last-child{border-bottom:0}
.content-card{display:grid;grid-template-columns:1.4fr .8fr .8fr .7fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.budget-row{display:grid;grid-template-columns:1.3fr .8fr .8fr .8fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.brandbox{background:linear-gradient(135deg,#171a22,#1d1830);border:1px solid #332d4c;border-radius:12px;padding:22px}
.placeholder{padding:48px;text-align:center;color:#7f8794}
.toast{position:fixed;right:24px;bottom:24px;background:#20242d;color:#fff;border:1px solid #343a45;border-radius:9px;padding:12px 15px;font-size:12px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}
.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1100px){.metrics{grid-template-columns:repeat(2,1fr)}.hero-kpis{grid-template-columns:repeat(2,1fr)}.campaign-row{grid-template-columns:1.5fr 1fr 1fr}.campaign-row>*:nth-child(n+4){display:none}}
@media(max-width:900px){.grid,.grid.equal,.detailgrid{grid-template-columns:1fr}.sidebar{width:190px}.main{margin-left:190px;width:calc(100% - 190px)}}