/* Ops area: dashboard, tracking, reports, bulk import, integrations, API docs. All selectors are prefixed with .ops / ops-. */
.ops-dim { opacity: .55; transition: opacity .15s; pointer-events: none; }
.ops .grow { flex: 1 1 auto; }
.ops-av-api { background: linear-gradient(135deg, #7c4dff, #2f33f0); }

/* ── filter card (dashboard) ── */
.ops-filters { display: flex; flex-wrap: wrap; gap: 0; }
.ops-fcol { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ops-fcol + .ops-fcol { border-left: 1px solid var(--line-2); }
.ops-fcol:first-child { flex: 1 1 auto; }
.ops-flab { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.ops-flab svg { color: var(--primary); }

/* ── KPI cards ── */
.ops-kpi { position: relative; min-height: 132px; }
.ops-kpi .val { font-size: 28px; line-height: 1.1; }
.ops-kfoot { font-size: 11px; color: var(--muted); text-align: center; margin-top: -4px; }
.ops-eff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.ops-eff > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 10px; background: #f6f7fc; }
.ops-eff b { font-size: 22px; font-weight: 800; line-height: 1.15; }
.ops-eff span { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* tooltip */
.ops-tip { position: relative; display: inline-flex; color: var(--muted); cursor: help; vertical-align: -2px; outline: none; }
.ops-tip:hover, .ops-tip:focus { color: var(--primary); }
.ops-tip-box { display: none; position: absolute; right: -6px; top: calc(100% + 6px); z-index: 30; width: 230px; padding: 8px 10px; border-radius: 8px;
  background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; box-shadow: var(--shadow-lg); white-space: normal; text-align: left; }
.ops-tip:hover .ops-tip-box, .ops-tip:focus .ops-tip-box { display: block; }

/* mini stat row */
.ops-mini { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; transition: border-color .15s, transform .15s; }
.ops-mini:hover { border-color: #c9ccfb; transform: translateY(-1px); }
.ops-mini .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.ops-mini .l { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ops-mini .v { font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-mini .v .a { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }

/* funnel + profit */
.ops-g-funnel { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.ops-g-funnel.solo { grid-template-columns: minmax(0, 1fr); }
.ops-funnel { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: center; }
.ops-fun-big { text-align: center; padding: 10px; border-right: 1px solid var(--line-2); }
.ops-fun-big .v { font-size: 34px; font-weight: 900; color: var(--primary); letter-spacing: -.02em; }
.ops-fun-big .l { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.ops-fun-bars { display: flex; flex-direction: column; gap: 9px; }
.ops-fun-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 118px; gap: 10px; align-items: center; }
.ops-fun-row .lab { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.ops-fun-row .track { height: 22px; border-radius: 6px; background: #f0f1f7; overflow: hidden; }
.ops-fun-row .track i { display: block; height: 100%; border-radius: 6px; transition: width .4s ease; }
.ops-fun-row .num { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ops-fun-row .num b { color: var(--ink); }
.ops-profit { display: flex; flex-direction: column; gap: 10px; }
.ops-pl { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.ops-pl .r { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; font-size: 13px; }
.ops-pl .r + .r { border-top: 1px solid var(--line-2); }
.ops-pl .r span { color: var(--ink-2); }
.ops-pl .r.tot { background: #f7f8fc; font-size: 14px; }
.ops-pl .r.tot b { font-size: 17px; }

/* layout grids */
.ops-g-32 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; }
.ops-g-rep { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 14px; align-items: start; }
.ops-seg-sm button { height: 26px; padding: 0 10px; font-size: 12px; }

/* ranking lists */
.ops-rank-list { display: flex; flex-direction: column; overflow-y: auto; }
.ops-rank-row, .ops-dept { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line-2); }
.ops-rank-row:last-child, .ops-dept:last-child { border-bottom: 0; }
.ops-rank { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: #eef0f6; color: var(--ink-2); flex: none; }
.ops-rank.r1 { background: #fff1c2; color: #a16207; }
.ops-rank.r2 { background: #e8ebf3; color: #475069; }
.ops-rank.r3 { background: #fde3cf; color: #b45309; }
.ops-pctchip { min-width: 58px; text-align: center; font-size: 11.5px; font-weight: 800; padding: 3px 7px; border-radius: 7px; border: 1px solid #e1e3ec;
  background: #f1f2f7; color: #5c6383; flex: none; }

/* doughnut */
.ops-dn-wrap { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: center; }
.ops-dn { position: relative; }
.ops-dn-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ops-dn-c b { font-size: 24px; font-weight: 900; line-height: 1.1; }
.ops-dn-c span { font-size: 11px; color: var(--muted); }
.ops-leg-list { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ops-leg { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; font-size: 12.5px; }
.ops-leg:hover { background: #f6f7fc; }
.ops-leg b { min-width: 28px; text-align: right; }
.ops-leg .pc { min-width: 46px; text-align: right; font-size: 11.5px; }
.ops-total-line { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 13px; text-align: center; color: var(--ink-2); }
.ops-total-line b { color: #e5384f; font-size: 15px; }

/* ── tracking ── */
.ops-count { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; background: var(--primary-soft);
  color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.ops-count b { font-size: 14px; color: var(--ink); }
.ops-count.green { background: var(--green-soft); color: var(--green); }
.ops-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); }
.ops-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ops-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ops-legend i.g, .ops-stack i.g { background: #11a375; } .ops-legend i.b, .ops-stack i.b { background: #2f6bff; }
.ops-legend i.o, .ops-stack i.o { background: #f08c00; } .ops-legend i.r, .ops-stack i.r { background: #ef4f63; }
.ops-exp { width: 24px; height: 24px; border-radius: 6px; border: 1px solid #c9ccfb; background: #fff; color: var(--primary); font-weight: 800; font-size: 15px;
  line-height: 1; cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.ops-exp:hover { background: var(--primary-soft); }
.ops-exp.light { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); color: #fff; }
.ops-trk .ops-day { cursor: pointer; }
.ops-trk .ops-day.is-today td { background: #f4f6ff; }
.ops-trk .ops-day.is-open td { border-bottom-color: transparent; }
.ops-stack { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: #eceef5; max-width: 420px; }
.ops-stack i { display: block; height: 100%; }
.ops-msum { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 11.5px; font-weight: 600; }
.ops-msum .g { color: #0b7a55; } .ops-msum .b { color: #2f6bff; } .ops-msum .o { color: #b45f00; } .ops-msum .r { color: #e5384f; }
.ops .tbl td.ops-subcell { padding: 2px 12px 14px 0; background: #f9faff; }
.ops-inner { border: 1px solid #d6e6fd; border-radius: 10px; overflow: hidden; overflow-x: auto; background: #fff; }
/* keep the inner (light blue) table style when it lives inside a .tbl */
.ops .tbl .tbl-inner thead th { background: linear-gradient(180deg, #5b9ff9, #4b8ef3); padding: 8px 10px; font-size: 11px; letter-spacing: .06em; }
.ops .tbl .tbl-inner tbody td { padding: 8px 10px; font-size: 12.5px; background: #fff; }
.ops .tbl .tbl-inner tbody tr:last-child td { border-bottom: 0; }
.ops .tbl-inner th.c, .ops .tbl-inner td.c { text-align: center; }
.ops .tbl-inner th.r, .ops .tbl-inner td.r { text-align: right; }
.ops .tbl .tbl-inner tbody tr.ops-click { cursor: pointer; }
.ops .tbl .tbl-inner tbody tr.ops-click:hover td { background: #f1f6ff; }

/* ── reports ── */
.ops-hs { max-width: 100%; overflow-x: auto; padding-bottom: 2px; }
.ops-sort { cursor: pointer; user-select: none; }
.ops-sort svg { vertical-align: -2px; margin-left: 3px; }
.ops-sort.on { background: linear-gradient(180deg, #2529d9, #1f22c9) !important; }
.ops-sumgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ops-sumgrid > div { background: #f6f7fc; border-radius: 9px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.ops-sumgrid > div.full { grid-column: 1 / -1; }
.ops-sumgrid span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ops-sumgrid b { font-size: 17px; font-weight: 800; }

/* ── bulk import ── */
.ops-imp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ops-imp-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.ops-howto { background: linear-gradient(180deg, #f8f9ff, #fff); }
.ops-howto-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.ops-howto-grid > div { padding-left: 12px; position: relative; }
.ops-howto-grid > div::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
.ops-imp-h h3 { white-space: nowrap; }
.ops-err { margin-top: 4px; white-space: normal; line-height: 1.3; }
.ops-spin-sm { width: 14px !important; height: 14px !important; border-width: 2px !important; }
.ops-res { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.ops-res span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ops-res b { font-size: 24px; font-weight: 900; }
.ops-res.ok { background: var(--green-soft); border-color: #bfe8d7; } .ops-res.ok b { color: var(--green); }
.ops-res.bad { background: var(--red-soft); border-color: #f6c2ca; } .ops-res.bad b { color: var(--red); }

/* ── integrations ── */
.ops-int-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; }
.ops-btn-white { background: #fff; color: var(--primary); border-color: #fff; }
.ops-btn-white:hover { background: #eef0ff; }
.ops-hico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.ops-revoked td { opacity: .55; }
.ops-bad { border-color: var(--red) !important; }
.ops-subhead { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line-2); font-size: 13px; }
.ops-secret { display: flex; align-items: center; gap: 8px; background: #0d1035; color: #d9e1ff; border-radius: 10px; padding: 10px 12px; }
.ops-secret code { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; word-break: break-all; }
.ops-secret .iconbtn:hover { background: rgba(255,255,255,.12); color: #fff; }
.ops-plat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ops-plat { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.ops-plat:hover { border-color: #c9ccfb; box-shadow: var(--shadow); }
.ops-plat-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; }
.ops-plat .btn { align-self: flex-start; }

/* ── API docs ── */
.ops-docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.ops-docs-nav { position: sticky; top: 62px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px;
  display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 80px); overflow-y: auto; }
.ops-docs-navt { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); padding: 4px 8px 6px; }
.ops-docs-nav a { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 8px; color: var(--ink-2); font-size: 12.5px; font-weight: 500; text-decoration: none; }
.ops-docs-nav a:hover { background: var(--bg); color: var(--ink); }
.ops-docs-nav a.on { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.ops-docs-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ops-doc { scroll-margin-top: 62px; }
.ops-doc h2 { margin: 0 0 6px; font-size: 20px; }
.ops-doc p { margin: 8px 0; line-height: 1.55; font-size: 13px; }
.ops-doc .section-title { margin-bottom: 8px; }
.ops-m { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 18px; padding: 0 5px; border-radius: 5px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .04em; color: #fff; font-family: ui-monospace, Menlo, Consolas, monospace; flex: none; }
.ops-m.get { background: #0f9f7f; } .ops-m.post { background: #2f33f0; } .ops-m.put { background: #f08c00; } .ops-m.delete { background: #e5384f; }
.ops-m.big { height: 26px; min-width: 52px; font-size: 12px; border-radius: 7px; }
.ops-ep { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: #f6f7fc; border: 1px solid var(--line-2); }
.ops-path { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; font-weight: 700; word-break: break-all; }
.ops-ep-t { margin: 12px 0 0; font-size: 16px; }
.ops-inline { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: #f1f2f8; border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px;
  word-break: break-all; }
.ops-ex { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ops-ex > .col { min-width: 0; }
.ops-ex-l { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ops-code { border-radius: 10px; overflow: hidden; background: #0d1035; min-width: 0; }
.ops-code-h { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 12px; background: #161a4a; color: #9aa3e0; font-size: 10.5px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ops-code-h .iconbtn, .ops-secret .iconbtn { color: #c7cdfa; background: transparent; border-color: rgba(255,255,255,.18); }
.ops-code-h .iconbtn:hover { background: rgba(255,255,255,.12); color: #fff; }
.ops-code .code-block { margin: 0; border-radius: 0; max-height: 460px; }
.ops-params td { vertical-align: top !important; }
.ops-st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.ops-st-col { border: 1px solid var(--line-2); border-radius: 10px; padding: 12px; }
.ops-st-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 0; }
.ops-st-row .pill { justify-self: start; height: 22px; padding: 0 8px; font-size: 10.5px; }

/* ── responsive ── */
@media (max-width: 1100px) {
  .ops-g-funnel, .ops-g-32, .ops-g-rep { grid-template-columns: minmax(0, 1fr); }
  .ops-plat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-howto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-st-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .ops-docs { grid-template-columns: minmax(0, 1fr); }
  .ops-docs-nav { position: static; flex-direction: row; overflow-x: auto; max-height: none; padding: 6px; }
  .ops-docs-nav a { white-space: nowrap; flex: none; }
  .ops-docs-navt { display: none; }
}
@media (max-width: 720px) {
  .ops-fcol + .ops-fcol { border-left: 0; border-top: 1px solid var(--line-2); }
  .ops-fcol { width: 100%; padding: 10px 12px; }
  .ops-kpis, .ops-minis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .ops-kpi { padding: 10px 10px 8px; min-height: 0; }
  .ops-kpi .val { font-size: 22px; }
  .ops-kpi .sub { font-size: 12px; }
  .ops-kpi .lab { font-size: 10px; letter-spacing: .04em; }
  .ops-kpi .ico { width: 28px; height: 28px; }
  .ops-eff { gap: 4px; } .ops-eff b { font-size: 17px; } .ops-eff span { font-size: 9px; }
  .ops-mini { padding: 8px 10px; gap: 8px; } .ops-mini .ico { width: 28px; height: 28px; } .ops-mini .v { font-size: 16px; }
  .ops-mini .v .a { display: block; margin: 0; font-size: 11px; } .ops-mini > svg:last-child { display: none; }
  .ops-funnel { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ops-fun-big { border-right: 0; border-bottom: 1px solid var(--line-2); padding: 4px 4px 10px; }
  .ops-fun-row { grid-template-columns: 82px minmax(0, 1fr); }
  .ops-fun-row .num { grid-column: 2; margin-top: -6px; }
  .ops-dn-wrap { grid-template-columns: minmax(0, 1fr); }
  .ops-dn { max-width: 220px; margin: 0 auto; width: 100%; }
  .ops-plat-grid, .ops-howto-grid { grid-template-columns: minmax(0, 1fr); }
  .ops-st-row { grid-template-columns: 1fr; gap: 2px; }
  .ops-imp-h { flex-wrap: wrap; }
  .ops-imp-h .right { margin-left: 0; }
  .ops-tip-box { right: auto; left: -100px; }
  .ops-ex { grid-template-columns: minmax(0, 1fr); }
  .ops-doc .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .ops-doc .kv > span:nth-child(odd) { margin-top: 6px; font-size: 11.5px; }
}