/* Flux Panel — shared styles (design system reused from panel-v1)
   Light bg #f5f6f8 · sidebar #0f2233 · accent #2ea86a · white cards
   Platform dots: FB #1877f2 · IG #e1306c · YT #ff0000 · TT #111 */
:root{
  --bg:#f5f6f8; --card:#ffffff; --line:#e3e7ee; --line2:#eef1f6;
  --txt:#1c2b3a; --mut:#64748b; --mut2:#94a3b8;
  --green:#2ea86a; --green-d:#1e7a4c; --green-bg:#e8f6ee;
  --amber:#b45309; --amber-bg:#fdf3e0;
  --red:#c62f3b; --red-bg:#fdeeee;
  --blue:#1d6fd1; --blue-bg:#e9f2fc;
  --grey-bg:#eef1f5;
  --side:#0f2233; --side-txt:#c9d6e2;
  --radius:12px;
  --fb:#1877f2; --ig:#e1306c; --yt:#ff0000; --tt:#111111;
  --shadow:0 1px 3px rgba(15,34,51,.07), 0 1px 2px rgba(15,34,51,.04);
}
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--txt);
  font:15px/1.5 -apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  overflow-wrap:normal; word-break:normal}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25}
.mut{color:var(--mut)} .small{font-size:12.5px} .num{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.ell{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}

/* ============ layout: dark sidebar + light content (Sprout-style) ============ */
.layout{display:flex; min-height:100vh}
aside{width:230px; flex:0 0 230px; background:var(--side); color:var(--side-txt);
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:18px 12px; z-index:60}
.logo{display:flex; align-items:center; gap:10px; padding:2px 10px 16px; color:#fff; min-width:0}
.logo .mark{width:34px; height:34px; border-radius:9px; background:var(--green); color:#fff;
  display:grid; place-items:center; font-size:18px; font-weight:800; flex:0 0 34px}
.logo b{font-size:17px; display:block; line-height:1.15; white-space:nowrap}
.logo small{display:block; font-size:10px; font-weight:600; letter-spacing:1.2px; color:#8fb0c9; white-space:nowrap}
nav.side{flex:1; overflow-y:auto}
nav.side .grp{font-size:10.5px; font-weight:700; letter-spacing:1.4px; color:#7e97ad;
  text-transform:uppercase; padding:16px 12px 6px; white-space:nowrap}
nav.side a{display:flex; align-items:center; gap:10px; width:100%;
  color:var(--side-txt); font-size:14.5px; font-weight:500; white-space:nowrap;
  padding:9px 12px; border-radius:8px; margin-bottom:2px}
nav.side a .ic{width:18px; text-align:center; flex:0 0 18px; font-size:14px}
nav.side a:hover{background:rgba(255,255,255,.07); color:#fff; text-decoration:none}
nav.side a.on{background:var(--green); color:#fff; font-weight:600}
.sidefoot{border-top:1px solid rgba(255,255,255,.12); padding:12px 10px 2px; font-size:12.5px; color:#8fb0c9}
.sidefoot b{color:#fff; font-size:13.5px}
.wrap{flex:1; min-width:0}
.topbar{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:12px 26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.topbar h1{font-size:19px; font-weight:700; white-space:nowrap}
.topbar .sp{flex:1}
.topbar .uemail{color:var(--mut); font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px}
main{max-width:1240px; margin:0 auto; padding:24px 26px 64px; min-width:0}
.view{animation:fade .2s ease}
@keyframes fade{from{opacity:0; transform:translateY(3px)} to{opacity:1; transform:none}}

/* ============ controls ============ */
button,.btn{font:inherit; cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--txt);
  padding:8px 14px; border-radius:9px; box-shadow:var(--shadow); display:inline-block; white-space:nowrap}
button:hover,.btn:hover{border-color:#cbd5e1; text-decoration:none}
button.primary,.btn.primary{background:var(--green); border-color:var(--green); color:#fff; font-weight:600; box-shadow:none}
button.primary:hover,.btn.primary:hover{background:var(--green-d); border-color:var(--green-d)}
button.mini{padding:5px 11px; font-size:13px; border-radius:8px; box-shadow:none}
button.mini.on,button.mini.primary{background:var(--green); color:#fff; border-color:var(--green)}
button.danger{background:var(--red-bg); border-color:#f3c2c6; color:var(--red)}
button.retry{background:var(--red-bg); border-color:#f3c2c6; color:var(--red); padding:5px 11px; font-size:13px; border-radius:8px; box-shadow:none}
button:disabled{opacity:.55; cursor:wait}
.btn.big,button.big{padding:11px 22px; font-size:15.5px; border-radius:10px}
.rowbtns{display:flex; gap:6px; flex-wrap:wrap}
select,input[type=text],input[type=email],input[type=date],input[type=time],input[type=datetime-local],
input[type=search],input[type=password],input[type=url],textarea{
  background:#fff; border:1px solid var(--line); color:var(--txt); border-radius:9px;
  padding:9px 12px; font:inherit; font-size:14px; outline:none}
select:focus,input:focus,textarea:focus{border-color:var(--green); box-shadow:0 0 0 3px rgba(46,168,106,.15)}
input[type=checkbox],input[type=radio]{width:17px; height:17px; accent-color:var(--green); cursor:pointer; flex:0 0 17px}
label.f{display:block; margin-bottom:13px; font-size:13px; color:var(--mut); font-weight:500}
label.f input,label.f select,label.f textarea{width:100%; margin-top:5px; color:var(--txt)}
label.f .hint{display:block; margin-top:4px; font-size:12px; color:var(--mut2); font-weight:400}
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:center}
.fchips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.fchips button{border-radius:999px; padding:7px 16px; font-size:13.5px; font-weight:600; box-shadow:none; white-space:nowrap}
.fchips button.on{background:var(--side); color:#fff; border-color:var(--side)}

/* ============ cards / tables ============ */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; margin-bottom:18px; box-shadow:var(--shadow); min-width:0}
.card h2{font-size:15.5px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.card h2 .sub{color:var(--mut); font-weight:400; font-size:13px}
.card h3{font-size:14.5px; font-weight:700; margin-bottom:10px}
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; color:var(--mut); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.6px;
  padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:10px; border-bottom:1px solid var(--line2); vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#f8fafc}
.tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tscroll table{min-width:560px}
.titlecell{max-width:340px}
.titlecell .t{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.empty{color:var(--mut); padding:22px 10px; text-align:center; font-size:14px}
.loading{color:var(--mut); padding:26px; text-align:center}
.spin{display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--green);
  border-radius:50%; animation:sp .8s linear infinite; vertical-align:-2px; margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}

/* status pills */
.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap}
.pill::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 7px}
.pill.posted{color:var(--green-d); background:var(--green-bg)}
.pill.pending{color:var(--amber); background:var(--amber-bg)}
.pill.posting{color:var(--blue); background:var(--blue-bg)}
.pill.error{color:var(--red); background:var(--red-bg)}
.pill.grey{color:var(--mut); background:var(--grey-bg)}

/* platform chip: dot in network color + name */
.pchip{display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap; background:var(--grey-bg); color:var(--txt)}
.pdot{width:8px; height:8px; border-radius:50%; display:inline-block; flex:0 0 8px; background:var(--mut2)}
.pdot.fb{background:var(--fb)} .pdot.ig{background:var(--ig)} .pdot.yt{background:var(--yt)} .pdot.tt{background:var(--tt)}
.pchip.fb .pdot{background:var(--fb)} .pchip.ig .pdot{background:var(--ig)}
.pchip.yt .pdot{background:var(--yt)} .pchip.tt .pdot{background:var(--tt)}

/* small status chips */
.schip{display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap}
.schip.live{color:var(--green-d); background:var(--green-bg)}
.schip.info{color:var(--blue); background:var(--blue-bg)}
.schip.warn{color:var(--amber); background:var(--amber-bg)}
.schip.grey{color:var(--mut); background:var(--grey-bg)}
.schip.red{color:var(--red); background:var(--red-bg)}

/* tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:18px}
.tile{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); min-width:0}
.tile .n{font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.15}
.tile .l{color:var(--mut); font-size:12.5px; margin-top:3px}

/* generic chips / selectable account chips */
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{border:1px solid var(--line); background:#fff; border-radius:10px; padding:8px 12px; font-size:13px}
.acctpick{display:flex; flex-wrap:wrap; gap:9px; margin-top:6px}
.acctpick label{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  padding:8px 13px; border-radius:10px; cursor:pointer; font-size:14px; color:var(--txt); max-width:100%}
.acctpick label:has(input:checked){border-color:var(--green); background:var(--green-bg)}
.acctpick label .nm{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px}

/* alerts */
.alert{display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:10px; margin-bottom:10px;
  background:var(--red-bg); border:1px solid #f3c2c6; font-size:14px; flex-wrap:wrap}
.alert.ok{background:var(--green-bg); border-color:#bfe6cf}
.alert.warn{background:var(--amber-bg); border-color:#ecc887}
.alert.info{background:var(--blue-bg); border-color:#bfd9f5}
.alert .sp{flex:1; min-width:200px}
.ok-note{color:var(--green-d); font-size:14px; font-weight:500}

/* agenda / post rows */
.postrow{display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--line2); flex-wrap:wrap}
.postrow:last-child{border-bottom:none}
.postrow .tm{font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; min-width:52px}
.postrow .tt{min-width:0; flex:1 1 220px}
.postrow .tt .t{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600}
.postrow .tt .a{color:var(--mut); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dayhead{font-size:13px; font-weight:700; color:var(--mut); text-transform:uppercase; letter-spacing:.6px;
  margin:18px 0 4px}
.dayhead:first-child{margin-top:0}

/* reports cards */
.acards{display:grid; grid-template-columns:repeat(auto-fill,minmax(262px,1fr)); gap:14px}
.acard{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:180px; min-width:0}
.acard .hd{display:flex; align-items:center; gap:8px; margin-bottom:12px; min-width:0}
.acard .hd .bname{font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0}
.acard .handle{color:var(--mut); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.acard .stats{display:flex; gap:26px; margin:6px 0 4px}
.acard .stat .v{font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.15}
.acard .stat .k{font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--mut); margin-top:2px}
.acard .top{margin-top:12px; border-top:1px solid var(--line2); padding-top:10px}
.acard .top .tlabel{font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--mut2); display:block; margin-bottom:5px}
.acard .top .ti{display:flex; gap:8px; font-size:13px; padding:2px 0}
.acard .top .ti .x{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.acard .top .ti .v{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.acard .setupwrap{flex:1; display:flex; align-items:center}

/* profiles */
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-bottom:18px}
.pcard{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 15px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:7px; min-height:104px; min-width:0}
.pcard .nm{font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pcard .br{color:var(--mut); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pcard .rowb{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; flex-wrap:wrap}
.connectgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px}
.ccard{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow); min-width:0}
.ccard h3{font-size:14.5px; margin-bottom:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ccard p{color:var(--mut); font-size:13.5px; margin-bottom:12px}
.ccard input[type=text],.ccard input[type=password]{width:100%; margin-bottom:10px}
.pagerow{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line2); flex-wrap:wrap}
.pagerow:last-child{border-bottom:none}
.pagerow .pn{flex:1 1 160px; min-width:0}
.pagerow .pn .n{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pagerow .pn .h{color:var(--mut); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pagerow .brandin{width:170px; flex:0 1 170px}

/* modal / toast */
#modal{position:fixed; inset:0; background:rgba(15,34,51,.5); display:none; place-items:center; z-index:120; padding:14px}
#modal.open{display:grid}
#modal .box{background:#fff; border-radius:14px; padding:24px; width:min(480px,94vw); max-height:90vh; overflow-y:auto;
  box-shadow:0 20px 50px rgba(15,34,51,.3); animation:fade .2s ease}
#modal h3{margin-bottom:10px; font-size:17px}
#modal .body{color:var(--mut); font-size:14px; margin-bottom:14px; white-space:pre-wrap}
#modal .btns{display:flex; gap:10px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap}
#toast{position:fixed; bottom:22px; left:50%; transform:translate(-50%,20px); background:var(--side); color:#fff;
  padding:11px 18px; border-radius:12px; box-shadow:0 10px 30px rgba(15,34,51,.35);
  opacity:0; pointer-events:none; transition:all .25s ease; z-index:200; font-size:14px; max-width:92vw; text-align:center}
#toast.show{opacity:1; transform:translate(-50%,0)}
#toast.err{background:#7f1d1d}

/* ============ auth pages ============ */
.authwrap{min-height:100vh; display:grid; place-items:center; padding:20px}
.authcard{background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  padding:30px 28px; width:min(400px,94vw)}
.authcard .logo{color:var(--txt); padding:0 0 6px; justify-content:center}
.authcard .logo small{color:var(--mut2)}
.authcard h1{font-size:20px; text-align:center; margin-bottom:4px}
.authcard .sub{text-align:center; color:var(--mut); font-size:13.5px; margin-bottom:20px}
.authcard .alt{text-align:center; font-size:13.5px; color:var(--mut); margin-top:16px}
.authcard button[type=submit]{width:100%; padding:11px}
.authalert{display:none; padding:10px 13px; border-radius:10px; font-size:13.5px; margin-bottom:14px;
  background:var(--red-bg); border:1px solid #f3c2c6; color:var(--red)}
.authalert.show{display:block}

/* ============ landing ============ */
.lnav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.lnav .in{max-width:1120px; margin:0 auto; padding:13px 22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.lnav .brand{display:flex; align-items:center; gap:10px; color:var(--txt); font-weight:800; font-size:17px; white-space:nowrap}
.lnav .brand:hover{text-decoration:none}
.lnav .brand .mark{width:32px; height:32px; border-radius:9px; background:var(--green); color:#fff;
  display:grid; place-items:center; font-size:16px; font-weight:800; flex:0 0 32px}
.lnav .sp{flex:1}
.hero{max-width:1120px; margin:0 auto; padding:64px 22px 44px; text-align:center}
.hero h1{font-size:clamp(28px,4.6vw,44px); font-weight:800; letter-spacing:-.5px; max-width:760px; margin:0 auto 14px}
.hero p{color:var(--mut); font-size:17px; max-width:620px; margin:0 auto 26px}
.hero .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.hero .plats{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:30px}
.feats{max-width:1120px; margin:0 auto; padding:10px 22px 30px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.feat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.feat .ic{font-size:26px; margin-bottom:10px}
.feat h3{font-size:16px; margin-bottom:7px}
.feat p{color:var(--mut); font-size:14px}
.note{max-width:1120px; margin:0 auto; padding:6px 22px 54px; text-align:center}
.note .box{display:inline-block; background:var(--green-bg); border:1px solid #bfe6cf; color:var(--green-d);
  border-radius:12px; padding:13px 22px; font-weight:600; font-size:15px}
.lfoot{border-top:1px solid var(--line); background:#fff}
.lfoot .in{max-width:1120px; margin:0 auto; padding:20px 22px; display:flex; gap:12px; flex-wrap:wrap;
  align-items:center; color:var(--mut); font-size:13.5px}
.lfoot .sp{flex:1}

/* ============ responsive ============ */
@media(max-width:900px){
  .layout{flex-direction:column}
  aside{width:100%; flex:none; height:auto; position:static; padding:12px}
  .logo{padding:0 6px 10px}
  nav.side{display:flex; overflow-x:auto; gap:4px; padding-bottom:4px; scrollbar-width:none}
  nav.side::-webkit-scrollbar{display:none}
  nav.side .grp{display:none}
  nav.side a{flex:0 0 auto; width:auto}
  .sidefoot{display:none}
  .topbar{padding:10px 14px}
  .topbar .uemail{max-width:150px}
  main{padding:16px 12px 48px}
  .formgrid{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr); gap:9px}
  .tile{padding:12px 13px} .tile .n{font-size:22px}
  .card{padding:14px}
  table{font-size:13px}
  th,td{padding:8px 6px}
  .titlecell{max-width:170px}
  .hero{padding:44px 16px 32px}
  #toast{bottom:14px; width:calc(100vw - 24px)}
}