/* МП Контроль — кабинет */
@font-face { font-family: Manrope; src: url("/mp/manrope.woff") format("woff"); font-weight: 200 800; font-display: swap; }
:root { --bg: #0d1017; --bg2: #121620; --card: #161b26; --card2: #1b2130; --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .14); --text: #e8ecf4; --muted: #95a0b4; --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444; }
* { box-sizing: border-box; } body { margin: 0; font-family: Manrope, system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); } .err { color: var(--bad); margin: 0; min-height: 1em; }
.mp-boot { min-height: 100vh; display: grid; place-items: center; opacity: .7; } .mp-boot img { max-height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; } .logo i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--acc); color: #fff; } .logo b span { color: var(--acc); filter: brightness(1.4); }
.brand-logo { max-height: 40px; max-width: 180px; object-fit: contain; }
.mp-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; } .mp-logo i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--acc); color: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--acc); background: var(--acc); color: #fff; font-weight: 700; cursor: pointer; white-space: nowrap; transition: filter .2s; }
.btn:hover { filter: brightness(1.12); } .btn:disabled { opacity: .6; cursor: wait; } .btn-ghost { background: transparent; border-color: var(--line2); color: var(--text); } .btn-ghost:hover { border-color: var(--acc); }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; } .btn-lg { height: 50px; font-size: 16px; }
.ib { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: none; cursor: pointer; color: var(--muted); } .ib:hover { color: #fff; border-color: var(--line2); }
input:not([type=checkbox]):not([type=color]):not([type=file]), select, textarea { width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--bg2); outline: none; }
textarea { height: auto; padding: 10px 12px; resize: vertical; } input:focus, select:focus, textarea:focus { border-color: var(--acc); } input[type=checkbox] { accent-color: var(--acc); width: 16px; height: 16px; }
input.mini { max-width: 320px; margin-bottom: 12px; } label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: #c9d1e0; } label.chk { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; } label.chk a { color: var(--acc); }
.stack { display: grid; gap: 12px; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .row-btn { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.b { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .b-ok { background: rgba(34, 197, 94, .14); color: #86efac; } .b-warn { background: rgba(245, 158, 11, .14); color: #fcd34d; }
.b-bad { background: rgba(239, 68, 68, .15); color: #fca5a5; } .b-info { background: rgba(91, 140, 255, .15); color: #bcd0ff; } .b-muted { background: rgba(255, 255, 255, .07); color: var(--muted); }
.hint { padding: 12px 14px; border-radius: 12px; background: rgba(47, 107, 255, .1); border: 1px solid rgba(91, 140, 255, .3); font-size: 13.5px; color: #d5e0ff; margin: 0; }
/* вход */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-box { width: min(440px, 100% - 40px); margin: auto; padding: 40px 0; } .auth-logo { display: inline-block; margin-bottom: 30px; } .auth-box h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -.02em; } .auth-box form { margin-top: 22px; }
.auth-alt { margin-top: 18px; color: var(--muted); } .auth-alt a { color: var(--acc); font-weight: 700; filter: brightness(1.3); }
.auth-side { background: radial-gradient(600px 400px at 30% 30%, color-mix(in srgb, var(--acc) 45%, transparent), transparent 65%), #0a0d13; border-left: 1px solid var(--line); display: grid; align-content: center; padding: 60px; }
.auth-side h2 { font-size: 34px; margin: 0 0 20px; } .auth-side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; font-size: 16px; } .auth-side li { display: flex; gap: 10px; align-items: center; } .auth-side svg { color: var(--ok); }
/* оболочка */
.app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; background: #0a0d13; border-right: 1px solid var(--line); overflow-y: auto; }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 14px; } .side nav { display: grid; gap: 2px; }
.side .grp { margin: 14px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5f6a7e; }
.side nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: #b5bfd1; font-weight: 600; } .side nav a:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.side nav a.on { background: color-mix(in srgb, var(--acc) 18%, transparent); color: #fff; } .side nav a.on svg { color: var(--acc); filter: brightness(1.4); }
.side nav a em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--bad); color: #fff; }
.side-plan { margin-top: auto; padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 2px; } .side-plan small { color: var(--muted); font-size: 11.5px; }
.side-me { position: relative; padding: 12px 44px 12px 12px; border-radius: 12px; border: 1px solid var(--line); display: grid; } .side-me small { color: var(--muted); font-size: 12px; } .side-me .ib { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.main { min-width: 0; } .top { display: flex; align-items: center; gap: 14px; padding: 18px 28px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; background: rgba(13, 16, 23, .9); backdrop-filter: blur(10px); }
.top h1 { font-size: 22px; margin: 0; letter-spacing: -.01em; } .top-a { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .content { padding: 24px 28px 60px; display: grid; gap: 18px; align-content: start; }
.as-bar { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px; background: color-mix(in srgb, var(--acc) 30%, #0d1017); font-weight: 700; font-size: 13.5px; }
.only-m { display: none; }
/* карточки */
.card { padding: 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); min-width: 0; } .card-h { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 14px; } .card-h a { color: var(--acc); filter: brightness(1.3); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .kpi { display: grid; gap: 2px; padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); transition: border-color .2s; } a.kpi:hover { border-color: var(--acc); }
.kpi small { color: var(--muted); } .kpi b { font-size: 30px; letter-spacing: -.02em; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; } .cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.score-row { display: flex; gap: 20px; align-items: center; } .grow { flex: 1; min-width: 0; }
.gauge { --c: var(--ok); width: 140px; height: 140px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--v) * 1%), rgba(255, 255, 255, .07) 0); }
.gauge.warn { --c: var(--warn); } .gauge.bad { --c: var(--bad); } .gauge > div { width: 108px; height: 108px; border-radius: 50%; background: var(--card); display: grid; place-content: center; text-align: center; } .gauge b { font-size: 28px; } .gauge small { color: var(--muted); font-size: 11.5px; }
.chart { width: 100%; height: auto; } .chart .gl { stroke: rgba(255, 255, 255, .06); } .chart .gt { fill: #5f6a7e; font-size: 10px; }
.risk-list { display: grid; gap: 4px; } .risk-list a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; } .risk-list a:hover { background: rgba(255, 255, 255, .04); } .risk-list span:not(.b) { flex: 1; } .risk-list b { font-size: 16px; }
.ok-msg { display: flex; align-items: center; gap: 8px; color: #86efac; margin: 0; }
.mp-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); } .mp-line > :first-child { flex: 1; } .mp-line:last-child { border-bottom: 0; }
.feed { display: grid; } .feed p { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; } .feed p:last-child { border-bottom: 0; } .feed small { color: var(--muted); font-size: 12px; }
/* таблицы */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .filters input:not([type=checkbox]) { max-width: 380px; } .filters select { width: auto; min-width: 160px; }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; border: 1px solid var(--line2); } .seg a { padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--muted); } .seg a.on { background: var(--acc); color: #fff; }
.bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); }
.bulk select { width: auto; max-width: 320px; height: 34px; } .bulk[hidden] { display: none; }
.tbl-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); background: var(--card); } .card .tbl-wrap { border: 0; border-radius: 0; background: none; }
.tbl { width: 100%; border-collapse: collapse; } .tbl th { text-align: left; padding: 11px 12px; font-size: 12px; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; } .tbl tr:last-child td { border-bottom: 0; } .tbl tbody tr[data-id] { cursor: pointer; } .tbl tbody tr[data-id]:hover { background: rgba(255, 255, 255, .025); }
.tbl td.tw { min-width: 220px; } .tw b, .tw span { display: block; } .tw small { color: var(--muted); font-size: 12px; } .tbl select, .tbl input[type=date] { height: 34px; min-width: 120px; }
.pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; } .pager .muted { margin-right: auto; }
.iss-g .rec, .rec { color: #bcd0ff; font-size: 13.5px; margin: 0 0 10px; }
.iss { padding: 12px 14px; border-radius: 12px; margin-bottom: 8px; border-left: 3px solid var(--muted); background: var(--card2); } .iss.bad { border-color: var(--bad); } .iss.warn { border-color: var(--warn); } .iss.info { border-color: #5b8cff; }
.iss b { display: block; } .iss p { margin: 4px 0 0; font-size: 13.5px; color: #c9d1e0; } .iss .rec { margin: 6px 0 0; }
.doc-line { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sub { font-size: 15px; margin: 18px 0 10px; }
/* модальные окна */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(4, 6, 10, .7); display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.modal-box { width: min(560px, 100%); border-radius: 18px; background: var(--card); border: 1px solid var(--line2); box-shadow: 0 40px 100px -30px #000; } .modal-box.wide { width: min(1000px, 100%); }
.modal-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); } .modal-h b { font-size: 17px; } .modal-b { padding: 20px; }
.pc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } .pc-img { width: 100%; max-height: 220px; object-fit: contain; border-radius: 12px; background: #fff; margin-bottom: 12px; }
.dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; margin: 0 0 16px; } .dl dt { color: var(--muted); font-size: 13px; } .dl dd { margin: 0; } .dl a { color: var(--acc); filter: brightness(1.3); }
.pick { max-height: 240px; overflow-y: auto; display: grid; gap: 4px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); margin-top: 8px; } .pick label[hidden] { display: none; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; padding: 12px 18px; border-radius: 12px; background: #1f2636; border: 1px solid var(--line2); box-shadow: 0 20px 50px -20px #000; transition: .25s; max-width: calc(100% - 40px); font-weight: 600; }
.toast.in { transform: translate(-50%, 0); opacity: 1; } .toast.bad { border-color: rgba(239, 68, 68, .6); }
/* онбординг */
.onb { max-width: 900px; } .onb-h h2 { margin: 0 0 6px; font-size: 24px; } .onb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.onb-card { display: grid; gap: 6px; text-align: left; padding: 22px 18px; border-radius: 16px; border: 1px solid var(--line2); background: var(--card); cursor: pointer; transition: border-color .2s, transform .2s; }
.onb-card:hover { border-color: var(--acc); transform: translateY(-3px); } .onb-card b { font-size: 17px; } .onb-card small { color: var(--muted); }
.mp-wb b { color: #d55cff; } .mp-ozon b { color: #4d8bff; } .mp-ym b { color: #ffcc00; } .mp-demo b { color: #86efac; }
.conn-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .conn p { margin: 8px 0; }
.usage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .usage div { display: grid; gap: 6px; } .bar { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .07); overflow: hidden; } .bar i { display: block; height: 100%; background: var(--acc); }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .plan { display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.plan.cur { border-color: var(--acc); } .plan .price { font-size: 26px; font-weight: 800; } .plan .price small { font-size: 13px; color: var(--muted); } .plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13px; color: #c9d1e0; } .plan li svg { color: var(--ok); vertical-align: -2px; }
.copy { display: flex; gap: 10px; align-items: center; } .copy code { flex: 1; padding: 10px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); overflow-x: auto; white-space: nowrap; }
.pre { display: flex; align-items: center; gap: 6px; } .pre span { color: var(--muted); }
.wl-prev { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); margin: 12px 0; } .wl-prev img { max-height: 36px; } .wl-prev .btn { background: var(--acc); border-color: var(--acc); }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-2, .pc-grid { grid-template-columns: 1fr; } .cards3, .plans, .onb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; } .side { position: fixed; z-index: 30; left: 0; top: 0; width: 280px; transform: translateX(-100%); transition: transform .25s; box-shadow: 20px 0 60px -20px #000; } .side.open { transform: none; }
  .only-m { display: grid; } .top { padding: 14px 16px; flex-wrap: wrap; } .top-a { width: 100%; margin-left: 0; } .content { padding: 16px 14px 50px; }
  .auth { grid-template-columns: 1fr; } .auth-side { display: none; } .row3, .usage { grid-template-columns: 1fr; } .score-row { flex-direction: column; align-items: stretch; } .gauge { margin: 0 auto; }
}
@media (max-width: 560px) { .kpis, .cards3, .plans, .onb-grid, .row2 { grid-template-columns: 1fr; } .kpi b { font-size: 24px; } .filters input:not([type=checkbox]), .filters select { max-width: none; width: 100%; } }
.as-bar.exp { background: rgba(239, 68, 68, .18); border-bottom: 1px solid rgba(239, 68, 68, .4); }
.setrow { display: grid; gap: 10px; } .info-t { color: #bcd0ff; }