:root{--bg:#F4F6FA;--surface:#fff;--soft:#EEF2F8;--text:#06213E;--muted:#6A7A92;--line:#E4E9F1;
 --accent:#0B3A6E;--accent-ink:#fff;--gold:#E2A23B;--ok:#1C8A4C;--warn:#D98A12;--bad:#D14B2A;
 --s-received:#7A8BA5;--s-editing:#0E9AA7;--s-design:#7A5AF0;--s-approved:#1C8A4C;--s-scheduled:#E2A23B;--s-published:#0B3A6E;
 --shadow:0 1px 2px rgba(6,33,62,.04),0 8px 24px rgba(6,33,62,.06);--r:20px;--logo-filter:none}
@media (prefers-color-scheme:dark){:root{--bg:#04172C;--surface:#0A2440;--soft:#0F2D4F;--text:#EAF0F8;--muted:#8FA3BF;--line:#1B3A5E;
 --accent:#7FB2FF;--accent-ink:#04172C;--gold:#F2B656;--ok:#4ADE80;--warn:#FBBF24;--bad:#FB8B6B;
 --s-received:#93A5BF;--s-editing:#2DD4E0;--s-design:#A18CFF;--s-approved:#4ADE80;--s-scheduled:#F2B656;--s-published:#7FB2FF;
 --shadow:0 1px 2px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.25);--logo-filter:brightness(0) invert(1)}}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--text);font:16px/1.6 "Cairo",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:inherit;text-decoration:none}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted);font-size:.9rem}

/* header */
.top{direction:ltr;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:14px 28px;background:var(--surface);box-shadow:0 1px 0 var(--line);position:sticky;top:0;z-index:5}
.top .brand img{height:56px;width:auto;display:block;filter:var(--logo-filter)}
.tools{direction:ltr;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tab{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;color:var(--muted);font-weight:600;border:0;background:none}
.tab:hover{background:var(--soft)}.tab.on{background:var(--accent);color:var(--accent-ink)}
.iconbtn{position:relative;width:42px;height:42px;border-radius:50%;border:0;background:var(--soft);display:grid;place-items:center;color:var(--text)}
.badge{position:absolute;top:-2px;inset-inline-end:-2px;background:var(--bad);color:#fff;border-radius:99px;font-size:.7rem;padding:0 6px;min-width:18px;text-align:center;line-height:18px}
main{max-width:1120px;margin:0 auto;padding:32px 28px 64px}
h1{font-size:1.7rem;margin:0;font-weight:700}h2{font-size:1.15rem;margin:36px 0 14px;font-weight:700}
.page-h{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}

/* controls */
input,select,textarea{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:11px 14px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--muted);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:99px;padding:11px 22px;font-weight:700}
.btn.ghost{background:var(--soft);color:var(--text)}.btn.bad{background:none;color:var(--bad);box-shadow:inset 0 0 0 1.5px var(--bad)}
.btn.sm{padding:7px 14px;font-size:.88rem}
.month{display:inline-flex;align-items:center;gap:4px;background:var(--surface);border-radius:99px;padding:4px;box-shadow:var(--shadow)}
.month b{min-width:130px;text-align:center}.month button{width:36px;height:36px;border-radius:50%;border:0;background:var(--soft);display:grid;place-items:center}

/* cards */
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}.client:hover{transform:translateY(-2px)}




