:root{
  --ink:#15211f; --ink-soft:#4a5b58; --paper:#f4f1ea; --panel:#fbfaf6; --panel2:#f1ede3;
  --line:#e3ddcf; --accent:#0f6e5c; --accent-d:#0b5446;
  --amber:#c2761a; --amber-soft:#f7e9d6; --danger:#b23a2e; --good:#0f6e5c;
  --new:#0f6e5c; --old:#c2761a;
}
*{box-sizing:border-box}
body{ margin:0; background:var(--paper); color:var(--ink);
  font-family:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif; font-size:14px; line-height:1.45; }
.num{ font-variant-numeric:tabular-nums; text-align:right }
.wrap{ max-width:1800px; margin:0 auto; padding:18px 22px 80px }
h1{ font-family:"Cormorant Garamond","Georgia",serif; font-size:30px; font-weight:600; margin:0 0 3px; letter-spacing:.2px }
.sub{ color:var(--ink-soft); margin:0 0 18px; max-width:760px }
.head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap }
#kpis{ display:flex; gap:12px; flex-wrap:wrap }
.kpi{ background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:12px 16px; min-width:140px; display:flex; flex-direction:column }
.kpi .lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-soft); font-weight:700 }
/* KPI info icon + tooltip */
.info{ display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; border:1px solid currentColor; font-family:Georgia,"Times New Roman",serif; font-size:10px; font-weight:700; font-style:italic; text-transform:none; letter-spacing:0; line-height:1; cursor:help; opacity:.55; vertical-align:middle; outline:none }
.info:hover,.info:focus{ opacity:1; color:var(--accent) }
.kpitip{ position:fixed; z-index:9999; display:none; width:250px; max-width:72vw; background:var(--ink); color:#fff; padding:9px 11px; border-radius:9px; font-size:11.5px; font-weight:500; line-height:1.45; letter-spacing:0; text-transform:none; box-shadow:0 8px 28px rgba(0,0,0,.28); pointer-events:none }
/* value: pinned to the bottom of the plate, never wraps (JS shrinks to fit) */
.kpi .val{ font-size:22px; font-weight:800; margin-top:auto; padding-top:6px; white-space:nowrap; overflow:hidden; line-height:1.1 }
.grid{ display:grid; grid-template-columns:360px 1fr; gap:18px; margin-top:18px; align-items:start }
@media(max-width:1000px){ .grid{ grid-template-columns:1fr } }
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden }
.ph{ padding:12px 16px; border-bottom:1px solid var(--line); font-weight:800; font-size:11.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--ink-soft);
  display:flex; justify-content:space-between; align-items:center; background:var(--panel2) }
