/* ============================================================
SEO Jarvis — view styles (layout, screens, components)
============================================================ */
/* Индекс здоровья сайта: дуга + 4 статуса (перенесено дословно из dev-work) */
.health-body{display:flex;gap:20px;align-items:center;flex-wrap:wrap;width:100%;margin-bottom:auto}
.health-card,.a2-links,.an-vstack{display:flex;flex-direction:column}
.health-card>.card-head,.a2-links>.card-head,.an-vstack>.card-head{flex:none}
.gauge{flex:none;width:180px;display:flex;flex-direction:column;align-items:center;gap:4px}
.gauge-svg{width:180px;height:auto;display:block}
.gauge-val{transition:stroke-dashoffset 1s var(--ease-out)}
.gauge-cap{font-size:12px;font-weight:600;color:var(--muted);text-align:center;line-height:1.35}
.health-facts{flex:1;min-width:250px}
/* Сводка по запросам (кольцо + метрики + разбивка-фильтр) — перенесено дословно из dev-work */
.qstat{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px}
.qs-donut{display:flex;align-items:center;gap:16px}
.donut{position:relative;display:inline-flex;flex:none}
.dn-seg{transition:opacity .15s}
.donut:hover .dn-seg{opacity:.55}
.donut .dn-seg:hover{opacity:1}
.dn-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;pointer-events:none}
.dn-center b{font-size:26px;font-weight:700;color:var(--ink);line-height:1}
.dn-center span{font-size:11.5px;color:var(--muted)}
.qs-metrics{display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:10px 24px}
.qs-m{display:flex;flex-direction:column;gap:1px;padding-left:12px;border-left:2px solid var(--border)}
.qs-m-l{font-size:12.5px;color:var(--muted)}
.qs-m-v{display:flex;align-items:baseline;gap:8px}
.qs-m-v b{font-size:21px;font-weight:700;color:var(--ink);line-height:1.2}
.qs-m-v .delta-up,.qs-m-v .delta-down,.qs-m-v .delta-flat{font-size:12.5px;font-weight:600}
.qs-m-h{font-size:11.5px}
.qs-buckets{display:flex;flex-direction:column;gap:2px;min-width:216px}
.qs-bk{display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:9px;
padding:5px 9px;border-radius:var(--r-sm);border:1px solid transparent;background:transparent;
font:inherit;font-size:12.5px;color:var(--text);cursor:pointer;text-align:left;transition:.14s}
.qs-bk i{width:10px;height:10px;border-radius:3px;flex:none}
.qs-bk em{font-style:normal;color:var(--muted);font-size:12px;min-width:34px;text-align:right}
.qs-bk b{font-weight:600;color:var(--ink);min-width:24px;text-align:right}
.qs-bk:hover{background:var(--blue-25)}
.qs-bk.on{background:var(--blue-50);border-color:var(--blue-600);color:var(--ink)}
.qs-filter-note{margin:-8px 0 16px;font-size:13px}
.lnk{background:none;border:none;padding:0;font:inherit;color:var(--blue-600);cursor:pointer;text-decoration:underline}
@media (max-width:1200px){
.qstat{grid-template-columns:auto 1fr;gap:20px}
.qs-buckets{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
.qs-bk{flex:1;min-width:150px}
}
@media (max-width:760px){
.qstat{grid-template-columns:1fr}
.qs-donut{justify-content:center}
}
/* ---- Отчёт по позициям: TOP-100 продвижение, автоподбор, динамика ---- */
.pos-promo-bar{display:flex;align-items:center;gap:12px;margin:14px 0;flex-wrap:wrap}
.posp-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);font-size:13px;font-weight:500}
.posp-star-ic{width:28px;height:28px;border-radius:50%;background:var(--gold-bg);color:var(--gold);display:flex;align-items:center;justify-content:center}
.posp-star-ic .ic{width:14px;height:14px}
.pos-seg-row{display:flex;gap:8px;margin-bottom:14px}
.pos-seg{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--text);cursor:pointer}
.pos-seg .ic{width:14px;height:14px;color:var(--gold)}
.pos-seg.on{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.pos-seg.on .ic{color:#fff}
.pos-star{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:none;border:none;cursor:pointer;color:var(--muted)}
.pos-star:hover{background:var(--blue-50)}
.pos-star.on{color:var(--gold)}
.pos-star .ic{width:16px;height:16px}
.trend-card{margin-bottom:14px}
.trend-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:none;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.trend-ttl{display:flex;flex-direction:column;gap:2px}
.trend-more{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--blue-600);flex:none}
.trend-more .ic{width:14px;height:14px}
.trend-card .demand-chart{margin-top:16px}
.ch-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.ch-lg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.ch-lg i{width:8px;height:8px;border-radius:50%;display:inline-block}
/* ---- Модалка «Настройка автоподбора» ---- */
.ap-lead{font-size:14px;color:var(--text);margin-bottom:16px}
.ap-sec{margin-bottom:14px}
.ap-sec-t{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.ap-strats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ap-strat{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border-radius:var(--r-md);border:1.5px solid var(--border);background:var(--surface);cursor:pointer;text-align:left}
.ap-strat.on{border-color:var(--blue-600);background:var(--blue-25)}
.ap-strat-ic{width:32px;height:32px;border-radius:9px;background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center}
.ap-strat b{font-size:13px}
.ap-strat-sub{font-size:12px;color:var(--muted)}
.ap-prev{font-size:13px;color:var(--text);margin-top:4px}
.ap-prev-list{display:block;margin-top:6px;color:var(--muted);font-size:12px}
.ap-prev-list i{font-style:normal;color:var(--ink);font-weight:600;margin-right:8px}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
/* ==================== APP SHELL ==================== */
.screen-app .app{display:flex;min-height:100vh;position:relative}
.sidebar{
width:var(--sidebar-w);flex:none;position:fixed;left:0;top:0;bottom:0;z-index:60;
background:var(--surface-2);border-right:1px solid var(--border);
display:flex;flex-direction:column;padding:16px 12px;overflow:hidden;
}
.sb-glow{position:absolute;top:-104px;left:-34px;width:200px;height:200px;border-radius:50%;
background:radial-gradient(circle,rgba(26,105,240,.35),transparent 70%);filter:blur(24px);opacity:.5;pointer-events:none}
.sb-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 22px 14px;position:relative;z-index:1}
.sb-logo{display:flex}
.sb-brand-txt{font-weight:700;font-size:16.5px;color:var(--blue-700);letter-spacing:-.3px}
.logo-mark{display:block;border-radius:8px}
/* original Figma icons rendered via */
.uic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px}
.uic img{width:100%;height:100%;object-fit:contain;display:block}
.sb-nav{display:flex;flex-direction:column;gap:4px;position:relative;z-index:1}
.sb-item{
display:flex;align-items:center;gap:14px;height:40px;padding:0 14px;border-radius:var(--r-md);
font-size:15px;font-weight:400;color:var(--muted);transition:.18s var(--ease);width:100%;
}
.sb-item .ic{width:19px;height:19px;flex:none}
.sb-brand-ic{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;flex:none}
.sb-brand-ic svg{width:100%;height:100%}
.sb-item{border:1px solid transparent}
.sb-item:hover{background:var(--blue-50);color:var(--ink)}
.sb-item.active{background:var(--blue-50);color:var(--blue-600);font-weight:500;border-color:var(--blue-600)}
.sb-item.active .ic{color:var(--blue-600)}
.sb-foot{margin-top:auto;position:relative;z-index:1}
.sb-plan{margin:0 6px 14px;padding:2px 8px}
.sb-plan-head{display:flex;flex-direction:column;margin-bottom:10px;font-size:13px}
.sb-plan-head b{color:var(--ink);font-weight:600}
.sb-plan-head span{color:var(--muted)}
.sb-plan-bar{height:6px;border-radius:20px;background:#e7ebf5;overflow:hidden;margin-bottom:8px}
.sb-plan-bar span{display:block;height:100%;border-radius:20px;background:var(--gold)}
.sb-plan-until{font-size:12px;color:var(--muted)}
.sb-divider{height:1px;background:var(--border);margin:0 4px 12px}
.sb-logout{color:var(--muted)}
.sb-logout:hover{background:var(--red-bg);color:var(--red)}
/* "Есть идеи для развития сайта?" banner — dark wavy card, same blob-glow language
as .auth-brand/.rs-big elsewhere in the app. Always the first child of .sb-foot;
on the dashboard the plan widget sits right under it, on other pages the plan
widget is absent so the (bottom-anchored) block is simply shorter and the banner
settles down to roughly the plan widget's usual height. */
.sb-idea{position:relative;margin:0 2px 14px;padding:16px;border-radius:var(--r-xl);overflow:hidden;background:var(--grad-panel)}
.sb-idea-blob{position:absolute;top:-56px;right:-54px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(149,197,248,.5),transparent 70%);filter:blur(8px);pointer-events:none}
.sb-idea-blob::after{content:"";position:absolute;left:-70px;bottom:-70px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(41,182,246,.35),transparent 70%)}
.sb-idea-ic{position:relative;z-index:1;width:38px;height:38px;border-radius:11px;background:#fff;color:var(--blue-600);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.sb-idea-ic .ic{width:19px;height:19px}
.sb-idea-title{position:relative;z-index:1;color:#fff;font-size:14.5px;font-weight:700;line-height:1.32;letter-spacing:-.2px;margin-bottom:6px}
.sb-idea-text{position:relative;z-index:1;color:#cfe0f7;font-size:12px;line-height:1.4;margin-bottom:14px}
.sb-idea-btn{position:relative;z-index:1;display:block;width:100%;height:36px;border-radius:var(--r-sm);background:var(--grad-primary);color:#fff;font-size:13px;font-weight:700;transition:filter .16s}
.sb-idea-btn:hover{filter:brightness(1.08)}
.main{margin-left:var(--sidebar-w);flex:1;min-width:0;min-height:100vh;display:flex;flex-direction:column}
/* Mobile bottom tab bar (1:1 с мобильным макетом) */
.bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:65;height:76px;padding-bottom:env(safe-area-inset-bottom);
background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -6px 24px rgba(15,42,92,.08);
align-items:flex-start;justify-content:space-around;padding-top:8px}
.bn-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;font-size:11px;color:var(--muted);padding-top:6px;transition:color .16s}
.bn-item .ic{width:22px;height:22px}
.bn-item.active{color:var(--blue-600)}
.bn-fab{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin-top:-22px;border-radius:50%;flex:none;
background:var(--grad-primary);color:#fff;box-shadow:var(--sh-blue);border:4px solid var(--surface);transition:transform .16s}
.bn-fab .ic{width:24px;height:24px}
.bn-fab:active{transform:scale(.94)}
.bn-fab.active{box-shadow:0 14px 30px rgba(26,105,240,.45)}
/* ==================== TOPBAR ==================== */
.topbar{
height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:0 28px;border-bottom:1px solid var(--border);background:rgba(246,248,255,.8);
backdrop-filter:blur(10px);position:sticky;top:0;z-index:40;
}
/* back arrow: only rendered at all when a view passes topbar({back:...}). Visible
by default (e.g. Яндекс.Карты opened from a project's kebab menu — a plain link
back to that project, see yamapsView). .tb-back-toggle is the exception: a
page-specific CSS class flips it to shown/hidden instead (currently just
Поддержка on mobile, once a ticket is open — see .main.mob-chat below) */
.tb-back{display:flex;flex:none;width:36px;height:36px;border-radius:var(--r-sm);background:var(--blue-50);color:var(--blue-600);align-items:center;justify-content:center;margin-right:6px}
.tb-back .ic{width:18px;height:18px}
.tb-back:hover{background:var(--blue-100)}
.tb-back-toggle{display:none}
.tb-left{flex:1;min-width:0}
.tb-crumb{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-crumb a:hover{color:var(--blue-600)}
.tb-crumb b{color:var(--blue-600);font-weight:600}
.tb-title-row{display:flex;align-items:center;gap:10px;margin-top:6px;min-width:0}
/* shrinks to whatever room tb-right leaves it (tb-left:flex:1 + global min-width:0)
instead of a hard-coded vw guess — stays full-width when there's nothing crowding it */
.tb-title{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--blue-600);color:#fff;font-size:13px;font-weight:600;flex:none}
.tb-right{display:flex;align-items:center;gap:12px;flex:none}
.dash-tb-left{display:flex;align-items:center;gap:12px}
.paid-chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:var(--r-sm);background:var(--green-bg);color:var(--green);font-size:13px;font-weight:500;white-space:nowrap;flex:none}
.paid-chip .ic{width:15px;height:15px}
/* project header */
.proj-head{display:flex;align-items:center;gap:12px;min-width:0}
.proj-back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap;flex:none}
.proj-back .ic{width:16px;height:16px}
.proj-back:hover{color:var(--blue-600)}
.proj-domain{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:115px}
.proj-niche{background:var(--blue-50);color:var(--blue-600)}
.paid-chip.paid-neutral{background:var(--surface);border:1px solid var(--border);color:var(--muted)}
.paid-chip.paid-neutral b{color:var(--blue-600);font-weight:600}
.tb-icon-danger{width:34px;height:34px;border-radius:var(--r-sm);background:var(--grad-danger);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;transition:filter .16s}
.tb-icon-danger .ic{width:18px;height:18px}
.tb-icon-danger:hover{filter:brightness(1.08)}
/* mobile-only stand-in for .proj-tb-action — see the 820px query */
.tb-icon-more{display:none;width:34px;height:34px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--border);color:var(--text);align-items:center;justify-content:center;flex:none}
.tb-icon-more .ic{width:18px;height:18px}
.tb-icon-more:hover{border-color:var(--blue-100);color:var(--blue-600)}
.tb-cmd{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 12px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:13px;transition:.16s}
.tb-cmd:hover{border-color:var(--blue-100);color:var(--text)}
.tb-cmd .ic{width:15px;height:15px}
.tb-cmd kbd{font-family:inherit;font-size:11px;font-weight:600;background:var(--blue-25);color:var(--muted);padding:2px 6px;border-radius:5px;border:1px solid var(--border)}
/* ===== Command palette ===== */
.palette-layer{position:fixed;inset:0;z-index:320;display:flex;justify-content:center;align-items:flex-start;padding:12vh 20px 20px}
.palette-scrim{position:absolute;inset:0;background:rgba(8,16,40,.5);backdrop-filter:blur(3px);opacity:0;transition:.2s}
.palette-layer.open .palette-scrim{opacity:1}
.palette{position:relative;width:100%;max-width:600px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:hidden;transform:translateY(-14px) scale(.98);opacity:0;transition:.22s var(--ease-out)}
.palette-layer.open .palette{transform:none;opacity:1}
.pal-search{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border)}
.pal-search .ic{width:20px;height:20px;color:var(--muted);flex:none}
.pal-search input{flex:1;border:none;background:none;font-size:16px;color:var(--ink)}
.pal-search kbd{font-family:inherit;font-size:11px;font-weight:600;color:var(--muted);background:var(--blue-25);border:1px solid var(--border);padding:3px 7px;border-radius:6px}
.pal-list{max-height:min(52vh,420px);overflow-y:auto;padding:8px}
.pal-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:var(--r-md);text-align:left;transition:background .12s}
.pal-item.on{background:var(--blue-50)}
.pal-ic{width:34px;height:34px;border-radius:9px;background:var(--blue-25);color:var(--blue-600);display:flex;align-items:center;justify-content:center;flex:none}
.pal-item.on .pal-ic{background:#fff}
.pal-ic .ic{width:17px;height:17px}
.pal-title{flex:1;font-size:14px;font-weight:500;color:var(--ink)}
.pal-title mark{background:rgba(26,105,240,.2);color:inherit;border-radius:3px}
.pal-hint{font-size:12px;color:var(--muted)}
.pal-empty{padding:30px;text-align:center;color:var(--muted);font-size:14px}
.pal-foot{display:flex;gap:18px;padding:11px 18px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
.pal-foot kbd{font-family:inherit;font-weight:600;background:var(--blue-25);border:1px solid var(--border);padding:1px 6px;border-radius:5px;margin-right:2px}
@media (max-width:560px){.tb-cmd span,.tb-cmd kbd{display:none}.tb-cmd{width:38px;padding:0;justify-content:center}}
.tb-bell{position:relative;width:34px;height:34px;border-radius:var(--r-sm);background:var(--blue-50);display:flex;align-items:center;justify-content:center;color:var(--blue-600)}
.tb-bell .ic{width:18px;height:18px}
.tb-bell-dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid var(--blue-50)}
.tb-avatar{width:34px;height:34px;border-radius:var(--r-sm);background:var(--blue-50);color:var(--blue-600);font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center}
.tb-avatar:hover{background:var(--blue-100)}
.content{padding:24px 28px 40px;flex:1}
.sec-title{font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.2px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;width:100%}
.card-head>div:first-child{flex:1 1 auto;min-width:0}
.card-head .hint-btn{flex:none}
.card-head h3{font-size:18px;font-weight:600;letter-spacing:-.2px}
.card-head .muted{font-size:14px}
.card-head>.ic{color:var(--green);width:22px;height:22px}
/* project select in topbar */
.project-select,.select{position:relative;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--border);font-size:13px;font-weight:500;cursor:pointer;user-select:none;white-space:nowrap;flex:none}
.project-select .ic,.select .ic{width:15px;height:15px;color:var(--muted)}
/* recolor the folder link icon to match the selector text (ink) */
.project-select .uic img{filter:brightness(0) saturate(100%)}
.select-val{color:var(--ink)}
.select-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-md);padding:6px;z-index:50;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s var(--ease)}
.select.open .select-menu,.project-select.open .select-menu{opacity:1;visibility:visible;transform:none}
.select-opt{padding:9px 12px;border-radius:8px;font-size:13px;color:var(--text);white-space:nowrap;cursor:pointer}
.select-opt:hover{background:var(--blue-50);color:var(--blue-600)}
.select-sm{height:32px;font-size:13px}
/* region selector (project header) — dropdown-list variant of .select */
.proj-region .select-val b{color:var(--blue-600);font-weight:600}
.region-menu{min-width:220px}
.region-menu-hd{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding:4px 10px 8px}
.region-item{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:13px;color:var(--text)}
/* регион (жирным) + поддомен, если есть, отдельной строкой мельче — чтобы было
сразу понятно, где что, а не одна слитная строка через точку */
.region-item-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.region-item-txt b{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.region-item-txt em{font-style:normal;font-size:11px;color:var(--blue-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.region-menu-div{height:1px;background:var(--border-2);margin:6px 2px}
.region-menu-add{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--blue-600);text-align:left}
.region-menu-add:hover{background:var(--blue-50)}
.region-menu-add .ic{width:15px;height:15px;color:var(--blue-600)}
.region-menu-manage{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text);text-align:left}
.region-menu-manage:hover{background:var(--blue-50);color:var(--blue-600)}
.region-menu-manage .ic{width:15px;height:15px}
/* regions manage modal: list with per-row edit (subdomain/region) + delete */
.del-region-list{display:flex;flex-direction:column;gap:2px;margin-bottom:20px}
.del-region-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--text)}
.del-region-row:hover{background:var(--blue-25)}
.del-region-row .region-item-txt{flex:1}
.region-row-actions{display:flex;gap:2px;flex:none}
/* ==================== AUTH ==================== */
.screen-full{min-height:100vh}
.auth{display:grid;grid-template-columns:minmax(420px,580px) 1fr;min-height:100vh}
.auth-brand{position:relative;background:var(--grad-panel);color:#fff;overflow:hidden;padding:54px}
.ab-blob{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(149,197,248,.5),transparent 68%);filter:blur(10px)}
.ab-blob1{width:320px;height:320px;top:-135px;left:-20px}
.ab-blob2{width:400px;height:400px;bottom:-120px;right:-120px;opacity:.7}
.ab-inner{position:relative;z-index:1;max-width:440px;height:100%;display:flex;flex-direction:column}
.ab-logo{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:700;margin-bottom:auto}
.ab-title{font-size:32px;font-weight:700;line-height:1.2;margin:44px 0 14px;color:#eaf3ff;letter-spacing:-.5px}
.ab-sub{font-size:18px;color:#cfe0f7;line-height:1.4;margin-bottom:30px;max-width:360px}
.ab-list{display:flex;flex-direction:column;gap:14px;margin-bottom:auto}
.ab-list li{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);padding:14px 16px;border-radius:var(--r-md);font-size:14px;font-weight:500;color:#f2f7ff}
.ab-list .ic{width:20px;height:20px;flex:none;color:#bcd8ff}
.ab-quote{margin-top:34px}
.ab-stars{color:#ffd45e;font-size:15px;letter-spacing:2px;margin-bottom:8px}
.ab-quote p{font-size:15px;color:#dcebff;font-weight:500}
.ab-quote span{font-size:12px;color:#9fc0e6}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px;background:#fff}
.af-inner{width:100%;max-width:460px}
.af-title{font-size:32px;font-weight:700;letter-spacing:-.6px}
.af-sub{font-size:18px;color:var(--text);margin:6px 0 34px}
.af-forgot{text-align:right;margin:-6px 0 20px}
.af-forgot a{font-size:13px;font-weight:500;color:var(--blue-600)}
.auth-form .btn-primary{background:var(--grad-login)}
.af-divider{display:flex;align-items:center;gap:14px;margin:26px 0;color:var(--muted);font-size:13px}
.af-divider::before,.af-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.af-social{display:flex;gap:14px;justify-content:center}
.social-btn{width:56px;height:56px;border-radius:15px;background:var(--grad-social);border:none;display:flex;align-items:center;justify-content:center;transition:.18s var(--ease)}
.social-btn:hover{transform:translateY(-2px)}
.social-btn img{width:26px;height:26px;object-fit:contain}
.social-btn .si-white{filter:brightness(0) invert(1)}
.sb-ya{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--blue-600);font:800 19px/1 Arial,sans-serif;display:flex;align-items:center;justify-content:center}
.af-switch{text-align:center;margin:26px 0 12px;font-size:15px;color:var(--text)}
.af-switch a{color:var(--blue-600);font-weight:500}
.af-terms{text-align:center;font-size:12px;color:var(--muted);line-height:1.5;max-width:380px;margin:0 auto}
.af-terms a{color:var(--blue-600);text-decoration:underline}
.af-error{background:var(--red-bg);color:var(--red);border-radius:12px;padding:12px 16px;font-size:13px;font-weight:500;margin-bottom:18px}
.af-done{text-align:center;padding:8px 0 4px}
.af-done-title{font-size:20px;font-weight:700;color:var(--text);margin-bottom:8px}
.af-done-sub{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.af-done a{color:var(--blue-600);font-weight:500;font-size:14px}
/* ==================== ONBOARDING ==================== */
.ob{min-height:100vh;background:var(--blue-25);display:flex;flex-direction:column}
.ob-head{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:20}
/* Шаги должны быть строго по центру шапки независимо от ширины лого/кнопки «Назад» —
flex justify-content:space-between даёт лишь равные зазоры, а не истинный центр. */
@media (min-width:601px){
.ob-head{display:grid;grid-template-columns:1fr auto 1fr;column-gap:16px}
.ob-logo{justify-self:start}
.ob-back{justify-self:end}
}
.ob-logo{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:700;color:var(--blue-700)}
.ob-steps{display:flex;align-items:flex-start;gap:8px}
.ob-step{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;font-weight:500;text-align:center}
.ob-dot{width:26px;height:26px;border-radius:50%;background:#eef2fb;color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;transition:.25s}
.ob-dot .ic{width:14px;height:14px}
.ob-step.current .ob-dot{background:var(--grad-primary);color:#fff;box-shadow:var(--sh-blue)}
.ob-step.current{color:var(--ink)}
.ob-step.done .ob-dot{background:var(--green);color:#fff}
.ob-step.done{color:var(--green-2)}
.ob-line{width:64px;height:2px;background:var(--border);border-radius:2px;margin-top:12px}
.ob-line.done{background:var(--green)}
.ob-back{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);font-weight:500}
.ob-back .ic{width:15px;height:15px}
.ob-back:hover{color:var(--blue-600)}
.ob-body{flex:1;max-width:1120px;width:100%;margin:0 auto;padding:48px 40px;display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}
/* Добавление сайта: единый центрированный столбец — форма сверху, «Что дальше» под ней на всю ширину */
.ob-add{display:flex;flex-direction:column;align-items:stretch;max-width:640px;gap:24px}
.ob-add .ob-main,.ob-add .ob-aside{width:100%}
.ob-center,.ob-analysis{display:flex;align-items:center;justify-content:center}
.ob-title{font-size:32px;font-weight:700;letter-spacing:-.6px;line-height:1.15;margin-bottom:12px}
.ob-lead{font-size:16px;color:var(--text);line-height:1.5;margin-bottom:26px}
.ob-main{padding:36px}
.field-hint{font-size:13px;color:var(--muted);margin-top:8px}
.ob-timer{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:16px;font-size:14px;color:var(--muted)}
.ob-timer .ic{width:16px;height:16px}
.ob-aside{position:relative;overflow:hidden}
.ob-aside h3{font-size:18px;font-weight:600;margin-bottom:18px}
.ob-next{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.ob-next li{display:flex;gap:13px;align-items:center;font-size:14px;color:var(--text);line-height:1.4}
.ob-next li .obn-ic{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--blue-600)}
.ob-next li .obn-ic .ic{width:22px;height:22px}
.ob-aside-glow{position:absolute;bottom:-60px;right:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(26,105,240,.14),transparent 70%)}
.field .select{width:100%;height:49px;border-radius:var(--r-md);border:1.5px solid var(--border);font-size:15px}
.field .select .select-val{flex:1;text-align:left}
/* Analysis */
.an-card{max-width:640px;width:100%;padding:44px;text-align:center;position:relative;overflow:hidden}
.an-site{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--blue-600);background:var(--blue-50);padding:6px 14px;border-radius:var(--r-pill);margin-bottom:20px}
.an-site .ic{width:14px;height:14px}
.an-card .ob-title,.an-card .ob-lead{text-align:center}
/* Загрузка анализа: статичная рамка-прямоугольник с процентом по центру (как в Figma) */
/* Рамка сама и есть индикатор загрузки: тонкий трек + обводка, заполняющаяся по периметру */
.an-box{position:relative;width:100%;max-width:300px;aspect-ratio:12/5;margin:20px auto 16px}
.an-box-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.an-box-track{fill:none;stroke:var(--blue-50);stroke-width:2.5}
/* transition чуть короче интервала JS-тика (90ms), иначе анимации накладываются друг на друга
и обводка «дёргается» — едет, останавливается, снова едет */
.an-box-prog{fill:none;stroke:url(#anBoxGrad);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset .08s linear}
.an-box-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.an-box-in b{font-size:40px;font-weight:700;color:var(--blue-600);letter-spacing:-1px;line-height:1}
.an-box-in span{font-size:13px;color:var(--muted)}
.an-dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:22px}
.an-dots span{width:7px;height:7px;border-radius:50%;background:var(--blue-100);transition:.25s}
.an-dots span.done{background:var(--blue-600)}
.an-dots span.active{background:var(--blue-600);animation:dotPulse 1s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.an-steps{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(2,auto);gap:12px 14px;text-align:left;max-width:460px;margin:0 auto}
.an-step{display:flex;gap:14px;align-items:center;padding:12px 16px;border-radius:var(--r-md);background:var(--blue-25);opacity:.5;transition:.3s}
.an-step.done{opacity:1;background:#fff;box-shadow:var(--sh-xs)}
.an-step.active{opacity:1;background:var(--grad-primary);box-shadow:var(--sh-blue)}
.an-step.active b,.an-step.active i{color:#fff}
.an-ic{width:26px;height:26px;flex:none;border-radius:50%;background:#eef2fb;color:var(--muted);display:flex;align-items:center;justify-content:center}
.an-ic .ic{width:15px;height:15px}
/* пока шаг не начался — пустой кружок; активный — крутится загрузка; готовый — галочка (без вращения) */
.an-ic-spin,.an-ic-done{display:none;align-items:center;justify-content:center}
.an-ic-spin{animation:spin .9s linear infinite}
.an-step.active .an-ic-spin{display:flex}
.an-step.done .an-ic-done{display:flex}
.an-step.done .an-ic{background:var(--green);color:#fff}
.an-step.active .an-ic{background:rgba(255,255,255,.25);color:#fff}
.an-step b{display:block;font-size:14px;font-weight:600}
.an-step i{font-size:13px;color:var(--muted);font-style:normal}
/* иконка — часть строчного текста (не flex-соседи), поэтому при переносе на 2 строки
она остаётся у первой строки, а не «плавает» по центру всего абзаца; gap между
иконкой и текстом задаётся margin-right, а не flex-gap (тот считается от полной
ширины перенесённого текстового блока и визуально «отрывает» иконку от текста) */
.an-foot{margin-top:24px;font-size:13px;color:var(--muted);max-width:460px;margin-left:auto;margin-right:auto}
.an-foot .ic{width:15px;height:15px;color:var(--gold)}
.an-foot .uic{margin-right:8px;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
/* Экран «нельзя запустить продвижение» (крупная площадка вместо сайта) */
.an-blocked{display:flex; flex-direction:column; align-items:center}
.an-blocked-ic{width:52px; height:52px; border-radius:50%; background:var(--red-soft,#fbeaec); color:var(--red); display:flex; align-items:center; justify-content:center; margin-bottom:18px; flex:none}
.an-blocked-ic .ic{width:26px; height:26px}
.an-blocked .ob-lead{max-width:440px}
/* Result */
.ob-result{grid-template-columns:1fr 1.15fr;align-items:center}
.rs-badge{margin-bottom:20px}
.rs-badge .ic{width:15px;height:15px}
.rs-title{font-size:44px;font-weight:700;line-height:1.08;letter-spacing:-1px;margin-bottom:16px}
.rs-mini{display:flex;gap:26px;margin-top:30px}
.rs-mini div{display:flex;flex-direction:column}
.rs-mini b{font-size:24px;font-weight:700;color:var(--blue-600)}
.rs-mini span{font-size:13px;color:var(--muted);max-width:110px}
.rs-right{display:flex;flex-direction:column;gap:20px}
.rs-big{padding:32px;background:var(--grad-brand);color:#fff;position:relative;overflow:hidden}
.rs-domain{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;background:rgba(255,255,255,.16);padding:6px 14px;border-radius:var(--r-pill);margin-bottom:16px}
.rs-domain .ic{width:15px;height:15px}
.rs-num{font-size:64px;font-weight:800;letter-spacing:-2px;line-height:1;display:flex;align-items:baseline;gap:12px}
.rs-num-plus{font-size:20px;font-weight:700;color:#8ff0b8;letter-spacing:0}
.rs-num-cap{font-size:16px;color:#d5e6ff;margin-top:12px;line-height:1.4}
.rs-chart .rs-months,.chart-months,.rs-months{display:flex;justify-content:space-between;margin-top:6px}
.rs-months span,.chart-months span{font-size:11px;color:var(--blue-100)}
.chart-months span{color:#cbd5e0}
/* Trial ended */
.te-card{max-width:560px;padding:44px;text-align:center;display:flex;flex-direction:column;align-items:center}
.te-mascot{width:180px;height:180px;object-fit:contain;margin-bottom:10px;animation:floaty 4s ease-in-out infinite}
.te-help{margin-top:22px;font-size:14px;color:var(--muted);line-height:1.6}
.te-help a{color:var(--blue-600);font-weight:500}
/* Offer */
.ob-offer{display:block;max-width:1080px}
.of-head{text-align:center;margin-bottom:34px}
.of-potential{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;font-weight:500;color:var(--blue-700);background:var(--blue-50);padding:10px 18px;border-radius:var(--r-pill)}
.of-potential .ic{width:16px;height:16px;color:var(--green)}
.of-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.of-card{padding:32px;position:relative}
.of-card h3{font-size:20px;font-weight:700}
.of-desc{color:var(--muted);font-size:14px;margin:4px 0 18px}
.of-price{font-size:36px;font-weight:800;letter-spacing:-1px;color:var(--ink)}
.of-price span{display:block;font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:4px}
.of-inc{font-size:14px;font-weight:600;margin:22px 0 12px}
.of-list{display:flex;flex-direction:column;gap:11px}
.of-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text)}
.of-list .ic{width:16px;height:16px;color:var(--green);flex:none}
.of-no{margin-top:11px}
.of-no li{color:var(--muted)}
.of-no .ic{color:var(--muted)}
.of-featured{border:2px solid var(--blue-600);box-shadow:var(--sh-blue)}
.of-flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--grad-primary);color:#fff;font-size:12px;font-weight:600;padding:6px 16px;border-radius:var(--r-pill);white-space:nowrap;box-shadow:var(--sh-blue)}
.of-badge{display:flex;align-items:center;gap:8px;background:var(--blue-50);color:var(--blue-700);font-size:13px;font-weight:500;padding:11px 14px;border-radius:var(--r-md);margin:20px 0}
.of-badge .ic{width:15px;height:15px;color:var(--blue-600)}
/* ==================== DASHBOARD ==================== */
/* Hero demand chart */
.demand-card{margin-bottom:24px;background:transparent;box-shadow:none}
.demand-card .card-head{margin-bottom:4px}
.dc-badges{display:flex;gap:8px}
.dc-badge{font-size:13px;font-weight:600;padding:5px 14px;border-radius:var(--r-pill);border:1px solid;line-height:1.3}
.dc-badge.green{background:rgba(20,184,97,.10);color:var(--green);border-color:rgba(20,184,97,.38)}
.dc-badge.gold{background:var(--gold-bg);color:#FBB500;border-color:rgba(255,184,0,.45)}
.dc-badge.blue{background:var(--blue-50);color:var(--blue-600);border-color:rgba(26,105,240,.32)}
.demand-chart{display:flex;align-items:flex-start;gap:14px;margin-top:12px}
.dc-yaxis{display:flex;flex-direction:column;justify-content:space-between;height:150px;text-align:right;flex:none;min-width:30px}
.dc-yaxis span{font-size:11px;color:var(--muted);line-height:1}
.dc-plot{flex:1;min-width:0}
.dc-months{display:flex;justify-content:space-between;margin-top:8px}
.dc-months span{font-size:11px;color:var(--muted)}
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.dash-head-l{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dash-head-l .filter-chips{margin-left:4px}
.scroll-dots{display:flex;align-items:center;gap:10px;flex:none}
.scroll-dots-track{display:flex;align-items:center;gap:7px}
.s-nav{width:28px;height:28px;border-radius:8px;background:var(--blue-50);color:var(--blue-600);border:none;display:flex;align-items:center;justify-content:center;transition:.15s;flex:none}
.s-nav .ic{width:14px;height:14px}
.s-nav:hover{background:var(--blue-100)}
.s-nav:disabled{opacity:.4;cursor:default;background:var(--blue-50)}
.s-dot{width:7px;height:7px;border-radius:50%;background:var(--blue-100);border:none;transition:.18s var(--ease);padding:0;flex:none}
.s-dot.on{background:var(--blue-600);transform:scale(1.35)}
.s-dot:hover{background:var(--blue-500)}
.proj-slider-wrap{position:relative;margin:-20px -28px -50px}
.proj-slider-wrap::before,.proj-slider-wrap::after{content:"";position:absolute;top:20px;bottom:50px;width:44px;pointer-events:none;z-index:3;opacity:1;transition:opacity .25s var(--ease)}
.proj-slider-wrap::before{left:0;background:linear-gradient(to right,var(--bg) 20%,transparent)}
.proj-slider-wrap::after{right:0;background:linear-gradient(to left,var(--bg) 20%,transparent)}
.proj-slider-wrap.at-start::before{opacity:0}
.proj-slider-wrap.at-end::after{opacity:0}
.proj-slider{display:flex;gap:16px;padding:24px 28px 64px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:28px;scrollbar-width:none}
.proj-slider::-webkit-scrollbar{display:none}
.proj-card{padding:20px;transition:.22s var(--ease);display:block;flex:0 0 360px;scroll-snap-align:start;cursor:pointer;min-width:0}
/* selected card: solid white + persistent blue outline; others: translucent + soft shadow (10% lighter than --sh-lg) */
.proj-card.sel{background:#fff;border:1.5px solid var(--blue-600);box-shadow:var(--sh-md)}
.proj-card.ghost{background:var(--bg);border:1.5px solid var(--blue-100);box-shadow:0 16px 43px rgba(15,42,92,.144)}
.proj-card.ghost:hover{transform:translateY(-3px);box-shadow:0 20px 49px rgba(15,42,92,.18);border-color:var(--blue-100);background:#fff}
.proj-card.sel:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pc-top>div:first-child{min-width:0;flex:1}
.pc-domain{font-size:16px;font-weight:600;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-actions{flex:none}
.pc-actions{display:flex;align-items:center;gap:8px}
.pc-ic{width:36px;height:36px;border-radius:10px;background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center;transition:.15s}
.pc-ic .ic{width:16px;height:16px}
.pc-ic .uic{display:flex;align-items:center;justify-content:center}
.pc-ic:hover{background:var(--blue-100)}
.pc-fav.on{background:var(--red-bg)}
/* tint the (blue) folder heart red when favourited */
.pc-fav.on .uic img,.pfc-fav.on .uic img{filter:brightness(0) saturate(100%) invert(28%) sepia(97%) saturate(6932%) hue-rotate(3deg) brightness(99%) contrast(108%)}
.pc-divider{height:1px;background:var(--border);margin:14px 0}
.pc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pc-stats b{font-size:20px;font-weight:700;display:block}
.pc-stats b.pos-green{color:var(--green)}
.pc-stats b.pos-blue{color:var(--blue-600)}
.pc-stats span{font-size:10px;color:var(--muted)}
.pc-spark{position:relative;margin-top:14px}
.pc-trend{position:absolute;right:0;bottom:2px;font-size:11px;font-weight:600;color:var(--blue-600);display:flex;align-items:center;gap:3px;background:rgba(255,255,255,.85);padding:2px 6px;border-radius:6px}
.pc-trend .ic{width:12px;height:12px}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:22px}
/* dashboard panels sit directly on the background (no card), 1:1 с макетом */
.dash-panel .card-head{margin-bottom:14px}
.rec-list{display:flex;flex-direction:column;gap:4px}
.rec-item{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:var(--r-md);transition:.16s;position:relative;width:100%;background:transparent;border:none;text-align:left;cursor:pointer;font:inherit}
.rec-item:hover{background:rgba(255,255,255,.7);box-shadow:var(--sh-xs)}
.rec-bar{width:4px;height:36px;border-radius:2px;flex:none}
.rec-text{flex:1;font-size:14px;color:var(--ink)}
.rec-arrow{color:var(--muted)}
.rec-arrow .ic{width:14px;height:14px}
.rec-item:hover .rec-arrow{color:var(--blue-600);transform:translateX(3px)}
.dash-link{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:var(--blue-600);white-space:nowrap;flex:none}
.dash-link:hover{text-decoration:underline}
.dash-link .ic{width:13px;height:13px}
/* «Показать всё» sits under the heading (not squeezed into the same row as the
hint bulb, where it used to wrap onto its own line anyway on narrow screens) */
.kw-showall{margin:-6px 0 14px}
.kw-table{display:flex;flex-direction:column}
.kw-h{display:grid;grid-template-columns:2fr .8fr .7fr .8fr;gap:10px;padding:0 0 10px;border-bottom:1px solid var(--border);font-size:14px;color:var(--muted);font-weight:500}
.kw-row{display:grid;grid-template-columns:2fr .8fr .7fr .8fr;gap:10px;align-items:center;padding:9px 8px;border-radius:8px;font-size:13px}
.kw-row:hover{background:rgba(255,255,255,.7)}
.kw-q{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comp-table{display:flex;flex-direction:column}
.comp-h{display:grid;grid-template-columns:1.3fr 2fr .8fr;gap:10px;padding:0 0 10px;border-bottom:1px solid var(--border);font-size:14px;color:var(--muted);font-weight:500}
.comp-row{display:grid;grid-template-columns:1.3fr 2fr .8fr;gap:10px;align-items:center;padding:9px 8px;border-radius:8px;font-size:13px}
.comp-row.you{background:var(--blue-50);position:relative}
.comp-row.you::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--blue-600)}
/* тизер-блюр для строк, недоступных на тарифе пользователя (см.
competitorsCardHTML/opts.limitFree в views-app.js) -- показываем реальные
строки под размытием + плашку тарифа поверх, вместо полной блокировки карточки */
.pw-teaser{position:relative;margin-top:2px;border-radius:var(--r-md);overflow:hidden}
.pw-blur{filter:blur(5px);pointer-events:none;user-select:none}
.pw-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
background:linear-gradient(180deg,transparent 0%,var(--bg) 42%);text-align:center;font-size:13px;color:var(--muted)}
/* recommendation article modal */
.rec-article{padding:26px}
.ra-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.rec-article h2{font-size:22px;font-weight:700;letter-spacing:-.3px;margin-bottom:10px}
.ra-lead{font-size:14px;color:var(--text);line-height:1.6;margin-bottom:20px}
.ra-steps{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.ra-step{display:flex;gap:14px;align-items:flex-start}
.ra-num{width:28px;height:28px;border-radius:50%;color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.ra-step b{display:block;font-size:15px;font-weight:600;margin-bottom:2px}
.ra-step p{font-size:13px;color:var(--text);line-height:1.55}
.comp-dom{color:var(--text)}
.comp-dom b{color:var(--ink)}
.comp-bar-wrap{display:flex;align-items:center;gap:8px}
.comp-bar{height:14px;border-radius:20px;min-width:6px}
.comp-bar-wrap i{font-size:13px;color:var(--muted);font-style:normal}
/* ==================== PROJECTS ==================== */
.proj-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.search-box{flex:none;width:260px}
.search-box .input{height:34px;font-size:14px}
.search-box.sm{width:220px}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap}
/* constant font-weight so the active state changes colour/bg but NOT width */
.fchip{height:34px;padding:0 16px;border-radius:var(--r-md);background:#fff;border:1px solid var(--border);font-size:14px;color:var(--text);font-weight:500;transition:.16s;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.fchip:hover{border-color:var(--blue-100)}
.fchip.on{background:var(--grad-primary);color:#fff;border:none;padding:0 17px}
.view-toggle{display:flex;gap:6px;margin-left:auto}
.vt{width:38px;height:38px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.vt .ic{width:18px;height:18px}
.vt.on{background:var(--blue-50);color:var(--blue-600);border-color:transparent}
.proj-list.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.proj-list.list{display:flex;flex-direction:column;gap:14px}
.pfc{padding:20px;display:flex;flex-direction:column}
.pfc-head{display:flex;align-items:center;gap:12px}
.pfc-avatar{width:40px;height:40px;border-radius:var(--r-pill);color:#fff;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;flex:none}
.pfc-title{flex:1;min-width:0}
.pfc-title .pc-domain{margin-bottom:2px}
.pfc-fav{width:36px;height:36px;border-radius:10px;background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center;flex:none}
.pfc-fav .ic{width:18px;height:18px}
.pfc-fav .uic{display:flex;align-items:center;justify-content:center}
.pfc-fav:hover{background:var(--blue-100)}
.pfc-fav.on{color:var(--red);background:var(--red-bg)}
.pfc-tops{display:flex;gap:28px;margin:18px 0}
.pfc-tops div{flex:none;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px}
.pfc-circle{width:44px;height:44px;border-radius:50%;background:var(--blue-50);color:var(--blue-600);font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center}
.pfc-tops span{font-size:13px;color:var(--muted)}
.pfc-status{margin-bottom:14px}
.pfc-status .chip{font-size:13px}
.pfc-divider{height:1px;background:var(--border);margin-bottom:14px}
.pfc-meta{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.pfc-meta div{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.pfc-meta .ic{width:15px;height:15px;color:var(--blue-500)}
.pfc-foot{display:flex;gap:10px;margin-top:12px}
.pfc-foot .btn{flex:1}
.pfc-add{border:1.5px dashed var(--blue-100);border-radius:var(--r-xl);background:var(--blue-25);align-items:center;justify-content:center;text-align:center;gap:14px;min-height:300px;transition:.18s}
.pfc-add:hover{border-color:var(--blue-600);background:var(--blue-50)}
.pfc-add-plus{width:48px;height:48px;border-radius:50%;background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center}
.pfc-add-plus .ic{width:24px;height:24px}
.pfc-add b{font-size:15px;color:var(--blue-600);font-weight:600}
/* sort dropdown in projects toolbar */
.proj-sort{margin-left:auto}
.proj-sort .uic img{filter:brightness(0) saturate(100%)}
.tb-right .view-toggle{margin-left:0}
/* mobile-only duplicate of "Добавить проект" that lives in the toolbar's sort row
instead of the topbar — see MOBILE FEEDBACK PASS 7 */
.proj-add-mobile{display:none}
/* ---- Projects: list view (dense 2-line row) ---- */
.proj-list.list{display:flex;flex-direction:column;gap:10px}
.pfr{padding:16px 22px;display:flex;flex-direction:column;gap:12px;transition:.16s}
.pfr:hover{border-color:var(--blue-100);box-shadow:var(--sh-sm)}
.pfr-l1{display:flex;align-items:center;gap:24px}
.pfr-domain{font-size:16px;font-weight:600;flex:none;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfr-stats{display:flex;align-items:center;gap:22px;flex:1;min-width:0}
.pfr-stat{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap;flex:none}
.pfr-circle{width:28px;height:28px;border-radius:50%;background:var(--blue-50);color:var(--blue-600);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.pfr-l1 .chip{flex:none}
.pfr-l2{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;border-top:1px solid var(--border-2)}
.pfr-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);flex-wrap:wrap;min-width:0}
.pfr-meta .ic{width:13px;height:13px;color:var(--blue-500)}
.pfr-sep{color:var(--border)}
.pfr-actions{display:flex;gap:8px;flex:none}
.pc-ic.danger{background:var(--red-bg);color:var(--red)}
.pc-ic.danger:hover{background:#ffe2d6}
.proj-list.list .pfc-add{min-height:auto;flex-direction:row;padding:16px 22px;justify-content:flex-start;gap:14px}
.proj-list.list .pfc-add-plus{width:36px;height:36px}
.proj-list.list .pfc-add-plus .ic{width:18px;height:18px}
.proj-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:70px 20px;animation:fadeUp .4s var(--ease-out)}
.pe-ill{width:80px;height:80px;border-radius:50%;background:var(--blue-50);color:var(--blue-500);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.pe-ill .ic{width:36px;height:36px}
.proj-empty h3{font-size:20px;font-weight:700;margin-bottom:8px}
.proj-empty p{color:var(--text);font-size:14px;max-width:360px;margin-bottom:22px;line-height:1.5}
/* context menu */
.ctx-menu{position:fixed;z-index:200;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:6px;min-width:180px;animation:pop .16s var(--ease-out)}
.ctx-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:8px;font-size:14px;color:var(--ink);text-align:left}
.ctx-menu button .ic{width:16px;height:16px;color:var(--muted)}
.ctx-menu button:hover{background:var(--blue-25)}
.ctx-menu .ctx-danger{color:var(--red)}
.ctx-menu .ctx-danger .ic{color:var(--red)}
.ctx-menu .ctx-danger:hover{background:var(--red-bg)}
.ctx-div{height:1px;background:var(--border);margin:6px 4px}
.notif-menu{width:320px;max-width:calc(100vw - 24px);padding:0}
.nm-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-weight:600;border-bottom:1px solid var(--border)}
.nm-read{font-size:12px;font-weight:600;color:var(--blue-600)}
.nm-read:hover{text-decoration:underline}
.notif-menu .nm-item{display:flex;flex-direction:column;align-items:flex-start;gap:0;width:100%;text-align:left;padding:12px 16px;border:none;border-bottom:1px solid var(--border-2);cursor:pointer;background:none;border-radius:0}
.notif-menu .nm-item:hover{background:var(--blue-25)}
.notif-menu .nm-item b{font-size:14px}
.notif-menu .nm-item span{font-size:13px;color:var(--text);margin:2px 0}
.notif-menu .nm-item i{font-size:12px;color:var(--muted);font-style:normal}
/* ==================== PROJECT PAGE ==================== */
.proj-tabs{display:flex;gap:8px;padding:16px 28px;position:sticky;top:var(--topbar-h);z-index:30;overflow-x:auto}
/* box-shadow вместо border:1px solid transparent — у прозрачного бордера на скруглении
поверх градиента Chrome иногда рисует тонкую тёмную кайму слева (артефакт антиалиасинга) */
.ptab{flex:none;padding:8px 16px;border-radius:var(--r-md);font-size:14px;font-weight:500;color:var(--text);white-space:nowrap;transition:.16s;background:transparent;box-shadow:inset 0 0 0 1px transparent}
.ptab:hover{background:var(--blue-50);color:var(--blue-600)}
.ptab.on{background:var(--grad-primary);color:#fff;box-shadow:none}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px}
.kpi{position:relative;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.kpi-label{font-size:13px;color:var(--muted)}
.kpi-val{font-size:26px;font-weight:700;letter-spacing:-.5px}
.kpi-delta{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
/* stretch so each row's two cards match height; headers/subheaders then line up
automatically since both cards start at the same grid-row top */
/* строки «услуга — сумма» в модалке доплаты за места */
.pay-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 20px;
padding:12px 14px;border-radius:var(--r-sm);background:var(--blue-25);font-size:13.5px;color:var(--text)}
.pay-row b{font-size:16px;font-weight:700;color:var(--ink);white-space:nowrap}
.pay-row+.pay-row{margin-top:-14px}
.pay-disc{background:var(--green-bg);color:var(--green-2)}
.pay-disc b{color:var(--green-2);font-size:14px}
.pay-total{background:var(--blue-50)}
.pay-total b{color:var(--blue-700);font-size:18px}
/* ==================== Отчёт по позициям — перенесено дословно из dev-work ==================== */
.promo-count{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
border-radius:var(--r-pill);background:var(--blue-50);border:1px solid var(--blue-75);
font-size:13.5px;color:var(--blue-700);white-space:nowrap}
.promo-count .ic{width:16px;height:16px;color:var(--gold);flex:none}
.promo-count b{font-size:16px;font-weight:700;color:var(--blue-700)}
.pc-add{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
border-radius:50%;background:var(--blue-600);color:#fff;flex:none;transition:.15s}
.pc-add .ic{width:15px;height:15px;color:#fff}
.pc-add:hover{background:var(--blue-700);transform:scale(1.06)}
.promo-count.full{background:var(--gold-bg);border-color:#ffe1a3;color:#8a6100}
.promo-count.full .pc-add{background:var(--gold)}
.promo-count.full .pc-now{color:#b47b00}
.lab-table{table-layout:fixed;min-width:1200px}
.lab-table th,.lab-table td{overflow:hidden;text-overflow:ellipsis;padding-left:10px;padding-right:10px}
.lab-table .c-check{width:auto}
.lab-table thead th{position:relative;font-size:13px}
.th-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lab-table .url-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lab-table .q-act{padding-left:4px}
.col-grip{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;z-index:2;touch-action:none}
.col-grip::after{content:"";position:absolute;top:8px;bottom:8px;left:4px;width:1px;background:var(--blue-600);opacity:0;transition:opacity .15s}
.col-grip:hover::after{opacity:1}
.lab-stack{display:flex;flex-direction:column;gap:20px}
.lab-stack>*{margin-bottom:0}
.proj-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tbl-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;
padding-bottom:14px;border-bottom:1px solid var(--border-2)}
.tbl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tbl-head .seg-row{margin-bottom:0}
.filter-menu{position:relative;flex:none}
.fm-btn{font:inherit}
.filter-menu.picked .fm-btn{border-color:var(--blue-600);color:var(--blue-600)}
.fm-panel{display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:60;width:288px;
padding:14px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--border);box-shadow:var(--sh-lg)}
.filter-menu.open .fm-panel{display:block}
.fm-group+.fm-group{margin-top:14px;padding-top:14px;border-top:1px solid var(--border-2)}
.fm-title{display:flex;align-items:baseline;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fm-title i{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;font-size:11px;color:var(--muted)}
.fm-range{display:flex;align-items:center;gap:8px}
.fm-range .input{height:34px;font-size:13px;padding:0 10px;min-width:0;flex:1}
.fm-dash{color:var(--muted);flex:none}
.fm-presets{display:flex;flex-wrap:wrap;gap:6px}
.fm-range+.fm-presets{margin-top:8px}
.fm-foot{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border-2)}
.fm-foot .btn{margin-left:auto}
.fm-reset{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:none;
background:none;font:inherit;font-size:13px;color:var(--muted-2);cursor:pointer;border-radius:var(--r-sm)}
.fm-reset:hover:not(:disabled){background:var(--blue-25);color:var(--ink)}
.fm-reset:disabled{opacity:.45;cursor:default}
.th-sort{cursor:pointer;-webkit-user-select:none;user-select:none}
.th-sort:hover .th-label{color:var(--blue-600)}
.th-sort.on .th-label{color:var(--blue-600);font-weight:600}
.th-arrow{display:inline-flex;vertical-align:middle;margin-left:4px}
.th-arrow .ic{width:13px;height:13px}
.seg-row{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-md);background:var(--blue-25);border:1px solid var(--border);margin-bottom:14px}
.seg{height:32px;padding:0 14px;border-radius:var(--r-sm);font:inherit;font-size:13px;font-weight:500;color:var(--muted-2);background:transparent;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.seg i{font-style:normal;font-size:12px;font-weight:700;color:var(--muted)}
.seg:hover{color:var(--ink)}
.seg.on{background:#fff;color:var(--blue-600);box-shadow:var(--sh-xs)}
.seg.on i{color:var(--blue-600)}
.promo-star{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--muted);transition:.15s}
.promo-star .ic{width:18px;height:18px}
.promo-star:hover{background:var(--blue-50);color:var(--gold)}
.promo-star.on{color:var(--gold)}
.promo-star.on:hover{color:var(--muted)}
.ap-chip{height:28px;padding:0 11px;border-radius:var(--r-pill);border:1px solid var(--border);background:#fff;font:inherit;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer;transition:.15s}
.ap-chip:hover{border-color:var(--blue-600);color:var(--blue-600)}
.ap-chip.on{border-color:var(--blue-600);background:var(--blue-50);color:var(--blue-600)}
.lab-empty{text-align:center;padding:28px;font-size:14px;color:var(--muted)}
.sel-find{display:flex;flex-direction:column;max-height:330px;min-width:250px}
.sel-search{position:relative;display:flex;align-items:center;flex:none;padding-bottom:6px}
.sel-search .ic{position:absolute;left:10px;width:14px;height:14px;color:var(--muted);pointer-events:none}
.sel-search .input{height:32px;font-size:13px;padding-left:30px}
.sel-list{overflow-y:auto;flex:1;min-height:0}
.lab-scroll{overflow:auto;resize:vertical;min-height:220px}
.lab-scroll thead th{position:sticky;top:0;z-index:3;background:#fff}
@media (max-width:820px){ .lab-scroll{resize:none;max-height:70vh} }
.lab-scroll .lab-table th.c-check,.lab-scroll .lab-table td.c-check{
position:sticky;left:0;z-index:2;background:var(--row-bg,#fff)}
.lab-scroll .lab-table th:last-child,.lab-scroll .lab-table td:last-child{
position:sticky;right:0;z-index:2;background:var(--row-bg,#fff)}
.lab-scroll .lab-table thead th.c-check,.lab-scroll .lab-table thead th:last-child{z-index:4}
.lab-table tbody tr:hover{--row-bg:var(--blue-25)}
.q-table tbody tr.selected{--row-bg:var(--blue-50)}
.lab-scroll .lab-table td.c-check{box-shadow:8px 0 8px -8px rgba(15,42,92,.12)}
.lab-scroll .lab-table td:last-child{box-shadow:-8px 0 8px -8px rgba(15,42,92,.12)}
@media (max-width:900px){
.tbl-actions{gap:8px}
.tbl-actions .grow{flex-basis:100%}
}
/* Плашка планового съёма над таблицей позиций */
.rc-note{display:flex;align-items:center;gap:10px;margin:2px 0 14px;padding:10px 12px;border-radius:var(--r-sm);background:var(--blue-25);font-size:13px;color:var(--text,var(--ink))}
.rc-note .ic{flex:none}
/* Индекс здоровья сайта (карточка на Обзоре) -- те же 4 плитки, что и в
скачиваемом HTML-отчёте (buildAuditReportHTML/tscoreTiles), просто инлайн,
без отдельной страницы */
.tscore-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.tscore-card{background:var(--blue-25);border-radius:12px;padding:14px 12px;text-align:center}
.tscore-val{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.tscore-lbl{font-size:11px;color:var(--muted);margin-top:2px}
.tfacts-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tfact{background:var(--cloud,#FAFBFF);border:1px solid var(--border);border-radius:10px;padding:9px 12px;display:flex;flex-direction:column;gap:2px}
.tfact-val{font-size:14px;font-weight:700}
.tfact-lbl{font-size:10px;color:var(--muted)}
@media (max-width:640px){ .tscore-row,.tfacts-row{grid-template-columns:repeat(2,1fr)} }
.ov-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;margin-bottom:20px;align-items:stretch}
/* align-items:stretch only stretches the direct grid child (the #ovDemand/#ovKw/
#ovRec/#ovMkt wrapper div) -- the .card inside it keeps its own content height
unless told to fill the wrapper, which is why a short card (e.g. rec-card with
just 1-2 items) doesn't match its taller row sibling */
.ov-grid>div{display:flex;min-height:0}
.ov-grid>div>.card{flex:1;min-height:0}
/* demand card: grow the chart itself into the extra height (not blank padding) */
.ov-demand-card{display:flex;flex-direction:column}
.ov-demand-card .demand-chart{flex:1;align-items:stretch}
.ov-demand-card .dc-yaxis{height:auto!important}
.ov-demand-card .dc-plot{flex:1;display:flex;flex-direction:column}
.ov-demand-card .dc-plot svg{flex:1;height:auto!important;min-height:0}
.btn-icon-sq{width:36px;height:36px;border-radius:var(--r-sm);background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center;flex:none}
.btn-icon-sq .ic{width:17px;height:17px}
.btn-icon-sq:hover{background:var(--blue-100)}
/* market share card (project overview) */
.mkt-list{display:flex;flex-direction:column;gap:2px}
.mkt-row{display:grid;grid-template-columns:140px 1fr auto;gap:14px;align-items:center;padding:10px;border-radius:8px}
.mkt-row.you{background:var(--gold-bg);box-shadow:inset 3px 0 0 var(--gold)}
.mkt-dom{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-row.you .mkt-dom{font-weight:600}
.mkt-track{height:10px;border-radius:20px;background:var(--blue-25);overflow:hidden}
.mkt-fill{display:block;height:100%;border-radius:20px}
.mkt-share{font-size:13px;font-weight:600;color:var(--text);min-width:42px;text-align:right}
.mkt-row.you .mkt-share{color:#FBB500}
.kw-table{display:flex;flex-direction:column}
.kw-h{display:grid;grid-template-columns:2fr .8fr .8fr .9fr;gap:8px;padding:8px 10px;background:var(--blue-25);border-radius:6px;font-size:13px;font-weight:500;color:var(--muted)}
.kw-row{display:grid;grid-template-columns:2fr .8fr .8fr .9fr;gap:8px;align-items:center;padding:9px 10px;border-bottom:1px solid var(--border-2);font-size:12px}
.kw-q{font-weight:600;color:var(--ink)}
.pos-badge{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:0 8px;border-radius:11px;font-size:12px;font-weight:600}
.pos-badge.p3{background:var(--blue-50);color:var(--blue-600)}
.pos-badge.p10{background:var(--green-bg);color:var(--green)}
.pos-badge.p50{background:var(--blue-25);color:var(--muted)}
/* per-card hint bubbles — always in the DOM, kept invisible (opacity 0, no pointer
events) until the card under it is hovered, so the icon only shows up when you're
actually looking at that block. Layout space is reserved at all times (not
display:none), so pre-existing buttons (Посмотреть всё, the market-share % chip…)
that already shifted left to make room never jump around as you hover; .kpi has no
action row at all, so that variant overrides to an absolute corner badge instead.
Either way .hint-btn keeps its own positioning context so .hint-pop always anchors
to the icon, not to whichever ancestor happens to be positioned. */
.hint-btn{position:relative;width:30px;height:30px;border-radius:var(--r-sm);background:var(--gold-bg);color:#c98a00;display:flex;align-items:center;justify-content:center;flex:none;cursor:help;border:none;opacity:0;pointer-events:none;transition:.16s}
.hint-btn .ic{width:16px;height:16px}
.hint-btn:hover{background:#ffe9ad;color:#a66d00}
/* reveal the bulb whenever its host is hovered — either a plain .card, or any block
that opts in with .hint-host (which also becomes the positioning context for the
corner-anchored .hint-abs variant used on tables and stat plaques). */
.hint-host{position:relative}
.card:hover .hint-btn,.hint-host:hover .hint-btn,.hint-btn:focus-visible{opacity:1;pointer-events:auto}
.kpi .hint-btn{position:absolute;top:14px;right:14px}
/* corner-pinned bulb for cards/tables that have no header action slot to sit in */
.hint-btn.hint-abs{position:absolute;top:14px;right:14px;z-index:6}
.hint-pop{position:absolute;top:calc(100% + 10px);right:0;width:236px;background:var(--ink);color:#fff;padding:12px 14px;border-radius:10px;font-size:12.5px;line-height:1.55;font-weight:400;text-align:left;box-shadow:var(--sh-md);opacity:0;visibility:hidden;transform:translateY(-4px);transition:.16s var(--ease);pointer-events:none;z-index:25}
.hint-pop b{display:block;font-size:13px;font-weight:600;margin-bottom:4px;color:#fff}
.hint-pop::before{content:"";position:absolute;bottom:100%;right:11px;border:6px solid transparent;border-bottom-color:var(--ink)}
/* left-opening variant: popup hugs the bulb's left edge so it stays on-card when the
bulb sits at the left/start of a wide block */
.hint-btn.hint-left .hint-pop{right:auto;left:0}
.hint-btn.hint-left .hint-pop::before{right:auto;left:11px}
/* desktop only: touchscreens keep the button in a "hovered" state after a tap (no
real pointer to move away), so this rule must not also apply on mobile — there
the JS-managed .open class (see app.js) is the only thing allowed to show/hide
the popup, otherwise a tap can never close it, only tapping some other element can */
@media (min-width:821px){
.hint-btn:hover .hint-pop,.hint-btn:focus-visible .hint-pop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
}
/* Positions toolbar + tables */
.pos-toolbar{display:flex;flex-direction:column;gap:12px;padding:16px;margin-bottom:20px}
.pt-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* «Снять позиции» progress strip — appears between the toolbar and the table while
the (simulated) check runs; same track/fill language as .mkt-track/.mkt-fill on Обзор */
.pos-progress{margin-bottom:20px;animation:fadeUp .22s var(--ease-out)}
.pos-prog-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pos-prog-label{display:flex;align-items:center;gap:8px;flex:1 1 260px;min-width:0;font-size:14px;font-weight:600;color:var(--ink)}
.pos-prog-label .ic{flex:none;color:var(--blue-600);animation:spin 1.1s linear infinite}
.pos-prog-track{flex:2 1 200px;min-width:120px;height:10px;border-radius:20px;background:var(--blue-25);overflow:hidden}
.pos-prog-fill{display:block;height:100%;border-radius:20px;background:var(--blue-500);transition:width .14s linear}
.pos-prog-cnt{flex:none;font-size:13px;font-weight:600;color:var(--blue-600);white-space:nowrap}
@media(max-width:720px){
.pos-prog-row{flex-direction:column;align-items:stretch;gap:10px}
/* row's flex-basis values (260px/200px) were meant as WIDTH hints for the horizontal
desktop layout — once flex-direction flips to column here, the same flex-basis would
apply to HEIGHT instead and blow the label/track up to hundreds of px tall, so reset both */
.pos-prog-label{flex:none}
.pos-prog-track{flex:none;width:100%}
.pos-prog-cnt{align-self:flex-end}
}
.pt-sep{width:1px;height:24px;background:var(--border);margin:0 2px}
.yx-mark{width:16px;height:16px;display:inline-flex;align-items:center;flex:none}
.yx-mark svg{width:100%;height:100%;display:block}
.tbl-scroll{overflow-x:auto}
.dtable{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.dtable thead th{text-align:left;padding:12px 14px;font-size:14px;font-weight:500;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap}
.dtable tbody td{padding:13px 14px;border-bottom:1px solid var(--border-2);color:var(--text);white-space:nowrap}
.dtable tbody tr:hover{background:var(--blue-25)}
.td-q{font-weight:600;color:var(--ink)}
.td-url{color:#1b6ebe;font-size:12px}
.td-url:hover{text-decoration:underline}
.q-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:20px}
.qs{padding:18px 20px}
.qs b{font-size:26px;font-weight:700;color:var(--blue-600);display:block}
.qs span{font-size:13px;color:var(--muted)}
/* Competitors */
/* Competitors — full ranking table */
.comp-full-card{overflow:hidden}
/* this card has no header row (table sits flush against the card edge), so the corner
hint bulb docks straight onto the table's own head row instead of a title bar — center
it there by eye (44.8px head row) rather than reusing the generic KPI/card top:14px,
which sat low enough to read as "hugging the row's bottom border" */
.comp-full-card .hint-btn.hint-abs{top:7px}
.comp-full{min-width:900px}
.comp-full thead th{background:var(--surface-2);color:var(--muted-2);font-weight:500;border-bottom:1px solid var(--border)}
.comp-full td,.comp-full th{border-right:1px solid var(--border-2)}
.comp-full td:last-child,.comp-full th:last-child{border-right:none}
.comp-full tbody td{color:var(--ink)}
.c-rank{color:var(--muted);font-weight:500}
.c-site{display:inline-flex;align-items:center;gap:10px;font-weight:500}
.c-favi{width:26px;height:26px;border-radius:50%;background:var(--blue-50);color:var(--blue-600);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
/* "you" row — green while in the top-3, gold below that; accent bar sits on .c-check
(the true first/leftmost cell) so it hugs the card's actual left edge, not "Место" */
.comp-full tbody tr.comp-hi{background:var(--green-50)}
.comp-full tbody tr.comp-hi:hover{background:var(--green-50)}
.comp-full tbody tr.comp-hi td{color:var(--green-2);font-weight:600}
.comp-full tbody tr.comp-hi .c-check{box-shadow:inset 3px 0 0 var(--green)}
.comp-full tbody tr.comp-hi-gold{background:var(--gold-bg)}
.comp-full tbody tr.comp-hi-gold:hover{background:var(--gold-bg)}
.comp-full tbody tr.comp-hi-gold td{color:#8a6400}
.comp-full tbody tr.comp-hi-gold .c-check{box-shadow:inset 3px 0 0 var(--gold)}
.c-act{text-align:center}
.c-act .btn{height:30px;padding:0 18px}
/* flat children (not nested in a sub-row) so each one can independently drop to its
own line on mobile; the count chip float left, everything after it is pulled flush
right via cff-export's auto margin — same grouping as the old justify-content:space-between
between "chip" and "everything else", just per-child instead of per-wrapper */
.comp-full-foot{display:flex;align-items:center;gap:14px;padding:16px 18px;border-top:1px solid var(--border-2)}
.cff-export{margin-left:auto}
/* ---- bulk select (VK-style hover checkbox) — shared by Конкуренты and Поисковые запросы ---- */
.comp-full .c-check,.q-table .c-check{width:40px;padding:13px 4px 13px 16px;border-right:none!important}
.comp-full thead th.c-check,.q-table thead th.c-check{padding:12px 4px 12px 16px}
.comp-full tbody tr[data-domain],.q-table tbody tr[data-kw]{cursor:pointer;transition:background .12s}
.comp-full tbody tr[data-you]{cursor:default}
.c-checkbox{width:24px;height:24px;border-radius:50%;background:var(--blue-100);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.7);transition:.16s var(--ease-spring);pointer-events:none}
.c-checkbox .ic{width:12px;height:12px}
.comp-full tbody tr:hover .c-checkbox,.q-table tbody tr:hover .c-checkbox{opacity:1;transform:scale(1)}
.comp-full tbody tr.selected .c-checkbox,.q-table tbody tr.selected .c-checkbox{opacity:1;transform:scale(1);background:var(--blue-600)}
.comp-full tbody tr.selected,.q-table tbody tr.selected{background:var(--blue-50)}
.comp-full tbody tr.selected:hover,.q-table tbody tr.selected:hover{background:var(--blue-50)}
.comp-sel-actions{display:flex;align-items:center;gap:10px}
.comp-sel-del{width:34px;height:34px;border-radius:var(--r-sm);background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;transition:.15s}
.comp-sel-del:hover{filter:brightness(1.08)}
.comp-sel-del .ic{width:16px;height:16px}
.comp-sel-cancel{height:34px;padding:0 16px;border-radius:var(--r-sm);background:var(--blue-50);color:var(--blue-600);font-size:13px;font-weight:600}
.comp-sel-cancel:hover{background:var(--blue-100)}
.comp-sel-count{font-size:14px}
.comp-sel-count b{color:var(--blue-600);font-weight:700}
.comp-sel-count i{color:var(--muted);font-style:normal}
/* Тумблер «SEO Аудит» вкладки «Конкуренты» (compAuditMode в views-project.js) —
переключает #compTable в режим сравнения по чек-листу тех.аудита. Цвета/
классы намеренно порт 1:1 палитры REPORT_CSS (ok/warn/err/cell-bad/cell-good
там же в views-project.js, скачиваемый отчёт) под живые CSS-переменные
этого файла (--green/--gold/--red вместо --sage/--amber/--flame), с
префиксом caud- (competitor AUDit), чтобы не конфликтовать с .ok/.warn
классами, если такие появятся в других таблицах. */
.comp-audit-toggle-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 18px 14px}
.caud-empty-hint{font-size:12.5px;color:var(--muted)}
.caud-run-link{color:var(--blue-600);font-weight:600;cursor:pointer;text-decoration:underline}
.caud-run-link:hover{color:var(--blue-700)}
.ct-spin{display:inline-block;width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--blue-600);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}
.comp-full-audit{min-width:820px}
.comp-full-audit td.caud-muted{color:var(--muted);text-align:center}
.comp-full-audit td.caud-cell-bad{background:var(--red-bg)}
.comp-full-audit td.caud-cell-good{background:var(--green-50)}
.caud-ok{color:var(--green)}
.caud-warn{color:#b78300}
.caud-err{color:var(--red)}
.caud-fw{font-weight:700}
.comp-full tbody tr[data-domain].caud-expanded{background:var(--blue-50)}
.caud-subrow td{padding:0!important}
.caud-header{display:flex;align-items:center;gap:10px;padding:9px 20px 9px 18px;background:var(--blue-600)}
.caud-header-dom{font-size:12.5px;font-weight:700;color:#fff;flex:1}
.caud-header img{border-radius:3px;flex-shrink:0;opacity:.9}
.caud-header .caud-ok,.caud-header .caud-warn,.caud-header .caud-err{color:#fff}
.caud-header .caud-ok{color:#b6f5d3}
.caud-header .caud-warn{color:#ffe6ad}
.caud-header .caud-err{color:#ffc4b8}
.caud-opr{font-size:11px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.16);border-radius:5px;padding:1px 7px}
.caud-detail{background:var(--surface-2);border-bottom:1px solid var(--border-2)}
.caud-empty{padding:12px 20px;color:var(--muted);font-size:12.5px;background:var(--surface-2);border-bottom:1px solid var(--border-2)}
.caud-check-row{display:flex;gap:10px;padding:7px 20px 7px 18px;border-bottom:1px solid var(--border-2);align-items:center}
.caud-check-row.caud-row-bad{background:var(--red-bg)}
.caud-check-row.caud-row-good{background:var(--green-50)}
.caud-check-ic{flex-shrink:0;width:14px;text-align:center}
.caud-check-title{font-size:12px;font-weight:600;color:var(--ink);flex-shrink:0;min-width:180px}
.caud-check-details{font-size:11.5px;color:var(--text);flex:1;line-height:1.4}
.caud-check-group{font-size:10px;color:var(--muted);flex-shrink:0;white-space:nowrap;min-width:90px;text-align:right}
.caud-tag{font-size:10px;font-weight:600;border-radius:5px;padding:2px 6px;flex-shrink:0;white-space:nowrap}
.caud-tag-bad{color:var(--red);background:var(--red-bg)}
.caud-tag-good{color:var(--green-2);background:var(--green-bg)}
/* Мобильные карточки «Конкуренты» (≤820px) — восстановлено из c417bed
(backup-real-analytics-22aug): на этой ширине .comp-full (min-width:900px)
уже не помещается без горизонтальной прокрутки, вместо таблицы показываем
карточки из тех же rows (см. compCardHTML в views-project.js). Классы с
префиксом compcard- (не cc-/comp-card): .comp-card уже занят виджетом
на дашборде (views-app.js), а .cc-row/.cc-switch/.cc-modal — совсем другим
компонентом (карточка подтверждения) в этом же файле — совпадение имён
сломало бы оба. */
.comp-cards{display:none}
@media (max-width:820px){
.comp-full-card .tbl-scroll{display:none}
/* Режим audit-сравнения — десктопный (широкая таблица с 5 доп.колонками,
на карточки не портирован, см. компcardHTML/задачу в views-project.js);
на мобильном тумблер скрыт, чтобы не заводить compAuditMode, который
мобильные карточки всё равно игнорируют. */
.comp-audit-toggle-row{display:none}
.comp-cards{display:flex;flex-direction:column;gap:8px;padding:12px}
.compcard{border:1px solid var(--border-2);border-radius:12px;padding:11px 12px;background:#fff}
.compcard.compcard-you{border-color:var(--green);background:linear-gradient(180deg,#f4fff7,#fff)}
.compcard-top{display:flex;align-items:center;gap:9px;min-width:0}
.compcard-rank{font-style:normal;font-weight:800;font-size:13px;color:var(--muted);min-width:20px}
.compcard-dom{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.compcard-view{flex:none}
.compcard-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12px;color:var(--muted)}
.compcard-meta b{color:var(--ink);font-weight:600}
}
/* Queries table */
/* corner hint bulb (moved out of the toolbar row so it stops wrapping onto its own
line on narrow screens) needs the toolbar's right-hand controls nudged clear of it —
same reservation pattern as .ov-kw-card's header on the Обзор tab */
.q-toolbar-actions{margin-right:40px}
.xls-mark{width:17px;height:17px;display:inline-flex;align-items:center;flex:none}
.xls-mark svg{width:100%;height:100%;display:block}
.q-act{text-align:right;white-space:nowrap}
/* sized up from 30px + touching, and given a real gap — edit/delete sitting flush
against each other was an easy mis-tap, especially the destructive one */
.q-ic{width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--blue-600);transition:.15s}
.q-ic .ic{width:17px;height:17px}
.q-ic:hover{background:var(--blue-50)}
.q-ic+.q-ic{margin-left:8px}
.q-del{color:var(--red)}
.q-del:hover{background:var(--red-bg)}
.q-foot:not(:empty){display:flex;align-items:center;padding-top:16px;margin-top:6px;border-top:1px solid var(--border-2)}
/* ==================== MODALS ==================== */
.modal-layer{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px}
.modal-scrim{position:absolute;inset:0;background:rgba(8,16,40,.5);backdrop-filter:blur(3px);opacity:0;transition:.24s}
.modal-layer.open .modal-scrim{opacity:1}
.modal{position:relative;background:#fff;border-radius:20px;box-shadow:var(--sh-lg);width:100%;max-width:560px;padding:28px;transform:translateY(20px) scale(.97);opacity:0;transition:.26s var(--ease-spring);max-height:90vh;overflow:auto}
.modal-layer.open .modal{transform:none;opacity:1}
/* modal-sm — только маленькие подтверждения и формы в 1-2 поля, никогда не требуют
внутренней прокрутки; overflow:visible снимает лишний скролл, который иначе появляется,
когда выпадающий .select-menu (даже закрытый) прибавляет высоту в overflow:auto родителя */
.modal-sm{max-width:440px;overflow:visible}
.modal-md{max-width:500px}
.modal-lg{max-width:720px;padding:0;overflow:hidden}
.modal-ideas{max-width:940px;padding:0;overflow:hidden}
/* ================= Idea board — «Идеи развития» =================
Own visual language (gradient hero + community stats, horizontal category
rail, single-column cards with a status accent-bar on the left and a compact
vertical upvote pill on the right). Deliberately unlike a vote-column board. */
.ib-modal{display:flex;flex-direction:column;max-height:90vh;position:relative}
/* mobile page wrapper (ideasView, reached from the bottom nav's "Ещё" sheet) —
same board markup as the modal, just framed like a plain page card instead of
a fixed-height dialog: the list flows with page scroll rather than its own
internal scrollbar, so the two extra rules below undo the modal's ib-list sizing */
.ib-page{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
.ib-page .ib-list{overflow-y:visible;flex:none}
.ib-close{position:absolute;top:16px;right:16px;z-index:5;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;transition:.15s}
.ib-close:hover{background:rgba(255,255,255,.28)}
.ib-close .ic{width:18px;height:18px}
/* hero — asymmetric right padding reserves room for the corner close button so the
stats never slide under it; icon+title grouped in .ib-hero-l stay on one baseline */
.ib-hero{position:relative;flex:none;overflow:hidden;background:var(--grad-panel);color:#fff;padding:22px 62px 22px 30px;display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap}
.ib-hero-glow{position:absolute;top:-90px;right:-40px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(41,182,246,.5),transparent 68%);filter:blur(10px);pointer-events:none}
.ib-hero-glow::after{content:"";position:absolute;left:-140px;top:40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(149,197,248,.4),transparent 70%)}
.ib-hero-l{position:relative;z-index:1;display:flex;align-items:center;gap:16px;flex:1 1 320px;min-width:0}
.ib-hero-ic{flex:none;width:52px;height:52px;border-radius:15px;background:rgba(255,255,255,.14);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ib-hero-ic .ic{width:25px;height:25px;color:#fff}
.ib-hero-txt{min-width:0}
.ib-hero-txt h3{font-size:20px;font-weight:700;letter-spacing:-.3px;margin-bottom:4px}
.ib-hero-txt p{font-size:12.5px;line-height:1.45;color:#d3e2f8}
.ib-hero-stats{position:relative;z-index:1;display:flex;gap:10px;flex:none}
.ib-hero-stats>div{min-width:74px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);text-align:center}
.ib-hero-stats b{display:block;font-size:20px;font-weight:700;line-height:1}
.ib-hero-stats span{font-size:11px;color:#cfe0f7}
/* toolbar */
.ib-toolbar{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 30px 0}
.ib-tabs{display:inline-flex;padding:4px;gap:2px;background:var(--blue-25);border-radius:12px}
.ib-tabs .fchip{border:none;background:transparent;height:32px;padding:0 16px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted);transition:.15s}
.ib-tabs .fchip.on{background:#fff;color:var(--blue-600);box-shadow:var(--sh-xs)}
.ib-search{flex:1;min-width:180px}
/* category rail */
.ib-cats{flex:none;display:flex;gap:8px;flex-wrap:wrap;padding:16px 30px}
.ib-cat{padding:7px 14px;border-radius:20px;font-size:12.5px;font-weight:500;color:var(--text);background:var(--surface);border:1px solid var(--border);transition:.14s;white-space:nowrap}
.ib-cat:hover{border-color:var(--blue-400);color:var(--blue-600)}
.ib-cat.on{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
/* list */
.ib-list{display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding:2px 30px 26px;flex:1}
.ib-card{position:relative;flex:none;display:flex;gap:16px;padding:18px 20px 18px 24px;border:1px solid var(--border-2);border-radius:16px;background:var(--surface);overflow:hidden;transition:.16s}
.ib-card:hover{border-color:var(--blue-400);box-shadow:var(--sh-sm);transform:translateY(-1px)}
.ib-card-bar{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--muted)}
.ib-st-new .ib-card-bar{background:#9aa7b8}
.ib-st-progress .ib-card-bar{background:var(--gold)}
.ib-st-approved .ib-card-bar,.ib-st-done .ib-card-bar{background:var(--green)}
.ib-card-main{flex:1;min-width:0}
.ib-card-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.ib-card-title{font-size:15px;font-weight:600;color:var(--ink)}
.ib-card-top .chip{height:24px;font-size:12px}
.ib-card-text{font-size:13px;color:var(--text);line-height:1.55;margin-bottom:12px}
.ib-card-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.ib-avatar{width:22px;height:22px;border-radius:50%;background:var(--grad-brand);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.ib-author{font-weight:500;color:var(--text)}
.ib-cat-tag{padding:2px 9px;border-radius:6px;background:var(--blue-25);color:var(--blue-600);font-size:11px;font-weight:500}
.ib-dot{color:var(--border-2)}
/* upvote pill */
.ib-vote{flex:none;align-self:center;width:64px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 0;border-radius:14px;border:1.5px solid var(--border);background:var(--surface);color:var(--blue-600);transition:.15s;cursor:pointer}
.ib-vote:hover:not(:disabled){border-color:var(--blue-600);background:var(--blue-25);transform:translateY(-1px)}
.ib-vote-ic{font-size:12px;line-height:1;transition:transform .15s}
.ib-vote:hover:not(:disabled) .ib-vote-ic{transform:translateY(-2px)}
.ib-vote b{font-size:19px;font-weight:700;line-height:1.1}
.ib-vote-lbl{font-size:10.5px;color:var(--muted)}
.ib-vote.voted{border-color:var(--green);background:#eafaf0;color:var(--green);cursor:default}
.ib-vote.voted .ib-vote-lbl{color:var(--green)}
.ib-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;color:var(--muted);text-align:center}
.ib-empty .ic{width:30px;height:30px}
@media (max-width:720px){
.ib-hero{padding:22px}
.ib-hero-stats{width:100%}
.ib-hero-stats>div{flex:1}
.ib-toolbar,.ib-cats,.ib-list{padding-left:18px;padding-right:18px}
.ib-card{flex-direction:row}
.ib-vote{width:56px}
}
.video-modal{display:flex;flex-direction:column}
.vm-player{position:relative;aspect-ratio:16/9;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;overflow:hidden}
.vm-bg{position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(149,197,248,.4),transparent 60%),radial-gradient(circle at 70% 80%,rgba(41,182,246,.4),transparent 55%)}
.vm-play{position:relative;width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;transition:.2s var(--ease-spring)}
.vm-play .ic{width:42px;height:42px;margin-left:3px}
.vm-play:hover{transform:scale(1.08);background:rgba(255,255,255,.32)}
.vm-play.playing{width:56px;height:56px;opacity:0}
.vm-player:hover .vm-play.playing{opacity:1}
.vm-bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.25)}
.vm-progress{display:block;height:100%;width:0;background:#fff;transition:width .2s linear}
.vm-time{position:absolute;bottom:14px;left:16px;color:#fff;font-size:13px;font-weight:500;background:rgba(8,16,40,.5);padding:3px 10px;border-radius:6px}
.vm-close{position:absolute;top:14px;right:14px;background:rgba(8,16,40,.4);color:#fff}
.vm-close:hover{background:rgba(8,16,40,.6);color:#fff}
.vm-info{padding:22px}
.vm-info h3{font-size:20px;font-weight:700;margin-bottom:10px}
.vm-info .chip .ic{width:13px;height:13px}
.cm-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.cm-head h3{font-size:20px;font-weight:700;line-height:1.28;text-align:left}
.cm-close{flex:none;width:34px;height:34px;border-radius:10px;color:var(--muted);display:flex;align-items:center;justify-content:center}
.cm-close:hover{background:var(--blue-25);color:var(--ink)}
.cm-close .ic{width:18px;height:18px}
.cm-suggest{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.cm-suggest .chip{cursor:pointer}
.cm-suggest .chip:hover{background:var(--blue-100)}
.cm-foot{display:flex;gap:12px;justify-content:flex-end}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.settings-toggles{display:flex;flex-direction:column;gap:4px;margin:6px 0 20px;padding-top:8px;border-top:1px solid var(--border)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-size:14px;color:var(--text)}
.toggle{width:44px;height:26px;border-radius:20px;background:var(--border);position:relative;transition:.2s var(--ease);flex:none}
.toggle.on{background:var(--grad-primary)}
.toggle-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--sh-xs);transition:.22s var(--ease-spring)}
.toggle.on .toggle-knob{left:21px}
.date-ranges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.modal .field input[type="date"]{cursor:pointer}
@media (max-width:560px){.two-col{grid-template-columns:1fr}}
.confirm{text-align:center}
.confirm-ic{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;background:var(--blue-50);color:var(--blue-600)}
.confirm-ic.danger{background:var(--red-bg);color:var(--red)}
.confirm-ic.danger-grad{background:var(--grad-danger);color:#fff}
.confirm-ic .ic{width:26px;height:26px}
.confirm h3{font-size:20px;font-weight:700;margin-bottom:8px}
.confirm p{color:var(--text);font-size:14px;line-height:1.5;margin-bottom:24px}
.confirm-btns{display:flex;gap:12px}
.confirm-btns .btn{flex:1}
.congrats{text-align:center}
.cg-mascot{width:150px;height:150px;object-fit:contain;margin:0 auto 6px;animation:pop .5s var(--ease-spring)}
.congrats h2{font-size:26px;font-weight:800;letter-spacing:-.5px}
.congrats p{color:var(--text);font-size:15px;line-height:1.55;margin:10px 0 22px}
.cg-stats{display:flex;gap:12px;margin-bottom:24px}
.cg-stats div{flex:1;background:var(--blue-25);border-radius:var(--r-md);padding:14px 8px}
.cg-stats b{font-size:22px;font-weight:800;color:var(--blue-600);display:block}
.cg-stats span{font-size:12px;color:var(--muted)}
/* ==================== CONTACT CHANNELS MODAL (перед стартом теста) ==================== */
.cc-modal{position:relative}
.cc-x{position:absolute;top:0;right:0}
.cc-title{font-size:18px;font-weight:700;text-align:center;margin:0 0 20px;padding-right:28px;color:var(--ink)}
.cc-rows{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.cc-row{border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px}
.cc-head{display:flex;align-items:center;gap:10px}
.cc-badge{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.cc-label{flex:1;font-size:15px;font-weight:600;color:var(--ink)}
.cc-switch{position:relative;display:inline-block;width:44px;height:24px;flex:none;cursor:pointer}
.cc-switch input{opacity:0;width:0;height:0;position:absolute}
.cc-slider{position:absolute;inset:0;background:var(--border);border-radius:var(--r-pill);transition:.2s;pointer-events:none}
.cc-slider:before{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.2s;box-shadow:var(--sh-xs)}
.cc-toggle:checked + .cc-slider{background:var(--ink)}
.cc-toggle:checked + .cc-slider:before{transform:translateX(20px)}
.cc-field{margin-top:12px}
.cc-hint{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.cc-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:14px;background:var(--surface-2);color:var(--ink)}
.cc-phone-wrap{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:var(--r-sm);padding:0 12px;background:var(--surface-2)}
.cc-phone-prefix{font-size:14px;color:var(--text);white-space:nowrap}
.cc-phone-wrap .cc-input{border:none;background:none;padding:10px 0}
.cc-error{background:var(--red-bg);color:var(--red);font-size:13px;border-radius:var(--r-sm);padding:10px 12px;margin-bottom:14px;text-align:center}
.cc-row-invalid{border-color:var(--red)}
.cc-row-invalid .cc-input,.cc-row-invalid .cc-phone-wrap{border-color:var(--red);background:var(--red-bg)}
/* ==================== MOBILE "ЕЩЁ" BOTTOM SHEET ==================== */
/* reached from the bottom nav's kebab slot once the sidebar (and its
Яндекс.Карты/Партнёры/Обучение/Профиль/Выйти) is hidden under 820px */
.more-sheet-layer{position:fixed;inset:0;z-index:290}
.more-sheet-scrim{position:absolute;inset:0;background:rgba(8,16,40,.42);backdrop-filter:blur(2px);opacity:0;transition:.28s}
.more-sheet-layer.open .more-sheet-scrim{opacity:1}
.more-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 0 0;
padding:10px 10px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -18px 48px rgba(15,42,92,.16);
transform:translateY(100%);transition:transform .32s var(--ease-out)}
.more-sheet-layer.open .more-sheet{transform:none}
.more-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--border);margin:4px auto 12px}
.more-sheet-item{display:flex;align-items:center;gap:14px;width:100%;padding:13px 14px;border-radius:12px;font-size:15px;font-weight:500;color:var(--ink)}
.more-sheet-item .ic{width:20px;height:20px;color:var(--muted);flex:none}
.more-sheet-item:hover,.more-sheet-item:active{background:var(--blue-25)}
.more-sheet-item.danger{color:var(--red)}
.more-sheet-item.danger .ic{color:var(--red)}
.more-sheet-item.danger:hover{background:var(--red-bg)}
.more-sheet-div{height:1px;background:var(--border-2);margin:6px 4px}
/* ==================== DRAWER ==================== */
.drawer-layer{position:fixed;inset:0;z-index:280}
.drawer-scrim{position:absolute;inset:0;background:rgba(8,16,40,.42);backdrop-filter:blur(2px);opacity:0;transition:.28s}
.drawer-layer.open .drawer-scrim{opacity:1}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(460px,92vw);background:#fff;box-shadow:-18px 0 48px rgba(15,42,92,.16);padding:26px;overflow-y:auto;transform:translateX(100%);transition:transform .32s var(--ease-out)}
.drawer-layer.open .drawer{transform:none}
.dr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.dr-eyebrow{font-size:12px;font-weight:600;color:var(--blue-600);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.dr-title{font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1.2}
.dr-badges{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-size:14px}
.dr-pos{height:28px;font-size:14px;padding:0 12px}
.dr-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.dr-metrics div{background:var(--blue-25);border-radius:var(--r-md);padding:14px}
.dr-metrics span{font-size:12px;color:var(--muted);display:block;margin-bottom:4px}
.dr-metrics b{font-size:22px;font-weight:700;color:var(--ink)}
.dr-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:18px;margin-bottom:18px}
.dr-months{display:flex;justify-content:space-between;margin-top:4px}
.dr-months span{font-size:10px;color:var(--muted)}
.pc-axis{font-size:11px;fill:var(--muted)}
.dr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--border-2);font-size:14px}
.dr-row b{color:var(--ink)}
.dr-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}
[data-kw]{cursor:pointer}
.kw-row[data-kw]:hover{background:var(--blue-25);border-radius:6px}
/* ==================== PAYMENT ==================== */
.pay-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.tariff-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tariff{padding:26px;position:relative;display:flex;flex-direction:column}
.tariff.accent{border:2px solid var(--blue-600);box-shadow:var(--sh-blue)}
.tariff-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:#5c4300;font-size:12px;font-weight:600;padding:5px 14px;border-radius:var(--r-pill);display:flex;align-items:center;gap:5px}
.tariff-flag .ic{width:13px;height:13px}
.tariff h3{font-size:18px;font-weight:700}
.tariff-price{font-size:30px;font-weight:800;letter-spacing:-1px;margin:12px 0 20px}
.tariff-price span{display:block;font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:2px}
.tariff-list{display:flex;flex-direction:column;gap:11px;margin-bottom:24px;flex:1}
.tariff-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text)}
.tariff-list .ic{width:16px;height:16px;color:var(--green);flex:none;margin-top:1px}
/* active subscription cards (Активные тарифы · по каждому проекту) */
.sub{padding:22px;display:flex;flex-direction:column;gap:14px}
.sub-head{display:flex;align-items:center;gap:10px}
.sub-dom{font-size:17px;font-weight:700}
.sub-plan{height:24px;font-size:12px}
.sub-bar{height:8px;border-radius:20px;background:#eef2fb;overflow:hidden}
.sub-bar-fill{display:block;height:100%;border-radius:20px;background:var(--gold)}
.sub-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.sub-meta .muted{font-size:13px}
.sub-price{text-align:right;line-height:1.35}
.sub-price b{font-size:16px;font-weight:700;color:var(--ink)}
.sub-price span{display:block;font-size:13px;color:var(--muted)}
.sub-renew{margin-top:2px}
.pay-filters{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.date-field{display:flex;flex-direction:column;gap:6px}
.date-field label{font-size:12px;color:var(--muted)}
.date-field .input-wrap{width:150px}
.date-field .input{height:34px;font-size:13px}
.pay-foot{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-top:18px;margin-top:6px;border-top:1px solid var(--border)}
.pay-foot #acctSelect .ic{width:16px;height:16px;color:var(--blue-600)}
.pf-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pf-row .muted{font-size:13px;max-width:320px}
.pay-dl{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-sm);background:var(--blue-50);color:var(--blue-600);font-size:12px;font-weight:500;border:none}
.pay-dl:hover{background:var(--blue-100)}
/* ==================== SUPPORT ==================== */
.sup-wrap{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start;height:calc(100vh - var(--topbar-h) - 64px)}
.sup-list{padding:16px;display:flex;flex-direction:column;overflow:hidden;height:100%}
.sup-new{margin-bottom:12px;flex:none}
.sup-search{width:100%;margin-bottom:14px}
.sup-tickets{display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.sup-ticket{text-align:left;padding:14px;border-radius:var(--r-md);border:1px solid transparent;transition:.16s}
.sup-ticket:hover{background:var(--blue-25)}
.sup-ticket.on{background:var(--blue-50);border-color:var(--blue-100)}
.st-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.st-id{font-size:13px;font-weight:600;color:var(--muted)}
.st-badge{height:22px;font-size:12px}
.st-title{font-size:14px;font-weight:500;color:var(--ink)}
.st-time{font-size:12px;color:var(--muted);margin-top:4px}
.sup-chat{display:flex;flex-direction:column;height:100%;overflow:hidden}
.sc-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}
.sc-head-title{flex:1;min-width:0}
.sc-title{font-size:16px;font-weight:700}
.sc-sub{font-size:13px;color:var(--muted)}
.sc-body{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:16px;background:var(--blue-25)}
.chat-row{display:flex;gap:10px;max-width:75%}
.chat-row.me{align-self:flex-end;flex-direction:row-reverse}
.chat-av{width:32px;height:32px;border-radius:50%;background:var(--grad-brand);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.bubble{background:#fff;border-radius:16px;border-top-left-radius:4px;padding:12px 15px;box-shadow:var(--sh-xs)}
.chat-row.me .bubble{background:var(--grad-primary);color:#fff;border-top-left-radius:16px;border-top-right-radius:4px}
.bubble p{font-size:14px;line-height:1.45}
.bubble time{display:block;font-size:11px;color:var(--muted);margin-top:5px}
.chat-row.me .bubble time{color:rgba(255,255,255,.7)}
.chat-typing{background:#fff;border-radius:16px;border-top-left-radius:4px;padding:14px 16px;display:flex;gap:5px;box-shadow:var(--sh-xs)}
.chat-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:typing 1.2s infinite}
.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.sc-input{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--border);background:#fff}
.sc-input .input{flex:1;height:44px}
.sc-input .btn{width:48px;padding:0}
.sc-input .btn .ic{width:18px;height:18px}
/* ==================== LEARNING ==================== */
.lc-progress{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 26px;margin-bottom:20px}
.lcp-main{flex:1;min-width:0}
.lcp-main h3{font-size:18px;font-weight:700}
.lcp-main>.muted{font-size:14px}
.lcp-bar-row{display:flex;align-items:center;gap:14px;margin-top:14px}
.lcp-track{flex:1;height:10px;border-radius:20px;background:var(--blue-25);overflow:hidden}
.lcp-fill{display:block;height:100%;border-radius:20px;background:var(--grad-primary)}
.lcp-pct{font-size:15px;font-weight:700;color:var(--blue-600)}
.lcp-badges{display:flex;flex-direction:column;gap:10px;align-items:flex-end;flex:none}
.lc-cats{margin-bottom:22px}
.lc-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-bottom:10px;align-items:stretch}
.lc-featured{overflow:hidden;display:flex;flex-direction:column}
.lcf-video{flex:1;min-height:160px;background:var(--grad-brand);position:relative;display:flex;align-items:center;justify-content:center}
.lcf-play{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);color:#fff;display:flex;align-items:center;justify-content:center;transition:.2s}
.lcf-play .ic{width:36px;height:36px}
.lcf-play:hover{transform:scale(1.08);background:rgba(255,255,255,.3)}
.lcf-time{position:absolute;bottom:14px;right:14px;background:rgba(8,16,40,.7);color:#fff;font-size:12px;padding:4px 8px;border-radius:6px}
.lcf-new{position:absolute;top:14px;left:14px;background:#fff;color:var(--blue-600)}
.lcf-new .ic{width:13px;height:13px;color:#FBB500}
.lcf-body{padding:22px}
.lcf-body h3{font-size:20px;font-weight:700;margin-bottom:8px}
.lcf-body p{color:var(--text);font-size:14px;line-height:1.5;margin-bottom:14px}
.lcf-meta{display:flex;align-items:center;gap:12px}
.lcf-meta .chip .ic{width:13px;height:13px}
.lc-course{display:flex;flex-direction:column}
.lcc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.lcc-list{display:flex;flex-direction:column;gap:8px}
.lcc-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-md);transition:.16s}
.lcc-item:hover{background:var(--blue-25)}
.lcc-item.active{background:var(--blue-50)}
.lcc-n{width:30px;height:30px;border-radius:50%;background:#eef2fb;color:var(--muted);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.lcc-item.active .lcc-n{background:var(--blue-600);color:#fff}
.lcc-n .ic{width:15px;height:15px}
.lcc-info{flex:1;min-width:0}
.lcc-info b{display:block;font-size:14px;font-weight:500}
.lcc-type{height:20px;font-size:11px;margin-top:2px}
.lcc-done{color:var(--green)}
.lcc-done .ic{width:20px;height:20px}
.art-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:16px}
@media (max-width:1100px){.art-grid{grid-template-columns:repeat(2,1fr)}}
.art-card{padding:22px;display:flex;flex-direction:column;transition:.2s}
.art-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--blue-100)}
.art-ic{width:44px;height:44px;border-radius:12px;background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.art-ic .ic{width:22px;height:22px}
.art-card h4{font-size:16px;font-weight:600;margin-bottom:6px}
.art-card p{font-size:13px;color:var(--text);line-height:1.45;flex:1;margin-bottom:16px}
.art-foot{display:flex;align-items:center;gap:8px}
.art-foot .muted{font-size:12px}
.art-arrow{margin-left:auto;color:var(--muted)}
.art-arrow .ic{width:15px;height:15px}
.art-card:hover .art-arrow{color:var(--blue-600);transform:translateX(3px)}
/* ==================== PROFILE ==================== */
.prof-wrap{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:24px;align-items:start}
.prof-main,.prof-side{padding:28px}
/* --- left card: identity --- */
.prof-id{display:flex;flex-direction:column;align-items:center;text-align:center}
.prof-avatar-wrap{position:relative;width:104px;height:104px}
.prof-avatar{width:104px;height:104px;border-radius:50%;background:var(--blue-100);color:var(--blue-600);font-size:42px;font-weight:600;display:flex;align-items:center;justify-content:center}
.prof-avatar-edit{position:absolute;right:2px;bottom:2px;width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--border);color:var(--blue-600);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-xs)}
.prof-avatar-edit .ic{width:15px;height:15px}
.prof-avatar-edit:hover{background:var(--blue-50)}
.prof-name{font-size:20px;font-weight:700;margin-top:14px}
input.prof-name{border:none;background:transparent;outline:none;color:inherit;font-family:inherit}
input.prof-name:focus{background:var(--surface-2);border-radius:8px}
.prof-email{font-size:14px;margin-top:2px}
.prof-divider{height:1px;background:var(--border);margin:20px 0}
.prof-contacts h3{font-size:17px;font-weight:600}
.prof-contacts-sub{font-size:13px;margin:4px 0 16px}
/* contact rows */
.contact-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);border-radius:var(--r-lg);padding:12px 16px;margin-bottom:10px}
.ci-info{display:flex;flex-direction:column;min-width:0}
.ci-label{font-size:12px;color:var(--muted);line-height:1.4}
.ci-info b{font-size:15px;font-weight:600}
.ci-input{font-size:15px;font-weight:600;border:none;background:transparent;outline:none;padding:0;color:inherit;font-family:inherit;width:180px;max-width:100%}
.ci-input:focus{background:var(--surface-3,#fff);border-radius:6px;padding:2px 6px;margin:-2px -6px}
.ci-input::placeholder{color:var(--muted);font-weight:400}
.ci-badge{height:30px;font-size:13px}
.chip .ic{width:14px;height:14px}
.ci-confirm{background:#fff1e6;color:#f0820a;font-size:13px;font-weight:500;padding:7px 16px;border-radius:var(--r-pill);white-space:nowrap}
.ci-confirm:hover{background:#ffe6d1}
.prof-add{display:block;width:100%;background:var(--surface-2);color:var(--text);font-weight:500;font-size:14px;padding:14px;border-radius:var(--r-lg);text-align:center;margin:4px 0 16px}
.prof-add:hover{background:#eef2fb}
.prof-save{height:50px}
/* --- right card: accounts --- */
.prof-side-head h3{font-size:18px;font-weight:600}
.prof-side-head .muted{font-size:13px;margin-top:2px}
.acc-list{display:flex;flex-direction:column}
.acc-item{display:flex;align-items:center;gap:12px;padding:14px 0;position:relative}
.acc-item+.acc-item{border-top:1px solid var(--border-2)}
.acc-av{width:40px;height:40px;border-radius:50%;background:var(--blue-50);color:var(--blue-600);font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none}
.acc-info{flex:1;min-width:0}
.acc-info b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-info span{font-size:13px}
/* groups role pill + edit/remove so they can drop to their own line as one
unit on narrow screens instead of squeezing .acc-info down to nothing */
.acc-actions{display:flex;align-items:center;gap:12px;flex:none}
.acc-role{font-size:13px;font-weight:500;padding:6px 14px;border-radius:var(--r-pill);white-space:nowrap}
.acc-role-owner{background:var(--blue-50);color:var(--blue-600)}
.acc-role-edit{background:var(--green-bg);color:var(--green)}
.acc-role-view{background:#eef2fb;color:var(--muted-2)}
.acc-edit{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted-2);white-space:nowrap}
.acc-edit .ic{width:14px;height:14px}
.acc-edit:hover{color:var(--blue-600)}
.acc-x{width:26px;height:26px;border-radius:8px;color:var(--muted);display:flex;align-items:center;justify-content:center;flex:none}
.acc-x:hover{background:var(--red-bg);color:var(--red)}
.acc-x .ic{width:15px;height:15px}
/* mobile-only kebab replacing acc-edit+acc-x (see PASS4) — hidden on desktop */
.acc-more{display:none}
.acc-more:hover{background:var(--blue-100)}
.acc-more .ic{width:18px;height:18px}
.acc-foot{display:flex;gap:14px;margin-top:2px}
.acc-foot .btn{flex:1}
/* charts */
.ch-grid{stroke:var(--border-2);stroke-width:1}
/* interactive chart tooltips */
.chart-wrap{position:relative}
.ch-cursor{position:absolute;top:0;bottom:0;width:1px;background:var(--ch-color);opacity:0;pointer-events:none;transition:opacity .12s}
.ch-marker{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--ch-color);transform:translate(-50%,-50%);opacity:0;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:opacity .12s;z-index:2}
.ch-tip{position:absolute;transform:translate(-50%,-100%);background:var(--ink);color:#fff;padding:6px 10px;border-radius:8px;line-height:1.25;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;box-shadow:var(--sh-md);z-index:3}
.ch-tip-val{display:block;font-size:13px;font-weight:700}
.ch-tip-lbl{font-size:11px;opacity:.72}
.ch-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink)}
.chart-wrap.ch-hover .ch-cursor,.chart-wrap.ch-hover .ch-marker,.chart-wrap.ch-hover .ch-tip{opacity:1}
.ch-line{stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 1.4s var(--ease-out) forwards}
.ch-area{opacity:0;animation:fadeIn .8s .5s forwards}
.ch-dot{opacity:0;animation:fadeIn .3s forwards;animation-delay:calc(1s + var(--i)*.06s)}
@keyframes draw{to{stroke-dashoffset:0}}
.ring-val{transition:stroke-dashoffset 1s var(--ease-out)}
.ring-lbl{font-size:15px;font-weight:700;fill:var(--blue-600)}
/* ==================== RESPONSIVE ==================== */
/* project header is at capacity by ~1440px (back+domain+2 chips+region+paid-chip+actions);
drop the region selector first on narrower desktop widths — it's the newest, most
dispensable piece — so the domain title and paid-until date never get crowded out */
@media (max-width:1400px){
.proj-region{display:none}
}
@media (max-width:1180px){
.dash-grid,.ov-grid,.comp-grid,.lc-grid,.prof-wrap,.sup-wrap{grid-template-columns:1fr}
.of-cards{grid-template-columns:1fr}
.sup-wrap{height:auto}
.sup-list{height:auto;max-height:340px}
.sup-chat{height:70vh}
}
@media (max-width:900px){
.auth{grid-template-columns:1fr}
/* form first (actionable), marketing panel below — preserves all desktop content on mobile */
.auth-form{order:1}
.auth-brand{order:2;min-height:0;padding:34px 22px 40px}
.auth-brand .ab-inner{height:auto;max-width:none}
.auth-brand .ab-logo{margin-bottom:26px}
.auth-brand .ab-list{margin-bottom:0}
.ab-title{font-size:26px;margin:0 0 12px}
.ab-sub{font-size:16px;margin-bottom:22px}
.ob-body{grid-template-columns:1fr}
.ob-result{grid-template-columns:1fr}
.kpi-row,.q-stats,.tariff-row{grid-template-columns:repeat(2,1fr)}
.lc-progress{flex-direction:column;align-items:stretch;gap:18px}
.lcp-badges{align-items:flex-start}
/* длинный текст плашки-бонуса раньше не переносился (chip — white-space:nowrap,
flex:none) и вылезал за карточку; здесь разрешаем перенос и растягиваем
карточку по высоте под вторую строку вместо того чтобы всё утискивать в одну.
Вертикальный padding (у базового .chip его нет, только 0 12px по бокам) и
чуть менее круглые углы — иначе 2-строчный текст внутри полной pill-формы
утыкается в закруглённые торцы сверху/снизу и выглядит «зажатым» */
/* align-items:center (not flex-start) — the icon/dot should sit centred on the
whole pill's height, including the green "3 урока завершено" badge, which
stays single-line here and would otherwise have its dot pulled to the top */
.lcp-badges .chip{white-space:normal;max-width:100%;height:auto;min-height:28px;line-height:1.45;text-align:left;padding:10px 14px;border-radius:14px;align-items:center}
}
@media (max-width:820px){
.sidebar{display:none}
.main{margin-left:0}
.bottom-nav{display:flex}
.main .content{padding-bottom:96px}
.sup-wrap{padding-bottom:96px}
.topbar{padding-left:16px}
.content{padding:18px 16px 96px}
.proj-slider::-webkit-scrollbar{height:0}
.proj-card{flex:0 0 300px;scroll-snap-align:start}
.s-nav{display:none}
.ob-head{padding:0 16px}
.ob-body{padding:24px 16px}
.ob-main{padding:24px}
/* projects toolbar: grid/list toggle is barely distinguishable once the list
is already a single column, so drop it to give the page title room */
.view-toggle{display:none}
/* project topbar: "Продлить"/"Скачать аудит"/"Удалить проект" collapse into
one kebab button — five icon buttons plus back+domain never fit a phone row */
.proj-tb-action{display:none}
.tb-icon-more{display:flex}
/* the status/niche chips + "Оплачен до" chip are the next things to go — even
with the kebab freeing up room, they still overflow behind tb-right and get
visually clipped by it between roughly 560-820px */
.proj-head .chip,.proj-head .paid-chip{display:none}
}
@media (max-width:560px){
.kpi-row,.q-stats,.pc-stats,.cg-stats{grid-template-columns:repeat(2,1fr)}
.tariff-row{grid-template-columns:1fr}
.rs-title{font-size:34px}
.rs-num{font-size:48px}
.tb-title{font-size:18px}
.proj-list.grid{grid-template-columns:1fr}
.rs-mini{flex-wrap:wrap;gap:16px}
/* auth mobile */
.auth-form{padding:32px 20px}
.af-title{font-size:26px}
.af-sub{font-size:16px;margin-bottom:26px}
.af-social{gap:10px}
.social-btn{width:52px;height:52px}
/* topbar mobile: all action buttons become icon-only */
.topbar{padding:0 14px;gap:6px}
.tb-right{gap:6px}
.topbar .chip,.pay-foot .pf-right .muted,.tb-right>.btn-ghost,.tb-cmd,.paid-chip,.proj-region{display:none}
.tb-right>.btn{padding:0;width:38px;font-size:0;flex:none}
.tb-right>.btn .ic{margin:0;width:18px;height:18px}
.project-select{max-width:120px}
.project-select .select-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.content{padding:16px 14px 40px}
.proj-tabs{padding:12px 14px;top:0}
.of-cards{gap:32px}
.of-flag,.tariff-flag{white-space:nowrap}
.kw-h{font-size:11px;gap:6px}
.kw-h span:last-child,.kw-row span:last-child{text-align:right}
/* cards: action buttons wrap below title */
.card-head{flex-wrap:wrap}
.card-head>.btn{margin-top:2px}
.prof-id{flex-wrap:wrap}
.prof-id>div:nth-child(2){flex-basis:calc(100% - 80px)}
.prof-edit{margin-left:80px}
.contact-item{flex-wrap:wrap;gap:10px}
.contact-item .chip,.contact-item .btn{margin-left:52px}
/* accounts row: role pill + edit/remove drop to their own line, right-aligned,
instead of squeezing the name/email column down to nothing */
.acc-item{flex-wrap:wrap;row-gap:8px}
.acc-actions{flex-basis:100%;justify-content:flex-end}
.acc-foot{flex-direction:column}
}
/* ==================== MOBILE: Регистрация / Онбординг (Добавление · Анализ · Результат) ====================
Цель: сохранить ВЕСЬ контент десктопа, но разложить его удобно и «под палец» на телефоне.
Шапка онбординга перегружена (лого + 3 шага + Назад) — раскладываем в два ряда, ничего
не перекрывается, всё тапабельно (мин. высота нажатия ≥44px). */
@media (max-width:600px){
/* ---- Шапка онбординга: 2 ряда ---- */
.ob-head{
height:auto;min-height:56px;flex-wrap:wrap;
padding:9px 16px;row-gap:8px;column-gap:12px;
}
.ob-logo{order:1;font-size:17px;white-space:nowrap;flex:none}
.ob-logo .ic,.ob-logo svg{width:24px;height:24px}
.ob-back{
order:2;margin-left:auto;flex:none;
min-height:40px;padding:0 10px;border-radius:10px;
}
.ob-back:active{background:var(--blue-25)}
.ob-steps{
order:3;width:100%;justify-content:center;gap:6px;
padding-top:8px;border-top:1px solid var(--border);
}
/* Равные колонки: кружки распределяются с одинаковым шагом,
подписи (в т.ч. длинный «Результат») центрируются под кружком и не «уводят» шаг вправо */
.ob-step{flex:1 1 0;min-width:0;font-size:11.5px}
.ob-dot{width:24px;height:24px;font-size:12px}
.ob-line{flex:none;width:36px;margin-top:11px}
/* ---- Тела онбординга: компактнее, крупные заголовки ужимаем ---- */
.ob-body{padding:20px 14px;gap:16px}
.ob-main{padding:22px 18px}
.ob-title{font-size:25px;line-height:1.18}
.ob-lead{font-size:15px;margin-bottom:20px}
.ob-aside{padding:22px 18px}
/* Анализ */
.ob-analysis{padding:18px 14px}
.an-card{padding:26px 18px}
.an-box{max-width:none;margin:14px auto 14px}
.an-box-in b{font-size:32px}
/* Шаги анализа: на мобильной — один столбец, как в оригинале */
.an-steps{grid-template-columns:1fr;grid-auto-flow:row}
.an-step{padding:11px 13px}
/* Результат / запуск на тест */
.ob-result{padding:20px 14px;gap:4px}
.rs-title{font-size:31px}
.rs-num{font-size:44px}
/* небольшой отступ сверху, чтобы плашка 48 200 не «прилипала» к статистике (10 конкурентов…) над ней */
.rs-big{padding:24px 20px;margin-top:22px}
.rs-mini{gap:14px 22px}
/* График «Динамика спроса в нише»: без искажений (пропорциональный масштаб),
месяцы — равные колонки по центру, все 12 читаемы и не наезжают друг на друга.
На узких экранах (~320px) у карточки уже отступы, поэтому им тоже урезаем горизонтальный паддинг. */
.rs-chart{padding-left:14px;padding-right:14px}
.rs-chart .linechart{height:auto !important;aspect-ratio:520/150}
.rs-months{gap:1px}
.rs-months span{flex:1 1 0;min-width:0;text-align:center;font-size:9.5px;letter-spacing:-.2px;color:var(--muted);white-space:nowrap}
/* 12 месяцев подряд на узком экране всё равно сливаются в кашу — оставляем
подписи через один (Янв, Мар, Май…), слот скрытых остаётся в layout
(visibility, не display), поэтому видимые не съезжают со своих мест */
.rs-months span:nth-child(even){visibility:hidden}
/* ---- Кнопки/тапы под палец на всех этих экранах ---- */
.auth-form .btn-lg,.ob .btn-lg,.ob .btn{min-height:52px}
.btn-block{width:100%}
/* select и поле — комфортная высота нажатия */
.ob .select,.ob .input-wrap{min-height:52px}
/* ---- Регистрация: маркетинг-панель под формой (весь контент десктопа сохранён) ---- */
.auth-form{padding:30px 18px 26px}
.af-inner{max-width:none}
.ab-list li{font-size:13.5px;padding:12px 14px}
.ab-quote{margin-top:26px}
.social-btn{width:52px;height:52px}
.af-social{gap:9px}
}
/* ==================== ПАРТНЁРСТВО ==================== */
.partners-wrap{position:relative}
/* мягкие синие пятна-подсветки под сеткой — дают стеклу что «преломлять».
Живёт внутри .partner-grid (не .partners-wrap), иначе пятна утекают вверх
и просвечивают за заголовком/поиском/чипсами категорий, а не только за
карточками — .partner-grid уже position:relative, а position:absolute
исключает этот div из grid-раскладки, так что он не занимает ячейку. */
.partners-bg{position:absolute;inset:-30px 0 0;z-index:0;pointer-events:none;overflow:hidden}
.partners-bg span{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5}
.partners-bg span:nth-child(1){width:360px;height:360px;top:120px;left:-70px;background:radial-gradient(circle,#93c1ff,transparent 70%)}
.partners-bg span:nth-child(2){width:420px;height:420px;top:520px;right:-90px;background:radial-gradient(circle,#7fd0ff,transparent 70%);opacity:.4}
.partners-bg span:nth-child(3){width:300px;height:300px;top:960px;left:30%;background:radial-gradient(circle,#a9c7ff,transparent 70%);opacity:.38}
.partners-intro{position:relative;z-index:1}
.partners-toolbar{position:relative;z-index:1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 4px}
.partners-toolbar .search-box{width:280px}
.partners-toolbar .filter-chips{margin-left:auto}
.partner-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px}
@media (max-width:1320px){.partner-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1000px){.partner-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.partner-grid{grid-template-columns:1fr}}
/* --- Стеклянная плашка: объёмная стеклянная плита с полированной фаской --- */
/* Плоская карточка в общем стиле сайта: без обводки, светло-голубая заливка
«как светлое пятно на баннере» + мягкое размытое свечение цвета баннера (тёмно-синее). */
/* портретная карточка (выше, чем шире), без тени по умолчанию — тень-свечение
только при наведении; в покое карточка «чисто на фоне» за счёт светло-голубой заливки */
.pcard{
position:relative;border-radius:22px;
/* более прозрачная заливка (фон страницы проступает сквозь) + тонкая синяя обводка;
свечение по-прежнему исходит из центра — из-под логотипа, а не от верхнего края */
background:
radial-gradient(62% 40% at 50% 31%, rgba(182,212,248,.55) 0%, rgba(182,212,248,0) 60%),
linear-gradient(180deg, rgba(233,243,255,.5) 0%, rgba(238,246,255,.5) 100%);
border:1px solid rgba(26,105,240,.22);
box-shadow:none;
transition:transform .26s var(--ease-out), box-shadow .26s var(--ease-out), border-color .26s var(--ease-out);
}
/* lift+glow only on devices with real hover — on touchscreens the card stays
"hovered" after a tap (no pointer to move away), so the soft 56px-blur shadow
would linger, bleed past the card edges and look like a permanent smudge */
@media (min-width:821px){
.pcard:hover{transform:translateY(-5px); border-color:rgba(26,105,240,.4);
box-shadow:
0 26px 56px -18px rgba(14,71,168,.5),
0 10px 22px -10px rgba(11,60,146,.3);
}
}
.pcard-face{
position:relative;overflow:hidden;isolation:isolate;
border-radius:22px;min-height:344px;padding:22px 18px 0;
display:grid;grid-template-rows:1fr auto auto;
background:transparent;
}
/* стеклянные наложения из прежнего дизайна больше не нужны */
.pcard-face::before{content:none}
.pcard-glow,.pcard-sheen{display:none}
/* логотип партнёра на белой плашке по центру (заменил глянцевый шар) */
.pcard-logo{
position:relative;z-index:3;align-self:center;justify-self:center;
height:66px;min-width:66px;max-width:88%;
padding:13px 20px;border-radius:18px;background:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 8px 20px -10px rgba(15,42,92,.22), inset 0 0 0 1px rgba(15,42,92,.05);
}
.pcard-logo img{max-height:100%;max-width:100%;width:auto;object-fit:contain;display:block}
/* наш собственный лого-плейсхолдер — квадратный, фиксируем размер, чтобы не растягивался */
.pcard-logo-own{padding:14px}
.pcard-logo-own img{height:40px;width:40px}
/* широкие логотипы-надписи (Bitrix24, amoCRM) — плашка шире, лого во всю ширину */
.pcard-logo-wide{min-width:170px;max-width:92%;padding:16px 22px}
.pcard-logo-wide img{width:100%;height:auto;max-height:40px}
/* название + описание слева снизу */
.pcard-foot{position:relative;z-index:3;text-align:left}
.pcard-foot h3{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.3px;margin-bottom:5px}
.pcard-foot p{font-size:12.5px;color:var(--text);line-height:1.42}
/* синяя плашка-оффер партнёра — full-bleed по низу грани (гасит боковые/нижний
отступ .pcard-face, а overflow:hidden грани скругляет её нижние углы) */
.pcard-offer{position:relative;z-index:3;margin:16px -18px 0;padding:13px 18px;
display:flex;align-items:center;gap:10px;background:var(--grad-panel);color:#fff}
.pcard-offer-ic{flex:none;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.2);
display:flex;align-items:center;justify-content:center}
.pcard-offer-ic .ic{width:15px;height:15px;color:#fff}
.pcard-offer-txt{flex:1;min-width:0;font-size:12.5px;font-weight:600;line-height:1.32}
/* кнопка «Открыть» справа сверху */
/* без border — прозрачная рамка поверх градиента давала тёмную кайму на скруглении;
рим сделан inset-тенью */
/* кнопка «Открыть» — только иконка, в круглой плашке, справа сверху */
.pcard-open{position:absolute;top:14px;right:14px;z-index:4;
display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;
border-radius:50%;color:var(--blue-600);border:none;
background:rgba(255,255,255,.8);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
box-shadow:0 3px 9px rgba(15,42,92,.14), inset 0 0 0 1px rgba(255,255,255,.95), inset 0 1px 1px rgba(255,255,255,.65);
transition:.18s var(--ease)}
.pcard-open .ic{width:18px;height:18px}
.pcard-open:hover{background:var(--grad-primary);color:#fff;
transform:translateY(-1px);box-shadow:var(--sh-blue), inset 0 1px 1px rgba(255,255,255,.3)}
.pcard-open:focus{outline:none}
.pcard-open:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px;border-radius:50%}
.partners-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:56px 0;color:var(--muted)}
/* an author-stylesheet class selector otherwise beats the UA [hidden]{display:none}
rule, so the "nothing found" placeholder rendered permanently visible at the
bottom of the grid regardless of the hidden attribute JS toggles */
.partners-empty[hidden]{display:none}
.partners-empty .ic{width:34px;height:34px}
.partners-empty p{font-size:15px}
/* ==================== ЯНДЕКС.КАРТЫ ==================== */
/* modal shared bits */
.cm-head h3{margin-right:auto}
.cm-back{width:38px;height:38px;border-radius:11px;background:var(--blue-25);color:var(--ink);display:flex;align-items:center;justify-content:center;flex:none;margin-right:12px;transition:.15s}
.cm-back:hover{background:var(--blue-50)}
.cm-back .ic{width:18px;height:18px}
.cm-sub{font-size:14px;color:var(--muted);margin:-8px 0 20px;line-height:1.5}
/* empty state */
.ym-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:58px 24px;margin-top:10px}
.ym-empty-ic{width:78px;height:78px;border-radius:22px;background:var(--blue-25);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.ym-empty-ic svg{width:46px;height:46px}
.ym-empty h3{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:8px}
.ym-empty p{font-size:14.5px;color:var(--muted);max-width:430px;line-height:1.5;margin-bottom:22px}
/* card grid */
.ym-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(345px,1fr));gap:20px;margin-top:20px}
.ym-card{padding:20px;display:flex;flex-direction:column;gap:14px}
.ym-card-top{display:flex;align-items:center;gap:12px}
.ym-card-ic{flex:none;width:42px;height:42px;border-radius:12px;background:#fff;box-shadow:var(--sh-xs),inset 0 0 0 1px var(--border-2);display:flex;align-items:center;justify-content:center}
.ym-card-ic svg{width:27px;height:27px}
.ym-card-id{flex:1;min-width:0}
.ym-card-id b{display:block;font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ym-card-id .muted{font-size:13px}
.ym-card-st{flex:none}
.ym-card-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--blue-600);background:var(--blue-25);padding:8px 11px;border-radius:9px;max-width:100%;transition:.15s}
.ym-card-link:hover{background:var(--blue-50)}
.ym-card-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ym-card-link .ic{flex:none;width:14px;height:14px}
.ym-card-qs{display:flex;flex-wrap:wrap;gap:7px}
.ym-qtag{font-size:12px;color:var(--text);background:var(--surface);border:1px solid var(--border);padding:4px 10px;border-radius:8px}
.ym-qtag-more{color:var(--muted);background:var(--blue-25);border-color:var(--blue-75)}
.ym-card-foot{display:flex;gap:8px;align-items:center;margin-top:2px}
.ym-card-foot .ym-pay{flex:1}
.ym-del{background:var(--red-bg);color:var(--red)}
.ym-del:hover{background:#ffe0d4}
/* field with an inline hint bulb (Ссылка с Яндекс.Карт) */
.ym-inp-hint{position:relative}
.ym-inp-hint .input{padding-right:48px}
.ym-hint-btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:35px;height:35px;border-radius:9px;background:var(--gold-bg);color:#c98a00;display:flex;align-items:center;justify-content:center;transition:.15s}
.ym-hint-btn:hover{background:#ffe9ad;color:#a66d00}
.ym-hint-btn .ic{width:17px;height:17px}
/* «Где взять ссылку» popover (body-anchored, so it never clips inside the modal) */
.ym-lhelp{position:fixed;z-index:2000;width:322px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-lg);padding:18px;opacity:0;transform:translateY(-6px);transition:.16s var(--ease)}
.ym-lhelp.open{opacity:1;transform:none}
.ym-lhelp h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:13px}
.lh-steps{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0 0 14px;padding:0}
.lh-steps li{display:flex;gap:11px}
.lh-n{flex:none;width:22px;height:22px;border-radius:7px;background:var(--blue-600);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.lh-steps p{font-size:13px;line-height:1.45;color:var(--text)}
.lh-ok{border-top:1px solid var(--border-2);padding-top:13px;display:flex;flex-direction:column;gap:8px}
.lh-ok b{font-size:13px;font-weight:600;color:var(--ink)}
.lh-ok span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);word-break:break-all}
.lh-ok span .ic{flex:none;width:15px;height:15px;color:var(--green)}
.lh-note{font-size:12px;color:var(--muted);line-height:1.45;margin-top:12px}
.lh-note b{color:var(--text)}
/* step 2 — queries */
.ym-queries{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;max-height:322px;overflow-y:auto;padding-right:2px}
.ym-qrow{display:flex;align-items:center;gap:10px}
.ym-qn{flex:none;width:22px;text-align:center;font-size:14px;font-weight:600;color:var(--muted)}
.ym-qrow .input{flex:1}
.ym-qx{flex:none;width:49px;height:49px;border-radius:12px;background:var(--blue-25);color:var(--muted);display:flex;align-items:center;justify-content:center;transition:.15s}
.ym-qx:hover{background:var(--red-bg);color:var(--red)}
.ym-qx .ic{width:18px;height:18px}
.ym-add-q{width:100%;height:52px;border-radius:14px;background:var(--blue-25);color:var(--blue-600);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;transition:.15s}
.ym-add-q:hover{background:var(--blue-50)}
.ym-add-q .ic{width:18px;height:18px}
/* step 3 — параметры прогноза (переработанная структура) */
/* компактная строка-сверка карточки */
.yr-review{display:flex;align-items:center;gap:13px;background:var(--blue-25);border:1px solid var(--blue-75);border-radius:15px;padding:13px 16px;margin-bottom:16px}
.yr-pin{flex:none;width:38px;height:38px;border-radius:11px;background:#fff;box-shadow:inset 0 0 0 1px var(--blue-75);display:flex;align-items:center;justify-content:center}
.yr-pin svg{width:23px;height:23px}
.yr-review-id{flex:1;min-width:0}
.yr-review-id b{display:block;font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yr-review-id a{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--blue-600);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yr-review-id a .ic{flex:none}
/* «N запросов» — теперь кликабельная кнопка-раскрывашка (не просто счётчик) */
.yr-qbadge{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--blue-600);background:#fff;border:1px solid var(--blue-75);border-radius:20px;padding:6px 12px;transition:.15s}
.yr-qbadge:hover{background:var(--blue-25)}
.yr-qbadge .ic{width:13px;height:13px;flex:none}
.yr-qbadge .ic:last-child{transition:transform .18s var(--ease)}
.yr-qbadge.on .ic:last-child{transform:rotate(180deg)}
/* раскрытый список запросов — своя карточка под строкой сверки, не копия оригинала */
.yr-qlist{background:#fff;border:1px solid var(--border-2);border-radius:14px;padding:14px 16px;margin:-6px 0 16px;animation:fadeUp .18s var(--ease-out)}
.yr-qlist-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.yr-qedit{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--blue-600)}
.yr-qedit .ic{width:13px;height:13px}
.yr-qedit:hover{text-decoration:underline}
/* блок «Ориентиры по трафику» */
.yr-calc{background:#fff;border:1px solid var(--border-2);border-radius:16px;padding:18px}
.yr-calc-hd{display:flex;gap:12px;margin-bottom:16px}
.yr-calc-ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--blue-25);color:var(--blue-600);display:flex;align-items:center;justify-content:center}
.yr-calc-ic .ic{width:16px;height:16px}
.yr-calc-hd b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
/* класс вместо голого «span» — тот селектор случайно ловил .yr-calc-ic (тоже span) и ломал ему flex-центрирование */
.yr-calc-hd .yr-calc-sub{display:block;font-size:12.5px;line-height:1.45;color:var(--muted)}
.yr-calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* лампочка стоит вплотную СПРАВА от текста лейбла (инлайн, сразу за последним словом) */
.yr-lbl{display:block}
.yr-lbl .hint-btn{display:inline-flex;vertical-align:middle;position:relative;opacity:1;pointer-events:auto;width:24px;height:24px;margin-left:5px;margin-top:-2px}
.yr-lbl .hint-btn .ic{width:14px;height:14px}
.yr-note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);line-height:1.45;margin:14px 2px 2px}
.yr-note .ic{flex:none;width:15px;height:15px;color:#c98a00}
@media (max-width:560px){ .ym-grid{grid-template-columns:1fr} .yr-calc-fields{grid-template-columns:1fr} }
/* ---- Яндекс.Карты: инлайн-мастер создания карточки (без модалок) ---- */
/* overflow НЕ прячем: иначе всплывающие подсказки (hint-pop) обрезаются краем карточки */
.ym-wiz{padding:0;margin-top:20px;max-width:960px}
.ym-wiz-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px 0}
.ym-wiz-title{display:flex;align-items:center;gap:14px;min-width:0}
.ym-wiz-badge{flex:none;width:46px;height:46px;border-radius:13px;background:var(--blue-25);display:flex;align-items:center;justify-content:center}
.ym-wiz-badge svg{width:26px;height:26px}
.ym-wiz-title h3{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.2px}
.ym-wiz-title .muted{font-size:13px}
.ym-wiz-close{width:36px;height:36px;border-radius:10px;color:var(--muted);display:flex;align-items:center;justify-content:center;flex:none;transition:.15s}
.ym-wiz-close:hover{background:var(--blue-25);color:var(--ink)}
.ym-wiz-close .ic{width:18px;height:18px}
/* step rail */
.ym-rail{display:flex;align-items:center;gap:10px;padding:20px 26px 6px}
.ym-rail-step{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13.5px;font-weight:600;flex:none}
.ym-rail-n{width:26px;height:26px;border-radius:50%;background:var(--blue-25);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.ym-rail-n .ic{width:14px;height:14px}
.ym-rail-step.on{color:var(--ink)}
.ym-rail-step.on .ym-rail-n{background:var(--grad-primary);color:#fff}
.ym-rail-step.done{color:var(--ink)}
.ym-rail-step.done .ym-rail-n{background:var(--green);color:#fff}
.ym-rail-line{flex:1;height:2px;border-radius:2px;background:var(--border-2);min-width:16px}
@media(max-width:640px){.ym-rail-lbl{display:none}.ym-rail-line{min-width:8px}}
.ym-wiz-body{padding:22px 26px 4px}
.ym-wiz-foot{display:flex;justify-content:flex-end;gap:12px;padding:16px 26px 24px;border-top:1px solid var(--border-2);margin-top:20px}
/* step 1 */
.ym-s1{display:grid;grid-template-columns:1fr 302px;gap:26px;align-items:start}
.ym-s1-form .field:last-child{margin-bottom:0}
/* Step 1 — гид «Где взять ссылку»: шаги с иконками (не нумерованный список) */
.ym-guide{background:var(--blue-25);border:1px solid var(--blue-75);border-radius:18px;padding:18px}
.ym-guide-hd{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:15px}
.ym-guide-pin{flex:none;width:26px;height:26px;border-radius:8px;background:var(--grad-primary);color:#fff;display:flex;align-items:center;justify-content:center}
.ym-guide-pin .ic{width:15px;height:15px}
.ym-guide-track{position:relative;display:flex;flex-direction:column;gap:15px;padding-left:2px}
/* тонкая соединяющая линия слева между иконками-шагами */
.ym-guide-track::before{content:"";position:absolute;left:14px;top:16px;bottom:16px;width:2px;background:linear-gradient(var(--blue-75),transparent);z-index:0}
.ym-guide-step{position:relative;z-index:1;display:flex;gap:12px}
.ym-guide-ic{flex:none;width:28px;height:28px;border-radius:9px;background:#fff;color:var(--blue-600);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--blue-75),0 3px 8px -4px rgba(15,42,92,.2)}
.ym-guide-ic .ic{width:15px;height:15px}
.ym-guide-step b{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px}
/* класс вместо голого «span» — тот селектор случайно ловил .ym-guide-ic (тоже span) и ломал ему flex-центрирование, из-за чего иконка «уезжала» в левый верхний угол плашки */
.ym-guide-step .ym-guide-desc{display:block;font-size:12.5px;line-height:1.45;color:var(--text)}
.ym-guide-ex{margin-top:16px;padding-top:14px;border-top:1px dashed var(--blue-75)}
.ym-guide-ex-cap{display:block;font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:7px}
.ym-guide-ex code{display:block;font-size:12.5px;color:var(--text);background:#fff;border:1px solid var(--blue-75);border-radius:10px;padding:9px 12px;word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ym-guide-ex code b{color:var(--blue-600);font-weight:700}
/* «Посмотреть фотоинструкцию» — открывает pg-modal (карусель) ниже */
.ym-guide-photobtn{width:100%;margin-top:14px;height:42px;border-radius:11px;background:#fff;border:1px solid var(--blue-75);color:var(--blue-600);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s}
.ym-guide-photobtn:hover{background:var(--blue-50);border-color:var(--blue-100)}
.ym-guide-photobtn .ic{width:16px;height:16px}
@media(max-width:820px){.ym-s1{grid-template-columns:1fr}}
/* ==================== фотоинструкция (карусель в модалке) ==================== */
.pg-modal{padding:24px}
.pg-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.pg-head h3{font-size:18px;font-weight:700;color:var(--ink)}
.pg-head h3 .muted{font-size:13px;font-weight:500}
.pg-stage{display:flex;align-items:center;gap:12px}
.pg-arrow{flex:none;width:38px;height:38px;border-radius:50%;background:var(--blue-25);color:var(--blue-600);display:flex;align-items:center;justify-content:center;transition:.15s}
.pg-arrow:hover{background:var(--blue-50)}
.pg-arrow .ic{width:18px;height:18px}
.pg-photo{position:relative;flex:1;min-width:0;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--blue-25);display:flex;align-items:center;justify-content:center}
.pg-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.pg-placeholder{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted)}
.pg-ph-ic{width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--blue-75);display:flex;align-items:center;justify-content:center;color:var(--blue-600)}
.pg-placeholder span:last-child{font-size:12.5px}
.pg-foot{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pg-cap{min-width:0}
.pg-cap b{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px}
.pg-cap span{display:block;font-size:12.5px;line-height:1.45;color:var(--muted)}
.pg-dots{flex:none;display:flex;gap:7px}
.pg-dot{width:8px;height:8px;border-radius:50%;background:var(--blue-75);transition:.15s}
.pg-dot:hover{background:var(--blue-100)}
.pg-dot.on{width:20px;border-radius:5px;background:var(--blue-600)}
@media(max-width:640px){.pg-modal{padding:18px}.pg-arrow{width:32px;height:32px}.pg-arrow .ic{width:15px;height:15px}.pg-foot{flex-direction:column;align-items:flex-start}}
/* step 2 / 3 */
.ym-s-sub{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:16px}
.ym-s3 .yl-summary{margin-top:0}
/* ==================== MOBILE FEEDBACK PASS (авг 2026) ====================
Сводный проход по мобильной версии личного кабинета. Общие идеи:
1) тап-таргеты подняты минимум до 44×44px (Apple HIG) — раньше многие иконки-кнопки
были 26–36px, что тяжело попасть пальцем;
2) вкладки/чипсы-фильтры, которые раньше переносились в 2 строки, теперь скроллятся
в одну строку (нативный паттерн iOS/Android) — компактнее и не скачет высота блока;
3) подсказки-лампочки (.hint-btn) и чекбоксы в таблицах раньше показывались только
по :hover — на тач-экране ховера нет, поэтому на мобильном они теперь видны всегда,
тап переключает поповер (см. app.js);
4) футер «Если у вас есть вопросы…» получил отступ под высоту bottom-nav — раньше его
перекрывал фиксированный нижний таббар. */
@media (max-width:820px){
/* --- футер: не перекрывается фикс. bottom-nav (76px + safe-area) --- */
.app-foot{padding:18px 16px calc(92px + env(safe-area-inset-bottom));text-align:left}
/* --- чипсы-фильтров (Все/Активен/На тесте/Приостановлен/Избранное, категории обучения,
типы/статусы операций на Оплате) — одна строка со скроллом вместо переноса --- */
.filter-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -14px;padding:2px 14px 6px}
.filter-chips::-webkit-scrollbar{display:none}
.filter-chips .fchip{flex:none}
.fchip{height:44px;padding:0 18px}
/* --- вкладки на странице проекта: та же логика (уже скроллятся), плюс под палец --- */
.ptab{min-height:44px;display:inline-flex;align-items:center}
/* --- топбар: иконки-кнопки крупнее --- */
.tb-bell,.tb-avatar,.tb-icon-more,.tb-icon-danger{width:40px;height:40px}
/* "+" в топбаре, свёрнутый до иконки: раньше пустой текстовый узел с gap:8px уводил
иконку от центра — из-за этого плюсик выглядел «съехавшим» */
.tb-right>.btn{gap:0;width:40px;height:40px}
/* --- избранное/редактировать на карточках проектов --- */
.pc-ic{width:44px;height:44px}
.pfc-fav{width:44px;height:44px}
/* --- строка поиска: на всю ширину блока, под палец --- */
.search-box{width:100%}
.search-box.sm{width:100%}
.search-box .input{height:48px}
/* --- подсказки-лампочки: на тач-экране всегда видны (нет hover), тап открывает поповер --- */
.hint-btn{opacity:1;pointer-events:auto;width:36px;height:36px}
.hint-btn.open .hint-pop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
/* абсолютно спозиционированные варианты лампочки (угол KPI-карточки, угол таблицы) были
невидимы до hover, поэтому на десктопе спокойно лежали поверх заголовка/шапки таблицы —
теперь, когда они видны всегда, резервируем под них место, чтобы текст не оказывался под иконкой */
.kpi-label{padding-right:38px}
.hint-btn.hint-abs+.tbl-scroll{margin-top:42px}
/* Конкуренты: the reserved strip above read as dead white space — dock the (bigger,
always-visible) bulb straight onto the table head row instead, same corner, just
re-centered for the 36px touch size; a little overlap onto the head row's own edge
reads as a corner badge rather than a gap */
.comp-full-card .hint-btn.hint-abs{top:4px}
.comp-full-card .hint-btn.hint-abs+.tbl-scroll{margin-top:0}
/* --- дашборд: выпадающий список проектов — на всю доступную ширину, чтобы домен
не обрезался (места в хедере хватает — справа только колокольчик и аватар) --- */
.project-select{max-width:none;flex:1 1 auto;min-width:0}
.project-select .select-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* --- карточка проекта в слайдере дашборда: раньше иконки избранного/редактирования
и статус-чип стояли в один ряд с доменом — на узких карточках домен сжимался почти
до нуля и «пропадал». Разносим на два ряда: домен сверху, статус+иконки снизу --- */
.pc-top{flex-direction:column;align-items:stretch;gap:10px}
.pc-actions{justify-content:space-between;width:100%}
/* --- активные тарифы на Оплате: вместо бесконечной вертикальной ленты — горизонтальный
скролл по одной карточке на проект, как карточки проектов на дашборде --- */
.sub-row{display:flex;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -14px;padding:4px 14px 10px}
.sub-row::-webkit-scrollbar{display:none}
.sub-row .sub{flex:0 0 82%;max-width:320px}
/* domain + plan chip + hint bulb can get tight on narrower phones (~360px) — let the
chip/hint pair drop to their own line rather than crowd the domain name */
.sub-head{flex-wrap:wrap}
/* --- поиск по истории операций: своя строка на всю ширину (раньше жался к кнопке
«Указать период» и обрезался справа) --- */
.pay-search-row{flex-direction:column;align-items:stretch;width:100%}
.pay-search-row .btn{width:100%}
/* --- текстовые инструкции (Обучение): вместо тесной сетки в 2 колонки — горизонтальный
скролл карточками пошире, чтобы ничего не налезало друг на друга --- */
.art-grid{display:flex;grid-template-columns:unset;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -14px;padding:4px 14px 10px}
.art-grid::-webkit-scrollbar{display:none}
.art-card{flex:0 0 84%;max-width:320px}
/* footer row (tag + время чтения + стрелка) переносилось посреди слова
(«5 мин / чтения») на самых узких телефонах — карточка чуть шире, а
время чтения больше не переносится само по себе */
.art-foot .muted{white-space:nowrap}
/* --- поддержка: список тикетов и диалог — как два отдельных экрана. По умолчанию
виден список; после тапа по тикету .sup-wrap получает класс .mob-chat и диалог
выезжает поверх списка на весь экран (кнопка-стрелка возврата — см. .tb-back
в общем хедере, PASS4) --- */
.sup-list{display:block;max-height:none}
.sup-tickets{max-height:none}
.sup-chat{display:none}
.sup-wrap.mob-chat .sup-list{display:none}
.sup-wrap.mob-chat .sup-chat{display:flex}
/* --- профиль: способы связи — если чип/кнопка переносится на новую строку из-за
нехватки места, она выравнивается по левому краю (под подписью), а не «повисает»
с произвольным отступом --- */
.contact-item .chip,.contact-item .ci-confirm{margin-left:0}
.ci-confirm{min-height:44px;padding:0 18px;display:inline-flex;align-items:center}
/* --- профиль: аккаунты — роль/изменить/удалить одной группой уходят на новую строку
по левому краю (под аватаркой), а не прижимаются к правому --- */
.acc-actions{justify-content:flex-start}
.acc-edit{min-height:40px;padding:4px 6px;display:inline-flex;align-items:center}
.acc-x{width:40px;height:40px}
.acc-foot .btn{min-height:48px}
}
/* ==================== MOBILE FEEDBACK PASS 2 (авг 2026) ====================
Второй проход по фидбеку после первого деплоя. Правила ниже идут позже в файле,
поэтому при равной специфичности перебивают одноимённые селекторы выше (тот же
принцип, что и в первом проходе) — так проще точечно докрутить то, что уже
было сделано, не выискивая и не переписывая исходные строки. */
@media (max-width:820px){
/* --- Проекты: фильтр сортировки и кнопки карточки-проекта крупнее --- */
.proj-sort{height:44px;padding:0 16px}
.pfc-foot .btn{height:44px}
/* --- Оплата: поповер подсказки теперь позиционируется через JS (position:fixed,
см. app.js) именно потому, что «Активные тарифы» — горизонтальный скролл-контейнер
(overflow-x:auto), а из-за особенности CSS overflow-y при этом тоже становится
auto — поповер обрезался снизу и внутри карточки появлялся лишний скролл.
z-index поднят выше bottom-nav (65), чтобы поповер не прятался за таббаром. */
.hint-pop{z-index:70}
/* when app.js flips the popover above the button (no room below), the caret has to
point down at the button instead of up */
.hint-pop.pop-above::before{bottom:auto;top:100%;border-bottom-color:transparent;border-top-color:var(--ink)}
/* --- Оплата: «Указать период» и поиск раньше жались друг к другу с 8px --- */
.pay-filters .pay-search-row{gap:14px}
#payDateBtn{height:44px}
.pay-foot #acctSelect{height:44px}
.pf-row .btn{height:44px}
/* --- Дашборд: селектор проекта в хедере — ширина по содержимому (как и была
по умолчанию до первого прохода), а не на всю ширину хедера; максимум ограничен,
чтобы длинный домен не вытолкнул колокольчик/аватар за экран */
.project-select{flex:0 1 auto;width:auto;max-width:min(230px,54vw)}
/* --- Дашборд: фильтры-вкладки всегда на отдельной строке, прижаты к левому краю
(«Мои проекты»/счётчик и вкладки раньше делили одну flex-строку — на части
ширин вкладкам не хватало повода перенестись, и они утыкались куда-то в середину) --- */
.dash-head-l{flex-direction:column;align-items:flex-start;gap:10px}
.dash-head-l .filter-chips{margin-left:0}
/* --- Дашборд: точки-пагинация слайдера убраны — скролл и так нативно свайпается,
как в «Активных тарифах» на Оплате; сама стрелка-навигация уже была скрыта --- */
.scroll-dots{display:none}
/* --- Дашборд: карточка проекта в слайдере чуть шире; избранное+редактирование
переезжают абсолютным дуэтом в правый верхний угол карточки, статус-чип остаётся
в потоке там же, где и был (вторая строка pc-top) — раздельно, поэтому просто
позиционируем сами .pc-ic абсолютно, а не весь .pc-actions */
.proj-card{flex:0 0 320px;position:relative}
.pc-top>div:first-child{padding-right:112px}
.pc-actions .pc-ic{position:absolute;top:20px}
.pc-actions .pc-ic:not(.pc-fav){right:72px}
.pc-actions .pc-fav{right:20px}
/* --- Поддержка: диалог тикета становится отдельным полноэкранным «экраном» —
без скруглений, во всю ширину/высоту; нижняя граница НЕ доходит до самого низа
(bottom:76px+safe-area), а останавливается над bottom-nav, чтобы поле ввода
не пряталось под фиксированным таббаром */
.sup-wrap.mob-chat .sup-chat{position:fixed;top:0;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom));height:auto;z-index:62;border-radius:0;border:none;box-shadow:none;width:100%}
.sc-input .input{height:52px}
.sc-input .btn{width:52px;height:52px}
/* --- Профиль: «Изменить»/× уходят к правому краю строки (margin-left:auto на
первом из них тащит за собой и второй, соседний в потоке) — роль-пилюля
остаётся слева под аватаркой, как и была */
.acc-edit{margin-left:auto;height:44px}
.acc-x{width:44px;height:44px}
.acc-item{row-gap:16px}
/* --- Обучение: между вкладками категорий и видео больше воздуха — видео залито
сплошным цветом до самых краёв карточки (без внутреннего отступа сверху), поэтому
прежний зазор смотрелся теснее, чем такой же по факту зазор над «Ваш прогресс» */
.lc-cats{margin-bottom:34px}
}
/* ==================== MOBILE FEEDBACK PASS 3 (авг 2026) ==================== */
@media (max-width:820px){
/* --- Дашборд: «Мои проекты» + счётчик должны остаться на одной строке (как
«Тарифные планы / Выберите или смените план» на Оплате) — предыдущий фикс
(flex-direction:column на .dash-head-l) заодно разорвал заголовок и счётчик
на разные строки, чего не требовалось. Возвращаем обычный flex-wrap-ряд, а
гарантированный перенос именно чипсов на свою строку делаем через
flex-basis:100% — точечно на самих чипсах, а не на всём контейнере.
Это заодно чинит и сломанный скролл: внутри flex-direction:column чипсы без
явной ширины растягивались по своему полному контенту (шире экрана) вместо
того, чтобы получить ширину родителя — из-за этого скролл почти не имел хода
и последние чипсы были недостижимы. */
.dash-head-l{flex-direction:row;flex-wrap:wrap;align-items:center}
.dash-head-l .filter-chips{flex-basis:100%;margin-left:0}
/* --- Оплата: «Активные тарифы» скроллились и по вертикали на пару пикселей
(overflow-x:auto без явного overflow-y по спеке CSS считается тоже auto) —
запрещаем вертикальный скролл явно, остаётся только горизонтальный */
.sub-row{overflow-y:hidden}
/* --- Поддержка: общий хедер (Поддержка / уведомления / аватар) остаётся
видимым над полноэкранным диалогом тикета — раньше диалог перекрывал его
(top:0), теперь начинается сразу под хедером; нижний отступ увеличен, чтобы
между полем ввода и нижним меню был зазор, а не смыкались впритык */
.sup-wrap.mob-chat .sup-chat{top:var(--topbar-h);bottom:calc(76px + 14px + env(safe-area-inset-bottom))}
/* --- Партнёры: поле поиска раньше не растягивалось на мобильном — специфичность
`.partners-toolbar .search-box{width:280px}` (десктопный ряд) перебивала общее
мобильное правило `.search-box{width:100%}`. Чипсы категорий на мобильном и так
скроллились нормально (переносятся на свою строку сами) — просто убираем
десктопный margin-left:auto, который на обёрнутой строке сдвигал бы их вправо */
.partners-toolbar{flex-direction:column;align-items:stretch}
.partners-toolbar .search-box{width:100%}
/* width:100% alone isn't enough — an overflow-x:auto flex item's default
min-width:auto still lets it grow to its full max-content (same trap as the
dashboard chips above), so scrolling never really engages; min-width:0 forces
it to actually respect the 100% cap and scroll its overflow internally */
.partners-toolbar .filter-chips{margin-left:0;width:100%;min-width:0}
}
/* ==================== MOBILE FEEDBACK PASS 4 ====================
Четвёртая партия фидбека — разбор конкретных экранов пользователем на своём
телефоне (в т.ч. Android), после третьего прохода. */
@media (max-width:820px){
/* --- Графики со месяцами (дашборд/обзор проекта, дровер истории позиций):
12 подписей подряд сливаются на узком экране — оставляем через одну
(Янв, Мар, Май…). visibility, а не display, чтобы скрытый слот остался
в layout и видимые подписи не сместились со своих исходных позиций
(контейнеры — justify-content:space-between) --- */
.dc-months span:nth-child(even),
.dr-months span:nth-child(even){visibility:hidden}
/* --- Дашборд «Мои проекты»: PASS3 (.dash-head-l .filter-chips{margin-left:0})
занулил только margin-left, но не padding-left:14px, унаследованный от
общего bleed-паттерна чипсов (PASS1) — первая кнопка выглядела «утопленной»
относительно заголовка. Правый bleed (место под скролл до последней
кнопки) не трогаем. --- */
.dash-head-l .filter-chips{padding-left:0}
/* --- Дашборд «Ключевые запросы»/«Конкуренты»: те же горизонтальный скролл
и просторные отступы, что и во всех остальных таблицах (.tbl-scroll +
.dtable), вместо обрезки текста многоточием — .kw-table/.comp-table
оборачиваются в .tbl-scroll в разметке (views-app.js/views-project.js) */
.tbl-scroll{-webkit-overflow-scrolling:touch}
.kw-table{min-width:560px}
.comp-table{min-width:480px}
.kw-q{white-space:nowrap;overflow:visible;text-overflow:clip}
.kw-row,.comp-row{padding:12px 14px}
.kw-h,.comp-h{gap:14px}
/* --- Проекты: кнопки карточки (Открыть/Редактировать/Удалить проект) —
раньше две последние делили строку 50/50 и текст «Удалить проект» упирался
в соседнюю кнопку. Ставим все три друг под другом на всю ширину, как
«Открыть» — ничего не переносится, все иконки помещаются */
.pfc-foot{flex-direction:column}
/* --- Оплата «Активные тарифы»: после переноса лампочки-подсказки в угол
карточки (hint-abs, вместо инлайн рядом с плашкой тарифа) резервируем
место в шапке, чтобы длинный домен/плашка не заезжали под иконку —
тот же приём, что и у .kpi-label выше */
.sub-head{padding-right:38px}
/* --- Поддержка: диалог тикета — плашка «В работе» и «Закрыть» были в один
ряд и на узких Android-экранах вываливались за край (расти вправо уже
некуда). Ставим их в колонку, .sc-head уже центрирует по вертикали. */
.sc-head>.flex{flex-direction:column;align-items:center;gap:6px}
/* хедер тикета ниже — освобождает место диалогу под сообщения */
.sc-head{padding:12px 16px}
/* заголовок тикета не залезает под освободившееся/сузившееся место справа */
.sc-head-title .sc-title,.sc-head-title .sc-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* назад к списку тикетов теперь живёт в общем хедере (см. .tb-back выше),
а не в самом диалоге — показываем его только пока диалог открыт */
.main.mob-chat .tb-back-toggle{display:flex}
/* PASS3 нарочно останавливала белый фон диалога на 14px раньше верха
bottom-nav — в этом зазоре просвечивал серый фон страницы. Полю ввода и
так хватает внутреннего отступа, отдельный зазор снаружи не нужен */
.sup-wrap.mob-chat .sup-chat{bottom:calc(76px + env(safe-area-inset-bottom))}
/* --- Профиль «Аккаунты»: «Изменить»(текст+карандаш) и × не помещались
в один ряд с плашкой роли на узких экранах. Сворачиваем их в один
kebab-пункт (⋯) стандартного touch-размера, открывающий то же самое
действие через маленькое меню (см. accMoreMenu в views-secondary.js).
Пункт стоит не рядом с плашкой роли, а в правом верхнем углу строки —
тем же правым краем, что и разделительная линия между аккаунтами —
поэтому он вынесен из потока и не зависит от того, куда перенесётся
плашка роли на узких экранах. */
.acc-edit,.acc-x{display:none}
.acc-item{padding-right:52px}
.acc-more{display:flex;position:absolute;top:14px;right:0;width:44px;height:44px;border-radius:var(--r-sm);background:var(--blue-50);color:var(--blue-600);align-items:center;justify-content:center;flex:none}
/* --- Обучение «Начало работы»: кнопка «Смотреть» на активном уроке —
оставляем только иконку запуска, чтобы освободить место в строке */
.lcc-play-btn{width:40px;height:40px;padding:0;justify-content:center}
.lcc-play-btn .btn-label{display:none}
}
/* ==================== MOBILE FEEDBACK PASS 5 ====================
Пятая партия фидбека — разбор конкретных экранов пользователем на реальном
телефоне после четвёртого прохода. */
@media (max-width:820px){
/* --- Проекты: «Редактировать»/«Удалить проект» рендерились высотой ~18px —
унаследованный .pfc-foot .btn{flex:1} (из старой раскладки в один ряд 50/50)
в новой колонке даёт flex-basis:0, которая перебивает явный height. Сбрасываем
flex и берём высоту чуть меньше «Открыть» (44px), чтобы кнопка оставалась
заметно главной, а остальные — всё равно комфortными для нажатия. */
.pfc-foot .btn{flex:none;height:40px}
/* --- Обзор проекта: подсказки карточек (Динамика спроса, Ключевые запросы,
Приоритетные рекомендации, Доля рынка) переехали в hint-abs — угол карточки,
а не инлайн-соседи заголовка, которые на узких экранах переносились под него
(та же причина, что чинили в «Ключевые запросы» на дашборде). Резервируем
место под угловую иконку, чтобы длинные заголовки не оказывались под ней. */
.ov-demand-card .card-head,.rec-card .card-head,.mkt-card .card-head{padding-right:40px}
/* «Ключевые запросы»: тут в шапке ещё и «Посмотреть всё»+карандаш — им тоже
нужен зазор от угловой лампочки, а не только заголовку */
.ov-kw-card .card-head .flex{margin-right:40px}
/* --- Партnёры: тот же bleed-паттерн чипсов, что и на дашборде — margin-left:0
оставляет лишний padding-left:14px от базового правила, из-за чего кнопка
«Все» выглядит «утопленной» относительно заголовка/поля поиска --- */
.partners-toolbar .filter-chips{padding-left:0}
/* --- Страница проекта: вкладки (Обзор/Позиции/Конкуренты/Поисковые запросы) —
убираем нативную полосу скролла (как и везде в приложении), и даём неактивным
вкладкам тот же «видимый чип» вид, что у fchip на дашборде/обучении — на
мобильном без hover они выглядели голым текстом вперемешку, что и читалось
как «поплыли» */
.proj-tabs{-webkit-overflow-scrolling:touch;scrollbar-width:none}
.proj-tabs::-webkit-scrollbar{display:none}
.ptab{background:#fff;border:1px solid var(--border)}
.ptab.on{border:none}
}
/* ==================== MOBILE FEEDBACK PASS 6 ====================
Конкуренты/Поисковые запросы: the table-footer action bars (count + Экспорт +
Добавить конкурента; the bulk Заменить/Удалить/Отменить выбор bar) packed every
control onto one row at btn-sm (34px) height — on a narrow screen that's both a
readability tangle and well under the 44px tap target every other mobile control
in this app already uses. Each bar now wraps its primary CTA onto its own full-width
row and bumps the rest to 44px, instead of squeezing everything onto one line. */
@media (max-width:820px){
.comp-full-foot,.comp-sel-actions{flex-wrap:wrap;row-gap:12px}
.comp-full-foot .btn-sm{height:44px}
/* primary CTA (Добавить конкурента / Заменить) drops to its own full-width row;
bulk-replace is first in the DOM (so it reads before delete/cancel on desktop)
but needs to render last here, hence the explicit order */
.cff-cta{flex:0 0 100%;justify-content:center;order:2}
.comp-sel-actions{width:100%}
.comp-sel-del{width:44px;height:44px}
.comp-sel-cancel{height:44px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center}
/* Поисковые запросы: same bulk bar, but with Выбрать всё/Снять выделение and
Отменить выбор instead of a single CTA — stack them under Удалить+count (kept
in place) in priority order: the frequent toggle (Выбрать всё) before the exit
action (Отменить выбор), so a thumb reaching for "select more" doesn't land on
"leave selection mode" first */
.q-foot .btn-sm{height:44px}
.q-foot .comp-sel-count{order:1}
.q-foot .comp-sel-actions [data-action="q-select-all"]{order:2;flex:0 0 100%;justify-content:center}
.q-foot .comp-sel-cancel{order:3;flex:0 0 100%}
}
@media (max-width:560px){
/* --- Доля рынка: домен-колонка фиксирована в 140px + gap 14px с обеих сторон —
на узкой карточке почти всё уходит на домен и %, а сама полоса-график
остаётся совсем короткой. Сужаем колонку (ellipsis всё равно уже есть у
.mkt-dom) и гэп — полоса вырастает в разы, не трогая сам процент */
.mkt-row{grid-template-columns:88px 1fr auto;gap:8px}
}
@media (max-width:420px){
/* --- Страница проекта: на самых узких экранах «← Дашборд» + домен + кебаб
не помещались — кебаб визуально наезжал на конец домена. Прячем текстовую
часть back-ссылки (остаётся стрелка) и даём домену больше сжиматься —
ellipsis подхватывает вместо переполнения. */
.proj-back-label{display:none}
.proj-domain{min-width:40px}
}
/* ==================== MOBILE FEEDBACK PASS 7 ====================
Шестая по счёту голосовая партия фидбека — Проекты (тулбар), общий футер,
Партнёры (фон/пустой стейт), Обучение (плашка бонуса), «Ещё» (идеи). */
@media (max-width:820px){
/* --- Проекты: хедер был перегружен кнопкой «+ Добавить проект» (сворачивается
в квадратную иконку), а в строке сортировки под чипсами было пусто слева и
плотно прижато к правому краю — сортировка теперь у левого края (как чипсы
выше), а «Добавить проект» переезжает из хедера сюда же, к правому краю,
освобождая хедер под заголовок/колокольчик/аватар. Квадратная иконка-кнопка
без текста (как и была в хедере) — высота равна соседней .proj-sort (44px),
а не btn-sm (34px), чтобы обе кнопки в этом ряду были одного роста */
.proj-add-header{display:none}
.proj-sort{margin-left:0}
.proj-add-mobile{display:flex;align-items:center;justify-content:center;margin-left:auto;width:44px;height:44px;padding:0;flex:none}
/* --- Общий футер («Если у вас есть вопросы…»): раньше между последней карточкой
раздела и текстом футера набегало 96px (padding-bottom контента, зарезервированный
под фикс. bottom-nav) + 18px собственного отступа футера = ~114px пустоты — при
этом сам футер и так резервирует свои 92px снизу под таббар/FAB, так что нижний
запас для .content был лишним ВЕЗДЕ, где есть футер. :has() ограничивает эффект
только страницами с футером (Проекты/Оплата/Партнёры/Обучение/Профиль/Дашборд) —
Поддержка (без футера, .sup-wrap) продолжает резервировать полные 96px сама.
Нижний отступ футера (92px + safe-area, клиренс под «плавающую» FAB-кнопку
дашборда) не трогаем — он уже подобран верно и текст её не перекрывает. */
.content:has(+ .app-foot){padding-bottom:20px}
.app-foot{padding-top:14px}
/* --- Партнёры: декоративные синие пятна за карточками (.partners-bg) размыты
на 72px и рассчитаны на широкий десктопный грид — в одноколоночной мобильной
раскладке одно и то же пятно накрывает сразу несколько карточек подряд и
заметно «пятнает» их правый край (особенно у VK Рекламы), плюс просто выглядит
дёшево на мелком экране. Проще и надёжнее выключить их на мобильном, чем
подбирать позиции под каждую ширину экрана. */
.partners-bg{display:none}
}
/* Кнопка «Яндекс ID» на странице входа */
.af-social-wide{display:grid;grid-template-columns:1fr;gap:10px}
.oauth-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 14px;
background:#fff;border:1.5px solid var(--border);border-radius:14px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:.16s}
.oauth-btn:hover{border-color:var(--blue-500);box-shadow:0 4px 14px rgba(16,42,88,.08)}
.ob-ic{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;flex:none}
.ob-ya{background:#fc3f1d}
/* Иконки-кнопки соцвхода в одну строку (Яндекс ID / MAX) — общий разделитель
«или продолжить через» один на всех, без подписей под кнопками */
.af-social button.ob-icon{background:#fff;border:1.5px solid var(--border);border-radius:50%;width:48px;height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.16s}
.af-social button.ob-icon:hover{border-color:var(--blue-500);box-shadow:0 4px 14px rgba(16,42,88,.08)}
.af-social button.ob-icon .ob-ic{width:30px;height:30px;font-size:16px}
/* ============ Вход по телефону (SMS/звонок/каскад) ============ */
.af-tabs{display:flex;gap:8px;margin-bottom:18px;background:var(--blue-25);padding:4px;border-radius:12px}
.af-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;border:none;background:transparent;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;transition:.16s}
.af-tab .ic{width:16px;height:16px}
.af-tab:hover{color:var(--ink)}
.af-tab.on{background:#fff;color:var(--blue-600);box-shadow:0 1px 4px rgba(16,42,88,.1)}
.sms-head{display:flex;flex-direction:column;gap:3px;margin-bottom:16px}
.sms-head b{font-size:17px}
.sms-head .muted{font-size:13px}
.sms-fb{margin-top:10px;font-size:12.5px;color:var(--muted)}
.code-cells{display:flex;gap:9px}
.code-cell{flex:1;min-width:0;height:56px;text-align:center;font-size:22px;font-weight:700;color:var(--ink);
border:1.5px solid var(--border);border-radius:12px;background:var(--blue-25);outline:none;transition:.15s}
.code-cell:focus{border-color:var(--blue-500);background:#fff;box-shadow:0 0 0 4px rgba(26,105,240,.12)}
.code-cell.filled{border-color:var(--blue-500);color:var(--blue-600);background:#fff}
.af-resend{margin-top:14px;font-size:13px;color:var(--muted);text-align:center}
.af-resend a{font-weight:600}
.af-resend .btn{gap:8px}
.af-resend-wait{opacity:1;color:var(--muted);cursor:default}
.af-resend-t{font-variant-numeric:tabular-nums;color:var(--blue-600)}
.sms-btns{display:flex;gap:10px;margin-top:16px}
.sms-btns .btn{flex:1}
/* Разделитель дня в чате тикета поддержки */
.chat-day-sep{align-self:center;display:flex;align-items:center;gap:0;margin:2px 0}
.chat-day-sep span{background:var(--surface,#fff);color:var(--muted);font-size:12px;font-weight:600;padding:5px 14px;border-radius:100px;box-shadow:var(--sh-xs)}
/* ==================== Аналитика 2.0 / Ссылки / Отчёт для клиента (перенесено из прототипа) ==================== */
.an-intro{margin-bottom:20px}
.an-intro .card-head{margin-bottom:0}
.an-src{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.an-src-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--blue-50);color:var(--blue-600)}
.an-src-ic .ic{width:22px;height:22px}
.an-src h3{margin:0}
.an-src>.muted{font-size:13.5px}
.an-list{list-style:none;margin:2px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.an-list li{display:flex;gap:8px;align-items:center;font-size:13.5px}
.an-list .ic{width:15px;height:15px;color:var(--green);flex:none}
.an-src .btn{margin-top:4px}
/* строка состояния подключений над панелью */
.an-head{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;padding:12px 18px;margin-bottom:20px}
.an-state{display:flex;align-items:center;gap:10px}
.an-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-pill);background:var(--green-bg);color:var(--green);font-size:13px;font-weight:600}
.an-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
/* Вебмастер: мини-показатели, индексация, таблица запросов на 5 колонок */
.an-wm{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.an-wm>div{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:10px;background:var(--blue-25)}
.an-wm span{font-size:12.5px;color:var(--muted)}
.an-wm b{font-size:20px;font-weight:700}
.an-idx{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.an-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--r-pill);background:var(--blue-25);font-size:13px}
.an-pill .dot{width:7px;height:7px;border-radius:50%}
.an-pill b{font-weight:700}
.an-iks{background:var(--blue-50);color:var(--blue-600);font-weight:600}
.anq-table .kw-h,.anq-table .kw-row{grid-template-columns:2fr .9fr .7fr .7fr .9fr}
/* модалки подключения: аккаунт Яндекса и строка сайта */
.an-oauth{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--border);border-radius:12px;margin-bottom:14px}
.an-ya{width:34px;height:34px;border-radius:50%;background:#fc3f1d;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:none}
.an-oauth-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.an-oauth-txt b,.an-host b{font-size:13.5px}
.an-oauth-txt i,.an-host i{font-style:normal;font-size:12px;color:var(--muted)}
.an-host{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--border);border-radius:12px}
.an-host .ic{width:18px;height:18px;color:var(--muted);flex:none}
.an-host>span{display:flex;flex-direction:column;flex:1;min-width:0}
@media (max-width:760px){
.an-wm{grid-template-columns:repeat(2,1fr)}
.an-head{gap:8px 14px}
}
/* ---------------- ПРОЕКТ / АНАЛИТИКА 2.0: рабочий стол сеошника ---------------- */
.a2-alerts{display:flex;flex-direction:column;gap:8px;width:100%;margin-bottom:auto}
.a2-alert{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;background:var(--blue-25);width:100%;box-sizing:border-box}
.a2-sev{width:4px;height:26px;border-radius:2px;flex:none}
.a2-alert-txt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;font-size:13.5px;font-weight:500}
.a2-alert-txt i{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:400}
.a2-quota-line{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:6px}
.a2-quota-line b{color:var(--ink);font-weight:600}
.a2-bar{height:7px;border-radius:4px;background:var(--blue-50);overflow:hidden}
.a2-bar i{display:block;height:100%;border-radius:4px;background:var(--blue-500)}
.a2-quota{display:block;width:100%}
.a2-tasks{display:flex;flex-direction:column;width:100%;gap:6px;margin:13px 0}
.a2-task{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;box-sizing:border-box;font-size:13px;padding:7px 10px;border:1px solid var(--border-2);border-radius:8px}
.a2-task-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);flex:1;min-width:0}
.a2-ix-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;width:100%;margin-top:4px}
.a2-pos{display:flex;flex-direction:column;width:100%;margin-bottom:auto}
.a2-pos-row{display:grid;grid-template-columns:1fr 62px 62px 118px;gap:10px;align-items:center;padding:9px 10px;border-bottom:1px solid var(--border-2);font-size:13px;cursor:pointer}
.a2-pos-row:last-child{border-bottom:none}
.a2-pos-row:hover{background:var(--blue-25);border-radius:8px}
.a2-spark{display:block;flex:none}
.a2-land .kw-h,.a2-land .kw-row{grid-template-columns:1.6fr .8fr .6fr .9fr}
.a2-good{color:var(--green);font-weight:600}
.a2-links-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap;width:100%;margin-bottom:auto}
.a2-links-num{display:flex;flex-direction:column;gap:2px}
.a2-links-num span{font-size:12.5px;color:var(--muted)}
.a2-links-num b{font-size:24px;font-weight:700}
.a2-links-num i{font-style:normal;font-size:12px}
.a2-links-row .a2-spark{flex:1;min-width:180px}
@media (max-width:760px){
.a2-pos-row{grid-template-columns:1fr 50px 50px 90px}
.a2-links-row{gap:14px}
}
/* ---------------- АНАЛИТИКА 2.0: углубление (деталь, авто-продвижение, отчёт) ---------------- */
.a2-top{justify-content:space-between}
.a2-new{display:block;width:100%;margin:12px 0 2px}
.a2-new-h{font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.a2-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.a2r-check-list{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto;border:1px solid var(--border-2);border-radius:10px;padding:4px}
.a2r-check-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px}
.a2r-check-row:hover{background:var(--blue-25)}
.a2r-check-row input{flex:none;width:16px;height:16px;cursor:pointer}
.a2r-check-row label{flex:1;min-width:0;font-size:12px;line-height:1.4;color:var(--text);word-break:break-all;cursor:pointer}
.a2r-check-open{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;color:var(--muted)}
.a2r-check-open:hover{background:var(--blue-50);color:var(--blue-600)}
.a2r-check-open .ic{width:14px;height:14px}
.a2r-check-list-foot{display:flex;gap:10px;padding:6px 10px;font-size:12px}
.a2-chips .tag{cursor:pointer;border:none}
.a2-auto.off{opacity:.45;pointer-events:none}
.a2-rule{font-size:13.5px;margin-bottom:8px}
.a2-rule-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.a2-rule-row label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.a2-mini{width:88px;height:34px;padding:0 10px}
.a2-slots{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;padding:9px 12px;border-radius:9px;background:var(--green-bg);color:var(--green);margin-bottom:10px;flex-wrap:wrap}
.a2-slots.warn{background:var(--gold-bg);color:#b78300}
.a2-auto-hist{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* деталь запроса по дням */
.a2q-chips{display:flex;align-items:center;gap:9px;margin:14px 0;flex-wrap:wrap}
.a2q-spark{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.a2q-spark .a2-spark{width:100%}
.a2q-spark .muted{font-size:12px}
.a2q-tbl{border:1px solid var(--border-2);border-radius:10px;padding:4px 12px;margin-bottom:12px}
.a2q-row{display:grid;grid-template-columns:.8fr 1fr 1fr .8fr .8fr;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--border-2);font-size:13px}
.a2q-row:last-child{border-bottom:none}
.a2q-h{color:var(--muted);font-size:12px;font-weight:500}
.a2q-btns{display:flex;gap:10px;margin-top:14px}
.a2q-btns .btn{flex:1}
/* ---------------- ОТЧЁТ ДЛЯ КЛИЕНТА (white-label) ---------------- */
.rep{min-height:100vh;background:var(--blue-25);padding:22px 16px 44px}
.rep-actions{display:flex;gap:10px;max-width:900px;margin:0 auto 16px}
.rep-page{max-width:900px;margin:0 auto;background:#fff;border-radius:16px;box-shadow:0 8px 30px rgba(16,42,88,.08);padding:38px 44px;border-top:6px solid var(--rep,#1a69f0)}
.rep-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.rep-logo{max-height:46px;max-width:190px;object-fit:contain}
.rep-agency{font-size:19px;font-weight:800;color:var(--rep)}
.rep-meta{text-align:right}
.rep-meta h1{font-size:22px;margin:0 0 3px}
.rep-meta span{font-size:13px;color:var(--muted)}
.rep-sec{margin-top:26px}
.rep-sec h2{font-size:15px;margin:0 0 12px;padding-left:10px;border-left:3px solid var(--rep)}
.rep-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rep-kpi{border:1px solid var(--border-2);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.rep-kpi span{font-size:12px;color:var(--muted)}
.rep-kpi b{font-size:21px;color:var(--rep)}
.rep-kpi i{font-style:normal;font-size:11.5px;color:var(--muted)}
.rep-tbl{width:100%;border-collapse:collapse;font-size:13px}
.rep-tbl th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;padding:7px 10px;background:var(--blue-25)}
.rep-tbl td{padding:8px 10px;border-bottom:1px solid var(--border-2)}
.rep-up{color:var(--green);font-weight:600}
.rep-down{color:var(--red);font-weight:600}
.rep-foot{margin-top:30px;padding-top:14px;border-top:1px solid var(--border-2);font-size:12px;color:var(--muted)}
/* модалка настройки отчёта */
.rep-logo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rep-logo-mini{height:34px;max-width:130px;object-fit:contain;border:1px solid var(--border-2);border-radius:8px;padding:3px 6px;background:#fff}
.rep-upload{cursor:pointer}
.rep-colors{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rep-color{width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;flex:none;padding:0}
.rep-color.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue-500)}
.rep-colors input[type=color]{width:28px;height:28px;flex:none;border:1px solid var(--border);border-radius:50%;padding:0;background:#fff;cursor:pointer;overflow:hidden}
.rep-colors input[type=color]::-webkit-color-swatch-wrapper{padding:0;border-radius:50%}
.rep-colors input[type=color]::-webkit-color-swatch{border:none;border-radius:50%}
.rep-colors input[type=color]::-moz-color-swatch{border:none;border-radius:50%}
.rep-blocks{display:flex;flex-direction:column;gap:7px}
.rep-block{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
@media (max-width:820px){
.rep-kpis{grid-template-columns:repeat(2,1fr)}
.rep-page{padding:22px 18px}
.rep-meta{text-align:left}
}
@media print{
body{background:#fff}
.rep{background:#fff;padding:0}
.rep-actions{display:none}
.rep-page{box-shadow:none;border-radius:0;max-width:none;padding:0 8px}
#toasts,.hint-pop{display:none!important}
}
/* раскрытие алертов + работы в отчёте */
.a2al{display:flex;flex-direction:column;gap:8px;margin-top:14px;margin-bottom:12px}
.a2al-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border-2);border-radius:10px;font-size:13px}
.a2al-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.a2al-txt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.a2al-txt i{font-style:normal;font-size:11.5px;color:var(--muted)}
.a2al-row .btn{flex:none}
.a2al-more{font-size:12.5px;color:var(--muted);text-align:center;padding:4px}
.a2al-conv{margin-top:14px}
.a2al-conv .a2q-row{grid-template-columns:1.4fr .7fr .7fr .9fr}
.a2al-sev{height:auto;min-height:24px;line-height:1.3;font-size:11.5px;padding:4px 11px;white-space:nowrap;color:#fff;flex:none}
.an-choice-list{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.an-choice-row{width:100%;justify-content:flex-start;text-align:left;padding:10px 14px}
.a2al-row-wrap{align-items:flex-start}
.a2al-full{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.35}
.rep-works{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rep-works li{position:relative;padding-left:26px;font-size:13.5px;line-height:1.45}
.rep-works li::before{content:'\2713';position:absolute;left:0;top:0;color:var(--rep);font-weight:800}
.rep-works-input{height:auto;min-height:110px;padding:10px 12px;line-height:1.5;resize:vertical}
/* выбор целей-заявок */
.ang-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;max-height:min(52vh,420px);overflow-y:auto;padding-right:4px}
.ang-goal{display:flex;align-items:center;gap:11px;padding:9px 12px;border:1px solid var(--border-2);border-radius:10px;cursor:pointer;font-size:13.5px}
.ang-goal:hover{background:var(--blue-25)}
.ang-txt{display:flex;flex-direction:column}
.ang-txt b{font-weight:600}
.ang-txt i{font-style:normal;font-size:11.5px;color:var(--muted)}
/* живой режим Аналитики 2.0 */
.a2-live-chip{background:var(--green-bg);color:var(--green)}
.a2-live-chip .dot{background:var(--green);animation:a2pulse 1.6s ease-in-out infinite}
@keyframes a2pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.a2-live-chip .dot{animation:none}}
.a2-livewait{justify-content:space-between}
/* вкладки Реальные/Шум в таблице запросов живого режима */
.a2-qseg{display:flex;gap:8px;margin-bottom:12px}
.a2-qseg .tag{cursor:pointer;border:none;font-size:12.5px}
.a2-qseg .tag.on{background:var(--blue-600,#1a69f0);color:#fff}
/* ---------------- ПРОЕКТ / ССЫЛКИ: плитки профиля на фоне конкурентов ---------------- */
.lk-head{margin-bottom:20px}
.lk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:16px}
.lk-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 18px 16px}
.lk-tile.you{border:1.5px solid var(--blue-500);box-shadow:0 6px 22px rgba(26,105,240,.13)}
.lk-you-chip{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--blue-600,#1a69f0);color:#fff;font-size:11px;font-weight:700;padding:3px 12px;border-radius:var(--r-pill);white-space:nowrap}
.lk-domain{font-size:14.5px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-ring{position:relative;display:flex}
.lk-ring-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.lk-ring-val b{font-size:26px;font-weight:800;line-height:1}
.lk-ring-val span{font-size:10.5px;color:var(--muted)}
.lk-rows{width:100%;display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--border-2);padding-top:11px}
.lk-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px}
.lk-row span{color:var(--muted)}
.lk-row b{font-weight:600}
@media (max-width:560px){.lk-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
/* разрыв до конкурентов + закупка + отчёт по размещению */
.lkb-row{margin-bottom:14px}
.lkb-row:last-child{margin-bottom:0}
.lkb-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:5px}
.lkb-need{color:var(--gold);font-weight:700;font-size:12.5px}
.lkb-bar{height:10px;border-radius:5px;background:var(--blue-25);overflow:hidden;display:flex}
.lkb-you{display:block;height:100%;background:var(--blue-500)}
.lkb-gap{display:block;height:100%;background:var(--gold);opacity:.75}
.lkb-eta{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.toggle.locked{opacity:.4;cursor:not-allowed}
.lk-buy-st{font-size:13.5px;line-height:1.5;padding:10px 12px;border-radius:10px;background:var(--green-bg)}
.lk-buy-st.off{background:var(--blue-25)}
.lk-rep .kw-h,.lk-rep .kw-row{grid-template-columns:1.8fr .8fr .8fr 1.1fr}
.lk-rep .kw-q{display:flex;flex-direction:column;gap:1px;overflow:hidden}
.lk-rep-page{font-style:normal;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* выделение плиток и понятный блок разрыва */
.lk-tile.you{background:linear-gradient(180deg,#f4f9ff,#fff)}
.lk-comp-chip{background:#eef2f8;color:var(--muted)}
.lk-rank{position:absolute;top:10px;right:13px;font-size:11.5px;font-weight:800;color:var(--muted)}
.lk-tile.you .lk-rank{color:var(--blue-600)}
.lkb-sub{font-weight:400;color:var(--muted);font-size:12px;margin-left:2px}
.lkb-total{margin-left:auto;font-weight:700;font-size:12.5px}
.lkb-top{gap:6px}
.lkb-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin-top:5px;flex-wrap:wrap}
.lkb-foot .btn{flex:none}
.lk-buy-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
/* движение места на плитке */
.lk-move{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:-6px}
.lk-move.up{color:var(--green)}
.lk-move.down{color:var(--red)}
/* крупный бейдж места */
.lk-rank{position:absolute;top:12px;left:12px;right:auto;min-width:36px;height:30px;padding:0 9px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:800;background:var(--blue-25);color:var(--muted)}
.lk-tile.you .lk-rank{background:var(--blue-600,#1a69f0);color:#fff}
.lk-rank.top1{background:var(--gold-bg);color:#b78300}
/* мобильный адаптив вкладки «Ссылки» и ряда вкладок проекта */
.ptab{flex:none} /* 6 вкладок: сжатие рисовало текст поверх соседа, ряд скроллится */
@media (max-width:640px){
.lk-grid{grid-template-columns:1fr 1fr;gap:10px}
.lk-tile{padding:16px 10px 12px;gap:9px;min-width:0}
.lk-ring svg{width:96px;height:96px}
.lk-ring-val b{font-size:21px}
.lk-rank{top:8px;left:8px;min-width:30px;height:26px;font-size:12.5px;padding:0 7px}
.lk-domain{font-size:13px;max-width:calc(100% - 58px)}
.lk-move{font-size:10.5px}
.lk-rows{gap:5px;padding-top:9px}
.lk-row{font-size:11.5px}
.lk-rep .kw-h,.lk-rep .kw-row{grid-template-columns:1.4fr .9fr .8fr}
.lk-rep .kw-h span:last-child,.lk-rep .kw-row>span:last-child{display:none}
}
/* Бейдж «Рекомендуем» -- тренд по общей семантике вырос за месяц (см.
keyword-service routes/frequencyTrend.ts, раз в месяц по крону). */
.trend-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:10px;background:var(--green-bg);color:var(--green);font-size:11px;font-weight:600;white-space:nowrap;vertical-align:middle;margin-left:6px}
.trend-badge svg{width:12px;height:12px;flex-shrink:0}
/* Календарь выбора периода (Аналитика 2.0, "Свой период") -- один месяц,
диапазон выбирается двумя кликами (первый -- "от", второй -- "до") прямо
в одной сетке, вместо системных . */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-nav b{font-size:15px;text-transform:capitalize}
.cal-nav-btn{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);color:var(--muted-2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.cal-nav-btn:hover{background:var(--blue-50);color:var(--blue-600);border-color:var(--blue-75)}
.cal-nav-btn .ic{width:16px;height:16px}
.cal-wd{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}
.cal-wd span{text-align:center;font-size:12px;font-weight:600;color:var(--muted);padding:4px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-day{position:relative;height:36px;border:none;background:transparent;font:inherit;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;border-radius:var(--r-sm);transition:.12s}
.cal-day.empty{cursor:default}
.cal-day:not(.empty):hover{background:var(--blue-50);color:var(--blue-600)}
.cal-day.today{font-weight:700;color:var(--blue-600)}
.cal-day.in-range{background:var(--blue-50);border-radius:0}
.cal-day.range-start,.cal-day.range-end{background:var(--blue-600);color:#fff;font-weight:600}
.cal-day.range-start{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.cal-day.range-end{border-radius:0 var(--r-sm) var(--r-sm) 0}
.cal-day.range-start.range-end{border-radius:var(--r-sm)}
.cal-hint{font-size:13px;color:var(--muted-2);text-align:center;margin-top:10px}
.cal-hint b{color:var(--ink);font-weight:600}
.an-range-btn{height:32px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);color:var(--muted-2);font:inherit;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.an-range-btn:hover{color:var(--ink);border-color:var(--blue-75)}
.an-range-btn.on{background:var(--blue-50);color:var(--blue-600);border-color:var(--blue-75)}
.an-range-btn .ic{width:14px;height:14px}
/* ==================== Партнёрская программа ==================== */
/* карточка выбора получателя (вкладка «Выплаты») */
.pp-type{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pp-type .ap-sec-t{margin-bottom:0}
.pp-seg{margin-bottom:0}
.pp-type-note{font-size:12.5px}
.pp-lbl{display:block;font-size:11.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.pp-link{display:flex;gap:10px;align-items:center;margin-top:8px}
/* пунктир вместо рамки поля: ссылку не редактируют, её копируют */
.pp-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
padding:9px 14px;border:1.5px dashed var(--blue-300);border-radius:var(--r-sm);
background:var(--blue-25);font-size:13.5px;font-weight:600;color:var(--blue-700)}
.pp-promo{margin-top:10px;font-size:13px;color:var(--muted)}
.pp-promo b{color:var(--ink)}
/* у истории выплат три колонки — общий min-width таблиц (640px) здесь только
создавал горизонтальную прокрутку в половинной карточке */
.pp-pay-table{min-width:0}
/* баланс — самостоятельная карточка на вкладке «Выплаты» */
.pp-balance{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pp-sum{font-size:30px;font-weight:800;letter-spacing:-.5px;color:var(--ink);line-height:1}
.pp-balance-note{font-size:12px}
.pp-balance .btn{margin-top:4px}
.pp-balance .rc-note{margin-top:auto;align-self:stretch}
/* «как это работает» — три шага одной строкой на входной вкладке */
.pp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pp-step{display:flex;gap:12px;align-items:flex-start}
.pp-step i{width:30px;height:30px;border-radius:50%;background:var(--grad-primary);color:#fff;
display:flex;align-items:center;justify-content:center;font-style:normal;font-size:14px;font-weight:800;flex:none}
.pp-step b{display:block;font-size:14px;color:var(--ink);margin-bottom:2px}
.pp-step span{font-size:12.5px;line-height:1.4;color:var(--muted)}
/* воронка: ряд от светлого к тёмному — чем глубже этап, тем насыщеннее */
.pp-funnel{display:flex;flex-direction:column;gap:12px}
.pp-frow{display:grid;grid-template-columns:104px 1fr 56px;gap:12px;align-items:center}
.pp-flabel{font-size:13px;color:var(--text)}
.pp-fbar{height:12px;border-radius:6px;background:var(--blue-25);overflow:hidden}
.pp-fbar i{display:block;height:100%;border-radius:6px}
.pp-fval{font-size:14px;font-weight:700;color:var(--ink);text-align:right}
.pp-fconv{font-size:12px;color:var(--muted);margin:-6px 0 0 116px}
.pp-fnote{margin-top:14px}
/* условия и бонусы */
.pp-terms{display:flex;flex-direction:column;gap:2px}
.pp-term{display:flex;gap:12px;align-items:flex-start;padding:9px 8px;border-radius:var(--r-md);font-size:13.5px;color:var(--text);line-height:1.45}
.pp-term b{color:var(--ink)}
.pp-term-ic{width:30px;height:30px;border-radius:9px;background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center;flex:none}
.pp-term-ic .ic{width:15px;height:15px}
@media (max-width:900px){
.pp-frow{grid-template-columns:88px 1fr 52px}
.pp-fconv{margin-left:100px}
}
@media (max-width:820px){
.pp-steps{grid-template-columns:1fr}
}
/* Тарифы в калькуляторе — вертикальный список, а не сегменты в строку: три
подписи с ценами не помещались в колонку и разъезжались на две строки. */
.pp-plans{display:flex;flex-direction:column;gap:6px}
.pp-plan{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
padding:10px 12px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--surface);
font:inherit;font-size:13px;color:var(--text);text-align:left;cursor:pointer;transition:.15s}
.pp-plan:hover{border-color:var(--blue-300);background:var(--blue-25)}
.pp-plan.on{border-color:var(--blue-600);background:var(--blue-50);color:var(--blue-700);font-weight:600}
.pp-plan b{font-weight:700;color:var(--ink);white-space:nowrap}
.pp-plan.on b{color:var(--blue-700)}
/* Оффер партнёрки — первый экран страницы. Тот же тёмно-синий градиент, что у
панели авторизации и баннера идей: это «продающий» слой интерфейса, и он
должен отличаться от рабочих белых карточек. */
.pp-offer{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:26px 28px;
background:var(--grad-panel);color:#f2f7ff}
.pp-offer::after{content:"";position:absolute;top:-70px;right:-60px;width:230px;height:230px;border-radius:50%;
background:radial-gradient(circle,rgba(149,197,248,.45),transparent 68%);filter:blur(10px);pointer-events:none}
.pp-offer-txt{position:relative;z-index:1;max-width:640px}
.pp-offer-txt h2{font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1.25}
.pp-offer-txt p{margin-top:6px;font-size:13.5px;line-height:1.5;color:rgba(242,247,255,.75)}
.pp-offer-tiles{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.pp-ot{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--r-md);
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pp-ot b{font-size:24px;font-weight:800;letter-spacing:-.5px;color:#fff;line-height:1;white-space:nowrap}
.pp-ot span{font-size:12.5px;line-height:1.4;color:rgba(242,247,255,.8)}
@media (max-width:820px){
.pp-offer{padding:20px}
.pp-offer-txt h2{font-size:19px}
.pp-offer-tiles{grid-template-columns:1fr}
}
/* топ рефералов над таблицей: медаль, домен, оплаты, начислено */
.pp-top{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.pp-top .ap-sec-t{margin-bottom:4px}
.pp-top-row{display:grid;grid-template-columns:26px 1fr auto auto;gap:12px;align-items:center;
width:100%;padding:9px 10px;border-radius:var(--r-md);font:inherit;text-align:left;
background:var(--blue-25);border:none;cursor:pointer;transition:background .15s}
.pp-top-row:hover{background:var(--blue-50)}
.pp-medal{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-style:normal;font-size:12px;font-weight:800;color:#fff;flex:none}
.pp-medal.m1{background:var(--gold)}
.pp-medal.m2{background:#9aa7bd}
.pp-medal.m3{background:#c98f5b}
.pp-top-dom{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-top-row em{font-style:normal;font-size:12.5px;color:var(--muted);white-space:nowrap}
.pp-top-row b{font-size:14px;color:var(--ink);white-space:nowrap}
/* развёртка по рефералу */
.pp-ref-table tbody tr{cursor:pointer}
.pp-dr-metrics{grid-template-columns:repeat(2,1fr)} /* метрик четыре — 2×2 вместо 3 в ряд */
.pp-dr-plan{font-size:12.5px;white-space:nowrap}
/* Список с поиском (регион продвижения): поле сверху, прокручиваемый перечень
под ним, последней строкой — «Добавить «…»» для ручного ввода. */
.sel-find{display:flex;flex-direction:column;max-height:330px;min-width:250px}
.sel-search{position:relative;display:flex;align-items:center;flex:none;padding-bottom:6px}
.sel-search .ic{position:absolute;left:10px;width:14px;height:14px;color:var(--muted);pointer-events:none}
.sel-search .input{height:32px;font-size:13px;padding-left:30px}
.sel-list{overflow-y:auto;flex:1;min-height:0}
.sel-add{display:flex;align-items:center;gap:6px;flex:none;margin-top:4px;padding-top:9px;
border-top:1px solid var(--border-2);color:var(--blue-600);font-weight:600;white-space:normal}
.sel-add .ic{width:13px;height:13px}
/* Окно таблицы запросов: прокрутка внутри контейнера, а не всей страницей —
строка с массовыми действиями под таблицей всегда остаётся на виду.
Высота меняется мышью за нативную ручку внизу справа. */
.lab-scroll{overflow:auto;resize:vertical;min-height:220px}
/* шапка не уезжает при прокрутке внутри окна */
.lab-scroll thead th{position:sticky;top:0;z-index:3;background:#fff}
@media (max-width:820px){
.lab-scroll{resize:none;max-height:70vh}
}
/* Автостратегии: две крупные карточки-переключателя вместо мелких сегментов —
выбор влияет на то, куда уйдут все свободные места, и заслуживает веса. */
.ap-strats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ap-strat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
padding:14px 16px;border-radius:var(--r-md);border:1.5px solid var(--border);
background:var(--surface);font:inherit;text-align:left;cursor:pointer;transition:.16s}
.ap-strat:hover{border-color:var(--blue-300);background:var(--blue-25)}
.ap-strat.on{border-color:var(--blue-600);background:var(--blue-50)}
.ap-strat-ic{width:34px;height:34px;border-radius:10px;margin-bottom:6px;flex:none;
display:flex;align-items:center;justify-content:center;background:var(--blue-50);color:var(--blue-600)}
.ap-strat.on .ap-strat-ic{background:var(--blue-600);color:#fff}
.ap-strat-ic .ic{width:17px;height:17px}
.ap-strat b{font-size:15px;font-weight:600;color:var(--ink)}
.ap-strat.on b{color:var(--blue-700)}
.ap-strat-sub{font-size:12.5px;color:var(--muted);line-height:1.35}
/* подсказка под кнопками объясняет выбранную стратегию словами */
.ap-hint{margin-top:12px;align-items:flex-start}
.ap-hint .ic{margin-top:2px}
@media (max-width:560px){ .ap-strats{grid-template-columns:1fr} }
/* Точки на графиках спроса — HTML поверх svg (в самом svg их бы растянуло в
овалы вместе с шириной блока). Появляются вслед за отрисовкой линии. */
.dc-svg-wrap{position:relative}
/* svg — inline-элемент: без display:block под ним остаётся ~4px под базовую линию
текста, обёртка выходит выше графика, и точки в процентах съезжают вниз */
.dc-svg-wrap svg{display:block}
.ch-dots{position:absolute;inset:0;pointer-events:none}
/* появление через backwards-анимацию, а не через opacity:0 в базовом стиле:
при prefers-reduced-motion анимации схлопываются в 0.01ms, и спрятанная
стилем точка могла бы не показаться вовсе */
.ch-dots span{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
background:#fff;border:2px solid var(--blue-600);box-shadow:0 1px 3px rgba(15,42,92,.12);
animation:dotIn .3s backwards;animation-delay:calc(.5s + var(--i)*.05s)}
@keyframes dotIn{from{opacity:0;transform:scale(.4)}}
/* спрос упал — красная плашка рядом с зелёной и синей */
.dc-badge.red{background:var(--red-bg);color:var(--red);border-color:rgba(255,77,79,.35)}
/* последняя строка не рисует свою границу: край окна таблицы и так её обозначает,
вдвоём они читались как две параллельные линии под отчётом */
.lab-table tbody tr:last-child td{border-bottom:none}
/* Условия партнёрки разложены по группам: заголовок + строки «что» и «почему».
Одним списком бонусы путались — было не видно, кому что достаётся. */
.pp-tgroup+.pp-tgroup{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-2)}
/* заголовок группы — тёмный и с цветной точкой: серые капсы 11px терялись
между строками и группы не читались как группы */
.pp-tgroup-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;
font-size:13px;font-weight:700;color:var(--ink)}
.pp-tgroup-h i{width:7px;height:7px;border-radius:50%;flex:none}
.pp-term-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pp-term-txt b{font-size:13.5px;font-weight:600;color:var(--ink)}
.pp-term-txt i{font-style:normal;font-size:12.5px;line-height:1.4;color:var(--muted)}
.pp-term-foot{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:14px;
border-top:1px solid var(--border-2);font-size:12.5px;line-height:1.4}
.pp-term-foot .ic{width:14px;height:14px;flex:none}