/* ============================================================
   SEO Jarvis — view styles (layout, screens, components)
   ============================================================ */

@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 <img> */
.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-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;
}
.tb-crumb{font-size:13px;color:var(--muted)}
.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}
.tb-title{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.3px}
.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}
.tb-right{display:flex;align-items:center;gap:12px}
.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)}
.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}
.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-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-del{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--red);text-align:left}
.region-menu-del:hover{background:var(--red-bg)}
.region-menu-del .ic{width:15px;height:15px;color:var(--red)}
/* delete-regions modal: simple always-visible checklist */
.del-region-list{display:flex;flex-direction:column;gap:2px;margin-bottom:20px}
.del-region-row{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--text)}
.del-region-row:hover{background:var(--blue-25)}
.region-check{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:#fff;flex:none;transition:.15s}
.region-check .ic{width:12px;height:12px;opacity:0;transition:.15s}
.region-check.on{background:var(--blue-600);border-color:var(--blue-600)}
.region-check.on .ic{opacity:1}

/* ==================== 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-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-step.active .an-ic-spin{display:flex;animation:spin .9s linear infinite}
.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)}}

/* 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}
.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)}
/* 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}

/* ---- 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{min-width:320px;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}
.ptab{padding:8px 16px;border-radius:var(--r-md);font-size:14px;font-weight:500;color:var(--text);white-space:nowrap;transition:.16s;background:transparent;border:1px solid transparent}
.ptab:hover{background:var(--blue-50);color:var(--blue-600)}
.ptab.on{background:var(--grad-primary);color:#fff;border-color:transparent}
.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 */
.ov-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;margin-bottom:20px;align-items:stretch}
/* 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}
.card:hover .hint-btn,.hint-btn:focus-visible{opacity:1;pointer-events:auto}
.kpi .hint-btn{position:absolute;top:14px;right:14px}
.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)}
.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}
.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}
.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}
.comp-full-foot{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-top:1px solid var(--border-2)}

/* ---- 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}
/* Queries table */
.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}
.q-ic{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--blue-600);transition:.15s}
.q-ic .ic{width:16px;height:16px}
.q-ic:hover{background:var(--blue-50)}
.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{max-width:440px}
.modal-md{max-width:500px}
.modal-lg{max-width:720px;padding:0;overflow:hidden}
.modal-ideas{max-width:980px}

/* ---- Idea board ("Пространство для ваших идей") ---- */
.ideas-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.ideas-toolbar .search-box{min-width:200px}
.ideas-layout{display:grid;grid-template-columns:1fr 260px;gap:24px;align-items:start}
.ideas-list{display:flex;flex-direction:column;gap:14px;max-height:min(58vh,560px);overflow-y:auto;padding-right:4px}
.idea-card{display:flex;gap:18px;padding:18px;border:1px solid var(--border-2);border-radius:var(--r-lg)}
.idea-vote-col{flex:none;width:96px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.idea-votes{font-size:22px;font-weight:700;color:var(--blue-600)}
.idea-vote-col .muted{font-size:12px;margin-bottom:8px}
.idea-vote-col .btn{width:100%}
.idea-voted{color:var(--green)!important}
.idea-body{flex:1;min-width:0}
.idea-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.idea-title{font-size:15px;font-weight:600;color:var(--ink)}
.idea-head .chip{height:24px;font-size:12px}
.idea-text{font-size:13px;color:var(--text);line-height:1.5;margin-bottom:12px}
.idea-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.idea-meta .tag{font-size:11px}
.ideas-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;color:var(--muted);text-align:center}
.ideas-empty .ic{width:30px;height:30px}
.ideas-side h4{font-size:14px;font-weight:600;margin-bottom:12px}
.ideas-cats{display:flex;flex-direction:column;gap:2px}
.idea-cat{padding:9px 12px;border-radius:8px;font-size:13px;color:var(--text);text-align:left;transition:.14s}
.idea-cat:hover{background:var(--blue-25)}
.idea-cat.on{background:var(--blue-50);color:var(--blue-600);font-weight:600}
@media (max-width:820px){
  .ideas-layout{grid-template-columns:1fr}
  .ideas-side{order:-1}
  .ideas-cats{flex-direction:row;flex-wrap:wrap}
}
.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;margin-bottom:20px}
.cm-head h3{font-size:20px;font-weight:700}
.cm-close{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)}

/* ==================== 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}
.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;right:22px;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-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}
.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-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}
.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}
.acc-info span{font-size:13px}
.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}
.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}
}
@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}
}
@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;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
  .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}
  .tb-crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
  .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}
}

/* ==================== 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}

  /* ---- Кнопки/тапы под палец на всех этих экранах ---- */
  .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}
/* мягкие синие пятна-подсветки под сеткой — дают стеклу что «преломлять» */
.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(3,1fr);gap:22px;margin-top:20px}
@media (max-width:1180px){.partner-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.partner-grid{grid-template-columns:1fr}}