.pb{ padding:15px 16px }
.hint{ font-size:11.5px; color:var(--ink-soft); margin:5px 0 0 }
.gt{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-soft); font-weight:800; margin:16px 0 7px }
.fld{ display:block; font-size:11.5px; color:var(--ink-soft); margin:8px 0 3px; font-weight:600 }
input[type=text],input[type=password],input[type=number],input[type=date],input[type=email],select{ width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:#fff; font:inherit; color:var(--ink) }
input:focus,select:focus{ outline:none; border-color:var(--accent) }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.seg{ display:inline-flex; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:2px; gap:2px; flex-wrap:wrap }
.seg button{ border:0; background:transparent; padding:5px 11px; border-radius:7px; cursor:pointer; font:inherit; font-weight:700; color:var(--ink-soft); font-size:12.5px }
.seg button.on{ background:#fff; color:var(--accent); box-shadow:0 1px 2px rgba(0,0,0,.06) }
.seg.mini button{ padding:4px 9px; font-size:11.5px }
.btn{ border:1px solid var(--line); background:#fff; border-radius:9px; padding:8px 13px; cursor:pointer; font:inherit; font-weight:700; color:var(--ink) }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); width:100% }
.btn.primary:hover{ background:var(--accent-d) }
.btn.ghost{ color:var(--accent) }
.btn.danger{ color:var(--danger); border-color:#e7cfc9 }
.btn:disabled{ opacity:.5; cursor:not-allowed }
table.rep{ width:100%; border-collapse:collapse; font-size:13px }
table.rep th,table.rep td{ padding:7px 11px; border-bottom:1px solid var(--line); white-space:nowrap }
table.rep thead th{ position:sticky; top:0; background:var(--panel2); text-align:right; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft); z-index:1 }
table.rep th.l,table.rep td.l{ text-align:left }
table.rep tr.tot td{ font-weight:800; background:var(--panel2); border-top:2px solid var(--line) }
td.pos{ color:var(--good) } td.neg{ color:var(--danger) } td.muted{ color:var(--ink-soft) }
.scrollbox{ max-height:520px; overflow:auto; border-radius:12px; border:1px solid var(--line) }
.toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px }
.spacer{ flex:1 }
.tag{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; background:var(--panel2); color:var(--ink-soft) }
.legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-size:12.5px }
.legend .it{ display:flex; align-items:center; gap:6px }
.sw{ width:11px; height:11px; border-radius:3px; display:inline-block }
.note{ font-size:12px; color:var(--ink-soft); line-height:1.5; background:var(--panel2); border-radius:10px; padding:10px 13px; margin-top:12px }
.saved{ display:flex; flex-direction:column; gap:6px; margin-top:8px }
.savedrow{ display:flex; gap:6px; align-items:center }
.savedrow .nm{ flex:1; padding:6px 9px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; font-weight:700; font-size:12.5px }
.savedrow .nm:hover{ border-color:var(--accent); color:var(--accent) }
.savedrow .del{ border:1px solid var(--line); background:#fff; border-radius:8px; padding:6px 8px; cursor:pointer; color:var(--danger); font-weight:700 }
.empty{ padding:60px 20px; text-align:center; color:var(--ink-soft) }
code{ background:#fff; border:1px solid var(--line); padding:1px 5px; border-radius:4px; font-size:12px }
.err{ color:var(--danger); font-size:12.5px; margin-top:8px }
.ok{ color:var(--good); font-size:12.5px; margin-top:8px }

/* top navigation */
.nav{ background:var(--panel); border-bottom:1px solid var(--line); }
.nav-in{ max-width:1500px; margin:0 auto; padding:10px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.nav .brand{ font-family:"Cormorant Garamond","Georgia",serif; font-size:20px; font-weight:600; color:var(--ink); text-decoration:none }
.nav a.link{ color:var(--ink-soft); text-decoration:none; font-weight:700; font-size:13px; padding:4px 8px; border-radius:7px }
.nav a.link:hover{ color:var(--accent); background:var(--panel2) }
.nav a.link.active{ color:var(--accent); background:#fff; border:1px solid var(--line) }
.nav .who{ color:var(--ink-soft); font-size:12.5px }

/* data / sync block */
.statline{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-soft) }
.statline b{ color:var(--ink); font-size:15px }
.badge{ display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px }
.badge.run{ background:var(--amber-soft); color:var(--amber) }
.badge.ok{ background:#e1f1ec; color:var(--good) }
.badge.err{ background:#f6e3df; color:var(--danger) }

/* simple centered auth card */
.authwrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px }
.authcard{ width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px }
.authcard h1{ font-size:24px; margin-bottom:4px }

table.list{ width:100%; border-collapse:collapse; font-size:13px }
table.list th,table.list td{ padding:9px 11px; border-bottom:1px solid var(--line); text-align:left }
table.list thead th{ background:var(--panel2); font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft) }
table.list td.num,table.list th.num{ text-align:right; font-variant-numeric:tabular-nums }

/* builder form grid (top, full width) */
.formgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px 22px; align-items:start }
.fgroup{ min-width:0 }
.fgroup .gt:first-child{ margin-top:0 }
.btnrow{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }

/* data page stat cards */
.statgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px }
.stat{ background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px 14px }
.stat .lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); font-weight:700 }
.stat .big{ font-size:24px; font-weight:800; margin-top:3px; font-variant-numeric:tabular-nums }