/* client page */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);margin-bottom:12px;font-weight:600}
.pipe{display:flex;gap:3px;height:16px;border-radius:99px;overflow:hidden;background:var(--soft);margin:4px 0 20px}
.pipe i{display:block;min-width:0;transition:flex .4s}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;text-align:center}
.step .ic{width:46px;height:46px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.step b{display:block;font-size:1.35rem;line-height:1}.step span{font-size:.8rem;color:var(--muted)}
.drop{display:grid;place-items:center;gap:6px;text-align:center;padding:36px 20px;border:2px dashed var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--soft)}
.drop .ic{width:60px;height:60px;border-radius:50%;background:var(--soft);display:grid;place-items:center;color:var(--accent)}.drop .ic svg.i{width:28px;height:28px}
.drop .kinds{display:flex;gap:14px;color:var(--muted)}.drop .kinds span{display:flex;align-items:center;gap:6px}
progress{width:100%;height:8px;accent-color:var(--accent);border-radius:99px}
.board{display:grid;grid-template-columns:repeat(5,minmax(250px,1fr));gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x proximity}
.col{background:color-mix(in srgb,var(--c) 7%,var(--surface));border-radius:var(--r);padding:16px;scroll-snap-align:start;min-height:160px}
.col-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.col-h .ic{width:38px;height:38px;border-radius:12px;background:var(--c);color:#fff;display:grid;place-items:center}
[data-theme-dark] .col-h .ic{color:#04172C}
@media (prefers-color-scheme:dark){.col-h .ic{color:#04172C}}
.col-h b{flex:1}.col-h .n{font-weight:700;background:var(--surface);border-radius:99px;min-width:30px;text-align:center;padding:0 8px}
.col-empty{display:grid;place-items:center;height:90px;border:2px dashed color-mix(in srgb,var(--c) 30%,transparent);border-radius:16px;color:color-mix(in srgb,var(--c) 60%,var(--muted))}
.cards{display:grid;gap:12px;padding:0;margin:0;list-style:none}
.media{background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.media .pic{position:relative;aspect-ratio:4/3;background:var(--soft);display:grid;place-items:center;color:var(--muted)}
.media .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media .pic svg.i{width:38px;height:38px}
.media .kind{position:absolute;top:8px;inset-inline-start:8px;width:30px;height:30px;border-radius:10px;background:rgba(6,33,62,.65);color:#fff;display:grid;place-items:center}
.media .kind svg.i{width:16px;height:16px;stroke:#fff}
.media .tools2{position:absolute;top:8px;inset-inline-end:8px;display:flex;gap:6px}
.media .tools2 a,.media .tools2 button{width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.92);color:#06213E;border:0;display:grid;place-items:center}
.media .tools2 svg.i{width:16px;height:16px}
.media .info{padding:12px 14px 14px;display:grid;gap:10px}
.who{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.82rem}
.who i{width:24px;height:24px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-style:normal;font-weight:700;color:var(--accent);font-size:.75rem}
.media textarea{font-size:.88rem;padding:9px 12px;border-radius:12px;resize:vertical}
.cap{font-size:.88rem;color:var(--muted);overflow-wrap:anywhere}
.act{width:100%;border:0;border-radius:12px;padding:10px;font-weight:700;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px}
@media (prefers-color-scheme:dark){.act{color:#04172C}}
.wait{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:.85rem;padding:8px;border-radius:12px;background:var(--soft)}

/* tasks + team */
.seg{display:inline-flex;background:var(--soft);border-radius:99px;padding:4px;gap:2px}
.seg button{border:0;background:none;padding:8px 18px;border-radius:99px;font-weight:600;color:var(--muted)}.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.form{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:16px 0}
details.card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:700}details.card>summary::-webkit-details-marker{display:none}
.rows{display:grid;gap:12px;padding:0;margin:0;list-style:none}
.task{display:flex;align-items:center;gap:16px;background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:16px 20px;border-inline-start:6px solid var(--line)}
.task[data-p="1"]{border-inline-start-color:var(--ok)}.task[data-p="2"]{border-inline-start-color:var(--warn)}.task[data-p="3"]{border-inline-start-color:var(--bad)}
.task.done{opacity:.55}.task.done .tt{text-decoration:line-through}
.task .grow{flex:1;min-width:0}.tt{font-weight:700;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;background:var(--soft);color:var(--muted);border-radius:99px;padding:3px 12px}
.chip svg.i{width:14px;height:14px}.chip.late{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);font-weight:700}
.statsel{width:auto;border-radius:99px;padding:8px 14px;font-weight:700;background:var(--soft);border:0}
.statsel[data-s=doing]{background:color-mix(in srgb,var(--s-design) 16%,transparent);color:var(--s-design)}
.statsel[data-s=review]{background:color-mix(in srgb,var(--gold) 20%,transparent)}
.statsel[data-s=done]{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.member{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.roles{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.roles label{flex-direction:row;align-items:center;gap:6px;background:var(--soft);border-radius:99px;padding:5px 14px;color:var(--text);font-weight:600;cursor:pointer}
.roles input{width:auto;accent-color:var(--accent)}
.pill{font-size:.75rem;padding:2px 10px;border-radius:99px;background:var(--soft)}.pill.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}

/* login, toast, popup */
.login{max-width:400px;margin:10vh auto;display:grid;gap:16px;padding:36px}
.login .brand{display:flex;justify-content:center}.login .brand img{height:96px;filter:var(--logo-filter)}
.login h2.t{text-align:center;margin:0;font-size:1.15rem}
.toast{position:fixed;inset-inline:16px;bottom:20px;margin-inline:auto;width:max-content;max-width:calc(100% - 32px);background:var(--text);color:var(--bg);padding:12px 20px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:20}
.toast.show{opacity:1}
.pop{position:absolute;inset-inline-end:24px;top:74px;width:min(360px,calc(100vw - 24px));max-height:70vh;overflow:auto;background:var(--surface);border-radius:var(--r);padding:10px;box-shadow:0 20px 50px rgba(6,33,62,.25);z-index:10}
.pop a{display:block;padding:10px 12px;border-radius:12px}.pop a.unread{background:var(--soft);font-weight:700}

@media (max-width:760px){
 main{padding:20px 16px 56px}.top{padding:10px 14px}.top .brand img{height:46px}.tools{width:100%;justify-content:space-between}
 .tab span{display:none}.tab{padding:10px 14px}
 .grid{grid-template-columns:1fr}.board{grid-template-columns:repeat(5,82%)}.steps{gap:4px}.step span{font-size:.7rem}
 .task{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.me{display:flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;border-radius:99px;background:var(--soft);max-width:240px}
.me i{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-style:normal;font-weight:700;flex:none}
.me div{display:grid;line-height:1.2;min-width:0}.me b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.me small{color:var(--muted);font-size:.75rem}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.back svg{transform:none}
@media (max-width:760px){.me div small{display:none}.me{max-width:150px}}

.quick{display:flex;gap:12px;margin-bottom:24px}.quick input{flex:1;padding:14px 20px;border-radius:99px;box-shadow:var(--shadow);border-color:transparent}
.tboard{grid-template-columns:repeat(4,minmax(260px,1fr))}
.tcol.over{outline:2px dashed var(--c);outline-offset:-4px}
.tcard{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:14px 16px;display:grid;gap:10px;cursor:grab;border-inline-start:5px solid transparent}
.tcard[data-p="1"]{border-inline-start-color:var(--ok)}.tcard[data-p="2"]{border-inline-start-color:var(--warn)}.tcard[data-p="3"]{border-inline-start-color:var(--bad)}
.tcard.done{opacity:.6}.tcard.done .tt{text-decoration:line-through}.tcard.drag{opacity:.4}
.tcard .tt,.task .tt{font-weight:700;overflow-wrap:anywhere;margin:0}
.tcard .chips{margin:0}.tfoot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.statsel.sm{padding:5px 10px;font-size:.8rem}
.chip.soon{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--text);font-weight:700}
.chip.pr3{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}.chip.pr2{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.task{cursor:pointer}
dialog{border:0;border-radius:var(--r);padding:28px;width:min(640px,calc(100vw - 24px));background:var(--surface);color:var(--text);box-shadow:0 30px 80px rgba(6,33,62,.35)}
dialog::backdrop{background:rgba(6,33,62,.45)}
@media (max-width:760px){.tboard{grid-template-columns:repeat(4,82%)}.quick{flex-wrap:wrap}.quick .btn{width:100%}}

.avatar{overflow:hidden}.avatar img{width:100%;height:100%;object-fit:contain;background:#fff}
.avatar.lg{width:64px;height:64px;border-radius:18px}
.title-row{display:flex;align-items:center;gap:16px}
.logo-row{display:flex;align-items:center;gap:16px;margin-top:16px;padding:16px;border-radius:16px;background:var(--soft)}

/* clients list */
.strip{display:flex;align-items:center;gap:40px;flex-wrap:wrap;margin:0 0 28px;padding:0 4px}
.stat b{display:block;font-size:2rem;line-height:1.1;color:var(--c)}.stat span{color:var(--muted);font-size:.9rem}
.daybar{margin-inline-start:auto;min-width:200px;color:var(--muted);font-size:.85rem}.bar{height:6px;border-radius:99px;background:var(--line);margin-top:6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.surface{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.crow{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:center;padding:30px 36px;border-bottom:1px solid var(--line);transition:background .15s}
.crow:last-child{border-bottom:0}.crow:hover{background:color-mix(in srgb,var(--soft) 55%,transparent)}
.cid{display:flex;align-items:center;gap:18px;min-width:0}.cname{font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.avatar{width:60px;height:60px;border-radius:18px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;flex:none;color:var(--accent)}
.avatar img{width:100%;height:100%;object-fit:contain;padding:6px;background:#fff}.avatar.lg{width:72px;height:72px}
.state{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.82rem;margin-top:4px}.state i{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.state.mid i{background:var(--warn)}.state.late i{background:var(--bad)}.state.late{color:var(--bad)}
.trackers{display:grid;gap:16px}
.tr{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:center}
.tr-l{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.9rem}.tr-l b{margin-inline-start:auto;color:var(--text)}.tr-l.done{color:var(--ok)}.tr-l.done b{color:var(--ok)}
@media (max-width:900px){.crow{grid-template-columns:1fr;gap:18px;padding:24px 20px}.tr{grid-template-columns:1fr;gap:8px}.strip{gap:24px}.daybar{margin:0;width:100%}}

.co{display:inline-block;font-size:.72rem;font-weight:700;padding:1px 10px;border-radius:99px;margin-inline-end:8px;letter-spacing:.02em}
.co-sx{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.co-el{background:color-mix(in srgb,var(--gold) 28%,transparent);color:#8a5a00}
@media (prefers-color-scheme:dark){.co-el{color:var(--gold)}}
.title-row h1{margin:0 0 4px}

.cells{display:flex;border:1.5px solid #CBD5E4;border-radius:12px;overflow:hidden;background:#fff;min-width:0}
@media (prefers-color-scheme:dark){.cells{border-color:#2A4A70;background:var(--surface)}}
.cell{flex:1 1 0;min-width:0;height:36px;display:grid;place-items:center;font-style:normal;font-size:.8rem;font-weight:700;color:#9AA8BD;border-inline-end:1px solid #DDE4EF;transition:background .2s}
.cell:last-child{border-inline-end:0}
.cell.due{color:var(--bad)}
.cell.on{background:var(--accent);color:var(--accent-ink);border-inline-end-color:rgba(255,255,255,.28)}
.cells.big .cell{height:46px;font-size:.95rem}
@media (prefers-color-scheme:dark){.cell{border-inline-end-color:#2A4A70;color:#7F93B0}}
@media (max-width:600px){.cell{font-size:.6rem}.cells.big .cell{height:38px}}

/* received vs publishing */
.trackers{display:grid;gap:22px}
.grp{display:grid;gap:14px}
.grp-h{display:flex;align-items:center;gap:10px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.grp-h b{margin-inline-start:auto;color:var(--text);letter-spacing:0;font-size:.85rem}
.grp.pub{background:color-mix(in srgb,var(--accent) 6%,transparent);border-radius:16px;padding:18px 20px;position:relative}
.grp.pub::before{content:"";position:absolute;inset-inline:0;top:-12px;border-top:1px dashed var(--line)}
.weeks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wk{min-width:0}.wk-h{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-bottom:6px}.wk-h b{color:var(--text)}
.wk.current .wk-h span{color:var(--accent);font-weight:700}.wk.future{opacity:.55}
.wk .cell{height:30px;font-size:.72rem}.wk .cells.big .cell{height:38px;font-size:.82rem}
@media (max-width:900px){.weeks{grid-template-columns:repeat(2,1fr)}}

.wk-h{gap:6px;align-items:baseline}.wk-h span{min-width:0}.wk-h small{color:var(--muted);font-weight:400}

/* two clearly separate sections */
.trackers{display:grid;gap:24px}
.sec{border-radius:18px;padding:20px 22px;border:1px solid var(--line);border-top-width:4px;background:var(--surface)}
.sec-content{border-top-color:var(--accent)}
.sec-pub{border-top-color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,var(--surface))}
.sec-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sec-h b{font-size:1rem}
.sec-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.sec-pub .sec-ic{background:color-mix(in srgb,var(--gold) 30%,transparent);color:#8a5a00}
@media (prefers-color-scheme:dark){.sec-pub .sec-ic{color:var(--gold)}}
.sec-n{margin-inline-start:auto;font-weight:700;font-size:1.1rem}.sec-n small{color:var(--muted);font-weight:600;font-size:.85rem}
.grp.pub,.grp-h{display:none}
.grp{background:none;padding:0}
.sec .wk-h{margin-bottom:8px}

/* Overview dashboard (clients list): Content and Publishing side by side on wide screens.
   Client page: the two sections stay stacked, one under the other. */
@media (min-width:1000px){
  .crow .trackers{grid-template-columns:1fr 1fr;align-items:stretch;gap:20px}
  .crow .trackers>.sec:only-child{grid-column:1/-1}
  .crow .weeks{grid-template-columns:repeat(2,1fr);gap:18px 16px}
  .crow{grid-template-columns:230px 1fr;gap:28px;padding:26px 30px}
  .crow .tr{grid-template-columns:1fr;gap:6px}
  .crow .sec{padding:18px}
}

/* long bars (up to ~24 pieces) keep their numbers readable */
.cells.mid:not(.big) .cell{font-size:.7rem}
.cells.dense:not(.big) .cell{font-size:.62rem;letter-spacing:-.02em}
.cells.dense.big .cell{font-size:.85rem}

.cells.two{display:grid}
.cells.two .cell{height:32px;font-size:.78rem}
.cells.two .cell.r1{border-bottom:1px solid #DDE4EF}.cells.two .cell.on.r1{border-bottom-color:rgba(255,255,255,.28)}
.cells.two .cell.ce{border-inline-end:0}
@media (prefers-color-scheme:dark){.cells.two .cell.r1{border-bottom-color:#2A4A70}}

/* social account icons */
.socials{display:flex;gap:8px;flex-wrap:wrap}
.soc{--b:var(--accent);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--b) 12%,var(--surface));color:var(--b);border:1px solid color-mix(in srgb,var(--b) 25%,transparent);transition:transform .12s,background .12s,color .12s}
.soc:hover{background:var(--b);color:#fff;transform:translateY(-2px)}
.soc svg.i{width:19px;height:19px}
.socials.sm{gap:6px;margin-top:8px}.socials.sm .soc{width:30px;height:30px}.socials.sm .soc svg.i{width:15px;height:15px}
.soc-instagram{--b:#E1306C}.soc-facebook{--b:#1877F2}.soc-tiktok{--b:#111}.soc-linkedin{--b:#0A66C2}.soc-google{--b:#188038}.soc-youtube{--b:#E00}.soc-snapchat{--b:#C9A100}.soc-website{--b:var(--accent)}
@media (prefers-color-scheme:dark){.soc-tiktok{--b:#EDEDED}.soc-tiktok:hover{color:#111}.soc-snapchat:hover{color:#111}}
.soc-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:-4px 0 22px}
.lab{display:flex;align-items:center;gap:8px}.lab svg.i{width:16px;height:16px}
.crow{cursor:pointer}.crow .cname{color:inherit}.crow .cname:hover{text-decoration:underline}

/* ---- client page extras ---- */
.team-row{display:flex;flex-wrap:wrap;gap:14px;margin:-6px 0 20px}
.tm{display:flex;align-items:center;gap:8px;font-size:.85rem;background:var(--surface);border-radius:99px;padding:4px 14px 4px 6px;box-shadow:var(--shadow)}
.tm small{color:var(--muted);margin-inline-end:2px}.tm i{width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.72rem;margin-inline-end:-4px}
.tm b{font-weight:600;margin-inline-start:8px}
.alert-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:color-mix(in srgb,var(--warn) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);color:var(--text);border-radius:14px;padding:12px 16px;margin:0 0 20px}
.alert-bar svg{color:var(--warn)}.alert-bar span{color:var(--muted);font-size:.9rem}
.chip.stuck{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn);font-weight:700;margin-inline-end:6px}
.chip.rv{background:color-mix(in srgb,var(--s-design) 16%,transparent);color:var(--s-design);margin-inline-start:6px}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:32px 0 20px;padding:5px;background:var(--soft);border-radius:99px;width:max-content;max-width:100%;overflow-x:auto}
.ctab{display:flex;align-items:center;gap:8px;border:0;background:none;padding:10px 18px;border-radius:99px;font-weight:600;color:var(--muted);white-space:nowrap}
.ctab.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.linkbtn{border:0;background:none;color:var(--muted);font-size:.8rem;display:flex;align-items:center;gap:6px;justify-content:center;padding:6px;width:100%}
.linkbtn:hover{color:var(--s-design)}.linkbtn svg.i{width:14px;height:14px}
.pis,.pi{display:inline-flex;align-items:center;gap:6px}.pis small{color:var(--muted);font-size:.78rem}
.pi{width:24px;height:24px;border-radius:50%;justify-content:center;background:color-mix(in srgb,var(--b,var(--accent)) 14%,var(--surface));color:var(--b,var(--accent))}.pi svg.i{width:13px;height:13px}
.pi-instagram{--b:#E1306C}.pi-facebook{--b:#1877F2}.pi-tiktok{--b:#111}.pi-linkedin{--b:#0A66C2}.pi-google{--b:#188038}.pi-youtube{--b:#E00}.pi-snapchat{--b:#C9A100}
@media (prefers-color-scheme:dark){.pi-tiktok{--b:#EDEDED}}

/* calendar */
.cal-h,.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.cal-h span{text-align:center;color:var(--muted);font-size:.8rem;font-weight:600;padding-bottom:6px}
.day{min-height:64px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:8px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:start}
.day:hover{border-color:var(--accent)}.day.sel{outline:2px solid var(--accent);outline-offset:-1px}.day.today .dn{background:var(--accent);color:var(--accent-ink);border-radius:50%;width:24px;height:24px;display:grid;place-items:center}
.day .dn{font-weight:700;font-size:.85rem}.day.empty-past{background:color-mix(in srgb,var(--bad) 5%,var(--surface));border-style:dashed}
.dots{display:flex;gap:4px;align-items:center}.dots small{font-size:.7rem;color:var(--muted)}
.dot-scheduled,.dot-published{display:inline-block;width:10px;height:10px;border-radius:50%}.dot-scheduled{background:var(--s-scheduled)}.dot-published{background:var(--s-published)}
.cal-legend{display:flex;gap:18px;margin-bottom:14px;color:var(--muted);font-size:.85rem}.cal-legend span{display:flex;align-items:center;gap:6px}
.day-h{margin:0 0 12px;font-size:1.05rem}.day-h small{color:var(--muted);font-weight:400}
.mini{width:56px;height:56px;border-radius:12px;object-fit:cover;background:var(--soft);display:grid;place-items:center;color:var(--muted);flex:none}.mini.big{width:100%;height:150px}

/* performance */
.trend{width:100%;height:auto}.legend2{margin-inline-start:auto;display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}.legend2 i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-inline-start:8px}
.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}@media (max-width:860px){.two-col{grid-template-columns:1fr}}
.speed{display:grid;grid-template-columns:140px 1fr 48px auto;gap:12px;align-items:center;padding:7px 0;font-size:.9rem}.speed em{font-style:normal;font-size:.72rem;color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);padding:1px 8px;border-radius:99px}
.speed .bar{margin:0}.speed b{text-align:end}
.big-n{font-size:3rem;font-weight:700;line-height:1}.big-n small{font-size:1.4rem;color:var(--muted)}
.strip.fin{margin:0 0 16px}.inv{display:flex;gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.inv:last-child{border:0}.inv b{margin-inline-start:auto}

/* activity */
.feed{list-style:none;margin:0;padding:0;display:grid;gap:16px}.feed li{display:flex;gap:14px;align-items:flex-start}
.fi{width:34px;height:34px;border-radius:50%;background:var(--soft);display:grid;place-items:center;color:var(--accent);flex:none}.feed .note .fi{background:color-mix(in srgb,var(--gold) 28%,transparent);color:#8a5a00}.feed .revision .fi{background:color-mix(in srgb,var(--s-design) 18%,transparent);color:var(--s-design)}

/* monthly report */
.report{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:40px}
.rp-head{display:flex;align-items:center;gap:24px;border-bottom:3px solid var(--gold);padding-bottom:20px;margin-bottom:8px}.rp-head img{height:64px;filter:var(--logo-filter)}
.rp-line{display:grid;grid-template-columns:110px 1fr 60px;gap:16px;align-items:center;margin:12px 0}.rp-line .weeks{grid-template-columns:repeat(4,1fr)}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}.rp-grid figure{margin:0;break-inside:avoid}.rp-grid img{width:100%;height:150px;object-fit:cover;border-radius:12px}
.rp-grid figcaption{display:grid;gap:4px;padding:8px 2px;font-size:.82rem}.rp-grid .cap{color:var(--muted)}
@media print{
  body{background:#fff}.top,.no-print,.toast,.pop,.tabs{display:none!important}
  main{max-width:none;padding:0}.report{box-shadow:none;padding:0}
  .cells,.cell{-webkit-print-color-adjust:exact;print-color-adjust:exact}.rp-head img{filter:none}
}
.strip.fin,.card+h2{margin-top:24px}h2+.strip.fin{margin-top:0}

/* wider content area: smaller side margins */
main{max-width:1680px;padding-inline:20px}
.top{padding-inline:20px}
@media (min-width:1000px){.crow{grid-template-columns:260px 1fr;gap:24px;padding:26px 24px}}
@media (max-width:760px){main{padding-inline:14px}.top{padding-inline:12px}}

/* company logo instead of a text badge */
.co-logo{display:inline-flex;align-items:center;margin-inline-end:10px;background:none;padding:0}
.co-logo img{height:30px;width:auto;display:block}
.co-sx img{filter:var(--logo-filter)}
.title-row .co-logo{margin-top:4px}.title-row .co-logo img{height:42px}
.state{align-items:center}

/* margins: a bit more breathing room; larger company logos */
main{max-width:1560px;padding-inline:36px}
.top{padding-inline:36px}
.co-logo img{height:38px}.title-row .co-logo img{height:52px}
@media (min-width:1000px){.crow{padding:26px 32px}}
@media (max-width:760px){main{padding-inline:16px}.top{padding-inline:14px}.co-logo img{height:32px}}

/* account status as a coloured box: green = on track, yellow = slightly behind, red = behind */
.state{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:10px;font-size:.82rem;font-weight:700;margin-top:8px;
  --s:var(--ok);background:color-mix(in srgb,var(--s) 15%,var(--surface));color:var(--s);border:1px solid color-mix(in srgb,var(--s) 35%,transparent)}
.state i{width:9px;height:9px;border-radius:50%;background:var(--s)}
.state.mid{--s:#D99A00}.state.late{--s:var(--bad)}.state.late{color:var(--s)}
@media (prefers-color-scheme:dark){.state.mid{--s:#F2C14E}}
.state.mid{color:#8a6100}
@media (prefers-color-scheme:dark){.state.mid{color:#F2C14E}}
.state.ok{color:var(--ok)}

.cmeta{margin-top:8px}.cmeta .co-logo{margin:0}

/* client column: more room so names stay on one line */
@media (min-width:1280px){.crow{grid-template-columns:350px 1fr;gap:28px}}
@media (min-width:1000px) and (max-width:1279px){
  .crow{grid-template-columns:300px 1fr}
  .crow .trackers{grid-template-columns:1fr}
  .crow .weeks{grid-template-columns:repeat(4,1fr)}
}
.cname{font-size:1.05rem;line-height:1.3}
.cid{gap:20px}

@media (min-width:1280px){.crow{grid-template-columns:390px 1fr}}
.cname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cname.long{font-size:.92rem;line-height:1.3}

/* company logo as a section header (dashboard) / corner mark (client page) — away from client logo and info */
.co-head{display:flex;align-items:center;gap:16px;padding:16px 32px;background:var(--soft);border-bottom:1px solid var(--line)}
.co-head .co-logo{margin:0}.co-head .co-logo img{height:44px}.co-head span{color:var(--muted);font-weight:600}
.surface>.co-head:not(:first-child){border-top:1px solid var(--line)}
.crumb{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.crumb .back{margin:0}.crumb .co-logo{margin:0}.crumb .co-logo img{height:44px}

/* status boxes: one size, solid colours, readable at a glance */
.state{display:flex;align-items:center;justify-content:center;gap:9px;width:172px;height:38px;margin-top:10px;padding:0 14px;border-radius:12px;border:0;
  font-size:.92rem;font-weight:700;color:#fff;background:var(--s);--s:#16A34A;box-shadow:0 2px 8px color-mix(in srgb,var(--s) 35%,transparent)}
.state svg.i{width:18px;height:18px;stroke-width:2.4}
.state.ok{--s:#16A34A;color:#fff}
.state.mid{--s:#F5A400;color:#2b1c00}
.state.late{--s:#DC2626;color:#fff}
.stuckbox{display:flex;align-items:center;justify-content:center;gap:8px;width:172px;height:38px;margin-top:8px;border-radius:12px;font-size:.88rem;font-weight:700;
  color:#8a5200;background:color-mix(in srgb,#F5A400 16%,var(--surface));border:1.5px solid #F5A400}
.stuckbox svg.i{width:17px;height:17px}
@media (prefers-color-scheme:dark){.state.ok{--s:#22C55E;color:#04170B}.state.mid{--s:#FBBF24}.state.late{--s:#F87171;color:#2a0606}.stuckbox{color:#FBBF24;border-color:#FBBF24}}

/* company logo: small mark in the row's top corner, clear of the client logo and info */
.crow{position:relative;padding-top:40px!important}
.co-corner{position:absolute;top:10px;inset-inline-end:22px;opacity:.92;pointer-events:none}
.co-corner .co-logo{margin:0}.co-corner .co-logo img{height:26px}
.co-head{display:none}
@media (max-width:900px){.crow{padding-top:44px!important}.co-corner{inset-inline-end:16px}}
.crow{padding-top:50px!important}
.co-corner{top:12px;inset-inline-end:24px}.co-corner .co-logo img{height:34px}

/* company logo: centred right under the status box */
.co-corner{display:none}
.crow{padding-top:26px!important}
@media (min-width:1000px){.crow{padding-top:26px!important}}
.co-under{width:172px;display:flex;justify-content:center;margin:12px 0 4px}
.co-under .co-logo{margin:0}.co-under .co-logo img{height:40px}

/* client column: client logo on top, then name, status, company logo */
.cid{flex-direction:column;align-items:center;text-align:center;gap:14px}
.cid>div:not(.avatar){display:flex;flex-direction:column;align-items:center;min-width:0;width:100%}
.cid .avatar{width:84px;height:84px;border-radius:22px}
.cid .cname{display:-webkit-box;text-align:center}
.cid .socials{justify-content:center}
@media (min-width:1280px){.crow{grid-template-columns:300px 1fr!important;gap:26px}}
@media (min-width:1000px) and (max-width:1279px){.crow{grid-template-columns:260px 1fr!important}}

/* extras (outside the contract count) */
.xtra{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:#7a4e00;background:color-mix(in srgb,var(--gold) 30%,var(--surface));border:1px dashed var(--gold);border-radius:99px;padding:2px 12px;white-space:nowrap}
.xtra.big{font-size:.95rem;padding:4px 16px}.chip.xtra svg.i{width:12px;height:12px}
.sec-h .xtra{margin-inline-start:8px}
@media (prefers-color-scheme:dark){.xtra{color:var(--gold)}}
.extra-opt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 10px}.extra-opt input#upl{max-width:340px}
.chk{display:flex;flex-direction:row;align-items:center;gap:10px;color:var(--text);font-size:.92rem;font-weight:600;cursor:pointer}.chk input{width:18px;height:18px;accent-color:var(--accent)}

/* active / not active, notice period, void cells */
.filters{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}.filters .seg{margin:0}
.state.off{--s:#64748B;color:#fff;box-shadow:none}
.crow.inactive{opacity:.75}.crow.inactive .trackers{opacity:.5;filter:grayscale(.6)}
.notice{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:700;color:#8a5200;background:color-mix(in srgb,#F5A400 18%,var(--surface));border:1.5px solid #F5A400;border-radius:12px;padding:6px 14px}
.notice.off{color:var(--muted);background:var(--soft);border-color:var(--line)}.notice.sm{font-size:.72rem;padding:2px 10px;border-radius:99px;margin-inline-start:6px}
.notice svg.i{width:16px;height:16px}
@media (prefers-color-scheme:dark){.notice{color:#FBBF24;border-color:#FBBF24}}
.contract-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 20px}
.cell.void{background:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in srgb,var(--muted) 24%,transparent) 4px 6px);color:color-mix(in srgb,var(--muted) 55%,transparent);text-decoration:line-through}

/* publishing per platform: one row each with four weekly bars */
.pgrid{display:grid;gap:12px}
.prow{display:grid;grid-template-columns:128px repeat(4,minmax(0,1fr));gap:10px;align-items:center}
.pgrid.big .prow{grid-template-columns:170px repeat(4,minmax(0,1fr));gap:16px}
.phead{align-items:end}.wkh{display:grid;line-height:1.2;min-width:0}.wkh b{font-size:.78rem}.wkh small{color:var(--muted);font-size:.66rem;white-space:nowrap}
.pgrid.big .wkh b{font-size:.85rem}.pgrid.big .wkh small{font-size:.75rem}
.pl{display:flex;align-items:center;gap:9px;min-width:0}.pl b{display:block;font-size:.85rem;line-height:1.15}.pl small{color:var(--muted);font-weight:600}
.pli{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--accent);flex:none}.pli svg.i{width:15px;height:15px}
.prow .wk{opacity:1}.prow .wk.future{opacity:.55}
.prow .cells .cell{height:26px;font-size:.62rem}.pgrid.big .prow .cells .cell{height:34px;font-size:.78rem}
.prow .cells.mid .cell,.prow .cells.dense .cell{font-size:.55rem}
@media (max-width:700px){.prow,.pgrid.big .prow{grid-template-columns:100px repeat(4,minmax(0,1fr));gap:6px}}

/* ads management */
.sec-ads{grid-column:1/-1;border-top-color:#2563EB;padding:14px 22px}
.sec-ads .sec-ic{background:color-mix(in srgb,#2563EB 14%,transparent);color:#2563EB}
.ads-chips{display:flex;gap:10px;flex-wrap:wrap;margin-inline-start:auto}
.adchip{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:700;border-radius:99px;padding:5px 14px;background:color-mix(in srgb,var(--b,#2563EB) 12%,var(--surface));color:var(--b,#2563EB);border:1px solid color-mix(in srgb,var(--b,#2563EB) 30%,transparent)}
.adchip svg.i{width:15px;height:15px}.adchip-meta{--b:#1877F2}.adchip-tiktok{--b:#111}.adchip-google{--b:#188038}
@media (prefers-color-scheme:dark){.adchip-tiktok{--b:#EDEDED}}
.state.ads{--s:#2563EB;color:#fff}

/* publication chips on a card: one per platform */
.pubs{display:flex;flex-wrap:wrap;gap:6px}
.pub{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:3px 10px 3px 8px;font-size:.74rem;font-weight:700;color:var(--muted)}
.pub svg.i{width:13px;height:13px}.pub em{font-style:normal}
button.pub{cursor:pointer}button.pub:hover{border-color:var(--accent)}
.pub.scheduled{border-color:var(--s-scheduled);color:#8a5a00;background:color-mix(in srgb,var(--s-scheduled) 14%,var(--surface))}
.pub.published{border-color:var(--ok);color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--surface))}

/* services editor */
.svc-block{margin:0 0 22px}.svc-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.svc-table{display:grid;gap:8px;max-width:520px}.svc-row{display:grid;grid-template-columns:1fr 110px 110px;gap:12px;align-items:center}.svc-head{color:var(--muted);font-size:.8rem;font-weight:600}
.svc-row .lab{color:var(--text);font-weight:600}

/* social account buttons: solid brand-coloured squares with a white mark */
.socials{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.soc{--b:var(--accent);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--b);color:#fff;border:0;box-shadow:0 2px 6px color-mix(in srgb,var(--b) 35%,transparent);transition:transform .12s,box-shadow .12s}
.soc:hover{background:var(--b);color:#fff;transform:translateY(-2px);box-shadow:0 6px 14px color-mix(in srgb,var(--b) 45%,transparent)}
.soc svg.i{width:19px;height:19px;stroke-width:2}
.soc-instagram{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)}.soc-instagram:hover{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)}
.soc-facebook{--b:#1877F2}.soc-tiktok{--b:#101010}.soc-linkedin{--b:#0A66C2}.soc-google{--b:#34A853}.soc-youtube{--b:#FF0000}.soc-website{--b:var(--accent)}
.soc-snapchat{--b:#FFFC00;color:#111}.soc-snapchat:hover{color:#111}
@media (prefers-color-scheme:dark){.soc-tiktok{--b:#2b2b2b;box-shadow:0 0 0 1px #555}}
.socials.sm{gap:6px}.socials.sm .soc{width:30px;height:30px;border-radius:9px}.socials.sm .soc svg.i{width:16px;height:16px}
.soc-corner{position:absolute;top:12px;inset-inline-end:24px;z-index:1}
.crow.has-soc{padding-top:54px!important}
.title-line{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.title-line h1{margin:0}
.iconbtn.sm{width:34px;height:34px}
@media (max-width:900px){.soc-corner{inset-inline-end:14px}}

/* give the per-platform publishing panel more room on the overview */
@media (min-width:1280px){.crow .trackers{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}.crow .prow{grid-template-columns:104px repeat(4,minmax(0,1fr));gap:8px}}

/* ads budget */
.budget{display:inline-flex;align-items:baseline;gap:4px;font-weight:700;font-size:1.05rem;color:var(--text);background:color-mix(in srgb,#2563EB 10%,var(--surface));border:1px solid color-mix(in srgb,#2563EB 30%,transparent);border-radius:12px;padding:3px 14px;margin-inline-start:6px}
.budget small{color:var(--muted);font-weight:600;font-size:.78rem}
.adchip em{font-style:normal;font-weight:600;opacity:.8;margin-inline-start:4px;padding-inline-start:8px;border-inline-start:1px solid currentColor}

/* overview balance: smaller Content panel, larger Publishing panel */
@media (min-width:1280px){.crow .trackers{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr)}}
.sec-ads .sec-h b,.budget{white-space:nowrap}

/* combined image target: photographer cells navy, designer cells violet */
.cell.on.des{background:var(--s-design);border-inline-end-color:rgba(255,255,255,.3)}
.parts{display:flex;gap:16px;margin-top:6px;font-size:.74rem;color:var(--muted)}.parts span{display:inline-flex;align-items:center;gap:6px}.parts b{color:var(--text)}
.parts i{width:10px;height:10px;border-radius:3px;display:inline-block}.parts .p1{background:var(--accent)}.parts .p2{background:var(--s-design)}

.actbtn{margin-top:8px;width:172px;height:34px;justify-content:center}

/* team performance */
.perf-card{margin-bottom:24px}
.perf{display:grid;gap:4px}
.prf{display:grid;grid-template-columns:210px 190px 170px 1fr 56px;gap:16px;align-items:center;padding:10px 14px;border-radius:14px;cursor:pointer}
.prf:hover{background:var(--soft)}.prf.un{background:color-mix(in srgb,var(--warn) 10%,transparent)}
.prf-role{color:var(--muted);font-size:.85rem;font-weight:600}
.prf-who{display:flex;align-items:center;gap:10px;min-width:0}.prf-who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prf-who i{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.8rem;flex:none}.prf-who i.q{background:var(--warn)}
.prf-n{font-weight:600;font-size:.9rem}.prf-pct{text-align:end;font-weight:700}
.prf .bar{margin:0;height:9px}.prf.ok .bar i{background:var(--ok)}.prf.mid .bar i{background:var(--warn)}.prf.late .bar i{background:var(--bad)}
.prf.ok .prf-pct{color:var(--ok)}.prf.mid .prf-pct{color:var(--warn)}.prf.late .prf-pct{color:var(--bad)}
.prf-det{grid-column:1/-1;display:grid;gap:4px;padding:8px 0 4px 226px;font-size:.88rem}.prf-det div{display:flex;justify-content:space-between;max-width:520px;border-bottom:1px dashed var(--line);padding:3px 0}.prf-det span{color:var(--muted)}
@media (max-width:900px){.prf{grid-template-columns:1fr 1fr;gap:6px 12px}.prf-bar{grid-column:1/-2}.prf-det{padding-left:0}}

.team-row .btn{align-self:center}
.prf{grid-template-columns:200px 180px 250px 1fr 56px}
.prf-n small{display:block;color:var(--muted);font-weight:500;font-size:.76rem;margin-top:1px}.prf-n .own{font-size:1rem}
@media (max-width:900px){.prf{grid-template-columns:1fr 1fr}}

/* access matrix */
.acc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:20px}
.acc{border:1px solid var(--line);border-radius:18px;padding:18px}.acc-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}.acc-h .co-logo img{height:34px}
.acc-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.acc-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:12px}.acc-list li:hover{background:var(--soft)}
.acc-list small{display:block;color:var(--muted);font-weight:500;font-size:.75rem}.acc-sel{min-width:130px}

.prf-det[hidden]{display:none}

/* permission boxes: one box per permission */
.acc{border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:18px}.acc:last-child{margin-bottom:0}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.perm{background:var(--soft);border-radius:14px;padding:14px;border-top:4px solid var(--c,var(--accent))}
.perm-read{--c:#7A8BA5}.perm-write{--c:var(--s-approved)}.perm-edit{--c:var(--gold)}.perm-delete{--c:var(--bad)}
.perm-h{margin-bottom:10px}.perm-h b{display:block;font-size:1rem}.perm-h small{color:var(--muted);font-size:.74rem;line-height:1.3;display:block}
.perm-row{display:flex;flex-direction:row;align-items:center;gap:10px;padding:6px 4px;border-radius:10px;color:var(--text);font-size:.92rem;font-weight:600;cursor:pointer}
.perm-row:hover{background:var(--surface)}.perm-row input{width:18px;height:18px;accent-color:var(--c,var(--accent));flex:none}
.perm-row i{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-style:normal;font-size:.72rem;font-weight:700;flex:none}

/* team performance: soft cards grouped by role */
.pf-groups{display:grid;gap:26px}
.pf-title{margin:0 0 12px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pf-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.pf-card{background:var(--soft);border-radius:18px;padding:16px 18px;display:grid;gap:12px;cursor:default;transition:background .15s}
.pf-card:has(.prf-det){cursor:pointer}.pf-card:has(.prf-det):hover{background:color-mix(in srgb,var(--soft) 70%,var(--surface))}
.pf-top{display:flex;align-items:center;gap:12px}
.pf-top>i{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-style:normal;font-weight:700;flex:none}
.pf-top b{display:block;line-height:1.2}.pf-top small{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
.pf-pct{margin-inline-start:auto;font-size:1.4rem;font-weight:700;color:var(--muted)}
.pf-card.ok .pf-pct{color:var(--ok)}.pf-card.mid .pf-pct{color:var(--warn)}.pf-card.late .pf-pct{color:var(--bad)}
.pf-card .bar{margin:0;height:7px;background:color-mix(in srgb,var(--line) 70%,transparent)}
.pf-card.ok .bar i{background:var(--ok)}.pf-card.mid .bar i{background:var(--warn)}.pf-card.late .bar i{background:var(--bad)}
.pf-card .prf-det{padding:6px 0 0;max-width:none;font-size:.82rem}
.pf-gap{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:.82rem;color:var(--muted)}.pf-gap svg.i{width:15px;height:15px;color:var(--warn)}
.pf-groups{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px 18px;align-items:start}
.pf-cards{grid-template-columns:1fr}
.pf-groups{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* platform logins */
.vault{padding-bottom:12px}
.vrow{display:grid;grid-template-columns:200px minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) 90px;gap:14px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--line)}.vrow:last-child{border-bottom:0}
.vp{display:flex;align-items:center;gap:10px}.vp svg.i{color:var(--accent)}
.vu,.vpw{display:flex;align-items:center;gap:8px;min-width:0}.vu span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vpw .mask{font-family:ui-monospace,Menlo,monospace;letter-spacing:.04em}.vn{color:var(--muted);font-size:.85rem;overflow-wrap:anywhere}.va{display:flex;gap:6px;justify-content:flex-end}
.blurred{filter:blur(7px);user-select:none;pointer-events:none;color:var(--text)}
@media (max-width:900px){.vrow{grid-template-columns:1fr 1fr}.va{justify-content:flex-start}}

/* team performance v3: soft rows with aligned columns */
.pt{display:grid}
.pt-head,.ptr{display:grid;grid-template-columns:200px 230px 170px minmax(0,1fr) 64px;gap:22px;align-items:center}
.pt-head{padding:0 16px 10px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ptr{padding:16px;border-radius:16px;position:relative}
.ptr.first{margin-top:14px}.ptr.first::before{content:"";position:absolute;inset-inline:16px;top:-7px;border-top:1px solid var(--line)}
.pt-head+.ptr.first{margin-top:0}.pt-head+.ptr.first::before{display:none}
.ptr:hover{background:color-mix(in srgb,var(--soft) 65%,transparent)}
.pt-role{color:var(--muted);font-size:.9rem;font-weight:600}
.pt-who{display:flex;align-items:center;gap:12px;min-width:0}.pt-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-who i{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-style:normal;font-weight:700;flex:none}
.pt-who i.q{background:color-mix(in srgb,var(--muted) 25%,transparent);color:var(--muted)}
.ptr.un .pt-who b{color:var(--muted);font-weight:600}
.pt-n b{display:block;font-size:1.02rem;font-weight:700;font-variant-numeric:tabular-nums}.pt-n small{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
.pt-bar .bar{margin:0;height:10px;background:color-mix(in srgb,var(--line) 70%,transparent)}
.pt-pct{text-align:end;font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.ptr.ok .bar i{background:var(--ok)}.ptr.mid .bar i{background:var(--warn)}.ptr.late .bar i{background:var(--bad)}
.ptr.ok .pt-pct{color:var(--ok)}.ptr.mid .pt-pct{color:var(--warn)}.ptr.late .pt-pct{color:var(--bad)}
.ptr .prf-det{grid-column:2/-1;padding:4px 0 0;max-width:520px}
.ptr.open{background:var(--soft)}
@media (max-width:1000px){.pt-head{display:none}.ptr{grid-template-columns:1fr 1fr;gap:8px 14px}.pt-role{grid-column:1/-1}.pt-bar{grid-column:1/-2}.ptr .prf-det{grid-column:1/-1}}

/* team performance v4: one counter per person */
.pt-head,.ptr{grid-template-columns:240px minmax(180px,300px) 170px minmax(0,1fr) 64px;gap:24px}
.ptr{padding:20px 16px;border-radius:18px}.ptr+.ptr{margin-top:2px}
.ptr.first{margin-top:0}.ptr.first::before{display:none}
.ptr+.ptr::before{content:"";position:absolute;inset-inline:16px;top:-1px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.ptr{position:relative}
.pt-roles{display:flex;flex-wrap:wrap;gap:6px}
.rchip{font-size:.74rem;font-weight:600;color:var(--muted);background:var(--soft);border-radius:99px;padding:3px 11px;white-space:nowrap}
.pt-who i{width:38px;height:38px}.pt-who b{font-size:1.02rem}
.pt-bar .bar{height:12px}.pt-pct{font-size:1.3rem}
.ptr .prf-det{grid-column:1/-1;padding:6px 0 0 62px;max-width:none;display:grid;gap:12px}
.pt-part{max-width:560px}.pt-ph{display:flex;justify-content:space-between;font-weight:600;font-size:.9rem;margin-bottom:4px}.pt-ph span{color:var(--muted)}
.pt-pc{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);padding:2px 0 2px 12px}.pt-pc b{color:var(--text);font-weight:600}
@media (max-width:1000px){.ptr{grid-template-columns:1fr 1fr}.pt-roles{grid-column:1/-1}.ptr .prf-det{padding-left:0}}
.ptr .prf-det[hidden]{display:none}
.ptr .prf-det div{display:block;border:0;padding:0;max-width:none}
.ptr .prf-det .pt-part{max-width:560px}
.ptr .prf-det .pt-ph{display:flex;justify-content:space-between;gap:16px}
.ptr .prf-det .pt-pc{display:flex;justify-content:space-between;gap:16px;padding:2px 0 2px 14px}

/* who is responsible, shown next to the work */
.sec-own{display:flex;flex-wrap:wrap;gap:6px 16px;margin:-6px 0 14px;font-size:.78rem;align-items:center}
.sec-own.inline{margin:0 0 0 8px}
.own-g{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.own-l{color:var(--muted);font-weight:600}
.own{display:inline-flex;align-items:center;gap:5px;background:var(--soft);border-radius:99px;padding:2px 11px 2px 3px;font-weight:600;color:var(--text)}
.own i{width:19px;height:19px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-style:normal;font-size:.64rem;font-weight:700}
.own.none{background:none;color:var(--warn);padding:2px 10px;border:1px dashed color-mix(in srgb,var(--warn) 60%,transparent);font-weight:500}
.sec-ads .own{background:var(--soft)}
.id-own{display:grid;gap:8px;margin-top:12px;font-size:.78rem;justify-items:center}.id-own .own-g{justify-content:center}

/* roles sit under the person's name, in smaller chips */
.pt-head,.ptr{grid-template-columns:minmax(260px,340px) 170px minmax(0,1fr) 64px;gap:24px}
.pt-id{min-width:0}.pt-id b{display:block;font-size:1.02rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-roles{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.rchip{font-size:.66rem;font-weight:600;padding:1px 9px;line-height:1.5;background:color-mix(in srgb,var(--soft) 85%,var(--line))}
@media (max-width:1000px){.ptr{grid-template-columns:1fr 1fr}.pt-roles{grid-column:auto}}

/* Administrator: audit log */
.wrapseg{flex-wrap:wrap;border-radius:18px;margin-bottom:14px}.wrapseg small{opacity:.6;margin-inline-start:4px}
.afilters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:18px;align-items:end}
.afilters select,.afilters input{padding:9px 12px;font-size:.9rem}.dfield{font-size:.72rem}.afilters .btn{height:40px}
.ahead,.arow{display:grid;grid-template-columns:130px 190px 230px 220px minmax(0,1fr);gap:18px;align-items:center}
.ahead{padding:0 14px 8px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.arow{padding:13px 14px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);font-size:.9rem}.arow:hover{background:color-mix(in srgb,var(--soft) 55%,transparent)}
.a-when b{display:block;font-size:.88rem}.a-when small{color:var(--muted);font-variant-numeric:tabular-nums}
.a-who{display:flex;align-items:center;gap:9px;min-width:0}.a-who i{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.74rem;flex:none}.a-who i.q{background:var(--soft);color:var(--muted)}
.a-who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.achip{display:inline-flex;align-items:center;gap:7px;border-radius:99px;padding:3px 12px 3px 9px;font-size:.8rem;font-weight:600;background:color-mix(in srgb,var(--cc,var(--accent)) 12%,var(--surface));color:var(--cc,var(--accent))}
.achip svg.i{width:14px;height:14px}
.cat-upload{--cc:#2563EB}.cat-edit{--cc:#B7791F}.cat-delete{--cc:var(--bad)}.cat-workflow{--cc:var(--s-design)}.cat-security{--cc:#475569}.cat-people{--cc:#0E9F8E}.cat-tasks{--cc:var(--ok)}.cat-import{--cc:#0B3A6E}.cat-note{--cc:var(--muted)}
.a-client a{font-weight:600}.a-client small{display:block;color:var(--muted);font-size:.74rem}.a-detail{color:var(--muted);font-size:.85rem;overflow-wrap:anywhere}
@media (max-width:1100px){.ahead{display:none}.arow{grid-template-columns:1fr 1fr;gap:6px 14px}.a-detail{grid-column:1/-1}}

/* counter drill-down */
.pt-n{cursor:pointer;border-radius:10px;padding:2px 6px;margin:-2px -6px}.pt-n:hover{background:var(--soft)}.pt-n b{text-decoration:underline dotted color-mix(in srgb,var(--muted) 60%,transparent);text-underline-offset:4px}
dialog.wide{width:min(780px,calc(100vw - 24px))}
.pd-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.pd-head small{display:block;color:var(--muted)}.pd-pct{font-size:1.8rem;font-weight:700;color:var(--muted)}
.pd-sum{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-radius:16px;padding:14px 18px;margin-bottom:18px;background:var(--soft)}
.pd-sum small{display:block;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}.pd-sum .pd-n{display:inline;text-transform:none;letter-spacing:0;font-size:.82rem}
.pd-sum.bad>div:first-child b{color:var(--bad)}.pd-sum.good>div:first-child{color:var(--ok);font-weight:600}
.pd-client{border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:12px}.pd-ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pd-line{display:grid;grid-template-columns:170px minmax(0,1fr) 80px 110px;gap:14px;align-items:center;padding:5px 0;font-size:.9rem}
.pd-line .bar{margin:0;height:8px}.pd-line.ok .bar i{background:var(--ok)}.pd-line.short .bar i{background:var(--bad)}.pd-line b{text-align:end;font-variant-numeric:tabular-nums}
.pd-line em{font-style:normal;font-weight:700;font-size:.82rem}.pd-line.short em{color:var(--bad)}.pd-line.ok em{color:var(--ok)}
@media (max-width:700px){.pd-sum{grid-template-columns:1fr}.pd-line{grid-template-columns:1fr 70px}.pd-line .bar{grid-column:1/-1}}

.rchip.sk{background:transparent;border:1px solid var(--line);color:var(--muted)}
.roles.skills{margin-top:8px;align-items:center}.roles.skills small{color:var(--muted);font-weight:700;margin-inline-end:6px}
.pt-head,.ptr{grid-template-columns:minmax(260px,340px) minmax(250px,max-content) minmax(0,1fr) 64px}
.pt-n small{white-space:nowrap;display:block}.pt-n{white-space:nowrap}

.pt-who{position:relative}.rank{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.9rem;background:var(--soft);color:var(--muted);margin-inline-end:-4px}
.rank:empty{visibility:hidden}.rank.r1{background:#E2A23B;color:#fff}.rank.r2{background:#9AA7B8;color:#fff}.rank.r3{background:#C58A5B;color:#fff}

/* rank column: a trophy + #n, separate from the avatar */
.pt-head,.ptr{grid-template-columns:64px minmax(260px,340px) minmax(250px,max-content) minmax(0,1fr) 64px}
.rk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted)}
.rk b{font-size:1.15rem;font-weight:800;letter-spacing:-.01em}.rk-ic{width:22px;height:22px}
.rk.r1{color:#C98A12}.rk.r2{color:#7D8BA0}.rk.r3{color:#A8663A}.rk.r1 .rk-ic{width:28px;height:28px}
.ptr:has(.rk.r1){box-shadow:inset 3px 0 0 #E2A23B}.ptr:has(.rk.r2){box-shadow:inset 3px 0 0 #9AA7B8}.ptr:has(.rk.r3){box-shadow:inset 3px 0 0 #C58A5B}
@media (max-width:1000px){.ptr{grid-template-columns:48px 1fr}.pt-head{display:none}}

/* numbered page parts */
.part{margin-bottom:40px}.part-h{display:flex;align-items:center;gap:18px;margin:0 0 16px;padding-bottom:14px;border-bottom:2px solid var(--line)}
.part-n{flex:none;width:46px;height:46px;border-radius:14px;background:var(--navy,#0B3A6E);color:#fff;display:grid;place-items:center;font-size:1.4rem;font-weight:800;box-shadow:0 6px 16px rgba(11,58,110,.25)}
.part-h h2{margin:0;font-size:1.55rem;letter-spacing:-.01em}.part-h p{margin:3px 0 0;color:var(--muted);font-size:.95rem;max-width:70ch}

.crow{position:relative}.adm-corner{position:absolute;left:18px;bottom:12px;font-size:.74rem;font-weight:400;color:var(--muted);opacity:.8;letter-spacing:.02em}
[dir=rtl] .adm-corner{left:auto;right:18px}

.strip-r{margin-inline-start:auto;display:flex;flex-direction:column;align-items:flex-end;gap:12px;min-width:260px}.strip-r .daybar{margin:0;width:100%}
.filters.sm{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin:0}
.filters.sm .seg{padding:3px;border-radius:12px}.filters.sm .seg button{padding:5px 12px;font-size:.78rem;border-radius:9px;min-height:0;line-height:1.3}

.seg-logo{height:14px;width:auto;max-width:22px;object-fit:contain;vertical-align:-2px;margin-inline-end:6px;filter:grayscale(1) brightness(1.6);opacity:.45;transition:opacity .15s}
.seg button.on .seg-logo,.seg button:hover .seg-logo{opacity:.7}
@media (prefers-color-scheme:dark){.seg-logo{filter:grayscale(1) invert(1);opacity:.5}}

.part-h .part-f{margin-inline-start:auto;align-self:flex-end}

.filters.sm{gap:28px}
.filters.sm{gap:8px 32px}
.filters.sm{gap:8px 56px}
.part{margin-bottom:72px}.part:last-child{margin-bottom:0}
.part{margin-bottom:112px}.part:last-child{margin-bottom:0}

.svc-row input[readonly]{background:var(--soft);font-weight:700;color:var(--text);cursor:default}

/* export buttons + print view */
.xbar{display:inline-flex;gap:6px;flex:none}.xbar .btn{padding:5px 11px;font-size:.78rem;min-height:0;gap:6px}.xbar svg.i{width:15px;height:15px}
.part-h .xbar{margin-inline-start:auto;align-self:flex-start}
#print-root{display:none}
@media print{
  body.pp>:not(#print-root){display:none!important}
  body.pp #print-root{display:block;padding:0}
  :root{--bg:#fff;--surface:#fff;--soft:#EEF2F8;--text:#06213E;--muted:#6A7A92;--line:#D5DCE8;--accent:#0B3A6E;--accent-ink:#fff;--ok:#1C8A4C;--bad:#D14B2A;--logo-filter:none}
  body{background:#fff;color:#06213E}
  .pr-head{display:flex;align-items:center;gap:18px;border-bottom:3px solid var(--gold);padding-bottom:12px;margin-bottom:18px}.pr-head img{height:44px;filter:none}.pr-head b{display:block;font-size:1.3rem}.pr-head small{color:var(--muted)}
  #print-root *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #print-root .card,#print-root .surface{box-shadow:none;border:1px solid var(--line)}
  #print-root .ptr,#print-root .crow,#print-root .arow{break-inside:avoid}
}

.xline{display:flex;justify-content:flex-end;margin-bottom:12px}.part-h h2 .xbar{margin-inline-start:14px;vertical-align:middle;font-size:1rem;font-weight:400}
.page-h .actions .xbar{margin-inline-start:6px}

/* period selector */
.period{display:inline-flex;align-items:center;gap:8px;position:relative}.pmenu-wrap{position:relative}
.pmenu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:30;background:var(--surface);border-radius:16px;box-shadow:0 12px 40px rgba(6,33,62,.2);padding:8px;min-width:230px;display:grid;gap:2px}
.pmenu[hidden]{display:none}.pmenu>button{border:0;background:none;text-align:start;padding:8px 12px;border-radius:10px;font-size:.92rem}.pmenu>button:hover{background:var(--soft)}
.pcustom{border-top:1px solid var(--line);margin-top:6px;padding:10px 8px 4px;display:grid;gap:8px}.pcustom b{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pcustom label{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:8px;font-size:.88rem}.pcustom input{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
/* range summary rows */
.rg{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:28px;align-items:center;padding:6px 0}
.rg-lines{display:grid;gap:10px}.rg-line{display:grid;grid-template-columns:110px minmax(0,1fr) 78px 44px;gap:12px;align-items:center;font-size:.92rem}
.rg-line .bar{margin:0;height:10px}.rg-line b{text-align:end;font-variant-numeric:tabular-nums}.rg-line em{font-style:normal;color:var(--muted);font-size:.82rem;text-align:end}
.rg-side{display:grid;gap:10px;justify-items:end}.rg-all b{font-size:2rem;line-height:1}.rg-all small{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.rg-m{display:flex;gap:4px;align-items:flex-end;height:46px}.rg-m span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;width:16px}.rg-m i{display:block;width:100%;background:var(--accent);border-radius:4px 4px 2px 2px;opacity:.85}.rg-m small{font-size:.6rem;color:var(--muted);margin-top:2px}
@media (max-width:800px){.rg{grid-template-columns:1fr}.rg-side{justify-items:start}}

.rp-table{width:100%;border-collapse:collapse;margin:8px 0 4px}.rp-table th,.rp-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:start}.rp-table th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.part-h h2{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}.part-h h2 .xbar{margin-inline-start:0}

/* role permission matrix */
.permx{overflow-x:auto}.pxh,.pxr{display:grid;grid-template-columns:minmax(150px,1.2fr) repeat(4,minmax(90px,1fr)) repeat(2,minmax(110px,1fr));gap:10px;align-items:center;min-width:760px}
.pxh{color:var(--muted);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:6px 8px;border-bottom:1px solid var(--line)}
.pxr{padding:10px 8px;border-bottom:1px solid var(--line)}.pxr:last-child{border-bottom:0}.pxr b{font-size:.95rem}
.pxc{display:flex;justify-content:center}.pxc input{width:20px;height:20px;accent-color:var(--accent)}
.pxr select{padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:.88rem}

.pt-hrs{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:.82rem;color:var(--muted)}.pt-hrs:empty{display:none}
.pt-hrs .hrs{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.pt-hrs .hrs b{color:var(--text);font-weight:700}.pt-hrs svg.i{width:14px;height:14px}

.tlsel{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:.88rem;color:var(--muted)}.tlsel select{padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text)}

.savedrep{margin:0 0 20px}.repl{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}.repl li{display:flex;align-items:center;gap:10px}.repl a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent)}

/* CRM */
:root{--crm-new:#7A8BA5;--crm-contacted:#0E9AA7;--crm-meeting:#7A5AF0;--crm-negotiation:#E2A23B;--crm-won:#1C8A4C;--crm-lost:#D14B2A}
.crm-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px}.crm-bar select,.crm-bar input[type=search]{padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.crm-bar input[type=search]{min-width:220px}
.lboard{display:grid;grid-template-columns:repeat(6,minmax(210px,1fr));gap:14px;overflow-x:auto;padding-bottom:6px;align-items:start}
.lcol{background:var(--soft);border-radius:18px;padding:12px;min-height:160px;border-top:4px solid var(--c)}.lcol .col-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}.lcol .col-h .n{background:var(--surface);border-radius:99px;padding:0 9px;font-size:.8rem;font-weight:700}
.lcol.over{outline:2px dashed var(--c);outline-offset:-4px}.lcol .cards{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lcard{background:var(--surface);border-radius:14px;padding:12px;box-shadow:var(--shadow);cursor:pointer;display:grid;gap:8px}.lcard.drag{opacity:.45}.lcard .lt b{display:block}.lcard .lt small{color:var(--muted)}
.lcard .tfoot{display:flex;align-items:center;justify-content:space-between}.lcard .co-logo{opacity:.7}
.stg{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 10px;border-radius:99px;background:color-mix(in srgb,var(--c,var(--muted)) 16%,transparent);color:var(--c,var(--muted));vertical-align:middle;margin-inline-start:8px}
.stg.s-new{--c:var(--crm-new)}.stg.s-contacted{--c:var(--crm-contacted)}.stg.s-meeting{--c:var(--crm-meeting)}.stg.s-negotiation{--c:var(--crm-negotiation)}.stg.s-won{--c:var(--crm-won)}.stg.s-lost{--c:var(--crm-lost)}
.crm-t .lrow{cursor:pointer}.crm-t .lrow:hover{background:var(--soft)}.crm-t td small{display:block}
.srcs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lead-cols{display:grid;grid-template-columns:minmax(300px,1fr) minmax(320px,1.2fr);gap:20px;align-items:start}@media (max-width:900px){.lead-cols{grid-template-columns:1fr}}
.lead-dl{display:grid;grid-template-columns:140px 1fr;gap:8px 14px;margin:10px 0}.lead-dl dt{color:var(--muted);font-size:.85rem}.lead-dl dd{margin:0}.lead-notes{background:var(--soft);border-radius:12px;padding:10px 12px;white-space:pre-wrap}
.fus{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}.fus li.done span{text-decoration:line-through;color:var(--muted)}.fus li.late b{color:var(--bad)}.fus label{display:flex;gap:10px;align-items:flex-start}
.kinds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.kchip input{position:absolute;opacity:0}.kchip span{display:inline-block;padding:6px 12px;border-radius:99px;border:1px solid var(--line);cursor:pointer;font-size:.88rem}.kchip input:checked+span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* task attachments */
.tflist{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:220px;overflow:auto}.tflist li{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:12px;padding:8px 10px}
.tflist img{width:44px;height:44px;object-fit:cover;border-radius:8px;display:block}.tflist .fext{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:var(--surface);font-size:.7rem;font-weight:700;text-transform:uppercase;color:var(--muted)}
.tflist li>div{flex:1;min-width:0}.tflist a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.tflist small{display:block}
.tfpick{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:8px 14px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);cursor:pointer}
.crm-bar select,.crm-bar input[type=search]{width:auto!important;flex:0 0 auto}.crm-bar input[type=search]{min-width:240px}

/* WhatsApp quick-chat icon */
a.wa{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#25D366;color:#fff;flex:none;transition:transform .12s,box-shadow .12s}a.wa:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(37,211,102,.45)}a.wa svg.i{width:17px;height:17px;stroke:#fff}a.wa.big{width:36px;height:36px;vertical-align:middle}a.wa.big svg.i{width:20px;height:20px}
.lcard .lt{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.lname{display:flex;align-items:center;justify-content:space-between;gap:10px}.lname small{display:block}

.lacc{margin-top:14px;display:grid;gap:4px}.lacc .form{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:6px}.soclab{display:flex!important;align-items:center;gap:8px;flex-direction:row!important}.soclab svg.i{width:20px;height:20px;color:var(--muted);flex:none}.soclab input{flex:1;min-width:0}
.lcard .socials{margin:0}@media (max-width:700px){.lacc .form{grid-template-columns:1fr}}

.mblock{margin-bottom:20px}.mh{margin:16px 0 6px;font-size:.9rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.mposts{list-style:none;margin:0;padding:0;display:grid;gap:8px}.mposts li{display:grid;gap:2px;background:var(--soft);border-radius:12px;padding:8px 12px}.mposts a{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.metaline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:8px;font-size:.78rem;color:var(--muted)}.metaline:empty{display:none}.metaline svg.i{width:14px;height:14px}.metaline b{color:var(--text);font-weight:700}
.metaline.wide{margin:10px 0 0;font-size:.88rem}.metaline .mal{display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);font-weight:700;border-radius:99px;padding:2px 10px}
.metaline .mal svg.i{stroke:var(--bad)}

/* Meta panel (overview + client page) */
.metaline{display:block;margin:10px 0 0;padding:10px 12px;background:var(--soft);border:1px solid var(--line);border-radius:14px;font-size:.8rem;color:var(--muted);min-width:0}.metaline:empty{display:none}.metaline.alert{border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.metaline .mhead{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin-bottom:8px;font-size:.74rem}.metaline .mhead b{color:var(--text);letter-spacing:.04em}.metaline .mhead small{flex:1 1 100%;color:var(--muted)}
.metaline .mdot{width:8px;height:8px;border-radius:50%;background:#25C26E;box-shadow:0 0 0 3px rgba(37,194,110,.2);animation:mpulse 2s infinite}@keyframes mpulse{50%{box-shadow:0 0 0 5px rgba(37,194,110,.08)}}
.metaline .mref{margin-inline-start:auto;border:0;background:none;color:var(--muted);padding:2px;border-radius:8px;line-height:0}.metaline .mref:hover{background:var(--surface);color:var(--text)}.metaline .mref svg.i{width:15px;height:15px}.metaline.loading{opacity:.55}
.metaline .mtiles{display:flex;gap:6px}.metaline .mtiles>div{flex:1;min-width:0;background:var(--surface);border-radius:10px;padding:6px 8px;text-align:center}
.metaline .mtiles b{display:block;color:var(--text);font-size:.95rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metaline .mtiles small{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em}
.metaline .mchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.metaline .mal{display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);font-weight:700;border-radius:99px;padding:3px 10px;font-size:.74rem}.metaline .mal svg.i{width:13px;height:13px;stroke:var(--bad)}
.metaline.wide{max-width:520px}

/* Facebook publishing */
.autofb{margin-top:14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;display:grid;gap:8px}.autofb .atime{display:flex;align-items:center;gap:8px;font-size:.9rem}.autofb input[type=time]{padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.fbrow{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.fbl{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;padding:2px 9px;border-radius:99px;background:var(--soft);color:var(--text)}.fbl svg.i{width:13px;height:13px}.fbl.err{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}.fbl.err svg.i{stroke:var(--bad)}.fbl.auto{color:var(--muted)}

/* task attachment drop zone */
.tfdrop{display:flex;align-items:center;gap:14px;margin-top:10px;padding:16px;border:2px dashed var(--line);border-radius:14px;color:var(--muted);cursor:pointer;transition:border-color .15s,background .15s}.tfdrop:hover,.tfdrop:focus-visible{border-color:var(--accent)}
.tfdrop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text)}.tfdrop svg.i{width:26px;height:26px;flex:none}.tfdrop b{display:block;color:var(--text)}.tfdrop small{display:block;font-size:.78rem}
.tflist .fext.pdf{background:#D14B2A;color:#fff}a.fext{text-decoration:none}#ntlist{margin-top:10px}

.metaline .mfail{display:flex;gap:8px;align-items:flex-start;color:var(--bad);font-size:.78rem;font-weight:600}.metaline .mfail svg.i{stroke:var(--bad);flex:none;margin-top:2px}.metaline .mfail small{display:block;color:var(--muted);font-weight:400;margin-top:2px}

/* ready version of a piece */
.pic .rdy{position:absolute;inset-inline-start:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;background:#1C8A4C;color:#fff;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:99px}.pic .rdy svg.i{width:12px;height:12px;stroke:#fff}
.tools2 a.rd{color:#1C8A4C}.rdlbl{cursor:pointer}.rdlbl.busy{opacity:.5;pointer-events:none}
.pxh,.pxr{grid-template-columns:minmax(150px,1.2fr) repeat(5,minmax(86px,1fr)) repeat(2,minmax(110px,1fr))!important;min-width:880px}

/* content as wide rows: thumbnail | big caption | controls */
.viewbar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin:18px 0 12px}.viewbar .seg button[data-sf]:not(.on)::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted));margin-inline-end:6px}
.stagepill{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 10px;border-radius:99px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);justify-self:start}.col .stagepill{display:none}
.mrows{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.mrows>li.media{display:grid;grid-template-columns:210px minmax(0,1fr);gap:20px;padding:14px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow);align-items:start}
.mrows .media .pic{height:auto;aspect-ratio:4/3;width:100%}.mrows .media .pic img{height:100%;width:100%;object-fit:cover}
.mrows .media .info{display:grid;grid-template-columns:minmax(0,1fr) 250px;column-gap:22px;row-gap:8px;align-content:start}
.mrows .media .info>*{grid-column:2}.mrows .media .info>textarea[data-cap],.mrows .media .info>.cap{grid-column:1;grid-row:1 / span 9;width:100%;min-height:150px;font-size:1rem;line-height:1.6;padding:12px 14px;border-radius:14px}
.mrows .media .info>.cap{white-space:pre-wrap;background:var(--soft)}
textarea[data-cap]{min-height:90px;resize:vertical}
@media (max-width:900px){.mrows>li.media{grid-template-columns:1fr}.mrows .media .info{grid-template-columns:1fr}.mrows .media .info>*,.mrows .media .info>textarea[data-cap],.mrows .media .info>.cap{grid-column:1;grid-row:auto}}