/* Munique BASE · Креаторы — стили шелла (эталон monlabs.ru: тёмный сайдбар, светлый контент, Inter/system) */
:root{
  --bg:#f5f6f8; --panel:#fff; --line:#e6e8ec; --text:#1b1f27; --muted:#6b7280; --muted2:#9aa1ad;
  --side:#161a23; --side-2:#1f2431; --side-text:#c7ccd6; --side-active:#2b3140;
  --accent:#6c5ce7; --accent-2:#8b7cf6; --ok:#16a34a; --warn:#f59e0b; --bad:#ef4444; --info:#3b82f6;
  --t3:#16a34a; --t2:#f59e0b; --t1:#8b5cf6; --t0:#9ca3af;
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{font:14px/1.45 var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
h1{font-size:22px;margin:0 0 4px;font-weight:700} h2{font-size:16px;margin:0 0 10px;font-weight:600} h3{font-size:14px;margin:0 0 6px}
.muted{color:var(--muted)} .muted2{color:var(--muted2)} .small{font-size:12px} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.num{font-variant-numeric:tabular-nums} .right{text-align:right} .nowrap{white-space:nowrap}
[hidden]{display:none!important}

/* layout */
.app{display:flex;min-height:100vh}
.sidebar{width:232px;flex:0 0 232px;background:var(--side);color:var(--side-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px 12px;position:relative}
.brand-logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:800;display:grid;place-items:center}
.brand-text{display:flex;flex-direction:column;line-height:1.15} .brand-text b{color:#fff;font-size:14px} .brand-text span{font-size:11px;color:var(--muted2)}
.sidebar-close{display:none;position:absolute;right:10px;top:14px;background:none;border:0;color:var(--side-text);font-size:22px;cursor:pointer}
.nav{display:flex;flex-direction:column;padding:6px 10px;gap:2px;overflow:auto;flex:1}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--side-text);font-size:13.5px;position:relative}
.nav a:hover{background:var(--side-2);text-decoration:none;color:#fff}
.nav a.active{background:var(--side-active);color:#fff;font-weight:600}
.nav a.active::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--accent-2)}
.nav-badge{margin-left:auto;background:var(--bad);color:#fff;font-size:11px;padding:1px 7px;border-radius:9px}
.sidebar-foot{padding:12px 14px;border-top:1px solid #262b38;display:flex;align-items:center;justify-content:space-between;gap:8px}
.user-chip{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:#fff}
.user-chip span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex:0 0 28px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 24px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.burger{display:none;background:none;border:0;font-size:20px;cursor:pointer;color:var(--text)}
.search{flex:1;max-width:460px} .search input{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);font:inherit}
.period{margin-left:auto;display:flex;align-items:center;gap:6px}
.period select,.period input{padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font:inherit}
.bell{position:relative;background:none;border:1px solid var(--line);border-radius:9px;width:36px;height:36px;cursor:pointer;display:grid;place-items:center;color:var(--muted)}
.bell b{position:absolute;top:-6px;right:-6px;background:var(--bad);color:#fff;font-size:10px;border-radius:9px;padding:1px 5px}
.content{padding:22px 24px 40px;max-width:1440px;width:100%}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-head .sub{color:var(--muted);font-size:13px}
.loading{color:var(--muted);padding:40px;text-align:center}

/* icons (CSS-масками не пользуемся — простые юникод-глифы) */
.ic{display:inline-block;width:18px;text-align:center;font-style:normal;opacity:.85}
.ic-bell::before{content:"🔔"} .ic-grid::before{content:"▦"} .ic-chart::before{content:"📈"} .ic-play::before{content:"▶"}
.ic-users::before{content:"👥"} .ic-box::before{content:"📦"} .ic-key::before{content:"🔑"} .ic-gift::before{content:"🎁"}
.ic-copy::before{content:"⧉"} .ic-upload::before{content:"⇪"} .ic-wallet::before{content:"💳"} .ic-check::before{content:"✔"} .ic-user::before{content:"👤"} .ic-cog::before{content:"⚙"}

/* cards / KPI */
.grid{display:grid;gap:14px} .grid-kpi{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))} .grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.card.pad-0{padding:0} .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.kpi{position:relative} .kpi .label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.kpi .value{font-size:24px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .delta{font-size:12px;margin-top:2px} .delta.up{color:var(--ok)} .delta.down{color:var(--bad)}
.kpi .conv{position:absolute;right:-9px;top:50%;transform:translateY(-50%);background:var(--bg);border:1px solid var(--line);border-radius:12px;font-size:11px;padding:2px 7px;color:var(--muted)}
.kpi-sub{font-size:11px;color:var(--muted2);margin-top:6px}

/* trust / status badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap;border:1px solid transparent}
.badge-t3{background:#ecfdf3;color:#15803d;border-color:#bbf7d0}   /* точно */
.badge-t2{background:#fffbeb;color:#b45309;border-color:#fde68a}   /* проверить */
.badge-t1{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe}   /* оценка */
.badge-t0{background:#f3f4f6;color:#4b5563;border-color:#e5e7eb}   /* без владельца */
.badge-ok{background:#ecfdf3;color:#15803d} .badge-warn{background:#fffbeb;color:#b45309} .badge-bad{background:#fef2f2;color:#b91c1c}
.badge-info{background:#eff6ff;color:#1d4ed8} .badge-muted{background:#f3f4f6;color:#6b7280}
.badge-ig{background:#fdf2f8;color:#be185d} .badge-tiktok{background:#111827;color:#fff} .badge-yt{background:#fef2f2;color:#dc2626} .badge-vk{background:#eff6ff;color:#1d4ed8}
.src{font-size:11px;color:var(--muted2);display:inline-flex;gap:4px;align-items:center}   /* бейдж «источник · дата · лаг» */
.src::before{content:"●";font-size:8px} .src.stale{color:var(--warn)} .src.fail{color:var(--bad)}

/* tables */
.table-wrap{overflow:auto;border-radius:var(--radius)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;background:var(--panel)}
.tbl th,.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tbl th{font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:600;background:#fafbfc;position:sticky;top:0;white-space:nowrap}
.tbl th.sortable{cursor:pointer;user-select:none} .tbl th.sortable::after{content:" ↕";opacity:.4}
.tbl th.sorted-asc::after{content:" ↑";opacity:1} .tbl th.sorted-desc::after{content:" ↓";opacity:1}
.tbl tr:hover td{background:#fafbff} .tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .row-link{cursor:pointer} .empty{padding:32px;text-align:center;color:var(--muted)}
.cell-person{display:flex;align-items:center;gap:8px} .cell-person .avatar{width:24px;height:24px;font-size:10px}

/* forms / buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:9px;border:1px solid var(--line);background:#fff;font:inherit;font-weight:600;cursor:pointer;color:var(--text)}
.btn:hover{background:#f9fafb} .btn:disabled{opacity:.5;cursor:default}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn-primary:hover{background:#5b4bd6}
.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff} .btn-ghost{background:transparent;border-color:transparent;color:inherit}
.btn-sm{padding:5px 10px;font-size:12.5px} .btn-block{width:100%;justify-content:center}
.btn-copy{font-family:ui-monospace,Menlo,monospace;font-weight:500}
label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:10px}
label input,label select,label textarea{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font:inherit;color:var(--text);background:#fff}
textarea{min-height:80px;resize:vertical}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters select,.filters input{padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font:inherit}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow:auto}
.tabs a,.tabs button{padding:8px 12px;border:0;background:none;font:inherit;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.tabs .active{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
.chip{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:12px}

/* modal / toast */
.modal-root{position:fixed;inset:0;background:rgba(17,24,39,.45);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:#fff;border-radius:14px;width:min(640px,100%);max-height:90vh;overflow:auto;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.toast-root{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{background:#111827;color:#fff;padding:10px 14px;border-radius:10px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.2);animation:fade .2s}
.toast.bad{background:var(--bad)} .toast.ok{background:var(--ok)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* charts */
.chart{width:100%;height:220px;display:block} .chart-legend{display:flex;gap:14px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.sparkline{width:90px;height:24px;vertical-align:middle}
.reconcile{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--line)} /* полоса сверки T3/T2/T1/T0 */
.reconcile i{display:block;height:100%} .reconcile .t3{background:var(--t3)} .reconcile .t2{background:var(--t2)} .reconcile .t1{background:var(--t1)} .reconcile .t0{background:var(--t0)}

/* placeholders */
.wip{padding:48px 24px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius);background:#fff}
.wip h2{color:var(--text)} .wip .stage{display:inline-block;margin-top:8px}

/* login: flex + margin:auto — центр по обеим осям, на низком вьюпорте карточка не режется сверху (grid place-items так не умеет) */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;height:auto;padding:16px;overflow:auto;background:var(--side)}
.login-card{margin:auto;background:#fff;border-radius:16px;padding:32px 28px;width:min(380px,100%);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-card form{margin:0} .login-card .btn-block{margin-top:4px}
.login-logo{font-size:22px;font-weight:800} .login-logo span{color:var(--accent)} .login-sub{color:var(--muted);margin-bottom:22px;font-size:13px}
.login-error{background:#fef2f2;color:#b91c1c;padding:8px 10px;border-radius:9px;margin-bottom:12px;font-size:13px}
@media (max-width:480px){ .login-card{padding:24px 18px;border-radius:12px} }

/* адаптив: «Мой кабинет» и всё остальное на телефоне */
@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:40;transform:translateX(-100%);transition:transform .2s;width:260px}
  .sidebar.open{transform:none} .sidebar-close{display:block}
  .burger{display:block} .topbar{padding:10px 14px} .search{display:none} .content{padding:14px}
  .period-custom{display:none!important} .grid-kpi{grid-template-columns:repeat(2,1fr)}
  .kpi .value{font-size:20px} .kpi .conv{display:none}
  .page-head{flex-direction:column;align-items:flex-start;gap:8px}
  .tbl th,.tbl td{padding:8px 8px} .hide-m{display:none!important}
  .me-codes .code-row{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
  .btn-copy{width:100%;justify-content:center}
}
@media (max-width:480px){ .grid-kpi{grid-template-columns:1fr 1fr} .content{padding:10px} .grid-2,.grid-3{grid-template-columns:1fr} }

/* ===================== экраны этапа 1 (screens.js / charts.js) ===================== */
:root{--ink:var(--text);--mut:var(--muted);--line2:#eef0f3}
.pw-wrap{position:relative;display:block} .pw-wrap input{padding-right:40px} .pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;font-size:15px;opacity:.6;margin-top:2px}
.chips-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{color:var(--text);text-decoration:none} a.chip:hover{text-decoration:none;border-color:#cfd4dc}
.chip.active{background:var(--side);color:#fff;border-color:var(--side)} .chip b{font-weight:600;opacity:.75;margin-left:2px} .chip.active b{opacity:.85}
.chip-kind{background:#f5f3ff;border-color:#ddd6fe;color:#6d28d9;font-size:11px} .chip-muted{color:var(--muted)}
.flabel{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);margin:0 2px 0 6px}
.filters .small{margin-left:4px}
.sel-sm{padding:4px 6px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:12.5px;background:#fff}
label.chk{display:flex;align-items:center;gap:8px;margin-top:22px;color:var(--text)} label.chk input{width:auto;margin:0}
.form-error{background:#fef2f2;color:#b91c1c;padding:8px 10px;border-radius:9px;font-size:13px;margin-top:6px} .form-error.is-info{background:#eff6ff;color:#1d4ed8}
.modal.modal-wide{width:min(960px,100%)}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px}
.meta-line{display:inline-flex;gap:8px;align-items:center;margin-left:6px}
.delta-chip{display:inline-block;font-size:11px;font-weight:600;padding:1px 6px;border-radius:999px;background:#f3f4f6;color:var(--muted);vertical-align:middle}
.delta-chip.up{background:#ecfdf3;color:#15803d} .delta-chip.down{background:#fef2f2;color:#b91c1c}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;vertical-align:1px;background:var(--muted2)} .dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)}
.details{border-top:1px solid var(--line);padding:8px 16px 10px} .details summary{cursor:pointer;color:var(--muted);font-size:12.5px;user-select:none} .details.inline{border:0;padding:0}
.pre{font:12px/1.4 ui-monospace,Menlo,monospace;background:#f8f9fb;border:1px solid var(--line);border-radius:8px;padding:8px;max-height:320px;overflow:auto;white-space:pre-wrap;margin:6px 0 0}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;font-size:13px;margin:8px 0} .kv span{color:var(--muted)} .kv b{font-weight:500}
.cb-tip{position:fixed;z-index:70;background:#111827;color:#fff;font-size:12px;padding:5px 8px;border-radius:7px;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.thumb,.thumb-sm,.thumb-lg{background:#eef0f3 center/cover no-repeat;border-radius:8px;flex:0 0 auto}
.thumb-sm{width:36px;height:48px} .thumb-lg{width:120px;height:160px;border-radius:10px}
.avatar-lg{width:44px;height:44px;font-size:16px;flex:0 0 44px}

/* Команда: карточки людей (k_766/k_700) */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin-top:16px}
.person-card{display:block;color:inherit;padding:14px 16px} .person-card:hover{text-decoration:none;border-color:#cfd4dc;box-shadow:0 4px 14px rgba(16,24,40,.08)}
.pc-head{display:flex;align-items:center;gap:10px;margin-bottom:8px} .pc-head .avatar{width:34px;height:34px;flex:0 0 34px;font-size:12px}
.pc-name b{font-size:14px} .pc-name .chip{margin-left:4px;vertical-align:1px}
.mrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px solid var(--line2);font-size:13px} .mrow:last-child{border-bottom:0}
.mlabel{color:var(--muted)} .mlabel small{color:var(--muted2);font-size:11px;margin-left:4px} .mrow b{font-weight:600}

/* Публикация (модалка) */
.pub-detail{display:flex;gap:14px} .pub-meta{flex:1;min-width:0;font-size:13px;display:flex;flex-direction:column;gap:6px}
.pub-nums b{font-size:16px} .pub-badges{display:flex;gap:6px;flex-wrap:wrap}
.caption{white-space:pre-wrap;background:#f8f9fb;border-radius:8px;padding:8px 10px;font-size:12.5px;max-height:120px;overflow:auto;color:var(--muted)}
.review-box{margin-top:12px;border-top:1px solid var(--line);padding-top:10px} .review-box label.chk{margin-top:26px}

/* Соцсети (k_322) */
.kpi-tint .kpi:nth-child(1){background:linear-gradient(180deg,#eef2ff,#fff)} .kpi-tint .kpi:nth-child(2){background:linear-gradient(180deg,#ecfdf3,#fff)}
.kpi-tint .kpi:nth-child(3){background:linear-gradient(180deg,#f5f3ff,#fff)} .kpi-tint .kpi:nth-child(4){background:linear-gradient(180deg,#fffbeb,#fff)}
.tabs.tabs-pill{border:1px solid var(--line);border-radius:999px;padding:3px;margin:0;background:#fff;gap:2px}
.tabs-pill a{border:0;border-radius:999px;padding:5px 12px;font-size:12.5px} .tabs-pill a.active{background:var(--side);color:#fff} .tabs-pill a:hover{text-decoration:none}
.plat-card{padding:0;overflow:hidden} .plat-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#f8f9fb;border-bottom:1px solid var(--line);margin-bottom:10px}
.plat-ig .plat-head{background:#fdf2f8} .plat-tiktok .plat-head{background:#f3f4f6} .plat-yt .plat-head{background:#fef2f2} .plat-vk .plat-head{background:#eff6ff}
.plat-card>div:not(.plat-head){padding:0 14px} .plat-card>div:last-child{padding-bottom:12px}
.plat-views{display:flex;align-items:center;gap:8px;margin:2px 0 4px} .plat-views b{font-size:22px;font-variant-numeric:tabular-nums}
.plat-spark .sparkline{width:100%;height:44px} .top-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 0} .top-row a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
.donut-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.feed{display:flex;flex-direction:column} .feed-day{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);padding:14px 16px 4px}
.feed-row{display:grid;grid-template-columns:96px 36px 1fr 100px 80px 70px;align-items:center;gap:12px;padding:8px 16px;border-top:1px solid var(--line2);cursor:pointer} .feed-row:hover{background:#fafbff}
.feed-title{font-weight:500;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .feed-main{min-width:0}
.feed-views{text-align:right;font-weight:600} .feed-delta{text-align:right}

/* Товары: дерево */
.tree{display:flex;flex-direction:column;gap:10px} .tree-node summary{list-style:none} .tree-node summary::-webkit-details-marker{display:none}
.tree-head{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer} .tree-head:hover{background:#fafbff}
.tree-head::before{content:"▸";color:var(--muted2);width:10px} .tree-node[open] .tree-head::before{content:"▾"}
.tree-title{flex:1;min-width:0} .tree-stats{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* Импорт */
.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 12px} .map-grid label{margin:0} .map-grid select{padding:6px 8px}
.imp-summary{background:#f8f9fb;border:1px solid var(--line);border-radius:10px;padding:12px;margin:10px 0}

/* Управление */
.budget{height:8px;background:var(--line2);border-radius:6px;overflow:hidden;margin-top:10px} .budget-fill{height:100%;background:var(--ok)} .budget-fill.warn{background:var(--warn)} .budget-fill.bad{background:var(--bad)}

/* Мой кабинет (мобильный) */
.me{max-width:720px} .me-head{display:flex;align-items:center;gap:12px;margin-bottom:14px} .me-head h1{font-size:20px}
.me-codes{display:flex;flex-direction:column;gap:8px} .code-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px} .code-row.dim{opacity:.6}
.code-val{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:2px} .code-btns{display:flex;gap:6px;flex:0 0 auto}
.tpl-box{margin-top:12px} .tpl{background:#f8f9fb;border-radius:8px;padding:8px 10px;font-size:12.5px;margin-top:4px}
.payout-total{font-size:28px;font-weight:700;margin:2px 0 6px}
.me-pubs{display:flex;flex-direction:column} .me-pub{display:flex;align-items:center;gap:10px;padding:9px 16px;border-top:1px solid var(--line2);cursor:pointer} .me-pub:hover{background:#fafbff}

@media (max-width:900px){
  .team-grid{grid-template-columns:1fr} .pub-detail{flex-direction:column} .thumb-lg{width:100%;height:180px}
  .feed-row{grid-template-columns:36px 1fr 70px;gap:8px} .feed-plat,.feed-delta{display:none}
  .code-row{flex-direction:column;align-items:stretch} .code-btns{flex:1 1 auto;width:100%} .code-btns .btn{flex:1;justify-content:center}
  .tree-head{flex-wrap:wrap} .tree-stats{justify-content:flex-start}
  .modal{padding:14px}
}

/* таблицы реестров: код и действия не переносить, товару — место */
.tbl td .btn-copy{white-space:nowrap} .tbl td.nowrap,.tbl th.nowrap{white-space:nowrap}
.tbl td.col-code{white-space:nowrap} .tbl td.col-wide{min-width:200px}
@media (max-width:1500px){ .hide-l{display:none!important} }

/* ===================== экраны этапа 2 (screens2.js): Дашборд k_452, Аналитика k_380, Качество, Внимание, Импорт ===================== */
.headline{background:var(--side);color:#fff;border-color:var(--side);margin-bottom:14px}
.headline .hl-label{font-size:13px;color:var(--side-text);display:flex;gap:8px;align-items:center;flex-wrap:wrap} .headline .src{color:var(--muted2)}
.headline .hl-value{font-size:34px;font-weight:800;display:flex;align-items:center;gap:10px;margin:4px 0;font-variant-numeric:tabular-nums} .headline .hl-text{font-size:13px;color:var(--side-text)}
.funnel{display:flex;align-items:stretch;margin-bottom:14px}
.fstep{flex:1 1 0;min-width:0;padding:12px} .fstep.hl{border-color:var(--accent);box-shadow:0 0 0 2px rgba(108,92,231,.14)} .fstep.empty .value{color:var(--muted2)}
.fstep .label{display:block} .fstep .label>span:first-child{display:block} .src-c{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px}
.fstep .value{font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fstep .value.sm{font-size:16px} .kpi-line{display:flex;gap:6px;align-items:center;min-height:18px;margin-top:2px;flex-wrap:wrap}
.kpi-spark{margin-top:8px} .spark-big{width:100%;height:42px;display:block}
.fconv,.fgap{flex:0 0 66px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 3px;font-size:10.5px;color:var(--muted);line-height:1.2}
.fconv b{font-size:13px;color:var(--text)} .fconv .delta-chip{margin-top:3px;font-size:10px} .fgap::before{content:"→";color:var(--muted2);font-size:16px}
@media (min-width:1500px){ .fconv,.fgap{flex-basis:86px;font-size:11px} .fstep{padding:14px} .fstep .value{font-size:22px} }
.kpi-conv-m{display:none}
@media (max-width:1100px){ .funnel{flex-wrap:wrap;gap:10px} .fstep{flex:1 1 calc(33.3% - 7px)} .fconv,.fgap{display:none}
  .kpi-conv-m{display:block;font-size:11px;color:var(--muted);margin-top:6px;border-top:1px dashed var(--line);padding-top:6px} }
@media (max-width:700px){ .fstep{flex:1 1 calc(50% - 5px)} }
.sec{margin:18px 0 10px}
.mini-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.mini{background:#f5f4ff;border:1px solid #e6e3fb;border-radius:10px;padding:10px 12px;font-size:12px;color:var(--muted)} .mini b{display:inline-block;font-size:18px;color:var(--text);margin:2px 6px 0 0;font-variant-numeric:tabular-nums}
.hbar{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:13px}
.hbar i{display:flex;align-items:center;height:28px;border-radius:7px;font-style:normal;padding:0 10px;color:var(--text);min-width:0;overflow:hidden;white-space:nowrap}
.hbar b{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap} .hbar small{color:var(--muted);width:34px;text-align:right}
.hbar-note{margin:2px 0 -2px 2px}
.ozon-row{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:13px}
.sharebar{height:8px;background:var(--line2);border-radius:5px;overflow:hidden;min-width:60px;flex:1} .sharebar i{display:block;height:100%;background:var(--accent)}
.rec{margin:4px 0} .rec-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;margin-bottom:6px;flex-wrap:wrap}
.reconcile{height:12px} .rec .chart-legend{margin-top:6px}
.fresh-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px} .fresh-row .chip{display:inline-flex;align-items:center;gap:6px}
.callout{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:8px 12px;font-size:13px} .callout.ok{background:#ecfdf3;border-color:#bbf7d0}
.tsplit{display:flex;height:6px;border-radius:4px;overflow:hidden;background:var(--line2);min-width:50px} .tsplit i{display:block;height:100%}
.trow-organic td{background:#fbfaf3;color:var(--muted)} .trow-t0 td{color:var(--muted)}
/* Требует внимания */
.att-sec{margin-bottom:14px} .att-head{display:flex;align-items:center;gap:8px;padding:12px 16px 8px} .att-head h2{margin:0}
.att-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line2)} .att-main{flex:1;min-width:0} .att-title{font-weight:600;font-size:13.5px}
.att-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .att-item.done{opacity:.45}
/* Качество данных */
.q-cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .q-card .value{font-size:18px}
.progress{height:8px;background:var(--line2);border-radius:5px;overflow:hidden;margin:6px 0} .progress i{display:block;height:100%;background:var(--ok)} .progress i.warn{background:var(--warn)} .progress i.bad{background:var(--bad)}
/* Товары: воронка nm, остатки по размерам */
.sizes{display:flex;gap:8px;flex-wrap:wrap} .size{border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:13px;background:#fff} .size b{margin-left:5px;font-variant-numeric:tabular-nums}
.size.zero{background:#f3f4f6;color:var(--muted)} .size.zero-active{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.nm-cmp td:first-child{color:var(--muted)}
@media (max-width:900px){ .att-item{flex-direction:column;align-items:stretch} .att-actions{justify-content:flex-start} .headline .hl-value{font-size:28px} .fstep .value{font-size:19px} }

/* ===================== экраны этапа 3 (screens3.js): Команда k_766/k_700, Выплаты, Бартеры, Перемонтаж, Фрод ===================== */
.warn-text{color:#b45309} .num.neg{color:var(--bad)} .num.pos{color:var(--ok)}
.info-box{background:#f5f4ff;border:1px solid #e6e3fb;border-radius:10px;padding:8px 12px;font-size:13px;color:var(--muted)}
/* Команда: пояснение «два CPS» */
.two-cps{display:grid;grid-template-columns:auto 1fr 1fr;gap:6px 18px;align-items:start;margin-top:12px;padding:10px 14px;background:#f8f9fb;border:1px solid var(--line);border-radius:10px;font-size:13px}
.two-cps-title{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);padding-top:2px;white-space:nowrap}
.two-cps-row b{font-weight:600;display:block;margin-bottom:2px}
/* Выплаты: карточка строки, разложение формулы */
.pay-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pay-total{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;margin-bottom:4px}
.formula{display:flex;flex-direction:column;font-size:13px}
.frow{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line2)} .frow span{color:var(--muted)} .frow b{font-weight:600;white-space:nowrap}
.frow.total{border-bottom:0;border-top:2px solid var(--line);margin-top:4px;padding-top:8px} .frow.total span{color:var(--text);font-weight:600} .frow.total b{font-size:16px}
.tbl tr.row-paid td{background:#f9fafb;color:var(--muted)} .tbl td.sel,.tbl th.sel{width:28px;padding-right:0}
.tbl td.sel input{width:15px;height:15px;margin:0;vertical-align:middle}
/* Бартеры: канбан статусов (media.html: колонки воронки) */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:10px;overflow-x:auto;padding-bottom:8px;align-items:start}
.kcol{background:#f3f4f6;border-radius:12px;padding:8px;min-height:120px} .kcol-dim{opacity:.75}
.kcol-head{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.kcol-head b{background:#fff;border-radius:999px;padding:0 8px;font-variant-numeric:tabular-nums} .kcol-empty{color:var(--muted2);text-align:center;padding:12px 0;font-size:12px}
.kcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:pointer;box-shadow:var(--shadow)}
.kcard:hover{border-color:#cfd4dc;box-shadow:0 4px 14px rgba(16,24,40,.08)} .kcard.overdue{border-color:#fecaca;background:#fffafa}
.kcard .nm{display:block;font-size:13.5px} .kcard-foot{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:12px}
.timeline{list-style:none;margin:0;padding:0;font-size:13px} .timeline li{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid var(--line2)} .timeline li:last-child{border-bottom:0}
/* Человек: вкладки этапа 3 */
.tabs .badge{margin-left:4px}
@media (max-width:900px){
  .two-cps{grid-template-columns:1fr} .pay-total{font-size:24px}
  .kanban{grid-auto-columns:minmax(240px,80vw)}
}

/* ===================== экраны этапа 4 (screens4.js): Требует внимания (полный), колокольчик/алерты, Крючки, Грейдборд, Telegram, AI-сводка ===================== */
.ic-hook::before{content:"🎣"} .ic-trophy::before{content:"🏆"}
/* колокольчик: выпадашка последних алертов */
.bell-wrap{position:relative}
.bell-menu{position:absolute;right:0;top:44px;width:min(420px,calc(100vw - 28px));background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(16,24,40,.18);z-index:30;overflow:hidden}
.bell-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px}
.bell-list{max-height:min(60vh,480px);overflow:auto}
.al-row{display:flex;gap:10px;align-items:flex-start;padding:9px 14px;border-bottom:1px solid var(--line2)} .al-row:last-child{border-bottom:0}
.al-row.done{opacity:.4} .al-main{flex:1;min-width:0;font-size:13px} .al-main b{font-size:12.5px} .al-msg{color:var(--text);margin-top:1px;word-break:break-word}
.al-row.sev-error .al-main b{color:#b91c1c} .al-row.sev-warn .al-main b{color:#b45309}
.al-ack{flex:0 0 auto;padding:3px 8px}
.bell-foot{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-top:1px solid var(--line);background:#fafbfc;font-size:13px}
/* Требует внимания: приоритет полосой слева */
.att-item{border-left:3px solid transparent} .att-item.pri-1{border-left-color:var(--bad)} .att-item.pri-2{border-left-color:var(--warn)} .att-item.pri-3{border-left-color:var(--info)}
.att-pri{margin-right:4px;vertical-align:1px} .att-sec-1 .att-head h2{color:#b91c1c} .att-ack-all{margin-left:auto}
.att-item.done{opacity:.45}
/* Крючки: залетаемость с интервалом Wilson */
.hook-text{font-weight:500;font-size:13.5px;white-space:normal;word-break:break-word} .hook-meta{margin-top:3px}
.rate{min-width:150px} .rate b{font-size:15px;color:#15803d}
.rate-bar{position:relative;height:6px;border-radius:3px;background:var(--line2);margin-top:4px}
.rate-bar i{position:absolute;top:0;bottom:0;background:var(--ok);opacity:.35;border-radius:3px} .rate-bar b{position:absolute;top:-2px;width:2px;height:10px;background:#15803d;margin-left:-1px;border-radius:1px}
/* Грейдборд */
.gb-rank{display:flex;align-items:center;gap:6px} .gb-rank b{font-size:16px;font-variant-numeric:tabular-nums;min-width:22px} .gb-rank b.gb-top{color:var(--accent)}
.badge-emoji{font-size:13px;padding:1px 6px} .gb-share{display:flex;align-items:center;gap:8px;min-width:120px}
.tbl tr.row-me td{background:#f5f4ff}
/* Telegram / AI-сводка / привязка в кабинете */
.pre.ai-text{max-height:none;font:13px/1.5 var(--font);background:#f8f9fb;margin-top:8px}
.tg-box{margin-top:14px} .tg-steps{display:flex;flex-direction:column;gap:6px;font-size:13px}
.tg-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#f8f9fb;border:1px dashed var(--line);border-radius:10px;padding:10px 12px;margin:2px 0} .tg-code .mono{font-size:18px;font-weight:700;letter-spacing:.04em}
@media (max-width:900px){
  .bell-menu{position:fixed;left:8px;right:8px;top:56px;width:auto}
  .att-item{border-left-width:4px} .att-ack-all{margin-left:0}
  .tg-code{flex-direction:column;align-items:stretch} .tg-code .btn{justify-content:center}
}