/* control list pills + links */
.pill{ display:inline-block; font-size:10px; font-weight:700; padding:1px 7px; border-radius:20px; margin-left:4px; vertical-align:middle }
.pill.new{ background:#e1f1ec; color:var(--good) }
.pill.old{ background:var(--amber-soft); color:var(--amber) }
.lnk{ color:var(--accent); text-decoration:none; font-weight:700; font-size:12px; white-space:nowrap }
.lnk:hover{ text-decoration:underline }
.lnk.off{ color:var(--ink-soft); font-weight:600 }
table.rep td.wrapcell{ white-space:normal; min-width:160px; max-width:280px }
table.rep td.nowrap{ white-space:nowrap }

/* icon action buttons (control tables) */
.iconrow{ display:inline-flex; gap:6px; align-items:center }
.iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--accent); cursor:pointer; text-decoration:none }
.iconbtn:hover{ border-color:var(--accent); background:var(--panel2) }
.iconbtn.off{ color:var(--line); cursor:not-allowed; background:var(--panel2) }
.ph-sub{ text-transform:none; letter-spacing:0; font-weight:600; color:var(--ink-soft) }

/* compact constructor */
#builder .pb{ padding:12px 14px }
#builder .formgrid{ gap:6px 20px }
#builder .gt{ margin:10px 0 5px }
#builder .fld{ margin:6px 0 2px }
#builder input,#builder select{ padding:6px 8px }

/* collapsible panel header */
.collapser{ cursor:pointer; user-select:none }
.collapser .caret{ transition:transform .15s ease; display:inline-block }
#builder:not(.collapsed) .collapser .caret{ transform:rotate(90deg) }
#builder.collapsed .pb{ display:none }

/* chart + KPI plates side by side (two columns on desktop) */
.chartrow{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap }
.kpiwrap{ flex:1 1 var(--kpiw,560px); min-width:0; display:flex; flex-direction:column }
.kpicol{ display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); gap:10px; width:100%; align-content:start }
.kpicol .kpi{ min-width:0; width:auto }
/* matrix view: KPIs span full width (no chart beside them) */
.kpicol-wide{ display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); gap:10px; width:100%; align-content:start }
.colsel{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-soft); font-weight:600 }
.colsel select{ width:auto; padding:4px 6px; font-size:12px }
/* ad funnel block (клик → лид → событие) */
.funnelbox{ border:1px solid var(--line); border-radius:13px; background:var(--panel2); padding:14px 16px; margin-top:16px }
.funnelbox .ph-mini{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-soft); font-weight:700; margin-bottom:12px }
.funnel{ display:flex; align-items:stretch; flex-wrap:wrap; gap:4px }
.fstage{ flex:1 1 150px; min-width:140px; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:12px 14px; text-align:center }
.fstage-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); font-weight:700 }
.fstage-val{ font-size:26px; font-weight:800; margin-top:3px; line-height:1 }
.fstage-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:7px; line-height:1.4 }
.fstage-sub b{ color:var(--ink) }
.fconv{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 12px; min-width:70px }
.fconv-arrow{ font-size:18px; color:var(--ink-soft); line-height:1 }
.fconv-pct{ font-weight:800; font-size:15px; color:var(--accent); margin-top:2px }
.fconv-cap{ font-size:9.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.3px; margin-top:1px }
/* ФКПП report: drill affordance + yearly matrix cells */
.kpi.drill{ cursor:pointer } .kpi.drill:hover{ border-color:var(--accent) }
td.drill{ cursor:pointer } td.drill:hover{ background:#fbf6ea; color:var(--accent) }
td.ycell{ text-align:center; vertical-align:middle }
td.ycell .yc-buy{ font-weight:800; font-size:13px }
td.ycell .yc-sub{ font-size:10.5px; color:var(--ink-soft); white-space:nowrap }
.yd{ margin-left:5px; font-weight:700 }
.yd.pos{ color:var(--good) } .yd.neg{ color:var(--danger) } .yd.zero{ color:var(--ink-soft); font-weight:400 }
/* vertical funnel (few metric columns) */
.funnel.vert{ flex-direction:column }
.funnel.vert .fstage{ flex:0 0 auto }
.funnel.vert .fconv{ padding:6px 0 } .funnel.vert .fconv-arrow{ transform:rotate(90deg) }
.kpicol-wide .kpi{ min-width:0; width:auto }
/* cohort matrix table: keep the first column readable while scrolling */
table.rep.matrix th:first-child, table.rep.matrix td:first-child{ position:sticky; left:0; background:var(--panel); z-index:1 }
table.rep.matrix tr.tot td:first-child{ background:var(--panel2) }
.chartbox{ flex:2 1 340px; min-width:0 }

/* grouped control tables (by order composition) */
.pgroup{ border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:var(--panel2); overflow:hidden }
.pgroup>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:9px 13px; font-weight:700; font-size:13px }
.pgroup>summary::-webkit-details-marker{ display:none }
.pgroup>summary::before{ content:'▸'; color:var(--ink-soft); transition:transform .15s ease }
.pgroup[open]>summary::before{ transform:rotate(90deg) }
.pgroup>summary:hover{ color:var(--accent) }
.pgroup .pgname{ white-space:normal; word-break:break-word; flex:1 }
.pgroup .pgcount{ font-size:11.5px; font-weight:700; color:var(--ink-soft); white-space:nowrap }
.pgroup .scrollbox{ border:0; border-top:1px solid var(--line); border-radius:0 }