/* --- Стеклянная плашка: объёмная стеклянная плита с полированной фаской --- */
.pcard{
  position:relative;border-radius:26px;padding:7px;
  /* фаска-лип: яркая полированная кромка сверху-слева → ловит синее свечение снизу-справа */
  background:
    linear-gradient(146deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.7) 12%,
      rgba(230,243,255,.4) 38%,
      rgba(160,205,250,.32) 66%,
      rgba(41,160,246,.5) 100%);
  box-shadow:
    0 26px 48px -22px rgba(15,42,92,.2),
    0 8px 18px -12px rgba(15,42,92,.12),
    0 2px 5px rgba(15,42,92,.1),
    inset 0 2.5px 2px rgba(255,255,255,1),
    inset 1.5px 0 2px rgba(255,255,255,.7),
    inset 0 -3px 8px rgba(26,105,240,.22),
    inset -2px 0 5px rgba(41,160,246,.18),
    inset -2px -2px 4px rgba(41,160,246,.14);
  transition:transform .26s var(--ease-out), box-shadow .26s var(--ease-out);
}
.pcard:hover{transform:translateY(-5px);
  box-shadow:
    0 48px 78px -24px rgba(26,105,240,.42),
    0 18px 32px -16px rgba(26,105,240,.32),
    0 3px 6px rgba(15,42,92,.14),
    inset 0 2.5px 2px rgba(255,255,255,1),
    inset 1.5px 0 2px rgba(255,255,255,.75),
    inset 0 -4px 10px rgba(26,105,240,.42),
    inset -2px 0 5px rgba(41,160,246,.3),
    inset -2px -2px 5px rgba(41,160,246,.26);
}
/* утопленная прозрачная грань стекла (внутренняя поверхность плиты) */
.pcard-face{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:19px;min-height:230px;padding:22px 22px 20px;
  display:grid;grid-template-rows:1fr auto;
  background:
    linear-gradient(158deg, rgba(255,255,255,.4) 0%, rgba(246,249,255,.2) 48%, rgba(255,255,255,.08) 100%);
  -webkit-backdrop-filter:blur(20px) saturate(155%) brightness(1.04);
  backdrop-filter:blur(20px) saturate(155%) brightness(1.04);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.85),     /* чёткий блик по верхней кромке стекла */
    inset 1px 0 1px rgba(255,255,255,.5),
    inset 0 4px 8px rgba(20,60,140,.1),         /* тень утопления сверху */
    inset 0 -1px 2px rgba(255,255,255,.35);
}
/* лёгкая фактура + внутренняя рефракция */
.pcard-face::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.2;
  background-image:radial-gradient(rgba(120,150,210,.2) 1px, transparent 1.4px);
  background-size:10px 10px;
  -webkit-mask-image:linear-gradient(180deg,transparent 40%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 40%,#000 100%);
}
/* фирменное синее свечение внутри грани — мягкое, снизу (замена оранжевого) */
.pcard-glow{position:absolute;inset:0;z-index:0;pointer-events:none}
.pcard-glow::before{ /* мягкое свечение вдоль низа, гаснет вверх */
  content:"";position:absolute;left:-8%;right:-8%;bottom:-26%;height:66%;
  background:radial-gradient(72% 100% at 60% 100%, rgba(41,170,246,.22), rgba(26,105,240,.11) 46%, transparent 74%);
  filter:blur(16px);
}
.pcard-glow::after{ /* мягкий тусклый акцент в правом нижнем углу (не сплошное пятно) */
  content:"";position:absolute;right:-4%;bottom:-12%;width:38%;height:44%;
  background:radial-gradient(closest-side, rgba(80,190,250,.26), rgba(41,140,240,.11) 54%, transparent 80%);
  filter:blur(18px);
}
/* глянцевые отражения на поверхности стекла */
.pcard-sheen{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:
    /* острая диагональная полоса-блик (как свет по полированному стеклу) */
    linear-gradient(120deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.4) 6%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 100%),
    /* мягкое свечение из верхнего-левого угла */
    radial-gradient(120% 78% at 6% -18%, rgba(255,255,255,.7), transparent 52%),
    /* тонкий контр-блик снизу-справа */
    linear-gradient(305deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 16%);}

/* глянцевый логотип-бейдж по центру */
.pcard-badge{
  position:relative;z-index:3;align-self:center;justify-self:center;
  width:84px;height:84px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 120% at 32% 22%, rgba(255,255,255,.92), rgba(255,255,255,0) 46%),
    linear-gradient(158deg, var(--bc) 0%, var(--bc2) 100%);
  box-shadow:
    0 14px 26px -8px color-mix(in srgb, var(--bc) 55%, transparent),
    0 3px 8px rgba(15,42,92,.2),
    inset 0 2px 4px rgba(255,255,255,.6),
    inset 0 -7px 14px rgba(0,0,0,.20);
}
.pcard-badge::after{ /* верхний блик-эллипс */
  content:"";position:absolute;top:8px;left:16%;right:24%;height:34%;border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
  filter:blur(1px);
}
.pcard-mono{position:relative;z-index:1;font-weight:800;color:#fff;font-size:27px;line-height:1;
  letter-spacing:-.5px;text-shadow:0 1px 2px rgba(0,0,0,.28)}

/* название + описание слева снизу */
.pcard-foot{position:relative;z-index:3;text-align:left}
.pcard-foot h3{font-size:19px;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;max-width:94%}

/* кнопка «Открыть» справа сверху */
/* без border — прозрачная рамка поверх градиента давала тёмную кайму на скруглении;
   рим сделан inset-тенью */
.pcard-open{position:absolute;top:16px;right:16px;z-index:4;
  display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 13px;
  border-radius:100px;font-size:12.5px;font-weight:600;color:var(--blue-600);border:none;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 2px 7px rgba(15,42,92,.12), inset 0 0 0 1px rgba(255,255,255,.85), inset 0 1px 1px rgba(255,255,255,.6);
  transition:.18s var(--ease)}
.pcard-open .ic{width:15px;height:15px}
.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:100px}

.partners-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:56px 0;color:var(--muted)}
.partners-empty .ic{width:34px;height:34px}
.partners-empty p{font-size:15px}