:root{
  --midnight:#0d1b2a; --navy:#1b263b; --navy2:#243349; --amber:#f4a300; --amber-dk:#c9870a;
  --cream:#f6f1e7; --slate:#5b6470; --white:#fff; --line:#e6e1d6; --green:#1c7c43; --red:#b00020;
  --sidebar-w:230px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#f0f2f5;color:var(--midnight);line-height:1.5}
a{color:inherit;text-decoration:none}
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--midnight);color:#cfd6df;position:fixed;height:100vh;display:flex;flex-direction:column;z-index:10}
.sidebar .brand{display:flex;align-items:center;gap:8px;padding:18px 18px;border-bottom:1px solid #223047;font-size:16px;color:#fff;letter-spacing:.5px}
.sidebar .brand .m{font-size:22px}
.nav{padding:10px 8px;flex:1;overflow-y:auto}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:14px;color:#aeb8c4;margin-bottom:2px}
.nav a:hover{background:#1c2940;color:#fff}
.nav a.active{background:var(--amber);color:var(--midnight);font-weight:600}
.nav .ico{width:20px;text-align:center}
.sidebar .foot{padding:12px;font-size:11px;color:#6b7686;border-top:1px solid #223047}
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:60px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:5}
.topbar .crumb{font-size:15px;font-weight:600;color:var(--navy)}
.topbar .right{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--slate)}
.topbar .ava{width:32px;height:32px;border-radius:50%;background:var(--amber);color:var(--midnight);display:flex;align-items:center;justify-content:center;font-weight:700}
.content{padding:24px;max-width:1200px;width:100%}
.page-title{font-size:22px;color:var(--navy);margin-bottom:4px}
.page-sub{color:var(--slate);font-size:13px;margin-bottom:20px}
.grid{display:grid;gap:16px}
.cards-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cards-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cards-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.stat .k{font-size:12px;color:var(--slate);text-transform:uppercase;letter-spacing:.5px}
.stat .v{font-size:26px;font-weight:700;color:var(--navy);margin-top:4px}
.stat .d{font-size:12px;margin-top:4px}
.up{color:var(--green)} .down{color:var(--red)}
.agent{display:flex;flex-direction:column;gap:6px}
.agent .top{display:flex;align-items:center;gap:10px}
.agent .emoji{font-size:26px}
.agent h3{font-size:15px;letter-spacing:.5px;text-transform:uppercase}
.agent .role{font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:1px}
.agent p{font-size:13px;color:var(--slate)}
.badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:#e7f4ec;color:var(--green);text-transform:uppercase}
.badge.off{background:#fbeaea;color:var(--red)}
.badge.run{background:#fff3d6;color:var(--amber-dk)}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}
th{background:#f7f5ef;color:var(--slate);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
tr:last-child td{border-bottom:none}
.tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;margin-right:3px;color:#fff}
.tag.fb{background:#1877f2}.tag.ig{background:#e1306c}.tag.tt{background:#000}.tag.gb{background:#34a853}.tag.yt{background:#ff0000}.tag.em{background:#6b7686}
.pill{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.pill.done{background:#e7f4ec;color:var(--green)}
.pill.sched{background:#fff3d6;color:var(--amber-dk)}
.pill.draft{background:#eef1f4;color:var(--slate)}
/* Calendar board */
.cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.day{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;border-top:3px solid var(--amber);display:flex;flex-direction:column}
.day .num{font-size:12px;color:var(--slate);font-weight:600;margin-bottom:6px}
.post-media{height:120px;border-radius:8px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;text-align:center;margin-bottom:8px;background:linear-gradient(135deg,#1b263b,#243349)}
.post-media.video{background:linear-gradient(135deg,#000,#262626)}
.post-media .play{font-size:22px}
.copy{font-size:12.5px;color:var(--navy);margin-bottom:8px;line-height:1.45}
.hashtags{font-size:11px;color:var(--amber-dk);font-weight:600;margin-top:auto}
.bars{display:flex;align-items:flex-end;gap:10px;height:160px;padding:10px 0}
.bars .b{flex:1;background:linear-gradient(var(--amber),var(--amber-dk));border-radius:6px 6px 0 0;position:relative}
.bars .b span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:10px;color:var(--slate)}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--navy)}
.btn.primary{background:var(--amber);border-color:var(--amber);color:var(--midnight)}
.note{background:#fff;border-left:4px solid var(--amber);padding:12px 16px;border-radius:8px;font-size:13px;color:var(--slate);margin:14px 0}
.client-pick{display:flex;gap:8px;align-items:center;font-size:13px}
.client-pick select{padding:6px 10px;border-radius:8px;border:1px solid var(--line)}
@media(max-width:720px){.sidebar{transform:translateX(-100%)}.main{margin-left:0}}