/* saved reports: folder browser */
.saved{ display:block }
/* save-to-folder picker in builder */
.savefld{ display:inline-flex; align-items:center; gap:6px }
/* breadcrumbs */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin-bottom:12px }
.crumb{ cursor:pointer; font-weight:700; font-size:13px; color:var(--accent); padding:2px 4px; border-radius:6px }
.crumb:hover{ background:var(--panel2) }
.crumbsep{ color:var(--ink-soft) }
/* subfolder cards */
.folders{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin-bottom:14px }
.folder{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:11px; background:var(--panel2); padding:9px 11px; cursor:pointer }
.folder:hover{ border-color:var(--accent) }
.folder .fname{ font-weight:800; font-size:13px; word-break:break-word }
.folder .fmeta{ font-size:11px; color:var(--ink-soft); white-space:nowrap }
.folder .frename,.folder .fdel{ border:1px solid var(--line); background:#fff; border-radius:7px; padding:3px 7px; cursor:pointer; font-size:12px; color:var(--ink-soft) }
.folder .frename:hover{ color:var(--accent); border-color:var(--accent) }
.folder .fdel:hover{ color:var(--danger); border-color:#e7cfc9 }
/* report chips (inline, wrap) */
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:20px; background:#fff; padding:0 }
.chip:hover{ border-color:var(--accent) }
.chip .cname{ padding:6px 13px; cursor:pointer; font-weight:700; font-size:12.5px; color:var(--ink); white-space:nowrap }
.chip .cname:hover{ color:var(--accent) }
/* combined-report chip + marker */
.chip.comb{ border-color:#bcd6cb; background:#eef6f2 }
.chip .cbadge{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; margin-left:6px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; font-size:12px; flex:0 0 auto }
.chip.comb .cbadge{ background:#2f8f6e }
.combmark{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#2f8f6e; color:#fff; font-weight:800; font-size:13px; vertical-align:middle; margin-right:4px }
/* selectable chips (combine mode) */
.chip.selectable{ cursor:pointer; user-select:none }
.chip.selectable .cname{ cursor:pointer }
.chip.selectable .cbox{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:8px; border:1.5px solid var(--line); border-radius:5px; font-size:12px; font-weight:800; color:#fff; flex:0 0 auto }
.chip.selectable.sel{ border-color:var(--accent); background:#eef6f2 }
.chip.selectable.sel .cbox{ background:var(--accent); border-color:var(--accent) }
.chip.disabled{ opacity:.5; pointer-events:none }
/* combine action bar */
.combinebar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 12px; margin-bottom:12px; border:1px solid #bcd6cb; background:#eef6f2; border-radius:10px }
.combinebar .cbtext{ font-weight:700; font-size:13px; color:var(--ink) }
.combinebar .btn{ width:auto }
#combineBtn.on{ color:var(--danger); border-color:#e7cfc9 }
/* combine picker: reports grouped by folder */
.cgroup{ margin-bottom:14px }
.cglabel{ font-weight:800; font-size:12px; color:var(--ink-soft); margin-bottom:7px; text-transform:none; letter-spacing:0 }
/* report context menu */
.ctxmenu{ position:fixed; z-index:1000; min-width:210px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.16); padding:6px; display:flex; flex-direction:column; gap:2px }
.ctxmenu button{ text-align:left; border:0; background:transparent; padding:8px 10px; border-radius:7px; cursor:pointer; font:inherit; font-weight:700; font-size:13px; color:var(--ink) }
.ctxmenu button:hover{ background:var(--panel2); color:var(--accent) }
.ctxmenu button.danger:hover{ color:var(--danger) }
.ctxsep{ height:1px; background:var(--line); margin:4px 2px }
.ctxmove{ display:flex; flex-direction:column; gap:5px; padding:6px 10px 8px; font-size:11.5px; color:var(--ink-soft); font-weight:700 }
.ctxmove select{ width:100% }

/* ===== Отчёт по источникам ===== */
.reportswitch{ display:inline-flex; gap:4px; margin-top:14px; background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:3px }
.reportswitch button{ border:0; background:transparent; padding:8px 16px; border-radius:8px; font:inherit; font-weight:700; font-size:13px; cursor:pointer; color:var(--ink-soft) }
.reportswitch button.on{ background:#fff; color:var(--accent); box-shadow:0 1px 2px rgba(0,0,0,.06) }
.srclayout{ display:grid; grid-template-columns:330px 1fr; gap:18px; align-items:start; margin-top:18px }
.kpis{ display:flex; gap:10px; flex-wrap:wrap }
.quick{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap }
.quick button{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:4px 11px; font-size:11.5px; cursor:pointer; color:var(--ink-soft) }
.quick button:hover{ border-color:var(--accent); color:var(--accent) }
.quick button:disabled{ opacity:.45; cursor:not-allowed; border-color:var(--line); color:var(--ink-soft) }
details.adv{ border:1px dashed var(--line); border-radius:9px; padding:0 10px; margin-top:8px; background:#fff }
details.adv>summary{ cursor:pointer; padding:8px 0; font-size:12px; color:var(--accent); font-weight:700; list-style:none }
details.adv>summary::-webkit-details-marker{ display:none }
details.adv>summary::before{ content:"▸ " } details.adv[open]>summary::before{ content:"▾ " }
details.adv textarea{ width:100%; min-height:60px; margin-bottom:8px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; resize:vertical }
.pillbar{ display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.tag.amber{ background:var(--amber-soft); color:var(--amber) }
.tag.grey{ background:var(--panel2); color:var(--ink-soft) }
.chartwrap{ overflow-x:auto } svg.chart{ display:block }
.fk-month-main{ cursor:pointer }
.fk-month-main:hover td{ background:var(--panel2) }
.fk-month-caret{ display:inline-block; width:16px; color:var(--accent); font-weight:800; user-select:none }
.fk-month-detail[hidden]{ display:none }
.fk-month-detail>td{ padding:0!important; background:var(--panel2) }
.fk-month-box{ padding:13px 14px 15px }
.fk-month-title{ margin-bottom:9px; font-size:12.5px; font-weight:800; color:var(--ink) }
.fk-month-box .scrollbox{ max-height:none; background:var(--panel) }
.fk-breakdown th{ white-space:normal; min-width:86px }
.fk-breakdown th:first-child{ min-width:90px }
.fk-report-filter{ grid-template-columns:minmax(180px,1fr) minmax(300px,1.6fr) minmax(180px,1fr) minmax(170px,.8fr); align-items:end }
.fk-build-cell{ display:flex; align-items:flex-end; height:100% }
.fk-build-cell .btn{ width:100% }
.fk-member-filters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:8px; align-items:end; margin-bottom:8px }
.fk-member-filter{ min-width:0 }
.fk-member-filter>span{ display:block; margin-bottom:3px; font-size:10.5px; font-weight:700; color:var(--ink-soft) }
.fk-member-count{ margin:0 0 8px; font-size:11.5px; color:var(--ink-soft) }
.fk-member-scroll{ max-height:600px }
.fk-member-table{ min-width:1800px }
.fk-member-table .fk-user-col{ width:38px; min-width:38px; max-width:38px; padding-left:4px; padding-right:4px; text-align:center }
.fk-member-table .fk-user-col .iconbtn{ margin:auto }
.fk-column-picker{ position:relative }
.fk-column-picker>summary{ list-style:none; cursor:pointer }
.fk-column-picker>summary::-webkit-details-marker{ display:none }
.fk-column-picker>div{ position:absolute; right:0; top:calc(100% + 5px); z-index:20; width:270px; max-height:390px; overflow:auto; padding:10px; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:0 12px 35px rgba(0,0,0,.16) }
.fk-column-picker label{ display:block; padding:5px 3px; font-size:12px; color:var(--ink); white-space:normal }
.role-list{ display:grid; gap:7px; margin-top:12px }
.role-item{ display:grid; gap:3px; width:100%; padding:9px 10px; text-align:left; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer }
.role-item.on{ border-color:var(--accent); background:#eef6f3 }
.role-item small{ color:var(--ink-soft) }
.permission-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:7px; margin:7px 0 15px }
.permission-group{ margin:10px 0; padding:10px; border:1px solid var(--line); border-radius:8px }
.permission-group legend{ font-weight:700; padding:0 5px }
.permission-group label{ display:block; padding:5px 2px }
.fk-head-actions{ display:flex; align-items:center; gap:10px }
.fk-head-actions .btn{ padding:6px 10px; font-size:11.5px; text-transform:none; letter-spacing:0 }
.fk-member-row{ cursor:pointer }
.fk-member-row.fk-status-yellow td{ background:#fff5cc }
.fk-member-row.fk-status-green td{ background:#e2f4e9 }
.fk-member-row.fk-status-newgreen td{ background:#82ed92 }
.fk-member-row.fk-status-red td{ background:#f9e2df }
.fk-member-row:hover td{ filter:brightness(.985) }
.fk-sort{ padding:0; border:0; background:transparent; color:inherit; font:inherit; font-weight:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; white-space:nowrap }
.fk-sort:hover{ color:var(--accent) }
.fk-long-text{ min-width:600px!important; max-width:700px!important; max-height:90px; overflow:auto }
.fk-tag{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; border:1px solid color-mix(in srgb,var(--tag-color,#1e88e5) 80%,#000); background:var(--tag-color,#1e88e5); color:var(--tag-text,#fff); font-size:11px; font-weight:800; white-space:nowrap }
.fk-flag-list,.fk-flag-admin,.fk-editor-flags{ display:flex; align-items:center; gap:7px; flex-wrap:wrap }
.fk-flag-admin{ padding:4px; border:1px solid var(--line); border-radius:10px; background:#fff }
.fk-flag-admin .iconbtn{ width:24px; height:24px }
.fk-member-editor textarea{ width:100%; min-height:100px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; resize:vertical; font:inherit; color:var(--ink); background:#fff }
.fk-member-editor textarea:focus{ outline:none; border-color:var(--accent) }
.fk-editor-flags label{ display:flex; align-items:center; gap:4px; cursor:pointer }
.fk-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(21,33,31,.48); backdrop-filter:blur(2px) }
.fk-modal .fk-member-editor{ width:min(980px,100%); max-height:calc(100vh - 48px); overflow:auto; box-shadow:0 22px 70px rgba(0,0,0,.28) }
.fk-tag-popup{ width:min(560px,100%); max-height:calc(100vh - 48px); overflow:auto; box-shadow:0 22px 70px rgba(0,0,0,.28) }
.fk-tag-popup textarea{ width:100%; min-height:82px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; resize:vertical; font:inherit }
.fk-existing-tag{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; align-items:end }
.fk-existing-tag .btn{ margin-bottom:0 }
.fk-tag-divider{ display:flex; align-items:center; gap:10px; margin:17px 0; color:var(--ink-soft); font-size:11px; text-transform:uppercase; letter-spacing:.06em }
.fk-tag-divider::before,.fk-tag-divider::after{ content:""; height:1px; background:var(--line); flex:1 }
.fk-tag-colors{ display:flex; flex-wrap:wrap; gap:9px; margin:7px 0 16px }
.fk-tag-colors label{ cursor:pointer }
.fk-tag-colors input{ position:absolute; opacity:0; pointer-events:none }
.fk-tag-colors span{ display:block; width:30px; height:30px; border-radius:9px; border:3px solid #fff; box-shadow:0 0 0 1px var(--line) }
.fk-tag-colors input:checked+span{ box-shadow:0 0 0 3px var(--ink) }
.fk-action-layer{ position:fixed; inset:0; z-index:1100 }
.fk-row-menu{ position:fixed; min-width:235px; padding:6px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 14px 42px rgba(0,0,0,.22) }
.fk-menu-item{ display:flex; align-items:center; width:100%; gap:10px; padding:9px 10px; border:0; border-radius:8px; background:transparent; color:var(--ink); text-align:left; text-decoration:none; font:inherit; cursor:pointer }
.fk-menu-item:hover{ background:var(--panel2); color:var(--accent) }
.fk-menu-item:disabled{ color:#a7afac; cursor:not-allowed; background:transparent }
.fk-menu-item b{ display:inline-flex; align-items:center; justify-content:center; width:22px; color:var(--accent) }
.fk-menu-item:disabled b{ color:#c7cdca }
.fk-gc-run{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-bottom:12px; font-size:12px; color:var(--ink-soft) }
.fk-gc-run .btn{ padding:6px 10px; font-size:11.5px; text-transform:none; letter-spacing:0 }
.fk-gc-status{ white-space:nowrap }
.fk-gc-status .muted{ font-size:10.5px; margin-top:2px }
.fk-gc-badge{ display:inline-block; padding:2px 7px; border-radius:999px; font-size:11px; font-weight:800; background:#eef0ef; color:#58625f }
.fk-gc-badge.fk-gc-active{ background:#dff2e7; color:#1d6b43 }
.fk-gc-badge.fk-gc-paused,.fk-gc-badge.fk-gc-not_started{ background:#fff1c9; color:#7a5a00 }
.fk-gc-badge.fk-gc-finished{ background:#e8e6e1; color:#5b5750 }
.fk-gc-badge.fk-gc-cancelled,.fk-gc-badge.fk-gc-error{ background:#fadfdb; color:#9c2b1e }
.fk-gc-warn{ color:#c0392b; font-weight:900 }
.fk-birthday-soon{ background:#f0ddff!important; color:#7226a5!important; font-weight:900; box-shadow:inset 0 0 0 2px #d2a4ed }
.fk-color-legend{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-top:10px; font-size:11.5px; color:var(--ink-soft) }
.fk-legend-item{ display:inline-flex; align-items:center; gap:6px }
.fk-legend-item i{ width:15px; height:15px; border-radius:4px; border:1px solid var(--line) }
.fk-legend-green{ background:#e2f4e9 }.fk-legend-newgreen{ background:#82ed92 }.fk-legend-yellow{ background:#fff5cc }.fk-legend-red{ background:#f9e2df }
.fk-legend-birthday{ background:#f0ddff; border-color:#d2a4ed!important }
.iconbtn.amber{ color:var(--amber) }.iconbtn.amber:hover{ border-color:var(--amber); background:var(--amber-soft) }
.tablewrap{ overflow:auto; border:1px solid var(--line); border-radius:12px }
.dot{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:7px; vertical-align:baseline }
.share{ display:inline-block; min-width:42px }
.rep .caret{ display:inline-block; width:15px; cursor:pointer; color:var(--accent); font-size:10px; user-select:none; text-align:center }
.rep .caret:hover{ color:var(--amber) }
.rep .caret-sp{ display:inline-block; width:15px }
.catpill{ display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:600; white-space:nowrap }
.cat-prod{ background:var(--panel2); color:var(--ink-soft) } .cat-fkpp{ background:var(--amber-soft); color:var(--amber) }
.cat-rep{ background:#e7f3ee; color:var(--good) } .cat-first{ background:#f6e0dc; color:var(--danger) }
.gkbtn{ display:inline-block; padding:3px 9px; border:1px solid var(--line); border-radius:6px; font-size:11.5px; color:var(--accent); text-decoration:none; background:#fff; white-space:nowrap }
.gkbtn:hover{ border-color:var(--accent); background:var(--panel2) }
.gkbtn.amber{ color:var(--amber) } .gkbtn.amber:hover{ border-color:var(--amber); background:var(--amber-soft) }
.gkbtn+.gkbtn{ margin-left:5px }
.wrapbox{ width:300px; white-space:normal; line-height:1.35; word-break:break-word }
.wrapbox.tags{ width:190px; color:var(--ink-soft); font-size:11.5px }
.mc-sum{ font-variant-numeric:tabular-nums } .mc-sub{ font-size:10.5px; margin-top:1px; white-space:nowrap }
.mc-sh{ color:var(--ink-soft) } .mc-d{ margin-left:6px; font-weight:700 }
.mc-d.pos{ color:var(--good) } .mc-d.neg{ color:var(--danger) } .mc-d.zero{ color:var(--ink-soft); font-weight:400 }
.recover{ background:var(--amber-soft); border:1px solid #ecd8b8; border-radius:10px; padding:11px 14px; margin-bottom:14px; font-size:12.5px; line-height:1.5; color:var(--ink) }
/* product-to-product funnel */
.pcfunnel{ display:flex; flex-direction:column; gap:8px }
.pcbar{ position:relative; height:34px; border-radius:8px; background:var(--panel2); overflow:hidden; border:1px solid var(--line) }
.pcbar-fill{ position:absolute; inset:0 auto 0 0; height:100%; border-radius:8px 0 0 8px; opacity:.85 }
.pclbl{ position:relative; z-index:1; display:flex; align-items:center; height:100%; padding:0 12px; font-weight:700; font-size:12.5px; color:var(--ink); white-space:nowrap }
/* prodconv preset dashboard */
.pcdash{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px }
.pccard{ border:1px solid var(--line); border-radius:12px; background:var(--panel2); padding:12px 14px }
.pccard-name{ font-weight:800; font-size:12.5px; color:var(--ink); margin-bottom:6px; word-break:break-word }
.pccard-pct{ font-size:26px; font-weight:800; color:var(--accent); line-height:1 }
.pccard-abs{ font-size:12px; color:var(--ink-soft); margin-top:2px }
.pccard-money{ display:flex; flex-direction:column; gap:2px; margin-top:8px; font-size:12px; color:var(--ink-soft) }
.pccard-money b{ color:var(--ink) } .pccard-money b.amber{ color:var(--amber) }
.pcdash{ min-height:44px }
.pccard{ cursor:grab } .pccard:active{ cursor:grabbing } .pccard.dragging{ opacity:.4 }
.pccard.selectable{ cursor:pointer; position:relative }
.pccard.sel{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft, #dff0ea) inset }
.pccard-check{ position:absolute; top:8px; right:8px; width:18px; height:18px; border:1.5px solid var(--line); border-radius:5px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff }
.pccard.sel .pccard-check{ background:var(--accent); border-color:var(--accent) }
.pcgroup{ border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:12px; background:var(--panel) }
.pcgroup-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px }
.pcgroup-name{ font-weight:800; font-size:13px; color:var(--ink) }

/* mobile / responsive */
@media(max-width:1100px){ .srclayout{ grid-template-columns:1fr } }
@media(max-width:1100px){ .fk-report-filter,.fk-member-filters{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:700px){
  .wrap{ padding:14px 13px 60px }
  h1{ font-size:23px }
  .sub{ font-size:13px }
  .kpi{ min-width:calc(50% - 6px); flex:1 1 calc(50% - 6px) }
  .kpi .val{ font-size:18px }
  .ph{ flex-wrap:wrap; gap:4px }
  .toolbar{ gap:7px }
  .nav-in{ padding:8px 13px; gap:8px 10px }
  .nav .who{ width:100%; order:5 }
  .btn.primary{ width:100% }
  .btnrow .btn{ width:100% }
  table.rep th,table.rep td{ padding:6px 8px; font-size:12px }
  .stat .big{ font-size:20px }
  .chartrow{ flex-direction:column }
  .kpiwrap{ flex:1 1 auto; width:100% }
  .kpicol,.kpicol-wide{ width:100%; grid-template-columns:repeat(2,minmax(0,1fr)) }
  .funnel{ flex-direction:column }
  .fconv{ padding:6px 0 } .fconv-arrow{ transform:rotate(90deg) }
  .folders{ grid-template-columns:1fr }
  .fk-report-filter,.fk-member-filters{ grid-template-columns:1fr }
}