:root{
  /* Landing background (klatto.com) */
  --bp-bg:#c6d1ea;
  --bp-bg2:#dfe6f6;
  --bp-ink:#101828;
  --bp-ink2:rgba(16,24,40,.72);
  --bp-card:rgba(255,255,255,.92);
  --bp-card2:rgba(255,255,255,.98);
  --bp-accent:#697cff; /* primary accent */
  --bp-accent2:#3ddb86; /* secondary accent */
  --bp-danger:#ef4444;
  --bp-warn:#f59e0b;
  --bp-radius:16px;
  --bp-border:rgba(16,24,40,.12);
  --bp-border-soft:rgba(16,24,40,.08);
  --bp-shadow-sm:0 1px 2px rgba(16,24,40,.08), 0 1px 1px rgba(16,24,40,.04);
  --bp-shadow-md:0 12px 28px rgba(16,24,40,.12);
  --bp-shadow-lg:0 20px 48px rgba(16,24,40,.16);
  --bp-sidebar:280px;
  /* Telegram WebApp safe-area insets (app.js sets these only inside Telegram). */
  --bp-tg-top-inset:0px;
  --bp-tg-right-inset:0px;
  --bp-tg-bottom-inset:0px;
  --bp-tg-left-inset:0px;
  --bp-safe-bottom:env(safe-area-inset-bottom);
}

*{box-sizing:border-box}
.bp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html,body{height:100%}
body{
  margin:0;
  color:var(--bp-ink);
  font-family:Onest,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
}

/* PJAX: лёгкий индикатор загрузки при переключении вкладок (без full reload) */
html.bp-pjax-loading::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:4px;
  z-index:9999;
  background:linear-gradient(90deg, transparent, var(--bp-accent), transparent);
  background-size:240px 4px;
  animation:bp-pjax 0.9s linear infinite;
  pointer-events:none;
}
@keyframes bp-pjax{
  from{background-position:-240px 0}
  to{background-position:calc(100% + 240px) 0}
}

.bp-bg{
  min-height:100vh;
  min-height:100dvh;
  position:relative;
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1000px 700px at 85% 22%, rgba(61,219,134,.24), transparent 55%),
    radial-gradient(900px 900px at 78% 90%, rgba(105,124,255,.18), transparent 55%),
    linear-gradient(180deg, var(--bp-bg), var(--bp-bg2));
  background-attachment:scroll;
  overflow-x:hidden;
}

/* Landing-like grid overlay */
.bp-bg::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.28;
  background-image:
    linear-gradient(rgba(27,34,48,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,34,48,.07) 1px, transparent 1px);
  background-size:24px 24px;
  mix-blend-mode:multiply;
  z-index:0;
}
.bp-app{position:relative; z-index:1}

.bp-container{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
}

/* App layout */
.bp-app{
  min-height:100vh;
  min-height:100dvh;
  display:block;
}

.bp-shell{
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}

/* Telegram Mini App: safe-area is painted by topbar itself, so no "foreign" stripe above header. */
html.bp-tg-webapp .bp-shell{
  padding-top:0;
  min-height:100vh;
  min-height:100dvh;
}
html.bp-tg-webapp .bp-topbar{
  top:calc(var(--bp-tg-top-inset, 0px) + 44px);
  padding-top:0;
}
html.bp-tg-webapp .bp-topbar-inner{
  border-radius:0 0 24px 24px;
  width:100%;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
}
html.bp-tg-webapp{
  --bp-safe-bottom:max(env(safe-area-inset-bottom), var(--bp-tg-bottom-inset, 0px));
}
html.bp-tg-webapp,
html.bp-tg-webapp body{
  background:#fff;
  overscroll-behavior-y:none;
}

/* Mobile web (not only Telegram Mini App):
   keep header/tabbar stable during aggressive scroll and hide "foreign" backdrop while overscrolling. */
@media (max-width: 980px){
  html,
  body{
    background:var(--bp-bg, #c6d1ea);
    overscroll-behavior-y:none;
  }
  .bp-topbar{
    top:8px;
  }
  .bp-topbar-inner{
    padding:8px 12px 8px 16px;
  }
  .bp-bg{
    background-attachment:scroll;
  }
}

/* Welcome generation (mobile): hide bottom tabbar while loading to prevent accidental navigation. */
@media (max-width: 980px){
  html.bp-welcome-generating body.bp-auth .bp-tabbar{
    display:none !important;
  }
  html.bp-welcome-generating body.bp-auth .bp-main{
    padding-bottom:24px !important;
  }
  html.bp-welcome-generating body.bp-auth .bp-gen-result,
  html.bp-welcome-generating body.bp-auth .bp-workspace-side{
    padding-bottom:24px !important;
  }
}
/* Telegram Mini App fallback:
   even if server-side miniapp flag is stale, hide web-only controls. */
html.bp-tg-webapp .bp-user-link[href*="/app/logout"],
html.bp-tg-webapp .bp-btn[href*="/app/logout"]{
  display:none !important;
}

.bp-topbar{
  position:fixed;
  top:16px;
  left:0;
  right:0;
  z-index:100;
  display:flex;
  justify-content:center;
  padding-top:env(safe-area-inset-top, 0px);
}
.bp-topbar-inner{
  width:min(1180px, calc(100% - 32px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px 10px 22px;
  gap:10px;
  flex-wrap:nowrap;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:100px;
  box-shadow:0 10px 40px rgba(11,18,32,.06), inset 0 1px 0 rgba(255,255,255,.7);
  transition:padding .3s ease, background .3s ease;
}
.bp-topbar-left{display:flex;align-items:center;gap:10px; flex:1; min-width:0}
.bp-topbar-right{display:flex;align-items:center;gap:10px;justify-content:flex-end}

.bp-topbar-brand{white-space:nowrap}
.bp-btn.bp-topbar-brand{
  position:relative;
  white-space:nowrap;
  border-radius:999px;
  border-color:rgba(105,124,255,.28);
  color:#fff;
  background:
    radial-gradient(240px 120px at 18% 0%, rgba(255,255,255,.28), transparent 62%),
    linear-gradient(135deg, rgba(105,124,255,1), rgba(61,219,134,.90));
  box-shadow:
    0 18px 44px rgba(105,124,255,.22),
    var(--bp-shadow-sm);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  will-change:transform;
}
.bp-btn.bp-topbar-brand::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 56%);
  opacity:.55;
  pointer-events:none;
  mix-blend-mode: soft-light;
}
.bp-btn.bp-topbar-brand > *{position:relative; z-index:1}
.bp-btn.bp-topbar-brand:hover{
  background:
    radial-gradient(240px 120px at 18% 0%, rgba(255,255,255,.28), transparent 62%),
    linear-gradient(135deg, rgba(105,124,255,1), rgba(61,219,134,.90));
  color:#fff;
  transform:translateY(-1px);
  box-shadow:
    0 24px 60px rgba(105,124,255,.26),
    var(--bp-shadow-md);
  filter:saturate(1.06);
}
.bp-btn.bp-topbar-brand:active{
  transform:translateY(0);
  box-shadow:var(--bp-shadow-sm);
  filter:none;
}
.bp-btn.bp-topbar-brand.bp-btn-mini{
  font-size:13px;
  padding:8px 10px;
  font-weight:800;
}
.bp-topbar-brand-ico{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.95;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.12));
}
.bp-topbar-brand-ico svg{display:block}
.bp-topbar-brand-txt--short{display:none}

.bp-btn.bp-topbar-support{
  white-space:nowrap;
  border-radius:999px;
  flex:0 0 auto;
  border-color:rgba(34,158,217,.28);
  color:#fff;
  background:linear-gradient(180deg, #33a9e0 0%, #229ed9 100%);
  box-shadow:0 10px 26px rgba(34,158,217,.28), var(--bp-shadow-sm);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.bp-btn.bp-topbar-support:hover{
  background:linear-gradient(180deg, #33a9e0 0%, #229ed9 100%);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(34,158,217,.34), var(--bp-shadow-md);
  filter:brightness(1.03);
}
.bp-btn.bp-topbar-support:active{
  transform:translateY(0);
  box-shadow:var(--bp-shadow-sm);
  filter:none;
}
.bp-btn.bp-topbar-support.bp-btn-mini{
  font-size:13px;
  padding:8px 10px;
  font-weight:800;
}
.bp-topbar-support-ico{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.bp-topbar-support-ico svg{display:block}

.bp-topbar-links{flex-wrap:wrap; margin-left:auto}

@media (max-width: 720px){
  .bp-topbar-brand-txt--full{display:none}
  .bp-topbar-brand-txt--short{display:inline}
  .bp-topbar-support-txt{display:none}
  .bp-btn.bp-topbar-support.bp-btn-mini{
    padding:8px 9px;
    min-width:44px;
  }
}
@media (max-width: 380px){
  .bp-topbar-brand-txt--short{display:none}
  .bp-btn.bp-topbar-brand.bp-btn-mini{padding:8px 9px}
}

.bp-header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
  border-bottom:1px solid var(--bp-border);
}
.bp-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}

.bp-logo{
  text-decoration:none;
  color:var(--bp-ink);
  display:flex;
  align-items:baseline;
  gap:10px;
}
.bp-logo--sidebar{margin-bottom:8px}
.bp-logo--top{align-items:center}
.bp-logo-img{
  height:44px;
  width:auto;
  display:block;
}
.bp-logo-pixel{
  font-family:Onest,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:-0.02em;
}
.bp-logo-accent{
  font-family:Onest,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--bp-accent);
  background:transparent;
  padding:0;
  border:0;
  box-shadow:none;
}

.bp-nav{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
  justify-content:flex-end;
}
.bp-nav-link{
  text-decoration:none;
  color:var(--bp-ink);
  font-weight:500;
  font-size:14px;
  padding:8px 14px;
  border-radius:100px;
  border:1px solid transparent;
  transition:color .2s ease, background .2s ease;
}
.bp-nav-link:hover{background:rgba(255,255,255,.6);color:var(--bp-ink)}
.bp-nav-link-muted{opacity:.8}
.bp-nav-link--active{
  background:rgba(105,124,255,.12);
  border:1px solid rgba(105,124,255,.22);
  border-radius:100px;
}
/* Active nav item should stay visually stable on hover */
.bp-nav-link.bp-nav-link--active:hover{background:rgba(105,124,255,.12)}

.bp-topbar-links{flex-wrap:wrap}

.bp-icon-btn{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--bp-border);
  border-radius:12px;
  background:rgba(255,255,255,.92);
  color:var(--bp-ink);
  box-shadow:var(--bp-shadow-sm);
  cursor:pointer;
}
.bp-icon-btn:hover{box-shadow:var(--bp-shadow-md)}
.bp-icon-btn:active{box-shadow:var(--bp-shadow-sm)}
.bp-icon-btn--burger{width:46px}

.bp-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--bp-border);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  box-shadow:var(--bp-shadow-sm);
  font-weight:800;
}
.bp-pill--click{text-decoration:none}
.bp-pill-dot{
  width:10px;height:10px;
  background:var(--bp-accent);
  border:1px solid rgba(16,24,40,.18);
}

/* Balance badge (topbar) */
.bp-balance{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  color:var(--bp-ink);
  border:1px solid rgba(105,124,255,.18);
  background: rgba(255,255,255,.72);
  box-shadow:var(--bp-shadow-sm);
  font-weight:800;
  transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease, background .16s ease;
  will-change:transform;
  backdrop-filter: blur(10px);
}
.bp-balance::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(220px 110px at 18% 0%, rgba(105,124,255,.22), transparent 60%),
    radial-gradient(220px 110px at 100% 130%, rgba(61,219,134,.16), transparent 58%);
  opacity:.95;
  pointer-events:none;
}
.bp-balance > *{position:relative; z-index:1}
.bp-balance:hover{
  box-shadow:var(--bp-shadow-md);
  transform:translateY(-1px);
  border-color:rgba(105,124,255,.28);
}
.bp-balance:active{
  box-shadow:var(--bp-shadow-sm);
  transform:translateY(0);
}
.bp-balance-ico{
  position:relative;
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:
    radial-gradient(120% 120% at 25% 25%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(105,124,255,1), rgba(105,124,255,.78));
  box-shadow:
    0 10px 22px rgba(105,124,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.18);
}
.bp-balance-ico::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(105,124,255,.26) 0%, rgba(105,124,255,0) 62%);
  animation: bp-balance-pulse 2.8s ease-out infinite;
  opacity:0;
  pointer-events:none;
}
.bp-balance-ico svg{position:relative; z-index:1}
.bp-balance-meta{
  display:flex;
  flex-direction:column;
  gap:1px;
  line-height:1.05;
  min-width:0;
}
.bp-balance-label{
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:800;
  color:rgba(16,24,40,.62);
}
.bp-balance-val{
  font-weight:900;
  font-size:14px;
  letter-spacing:-0.02em;
  font-variant-numeric: tabular-nums;
}
@keyframes bp-balance-pulse{
  0%{transform:scale(.78); opacity:0}
  20%{opacity:.50}
  64%{transform:scale(1.28); opacity:0}
  100%{transform:scale(1.28); opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .bp-balance-ico::before{animation:none}
}

.bp-main{padding:108px 0 40px}

/* Mobile tabbar (shown on phones) */
.bp-tabbar{display:none}
.bp-tabbar-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:0;
  flex:1 1 0;
  text-decoration:none;
  color:rgba(16,24,40,.78);
  font-weight:800;
  padding:8px 6px;
  border-radius:14px;
  border:1px solid transparent;
  touch-action:manipulation;
}
.bp-tabbar-ico{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.bp-tabbar-ico svg{width:22px;height:22px;display:block}
.bp-tabbar-txt{font-size:11px; line-height:1.1; white-space:nowrap}
.bp-tabbar-item--active{
  color:var(--bp-ink);
  background:rgba(105,124,255,.12);
  border-color:rgba(105,124,255,.22);
}
.bp-tabbar-item--create{
  position:relative;
  font-weight:900;
  color:#fff;
  background:
    radial-gradient(240px 120px at 18% 0%, rgba(255,255,255,.28), transparent 62%),
    linear-gradient(135deg, rgba(105,124,255,1), rgba(61,219,134,.90));
  border:1px solid rgba(105,124,255,.28);
  border-radius:18px;
  box-shadow:
    0 18px 44px rgba(105,124,255,.22),
    var(--bp-shadow-sm);
  transform:translateY(-4px);
  padding:10px 8px;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.bp-tabbar-item--create::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 56%);
  opacity:.55;
  pointer-events:none;
  mix-blend-mode: soft-light;
}
.bp-tabbar-item--create > *{position:relative; z-index:1}
.bp-tabbar-item--create .bp-tabbar-ico svg{transform:scale(1.06)}
.bp-tabbar-item--create:hover{filter:saturate(1.06)}
.bp-tabbar-item--create:active{
  transform:translateY(-2px);
  box-shadow:
    0 10px 26px rgba(105,124,255,.18),
    var(--bp-shadow-sm);
  filter:none;
}
.bp-tabbar-item--create.bp-tabbar-item--active{
  color:#fff;
  background:
    radial-gradient(240px 120px at 18% 0%, rgba(255,255,255,.32), transparent 62%),
    linear-gradient(135deg, rgba(105,124,255,1), rgba(61,219,134,.92));
  border-color:rgba(105,124,255,.32);
  box-shadow:
    0 24px 60px rgba(105,124,255,.26),
    var(--bp-shadow-md);
  filter:saturate(1.08);
}
.bp-tabbar-item--cta{
  color:var(--bp-ink);
  background:rgba(105,124,255,.16);
  border-color:rgba(105,124,255,.24);
}

/* Sidebar */
.bp-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  padding:14px 12px;
  backdrop-filter: blur(10px);
  background: rgba(198,209,234,.62);
  border-right:3px solid var(--bp-ink);
  scrollbar-width: thin;
  scrollbar-color: rgba(27,34,48,.35) rgba(255,255,255,.25);
}
.bp-sidebar::-webkit-scrollbar{width:10px}
.bp-sidebar::-webkit-scrollbar-track{background:rgba(255,255,255,.25)}
.bp-sidebar::-webkit-scrollbar-thumb{
  background:rgba(27,34,48,.28);
  border:2px solid rgba(255,255,255,.35);
  border-radius:10px;
}
.bp-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(27,34,48,.40)}
.bp-sidebar-top{padding:2px 2px 8px}
.bp-side-nav{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:4px 2px 20px;
}
.bp-side-group{display:flex;flex-direction:column;gap:8px}
.bp-side-group-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:900;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bp-ink2);
}
.bp-side-link-inline{
  font-weight:800;
  text-decoration:none;
  color:var(--bp-ink);
  opacity:.8;
  letter-spacing:0;
  text-transform:none;
  font-size:12px;
}
.bp-side-link-inline:hover{opacity:1}
.bp-side-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color:var(--bp-ink);
  font-weight:800;
  background:rgba(255,255,255,.65);
  border:3px solid var(--bp-ink);
  box-shadow:4px 4px 0 var(--bp-ink);
}
.bp-side-link:hover{transform:translateY(-1px); background:rgba(255,255,255,.78)}
.bp-side-link:active{transform:translateY(1px); box-shadow:2px 2px 0 var(--bp-ink); background:rgba(61,219,134,.35)}
.bp-side-link--active{
  background:rgba(61,219,134,.35);
  border-color:var(--bp-ink);
}
/* Active sidebar item should not "jump" or change on hover */
.bp-side-link.bp-side-link--active:hover{
  transform:none;
  background:rgba(61,219,134,.35);
}
.bp-side-link.bp-side-link--brand.bp-side-link--active:hover{
  transform:none;
  background:rgba(61,219,134,.72);
}
.bp-side-link-ico{width:22px;text-align:center;opacity:.95}
.bp-side-recent{display:flex;flex-direction:column;gap:8px}
.bp-side-recent-item{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--bp-ink);
  padding:10px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.35);
  border:2px solid rgba(27,34,48,.18);
}
.bp-side-recent-item:hover{background:rgba(255,255,255,.55)}
.bp-side-recent-thumb{
  width:40px;
  height:40px;
  flex:0 0 auto;
  border-radius:12px;
  border:2px solid rgba(27,34,48,.25);
  background:rgba(255,255,255,.45);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(27,34,48,.55);
}
.bp-side-recent-thumb-img{width:100%;height:100%;object-fit:cover;display:block}
.bp-side-recent-body{min-width:0;flex:1}
.bp-side-recent-row{display:flex;align-items:center;gap:8px;min-width:0}
.bp-side-recent-title{
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bp-side-recent-date{
  margin-top:4px;
  font-size:12px;
  color:rgba(27,34,48,.48);
  font-variant-numeric: tabular-nums;
}
.bp-status-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:2px solid rgba(27,34,48,.35);
  flex:0 0 auto;
}
.bp-status-dot--success{background:#3ddb86}
.bp-status-dot--pending{background:#facc15}
.bp-status-dot--error{background:#ef4444}
.bp-side-recent-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  justify-content:space-between;
}
.bp-side-recent-meta code{white-space:nowrap; font-variant-numeric: tabular-nums;}
.bp-sidebar-backdrop{display:none}

/* User menu */
.bp-user-menu{position:relative}
.bp-user-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--bp-border);
  border-radius:999px;
  background:rgba(255,255,255,.90);
  box-shadow:var(--bp-shadow-sm);
  font-weight:900;
  cursor:pointer;
}
.bp-user-btn:hover{box-shadow:var(--bp-shadow-md)}
.bp-user-btn:active{box-shadow:var(--bp-shadow-sm)}
.bp-user-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-avatar{
  position:relative;
  width:34px;
  height:34px;
  padding:2px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:1px solid rgba(105,124,255,.28);
  background:
    radial-gradient(240px 120px at 18% 0%, rgba(255,255,255,.28), transparent 62%),
    linear-gradient(135deg, rgba(105,124,255,1), rgba(61,219,134,.90));
  box-shadow:
    0 18px 44px rgba(105,124,255,.18),
    var(--bp-shadow-sm);
  overflow:hidden;
}
.bp-avatar::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 56%);
  opacity:.55;
  pointer-events:none;
  mix-blend-mode: soft-light;
}
.bp-avatar > *{position:relative; z-index:1}
.bp-avatar-img{
  width:30px;
  height:30px;
  border-radius:999px;
  border:0;
  box-shadow:none;
  object-fit:cover;
  background:rgba(255,255,255,.75);
}
.bp-avatar-fallback{
  width:30px;
  height:30px;
  border-radius:999px;
  border:0;
  box-shadow:none;
  background:rgba(255,255,255,.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
.bp-user-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:220px;
  padding:8px;
  border-radius:14px;
  border:1px solid var(--bp-border);
  background:rgba(255,255,255,.96);
  box-shadow:var(--bp-shadow-lg);
  display:none;
  z-index:60;
}
.bp-user-menu.bp-open .bp-user-dropdown{display:block}
.bp-user-link{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color:var(--bp-ink);
  font-weight:600;
}
.bp-user-link:hover{background:rgba(105,124,255,.08)}
.bp-user-link--support-mobile{display:none}
.bp-user-link--partners-mobile{display:none}

.bp-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}

.bp-card{
  grid-column: span 6;
  background:rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,0.5);
  border-radius:24px;
  box-shadow:var(--bp-shadow-md);
  padding:24px;
  color:var(--bp-ink);
}
.bp-card-wide{grid-column: span 12;}
.bp-card-third{grid-column: span 4;}
.bp-card-hero{
  background:rgba(255, 255, 255, 0.9);
}
.bp-card-title{
  font-family: 'Onest', system-ui, sans-serif;
  font-weight:700;
  font-size:1.25rem;
  margin-bottom:12px;
}
.bp-card-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.bp-card-head .bp-card-title{margin:0}

/* Home onboarding ("С чего начать") */
.bp-onboarding{
  background:linear-gradient(135deg, rgba(105,124,255,.10), rgba(255,255,255,.92));
}

/* =========================
   Announcement bar (welcome offer)
   ========================= */
.bp-announce{
  margin:0 0 14px;
  padding:14px 14px;
  border-radius:16px;
  border:2px solid rgba(105,124,255,.28);
  background:rgba(255,255,255,.86);
  box-shadow:var(--bp-shadow-lg);
}
.bp-announce-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.bp-announce-ico{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:var(--bp-accent);
  background:rgba(105,124,255,.14);
  border:1px solid rgba(105,124,255,.24);
  box-shadow:var(--bp-shadow-sm);
}
.bp-announce-ico svg{display:block}
.bp-announce-body{min-width:0; flex:1 1 360px}
.bp-announce-title{
  font-weight:900;
  font-size:15px;
  line-height:1.25;
}
.bp-announce-text{
  margin-top:6px;
  color:rgba(16,24,40,.72);
  font-size:13px;
  line-height:1.35;
  min-width:0;
}
.bp-announce-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.bp-btn-accent{
  border-color:rgba(105,124,255,.35);
  background:var(--bp-accent);
  color:#fff;
  font-weight:900;
}
.bp-btn-accent:hover{
  border-color:rgba(105,124,255,.45);
  filter:saturate(1.04) brightness(.985);
}
.bp-btn-accent:active{
  filter:none;
  transform:translateY(1px);
  box-shadow:var(--bp-shadow-sm);
}

@media (max-width: 720px){
  .bp-announce-actions{width:100%}
  .bp-announce-actions .bp-btn{width:100%}
}
.bp-onboarding-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.bp-onboarding-close{
  width:38px;
  height:38px;
  border-radius:14px;
  box-shadow:var(--bp-shadow-sm);
}
.bp-onboarding-close:hover{box-shadow:var(--bp-shadow-md)}
.bp-onboarding-close:active{box-shadow:var(--bp-shadow-sm)}
.bp-hero-title{
  font-weight:900;
  font-size:22px;
  line-height:1.2;
}
.bp-hero-subtitle{
  margin-top:8px;
  color:var(--bp-ink2);
}
.bp-hero-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:14px;
}

/* =========================
   Welcome quiz (/app/welcome)
   ========================= */
body.bp-guest.bp-welcome .bp-topbar,
body.bp-guest.bp-welcome .bp-tabbar{
  display:none !important;
}
body.bp-welcome .bp-main{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
}
body.bp-welcome .bp-container{
  width:min(1060px, calc(100% - 48px));
}
.bp-welcome-wrap{
  padding:40px 0 48px;
  width:100%;
}
.bp-welcome-card{
  max-width:1060px;
  margin:0 auto;
}
body.bp-welcome .bp-hero-title{
  font-size:40px;
  line-height:1.15;
}
body.bp-welcome .bp-hero-subtitle{
  font-size:18px;
  line-height:1.5;
}
body.bp-welcome .bp-welcome-q .bp-hero-title{
  margin-bottom:14px;
}

/* Photo upload buttons for welcome screen */
.bp-welcome-custom-dropzone {
  padding: 12px;
  border: 1px dashed transparent;
  background: transparent;
}
.bp-welcome-custom-dropzone.bp-dropzone--drag {
  background: rgba(105, 124, 255, 0.05);
  border-color: var(--bp-accent);
}
.bp-welcome-hidden-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.bp-welcome-photo-options {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 4px;
}
.bp-welcome-photo-option {
  flex: 1;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--bp-border-soft);
  border-radius: 14px;
  padding: 20px 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: var(--bp-shadow-sm);
}
.bp-welcome-photo-option:hover {
  background: #fff;
  border-color: var(--bp-accent);
  box-shadow: var(--bp-shadow-md);
  transform: translateY(-2px);
}
.bp-welcome-photo-icon {
  color: var(--bp-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.bp-welcome-photo-title {
  font-weight: 800;
  font-size: 15px;
  color: var(--bp-ink);
  line-height: 1.2;
}
.bp-welcome-photo-sub {
  font-size: 13px;
  color: var(--bp-ink2);
}
@media (max-width: 480px) {
  .bp-welcome-photo-options {
    flex-direction: column;
  }
  .bp-welcome-photo-option {
    padding: 16px 12px;
  }
}

.bp-welcome-progress{margin-bottom:14px}
.bp-welcome-progress-bar{
  height:6px;
  border-radius:999px;
  background:rgba(16,24,40,.10);
  overflow:hidden;
}
.bp-welcome-progress-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--bp-accent), rgba(61,219,134,1));
  transition:width .22s ease;
}
.bp-welcome-loading{
  text-align:center;
  padding:18px 0 10px;
}
/* ── Realistic progress bar (welcome + workspace) ── */
.bp-gen-progress-wrap{
  margin-top:16px;
  text-align:center;
}
.bp-gen-progress-pct{
  font-size:28px;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--bp-ink);
  margin-bottom:8px;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.bp-gen-progress-track{
  position:relative;
  height:14px;
  border-radius:999px;
  background:rgba(27,34,48,.10);
  border:1px solid var(--bp-border-soft);
  overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(27,34,48,.06);
}
.bp-gen-progress-fill{
  position:absolute;
  top:0;left:0;bottom:0;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--bp-accent), #8ba1ff, #3ddb86);
  background-size:200% 100%;
  animation:bp-gen-gradient-shift 3s ease infinite;
  transition:width .3s cubic-bezier(.4,0,.2,1);
}
.bp-gen-progress-fill::after{
  content:"";
  position:absolute;
  top:0;right:0;bottom:0;
  width:60px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35));
  animation:bp-gen-shimmer 1.6s ease-in-out infinite;
}
@keyframes bp-gen-gradient-shift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes bp-gen-shimmer{
  0%{opacity:0}
  50%{opacity:1}
  100%{opacity:0}
}
.bp-gen-progress-fill.bp-gen-progress--done{
  background:var(--bp-accent2);
  animation:none;
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.bp-gen-progress-fill.bp-gen-progress--done::after{
  animation:none;
  opacity:0;
}
.bp-gen-progress-status{
  margin-top:6px;
  font-size:13px;
  color:var(--bp-ink2);
}
.bp-welcome-loading-warn{
  margin-top:16px;
  font-size:13px;
  color:var(--bp-ink2);
  background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.30);
  border-radius:10px;
  padding:9px 14px;
  line-height:1.4;
}
.bp-welcome-result{
  margin-top:12px;
  display:flex;
  justify-content:center;
}
.bp-welcome-img{
  width:min(560px, 100%);
  height:auto;
  display:block;
  border-radius:18px;
  border:1px solid var(--bp-border);
  box-shadow:var(--bp-shadow-md);
  background:rgba(255,255,255,.86);
}
.bp-welcome-intro-img{
  margin:12px auto 0;
  width:min(520px, 100%);
}
.bp-welcome-intro-layout {
  display: flex;
  flex-direction: column;
}

@media (min-width: 721px) {
  .bp-welcome-intro-layout {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }
  .bp-welcome-intro-text {
    flex: 1;
    min-width: 0;
  }
  .bp-welcome-intro-image-wrap {
    flex: 1;
    min-width: 0;
  }
  .bp-welcome-intro-img {
    margin: 0 !important;
    width: 100% !important;
  }
}

.bp-welcome-actions{margin-top:16px}

.bp-welcome-social-proof {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bp-welcome-social-stars {
  display: flex;
  gap: 2px;
}
.bp-welcome-social-text {
  font-size: 15px;
  color: var(--bp-ink2);
  line-height: 1.3;
}
.bp-welcome-social-text strong {
  color: var(--bp-ink1);
}

/* Intro screen bullet list */
.bp-welcome-bullets{
  list-style:none;
  margin:16px 0 20px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bp-welcome-bullets li{
  font-size:16px;
  font-weight:500;
  color:var(--bp-ink);
  line-height:1.4;
  padding:10px 14px;
  background:rgba(99,102,241,.06);
  border-radius:10px;
  border-left:3px solid var(--bp-accent);
}

/* Photo step tip */
.bp-welcome-tip{
  font-size:13px;
  color:var(--bp-ink2);
  margin-top:8px;
  line-height:1.4;
}

/* Result step upsell block */
.bp-welcome-upsell-block{
  margin-top:14px;
  padding:14px 16px;
  background:rgba(99,102,241,.06);
  border:1px solid rgba(99,102,241,.18);
  border-radius:12px;
}
.bp-welcome-upsell-title{
  font-size:15px;
  font-weight:600;
  color:var(--bp-ink1);
  margin-bottom:6px;
}

/* Mobile: bigger tap targets for welcome flow (buttons were too small). */
@media (max-width: 720px){
  body.bp-welcome .bp-main{
    align-items:flex-start;
  }
  body.bp-welcome .bp-hero-actions,
  body.bp-welcome .bp-welcome-actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  body.bp-welcome .bp-hero-actions .bp-btn,
  body.bp-welcome .bp-welcome-actions .bp-btn{
    width:100%;
    min-height:56px;
    padding:16px 16px;
    font-size:16px;
    border-radius:14px;
  }
  body.bp-welcome .bp-hero-subtitle{font-size:16px}
  body.bp-welcome .bp-hero-title{font-size:28px}
  .bp-welcome-social-proof {
    justify-content: center;
  }
  .bp-welcome-bullets li{
    font-size:15px;
    padding:10px 12px;
  }
}

/* ── Paywall (interstitial after welcome flow) ── */
.bp-paywall-wrap{
  padding:28px 16px 40px;
  max-width:960px;
  margin:0 auto;
  text-align:center;
}
.bp-paywall-discount-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 16px;
  font-size:13px;
  font-weight:600;
  color:#0b7a34;
  background:rgba(61,219,134,.14);
  border:1px solid rgba(61,219,134,.30);
  border-radius:100px;
  margin-bottom:18px;
}
.bp-paywall-wrap .bp-hero{margin-bottom:24px}
.bp-paywall-wrap .bp-hero-title{font-size:26px;line-height:1.25;font-weight:700}
.bp-paywall-wrap .bp-hero-subtitle{
  font-size:15px;
  color:var(--bp-ink2);
  line-height:1.5;
  max-width:520px;
  margin:8px auto 0;
}
.bp-paywall-form{text-align:center}

/* Plan grid */
.bp-paywall-plans{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:20px;
  text-align:left;
}
@media (min-width:861px){
  /* Раскладка по числу планов: 3 плана (A/B no_light) занимают всю ширину. */
  .bp-paywall-plans.bp-paywall-plans--count-3{grid-template-columns:repeat(3,1fr)}
  .bp-paywall-plans.bp-paywall-plans--count-2{grid-template-columns:repeat(2,1fr)}
  .bp-paywall-plans.bp-paywall-plans--count-1{grid-template-columns:minmax(0,420px); justify-content:center}
}
.bp-paywall-plan{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:20px 14px 16px;
  background:var(--bp-card2);
  border:1.5px solid var(--bp-border);
  border-radius:14px;
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .12s;
}
.bp-paywall-plan:hover{
  border-color:var(--bp-accent);
  box-shadow:0 4px 16px rgba(105,124,255,.10);
  transform:translateY(-2px);
}
/* Selected state */
.bp-paywall-plan:has(input:checked){
  border-color:var(--bp-accent);
  box-shadow:0 0 0 2px var(--bp-accent),var(--bp-shadow-sm);
}
.bp-paywall-plan--popular{
  border-color:var(--bp-accent);
}
.bp-paywall-plan-badge{
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  font-weight:600;
  color:#fff;
  background:var(--bp-accent);
  padding:2px 10px;
  border-radius:100px;
  white-space:nowrap;
}
.bp-paywall-plan-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--bp-border-soft);
}
.bp-paywall-plan-title{
  font-size:16px;
  font-weight:700;
}
.bp-paywall-plan-price{
  font-size:24px;
  font-weight:800;
  line-height:1.1;
}
.bp-paywall-plan-cur{
  font-size:13px;
  font-weight:500;
  color:var(--bp-ink2);
}
.bp-paywall-plan-meta{
  font-size:12px;
  color:var(--bp-ink2);
  line-height:1.3;
}
.bp-paywall-plan-gen-price{
  font-size:12px;
  font-weight:600;
  color:var(--bp-accent);
  line-height:1.3;
}

/* Feature list inside plan card */
.bp-paywall-plan-features{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  flex:1;
}
.bp-paywall-plan-features li{
  display:flex;
  align-items:flex-start;
  gap:6px;
  font-size:12px;
  line-height:1.35;
  color:var(--bp-ink);
}
.bp-paywall-feat--no{
  color:rgba(16,24,40,.35);
}
.bp-paywall-feat-ico{
  flex-shrink:0;
  font-size:12px;
  line-height:1.35;
  width:14px;
  text-align:center;
}
.bp-paywall-feat--yes .bp-paywall-feat-ico{color:#0b7a34;font-weight:700}
.bp-paywall-feat--no .bp-paywall-feat-ico{color:rgba(16,24,40,.28)}
.bp-paywall-plan-includes{
  margin:2px 0;
  font-weight:800;
  font-size:12px;
  line-height:1.35;
  color:rgba(16,24,40,.78);
}
.bp-paywall-feat--new .bp-paywall-feat-ico{color:#1bba66;font-weight:800}
.bp-paywall-feat--new{font-weight:400}

/* Email section */
.bp-paywall-email-section{
  max-width:380px;
  margin:0 auto 16px;
  text-align:left;
}
.bp-paywall-email-section .bp-label{
  display:block;
  margin-bottom:4px;
  font-size:13px;
  font-weight:600;
}
.bp-paywall-email-section .bp-input{
  width:100%;
}

/* Actions */
.bp-paywall-actions{
  margin-bottom:12px;
}
.bp-paywall-main-cta{
  min-width:300px;
  padding:14px 32px;
  font-size:16px;
}
.bp-paywall-skip{
  margin-bottom:18px;
  text-align:center;
}
.bp-paywall-skip-link{
  color:var(--bp-muted);
  font-size:13px;
  text-decoration:none;
  transition:color .15s;
}
.bp-paywall-skip-link:hover{
  color:var(--bp-text);
  text-decoration:underline;
}
.bp-paywall-proof{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.bp-paywall-proof-stars{
  display:flex;
  gap:2px;
}
.bp-paywall-proof-text{
  font-size:13px;
  color:var(--bp-ink2);
  line-height:1.3;
}
.bp-paywall-proof-text strong{
  color:var(--bp-ink);
}

/* ── Paywall responsive ── */
@media (max-width:860px){
  .bp-paywall-plans{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:520px){
  .bp-paywall-wrap{padding:16px 12px 28px}
  .bp-paywall-wrap .bp-hero-title{font-size:22px}
  .bp-paywall-plans{
    grid-template-columns:1fr;
    gap:10px;
  }
  .bp-paywall-plan{
    flex-direction:row;
    flex-wrap:wrap;
    padding:14px 16px;
  }
  .bp-paywall-plan-header{
    flex-direction:row;
    align-items:baseline;
    gap:8px;
    flex-wrap:wrap;
    border-bottom:none;
    margin-bottom:0;
    padding-bottom:0;
    width:100%;
  }
  .bp-paywall-plan-title{font-size:15px}
  .bp-paywall-plan-price{font-size:18px}
  .bp-paywall-plan-meta{flex-basis:100%}
  .bp-paywall-plan-badge{
    position:static;
    transform:none;
    align-self:flex-start;
    margin-bottom:4px;
    order:-1;
    flex-basis:100%;
  }
  .bp-paywall-plan-features{
    width:100%;
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--bp-border-soft);
  }
  .bp-paywall-main-cta{
    width:100%;
    min-width:0;
    min-height:54px;
    border-radius:14px;
  }
  .bp-paywall-proof{flex-direction:column;gap:4px}
}

.bp-muted{color:var(--bp-ink2)}
.bp-small{font-size:13px}
.bp-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-variant-numeric: tabular-nums;
}
.bp-hint{
  font-size:12px;
  color:rgba(27,34,48,.52);
  line-height:1.35;
}
.bp-ok{color:#0b7a34}
.bp-warn{color:#8a6b00}

.bp-divider{
  height:1px;
  background:var(--bp-border-soft);
  margin:12px 0;
}

.bp-list{margin:10px 0 0 18px}
.bp-list li{margin:6px 0}

.bp-note{
  margin-top:12px;
  padding:10px 12px;
  border:1px dashed rgba(16,24,40,.28);
  border-radius:12px;
  background:rgba(255,255,255,.72);
}

/* =========================
   Referrals (settings)
   ========================= */
.bp-ref-card{
  background:
    radial-gradient(320px 180px at 88% 0%, rgba(105,124,255,.14), transparent 68%),
    radial-gradient(260px 160px at 10% 30%, rgba(61,219,134,.10), transparent 70%),
    rgba(255,255,255,.92);
  border-color:rgba(105,124,255,.14);
}
.bp-ref-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 720px){
  .bp-ref-stats{grid-template-columns: 1fr; gap:10px}
}
.bp-ref-stat{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(16,24,40,.10);
  background:rgba(255,255,255,.70);
  box-shadow:var(--bp-shadow-sm);
}
.bp-ref-partner{
  background: linear-gradient(135deg, rgba(105,124,255,.06), rgba(168,85,247,.06));
  border: 1px solid rgba(105,124,255,.15);
  border-radius: 14px;
  padding: 20px;
}
.bp-ref-partner-head{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bp-ink);
  margin-bottom: 12px;
}
.bp-ref-partner-head svg{
  color: var(--bp-accent);
  flex-shrink: 0;
}
.bp-ref-partner-text{
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--bp-ink-soft);
  margin: 0 0 10px;
}
.bp-ref-partner-text:last-of-type{
  margin-bottom: 16px;
}
.bp-ref-partner-text b{
  color: var(--bp-ink);
  font-weight: 600;
}
.bp-ref-val{
  margin-top:6px;
  font-weight:900;
  font-size:18px;
  letter-spacing:-0.02em;
}

.bp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  text-decoration:none;
  border:1px solid var(--bp-border-soft);
  border-radius:100px;
  box-shadow:var(--bp-shadow-sm);
  color:var(--bp-ink);
  background:#ffffff;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
}
.bp-btn:hover{
  background:#f8fafc;
  color:var(--bp-ink);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(16,24,40,0.08);
}
.bp-btn:active{
  transform:translateY(1px);
  box-shadow:var(--bp-shadow-sm);
}
.bp-btn:disabled,
.bp-btn[disabled]{
  opacity:.62;
  cursor:not-allowed;
  filter:saturate(.95);
}
.bp-btn:disabled:hover,
.bp-btn[disabled]:hover{box-shadow:var(--bp-shadow-sm)}
.bp-btn-primary{
  position:relative;
  z-index:0;
  overflow:hidden;
  padding:14px 24px;
  min-height:52px;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight:600;
  letter-spacing:0;
  border-radius:100px;
  color:#fff;
  background: var(--bp-accent);
  border:none;
  box-shadow: 0 8px 24px rgba(105, 124, 255, 0.25);
  transition:all .25s ease;
  will-change:transform;
}
.bp-btn-primary::after{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:50%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform:skewX(-20deg);
  animation:ctaShine 4s infinite;
  pointer-events:none;
}
.bp-btn-primary > *{position:relative; z-index:1}
.bp-btn-primary:hover{
  background: #5463cc;
  color:#fff;
  transform:translateY(-2px);
  box-shadow: 0 12px 32px rgba(105, 124, 255, 0.35);
}
.bp-btn-primary:active{
  transform:translateY(1px);
  box-shadow: 0 4px 16px rgba(105, 124, 255, 0.25);
}

@keyframes ctaShine {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}
.bp-btn-primary:disabled,
.bp-btn-primary[disabled]{transform:none}
.bp-btn-primary:disabled::after,
.bp-btn-primary[disabled]::after{display:none}
.bp-btn-ghost{background:rgba(255,255,255,.65)}
.bp-btn-danger{
  border-color:rgba(239,68,68,.65);
  background:#ef4444;
  color:#fff;
}
.bp-btn-danger:hover{
  border-color:rgba(220,38,38,.85);
  background:#dc2626;
  color:#fff;
}
.bp-btn-danger:active{background:#b91c1c}
.bp-btn-mini{
  padding:6px 8px;
  min-height:40px;
  border-width:1px;
  border-radius:10px;
  box-shadow:var(--bp-shadow-sm);
  font-weight:600;
  font-size:12px;
}

/* Auth provider buttons (login) */
.bp-auth-buttons{
  width:100%;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:10px;
  align-items:center;
}
.bp-telegram-widget{
  display:flex;
  justify-content:center;
  min-height:44px;
}
.bp-auth-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--bp-border);
  box-shadow:var(--bp-shadow-sm);
  background:rgba(255,255,255,.92);
  color:var(--bp-ink);
  text-decoration:none;
  font-weight:800;
  min-height:44px;
  cursor:pointer;
  transition:box-shadow .16s ease, filter .16s ease, transform .16s ease;
}
.bp-auth-btn:hover{box-shadow:var(--bp-shadow-md)}
.bp-auth-btn:active{box-shadow:var(--bp-shadow-sm); transform:translateY(1px)}
.bp-auth-btn-ico{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.bp-auth-btn-ico--yandex{
  border-radius:999px;
  background:#ff0000;
  color:#fff;
  font-weight:900;
  font-size:14px;
  line-height:1;
}
.bp-auth-btn--yandex{
  background:#ffcc00;
  border-color:rgba(0,0,0,.12);
  color:#111;
}
.bp-auth-btn--yandex:hover{filter:saturate(1.05) brightness(0.98)}
.bp-auth-btn--telegram{
  background:#2aabee;
  border-color:rgba(42,171,238,.35);
  color:#fff;
}
.bp-auth-btn--telegram:hover{filter:saturate(1.05) brightness(0.98)}
.bp-auth-btn--telegram:active{filter:saturate(1.03) brightness(0.96)}
.bp-auth-btn--vk{
  background:#0077FF;
  border-color:rgba(0,119,255,.35);
  color:#fff;
}
.bp-auth-btn--vk:hover{filter:saturate(1.05) brightness(0.98)}
.bp-auth-btn--vk:active{filter:saturate(1.03) brightness(0.96)}
.bp-auth-btn--google{
  background:#fff;
  border-color:rgba(0,0,0,.15);
  color:#333;
}
.bp-auth-btn--google:hover{background:#f8f8f8;box-shadow:var(--bp-shadow-md)}

/* =========================
   Login page (/app/login*)
   ========================= */
.bp-login-wrap{
  display:flex;
  justify-content:center;
  padding:22px 0 34px;
}
.bp-login-card{
  width:min(560px, 100%);
}
.bp-login{
  padding:6px 2px;
  text-align:center;
}
.bp-login-mark{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  border-radius:14px;
  color:#fff;
  background:
    radial-gradient(240px 120px at 18% 0%, rgba(255,255,255,.28), transparent 62%),
    linear-gradient(135deg, rgba(105,124,255,1), rgba(61,219,134,.90));
  box-shadow:
    0 18px 44px rgba(105,124,255,.22),
    var(--bp-shadow-sm);
}
.bp-login-title{
  margin-top:14px;
  font-weight:900;
  font-size:28px;
  line-height:1.12;
  letter-spacing:-0.02em;
}
.bp-login-subtitle{
  margin-top:10px;
  color:var(--bp-ink2);
}
.bp-login-buttons{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(420px, 100%);
  margin-left:auto;
  margin-right:auto;
}
.bp-login-buttons .bp-auth-btn{width:100%}
.bp-login-buttons .bp-btn{width:100%}
.bp-login-note{margin-top:8px}
.bp-email-auth{
  margin-top:18px;
  width:min(420px, 100%);
  margin-left:auto;
  margin-right:auto;
}
.bp-email-input-row{
  display:flex;
  gap:8px;
}
.bp-email-input-row .bp-input{
  flex:1;
  min-width:0;
}
.bp-email-input-row .bp-btn{
  flex:0 0 auto;
  white-space:nowrap;
}
.bp-email-sent-note{
  margin-bottom:10px;
  font-size:14px;
  color:var(--bp-ink2);
}
.bp-email-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:8px;
}
.bp-email-error{
  margin-top:8px;
  color:#d32f2f;
  text-align:center;
}
.bp-login-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px auto;
  width:min(420px, 100%);
  color:var(--bp-ink3, #999);
  font-size:13px;
}
.bp-login-divider::before,
.bp-login-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--bp-border, #e0e0e0);
}
.bp-login-context-note{
  margin-top:10px;
  margin-bottom:4px;
  font-size:14px;
  color:var(--bp-ink2);
  line-height:1.55;
}
@media (max-width: 720px){
  .bp-login-title{font-size:22px}
}

.bp-form{margin-top:14px}
.bp-form-row{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
  margin-top:12px;
}
.bp-field{grid-column:span 6}
.bp-field[data-templates]{grid-column:span 6}

/* Отступ между строкой грида и следующим одиночным полем (иначе лейблы липнут к предыдущему блоку) */
.bp-form-row + .bp-field{margin-top:12px}

/* Desktop: "paired blocks" look ровно по высоте (dropzone / check-group). Однострочные .bp-input не растягиваем. */
@media (min-width: 921px){
  .bp-form-row--equal .bp-field{
    display:flex;
    flex-direction:column;
    height:100%;
  }
  .bp-form-row--equal .bp-field > .bp-dropzone,
  .bp-form-row--equal .bp-field > .bp-check-group{
    flex:1 1 auto;
  }
  .bp-form-row--equal .bp-dropzone{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .bp-form-row--equal .bp-drop-ui{width:100%}
}

/* Grid helpers (avoid inline grid-column styles; easier to override on mobile) */
.bp-col-12{grid-column:span 12}
.bp-col-9{grid-column:span 9}
.bp-col-6{grid-column:span 6}
.bp-col-8{grid-column:span 8}
.bp-col-4{grid-column:span 4}
.bp-col-3{grid-column:span 3}
.bp-field-end{display:flex; align-items:flex-end; justify-content:flex-end}
.bp-label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
}
.bp-field .bp-hint,
.bp-field .bp-muted.bp-small{
  margin-top:6px;
}

.bp-section-title{
  font-weight:900;
  margin:0 0 8px;
}

.bp-field.bp-invalid .bp-label{color:var(--bp-danger)}
.bp-input.bp-invalid{
  border-color:var(--bp-danger);
  background:rgba(255,77,77,.08);
}
.bp-dropzone.bp-invalid{
  border-color:rgba(255,77,77,.75);
  background:rgba(255,77,77,.10);
}

.bp-check-group{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:2px dashed rgba(27,34,48,.25);
  background:rgba(255,255,255,.25);
}
.bp-check-group--grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.bp-check-group--grid .bp-check,
.bp-check-group--grid .bp-choice{margin:0}

/* Flat wrapper for checkbox/radio groups when the inner content already uses cards/grid (e.g. clothing formats). */
.bp-check-group--flat{
  padding:0;
  border:none;
  background:transparent;
}

/* Choice tiles (used in clothing formats picker) */
.bp-choice{
  position:relative;
  display:block;
  min-width:0;
  cursor:pointer;
}
.bp-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}
.bp-choice-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border-radius:14px;
  border:2px solid rgba(27,34,48,.14);
  background:rgba(245,246,248,.85);
  min-width:0;
}
.bp-choice:hover .bp-choice-card{background:rgba(245,246,248,.95)}
.bp-choice-thumb{
  width:100%;
  aspect-ratio:3/4;
  border-radius:12px;
  border:1px solid var(--bp-border-soft);
  background:rgba(255,255,255,.78);
  overflow:hidden;
}
.bp-choice-thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.bp-choice-title{
  font-weight:900;
  font-size:14px;
  line-height:1.15;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bp-choice input:checked + .bp-choice-card{
  border-color:rgba(105,124,255,.35);
  box-shadow: var(--bp-shadow-md);
}
.bp-choice input:checked + .bp-choice-card::after{
  content:"✓";
  position:absolute;
  top:10px;
  right:10px;
  width:26px;
  height:26px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(105,124,255,.28);
  color:rgba(16,24,40,.85);
  font-weight:900;
}

/* =========================
   Custom edit: Aspect ratio picker
   ========================= */
.bp-ar-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}

.bp-ar-opt{
  position:relative;
  display:block;
  min-width:0;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.bp-ar-opt input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}
.bp-ar-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:78px;
  padding:9px;
  border-radius:21px;
  border:1px solid var(--bp-border-soft);
  background:rgba(255,255,255,.92);
  color:rgba(16,24,40,.62);
  box-shadow:var(--bp-shadow-sm);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
  will-change:transform;
}
.bp-ar-opt:hover .bp-ar-btn{box-shadow:var(--bp-shadow-md)}
.bp-ar-opt input:active + .bp-ar-btn{transform:translateY(1px); box-shadow:var(--bp-shadow-sm)}
.bp-ar-opt input:focus-visible + .bp-ar-btn{
  outline:3px solid rgba(105,124,255,.25);
  outline-offset:6px;
}

.bp-ar-svg{
  width:100%;
  height:100%;
  max-width:66px;
  max-height:66px;
  display:block;
}
.bp-ar-rect{
  fill:rgba(16,24,40,.035);
  stroke:currentColor;
  stroke-width:4;
}
.bp-ar-txt{
  fill:currentColor;
  font-weight:900;
  font-size:18px;
  letter-spacing:-0.02em;
}

/* Selected: brand accent (not black) */
.bp-ar-opt input:checked + .bp-ar-btn{
  border-color:rgba(105,124,255,.38);
  background:
    radial-gradient(160px 90px at 18% 0%, rgba(255,255,255,.26), transparent 62%),
    linear-gradient(135deg, var(--bp-accent), rgba(61,219,134,.92));
  color:#fff;
  box-shadow:0 18px 44px rgba(105,124,255,.22), var(--bp-shadow-md);
  transform:translateY(-1px);
}
.bp-ar-opt input:checked:active + .bp-ar-btn{transform:translateY(0)}
.bp-ar-opt input:checked + .bp-ar-btn::after{
  content:"✓";
  position:absolute;
  top:12px;
  right:12px;
  width:33px;
  height:33px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.42);
  color:rgba(16,24,40,.78);
  font-weight:900;
}

.bp-check-group.bp-invalid{
  border-color:rgba(255,77,77,.85);
  background:rgba(255,77,77,.08);
}
.bp-check-group--flat.bp-invalid{
  border:none;
  background:transparent;
  outline:3px solid rgba(255,77,77,.25);
  outline-offset:4px;
  border-radius:14px;
}

.bp-file-previews{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.bp-file-thumb{
  width:64px;
  height:64px;
  border-radius:12px;
  border:2px solid rgba(27,34,48,.25);
  background:rgba(255,255,255,.55);
  position:relative;
  overflow:hidden;
  box-shadow:2px 2px 0 rgba(27,34,48,.25);
}
.bp-file-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.bp-file-thumb-remove{
  position:absolute;
  top:6px;
  right:6px;
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.38);
  background:rgba(16,24,40,.78);
  color:#fff;
  font-weight:900;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  transform:scale(.92);
  transition:opacity .12s ease, transform .12s ease;
}
.bp-file-thumb:hover .bp-file-thumb-remove,
.bp-file-thumb:focus-within .bp-file-thumb-remove{
  opacity:1;
  transform:scale(1);
}
@media (hover: none){
  .bp-file-thumb-remove{
    opacity:1;
    transform:scale(1);
  }
}
.bp-file-thumb-more{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:rgba(27,34,48,.72);
}

.bp-brand-preview{
  margin-top:10px;
}
.bp-brand-preview-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:12px;
  background:rgba(255,255,255,.85);
  border:1px solid var(--bp-border);
  border-radius:14px;
  flex-wrap:wrap;
}
.bp-brand-preview-thumbs{
  display:flex;
  gap:10px;
  align-items:flex-start;
  flex-shrink:0;
}
.bp-brand-preview-bg-wrap,
.bp-brand-preview-logo-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.bp-brand-preview-bg-thumb{
  width:90px;
  height:120px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(27,34,48,.10);
  background:#f3f4f6;
  display:block;
}
.bp-brand-preview-logo-thumb{
  width:60px;
  height:60px;
  object-fit:contain;
  border-radius:10px;
  border:1px solid rgba(27,34,48,.10);
  background:#fff;
  padding:6px;
  display:block;
}
.bp-brand-preview-thumb-cap{
  font-size:11px;
  color:rgba(27,34,48,.55);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.bp-brand-preview-info{
  flex:1 1 200px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bp-brand-preview-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  justify-content:space-between;
  flex-wrap:wrap;
}
.bp-brand-preview-edit{
  font-size:12px;
  color:var(--bp-accent);
  text-decoration:none;
  white-space:nowrap;
}
.bp-brand-preview-edit:hover{text-decoration:underline}
.bp-brand-preview-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.bp-brand-preview-name{
  font-weight:900;
  color:rgba(27,34,48,.85);
  font-size:14px;
}
.bp-brand-preview-palette{display:flex; gap:6px}
.bp-brand-preview-swatch{
  width:20px;
  height:20px;
  border-radius:8px;
  border:2px solid rgba(27,34,48,.35);
  box-shadow:2px 2px 0 rgba(27,34,48,.25);
}
.bp-brand-preview-color-codes{
  font-size:11px;
  color:rgba(27,34,48,.55);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:.02em;
}
.bp-brand-preview-meta{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.bp-brand-preview-meta-line{
  font-size:12px;
  line-height:1.45;
  color:rgba(27,34,48,.75);
}
.bp-brand-preview-meta-label{
  font-weight:700;
  color:rgba(27,34,48,.85);
}
.bp-brand-preview-meta-value{
  color:rgba(27,34,48,.65);
}
.bp-input{
  width:100%;
  border:1px solid var(--bp-border);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(255,255,255,.92);
  color:var(--bp-ink);
  font:inherit;
}
.bp-input--muted{
  background:rgba(255,255,255,.70);
  border-color:var(--bp-border-soft);
}
textarea.bp-input{resize:vertical}

/* Input wrapper with a right-side status icon (promo code, etc.) */
.bp-input-wrap{position:relative}
.bp-input-wrap--icon .bp-input{padding-right:40px}
.bp-input-icon{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  display:none;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  line-height:1;
  user-select:none;
}

/* Promo status states (JS toggles classes on .bp-promo-field) */
.bp-promo-field.bp-promo--ok .bp-label{color:#0b7a34}
.bp-promo-field.bp-promo--ok .bp-input{
  border-color:rgba(11,122,52,.38);
  background:rgba(11,122,52,.06);
  color:#0b7a34;
}
.bp-promo-field.bp-promo--ok .bp-input-icon{
  display:flex;
  background:rgba(11,122,52,.12);
  color:#0b7a34;
  border:1px solid rgba(11,122,52,.28);
}
.bp-promo-field.bp-promo--bad .bp-label{color:var(--bp-danger)}
.bp-promo-field.bp-promo--bad .bp-input{
  border-color:var(--bp-danger);
  background:rgba(255,77,77,.08);
  color:var(--bp-danger);
}
.bp-promo-field.bp-promo--bad .bp-input-icon{
  display:flex;
  background:rgba(255,77,77,.10);
  color:var(--bp-danger);
  border:1px solid rgba(255,77,77,.30);
}
.bp-promo-field.bp-promo--loading .bp-input-icon{
  display:flex;
  border:2px solid rgba(27,34,48,.18);
  border-top-color:var(--bp-accent);
  background:transparent;
  color:transparent;
  font-size:0;
  animation:bp-spin .9s linear infinite;
}
.bp-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  background:rgba(255,255,255,.4);
  border:2px dashed rgba(27,34,48,.4);
  border-radius:12px;
}
.bp-check input{margin-top:2px}

/* =========================
   Infographic: Mode selector
   ========================= */
.bp-mode{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.bp-mode-opt{
  position:relative;
  display:block;
  min-width:0;
  cursor:pointer;
}
.bp-mode-opt input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}
.bp-mode-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 14px 12px 46px;
  border-radius:14px;
  border:1px solid rgba(16,24,40,.14);
  background:rgba(255,255,255,.72);
  box-shadow:var(--bp-shadow-sm);
  transition:box-shadow .16s ease, transform .16s ease, background .16s ease, border-color .16s ease;
  min-width:0;
  min-height:54px;
  -webkit-tap-highlight-color: transparent;
}
.bp-mode-card::before{
  content:"";
  position:absolute;
  top:14px;
  left:14px;
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid rgba(16,24,40,.22);
  background:rgba(255,255,255,.92);
}
.bp-mode-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.bp-mode-title{
  font-weight:900;
  line-height:1.15;
  min-width:0;
}
.bp-mode-desc{
  color:rgba(16,24,40,.70);
  font-size:13px;
  line-height:1.25;
  min-width:0;
}
.bp-mode-opt:hover .bp-mode-card{
  background:rgba(255,255,255,.86);
  box-shadow:var(--bp-shadow-md);
  transform:translateY(-1px);
}
.bp-mode-opt:active .bp-mode-card{
  transform:translateY(0);
  box-shadow:var(--bp-shadow-sm);
}
.bp-mode-opt input:checked + .bp-mode-card{
  border-color:rgba(105,124,255,.38);
  background:rgba(105,124,255,.06);
  box-shadow:0 0 0 3px rgba(105,124,255,.18), var(--bp-shadow-md);
}
.bp-mode-opt input:checked + .bp-mode-card::before{
  border-color:rgba(105,124,255,.62);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 38%, transparent 42%),
    linear-gradient(135deg, rgba(105,124,255,1), rgba(61,219,134,.92));
}
.bp-mode-opt input:focus-visible + .bp-mode-card{
  outline:3px solid rgba(105,124,255,.45);
  outline-offset:2px;
}
.bp-mode-opt input:disabled + .bp-mode-card{
  cursor:not-allowed;
  opacity:.62;
  transform:none;
  box-shadow:var(--bp-shadow-sm);
  background:rgba(255,255,255,.55);
}
.bp-mode-opt input:disabled + .bp-mode-card::before{
  border-color:rgba(16,24,40,.16);
  background:rgba(255,255,255,.82);
}
.bp-mode-pro{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:900;
  white-space:nowrap;
}
.bp-mode-pro svg{width:14px;height:14px;display:block;opacity:.85}

.bp-template{
  margin-top:14px;
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.45);
  border:2px solid rgba(27,34,48,.25);
}
.bp-template-title{
  font-weight:900;
  margin-bottom:10px;
}

.bp-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.bp-loading{
  position:fixed;
  inset:0;
  background:rgba(27,34,48,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.bp-loading-card{
  width:min(520px, 100%);
  background:rgba(255,255,255,.92);
  border:1px solid var(--bp-border);
  border-radius:16px;
  box-shadow:var(--bp-shadow-lg);
  padding:16px;
  text-align:center;
}
.bp-loading-title{
  font-weight:900;
  font-size:20px;
}

.bp-flash-stack{
  position:fixed;
  top:86px;
  right:14px;
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(360px, calc(100% - 28px));
  pointer-events:none;
}
.bp-flash{
  position:relative;
  padding:12px 38px 12px 14px;
  border:1px solid var(--bp-border);
  border-radius:12px;
  box-shadow:var(--bp-shadow-md);
  background:#FFFFFF;
  font-weight:600;
  pointer-events:auto;
  color:#111827;
}
.bp-flash-error{background:#FEE2E2;border-color:#FCA5A5;color:#7F1D1D}
.bp-flash-info{background:#FFFFFF}
.bp-flash-success{background:#DCFCE7;border-color:#86EFAC;color:#14532D}
.bp-flash-warn{background:#FEF3C7;border-color:#FCD34D;color:#78350F}
.bp-flash-warning{background:#FEF3C7;border-color:#FCD34D;color:#78350F}
.bp-flash-close{
  position:absolute;
  top:6px;
  right:6px;
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  opacity:.65;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  font-weight:700;
}
.bp-flash-close:hover{opacity:1;background:rgba(0,0,0,.06)}
.bp-flash-close:focus-visible{outline:2px solid currentColor;outline-offset:1px;opacity:1}

/* ── Global progress popup ── */
.bp-global-progress{
  position:fixed;
  bottom:24px;
  right:20px;
  z-index:110;
  width:min(340px, calc(100% - 40px));
  pointer-events:auto;
  animation: bp-gp-slide-in .25s ease-out;
}
@keyframes bp-gp-slide-in{
  from{opacity:0; transform:translateY(16px)}
  to{opacity:1; transform:translateY(0)}
}
.bp-gp-inner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--bp-border);
  border-radius:14px;
  box-shadow:var(--bp-shadow-lg, 0 8px 24px rgba(0,0,0,.12));
  backdrop-filter:blur(8px);
}
.bp-gp-icon{font-size:20px; flex-shrink:0;}
.bp-gp-body{flex:1; min-width:0;}
.bp-gp-text{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bp-gp-bar-wrap{
  height:4px;
  background:var(--bp-border-soft, #eee);
  border-radius:2px;
  margin-top:5px;
  overflow:hidden;
}
.bp-gp-bar{
  height:100%;
  background:var(--bp-accent, #6366f1);
  border-radius:2px;
  transition:width .4s ease;
}
.bp-gp-link{
  font-size:12px;
  font-weight:600;
  color:var(--bp-accent, #6366f1);
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
}
.bp-gp-link:hover{text-decoration:underline;}
@media (max-width:980px){
  .bp-global-progress{
    bottom:calc(72px + var(--bp-safe-bottom, 0px));
    right:12px;
    width:min(320px, calc(100% - 24px));
  }
}

.bp-table{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bp-table-row{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:10px;
  align-items:center;
}
.bp-table-compact .bp-table-row{
  grid-template-columns: 1.2fr 1fr .9fr;
}
.bp-table-head{
  font-weight:900;
  color:var(--bp-ink2);
}
.bp-card-titles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.bp-title-examples {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.bp-title-examples .bp-hint {
  margin-top: 0;
  margin-right: 2px;
}
.bp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: rgba(16,24,40,.06);
  color: var(--bp-ink2);
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  font-family: inherit;
  line-height: 1.2;
}
.bp-chip:hover {
  background: rgba(16,24,40,.08);
  color: var(--bp-ink);
}
.bp-chip:active {
  transform: scale(0.97);
}
.bp-table--payments{
  gap:6px;
}
.bp-table--payments .bp-table-row{
  grid-template-columns: 1.35fr 1fr .9fr;
}
.bp-table--payments .bp-table-row:not(.bp-table-head){
  padding:10px 12px;
  border-radius:12px;
  border:2px solid rgba(27,34,48,.14);
  background:rgba(255,255,255,.35);
}
.bp-table--payments .bp-table-head{
  padding:0 4px;
}
.bp-right{text-align:right}
.bp-badge{
  display:inline-flex;
  padding:6px 8px;
  border:1px solid var(--bp-border-soft);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:600;
}
.bp-badge--tiny{
  padding:4px 6px;
  font-size:11px;
  font-weight:700;
  line-height:1;
}
.bp-badge--soft{
  background:rgba(255,255,255,.60);
  border-color:var(--bp-border-soft);
}
.bp-badge--metric{
  background:rgba(105,124,255,.14);
  border-color:rgba(105,124,255,.24);
}
body.bp-billing--one_time #bp-billing-form .bp-badge--metric{
  background:rgba(105,124,255,.14);
  border-color:rgba(105,124,255,.24);
}
.bp-badge--popular{
  background:rgba(61,219,134,.18);
  border-color:rgba(61,219,134,.26);
}
.bp-badge--share{
  background:rgba(255,255,255,.72);
  border-color:var(--bp-border-soft);
}
.bp-badge--warn{
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.26);
}
.bp-badge--beta{
  background:rgba(105,124,255,.14);
  border-color:rgba(105,124,255,.24);
  font-size:11px;
  font-weight:700;
  padding:3px 8px;
  border-radius:20px;
  vertical-align:middle;
  margin-left:6px;
}
.bp-badge--ghost{
  background:rgba(16,24,40,.04);
  border-color:var(--bp-border-soft);
  color:var(--bp-ink2);
}

.bp-result{margin-top:12px}
.bp-result-img{
  width:100%;
  max-width:720px;
  border-radius:14px;
  border:1px solid var(--bp-border);
  box-shadow:var(--bp-shadow-md);
  image-rendering:auto;
}
.bp-result-list{
  margin-bottom:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.bp-result-item{
  padding:10px;
  border-radius:14px;
  border:2px solid rgba(27,34,48,.14);
  background:rgba(255,255,255,.50);
  min-width:0;
}
.bp-result-item-title{
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bp-result-item .bp-actions{margin-top:10px}

/* WB generate page */
.bp-gen-layout{
  display:grid;
  /* 60/40 split (settings/results). Use fr to avoid overflow with gaps. */
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap:14px;
  align-items:start;
}
.bp-gen-layout > *{min-width:0}
/* .bp-card has grid-column: span 6 globally (for 12-col grids). Override here to prevent implicit columns + cropping. */
.bp-gen-layout .bp-card{grid-column:auto}
.bp-gen-form{grid-column:1}
@media (max-width: 980px){
  .bp-gen-layout{grid-template-columns:1fr}
  .bp-gen-form,.bp-gen-result{grid-column:auto}
}

.bp-gen-result{
  grid-column:2;
  position:sticky;
  top:86px;
}
@media (max-width: 980px){
  /* Important: override grid-column too, otherwise "grid-column:2" creates an implicit second column on mobile. */
  .bp-gen-result{position:relative; top:auto; grid-column:auto;}
}

/* Generic workspace split (used by other generation pages) */
.bp-workspace{
  display:grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap:14px;
  align-items:start;
}
.bp-workspace > *{min-width:0}
/* Override global 12-col bp-card behavior inside 2-col workspace. */
.bp-workspace .bp-card{grid-column:auto}
.bp-workspace-main{grid-column:1}
.bp-workspace-side{
  grid-column:2;
  position:sticky;
  top:86px;
}
@media (max-width: 980px){
  .bp-workspace{grid-template-columns:1fr}
  .bp-workspace-main,.bp-workspace-side{grid-column:auto}
  .bp-workspace-side{position:relative; top:auto;}
}

.bp-ws-preview{
  margin-top:12px;
}
.bp-ws-list{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bp-ws-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  border:2px solid rgba(27,34,48,.14);
  background:rgba(255,255,255,.50);
  text-decoration:none;
  color:var(--bp-ink);
}
.bp-ws-item:hover{background:rgba(255,255,255,.70)}
.bp-ws-item--disabled{opacity:.7; cursor:default}
.bp-ws-meta{min-width:0; flex:1}
.bp-ws-title{font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bp-ws-sub{margin-top:4px; font-size:12px; color:rgba(27,34,48,.52); font-variant-numeric: tabular-nums;}

/* Workspace results: 2-column gallery (без открытия по клику) */
.bp-ws-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
.bp-ws-grid--home{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px){
  .bp-ws-grid--home{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 560px){
  .bp-ws-grid--home{grid-template-columns: 1fr}
}
.bp-ws-tile{
  border-radius:14px;
  border:2px solid rgba(27,34,48,.14);
  background:rgba(255,255,255,.50);
  padding:10px;
  min-width:0;
}
.bp-ws-tile-thumb{
  position:relative;
  aspect-ratio: 3/4;
  border-radius:14px;
  border:2px solid rgba(27,34,48,.18);
  overflow:hidden;
  background:rgba(255,255,255,.55);
}
.bp-ws-tile-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  cursor:zoom-in;
  user-select:none;
  -webkit-user-drag:none;
}
.bp-ws-tile-actions{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:0; /* override .bp-actions default spacing */
  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;
}
.bp-ws-tile-actions-right{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  align-items:center;
}
.bp-ws-tile:hover .bp-ws-tile-actions,
.bp-ws-tile:focus-within .bp-ws-tile-actions{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.bp-ws-tile-meta{margin-top:8px; min-width:0}
.bp-ws-tile-title{font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bp-ws-tile-sub{
  margin-top:4px;
  font-size:12px;
  color:rgba(27,34,48,.52);
  font-variant-numeric: tabular-nums;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.bp-actions--tight{margin-top:10px}

.bp-page-head{margin-bottom:10px}
.bp-page-title{
  font-weight:900;
  font-size:28px;
  line-height:1.15;
}
.bp-page-sub{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.bp-cost-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:2px solid rgba(27,34,48,.35);
  background:rgba(255,255,255,.45);
  font-weight:900;
}

.bp-form-section{margin-top:22px}
.bp-field-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
/* На WB-странице показываем сразу все шаблоны без внутреннего скролла — тумблер больше не нужен. */
#bp-templates-toggle{display:none}
.bp-link{
  appearance:none;
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  color:var(--bp-ink2);
  font-weight:700;
  text-decoration:underline;
}
.bp-link:hover{color:var(--bp-ink)}

.bp-seg{
  display:flex;
  align-items:stretch;
  gap:4px;
  padding:4px;
  border:1px solid rgba(16,24,40,.08);
  border-radius:14px;
  background:rgba(16,24,40,.04);
  box-shadow:inset 0 1px 2px rgba(16,24,40,.04);
}
.bp-seg-item{
  position:relative;
  flex:1;
  display:flex;
  cursor:pointer;
  user-select:none;
  min-width:0;
}
.bp-seg-item input{position:absolute; opacity:0; pointer-events:none}
.bp-seg-item input + span{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  min-height:40px;
  border-radius:10px;
  font-weight:700;
  text-align:center;
  line-height:1.15;
  background:transparent;
  color: rgba(16,24,40,.65);
  min-width:0;
  transition: all .2s ease;
}
.bp-seg-item input:checked + span{
  background:#fff;
  color:var(--bp-ink);
  box-shadow:0 1px 3px rgba(16,24,40,.12), 0 1px 2px rgba(16,24,40,.08);
}
/* Infographic fill-mode switch: keep labels on one line to avoid text artifacts. */
#bp-fill-mode .bp-seg-item input + span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Billing: keep the same selected color for both purchase modes */
body.bp-billing--one_time #bp-billing-mode .bp-seg-item input:checked + span{
  background:#fff;
  color:var(--bp-ink);
}

@media (max-width: 560px) {
  .bp-seg--term {
    /* 2026-05-09: 12-мес тариф удалён, осталось 2 опции (1 / 3 мес).
       Раньше тут было repeat(3, ...), что давало пустую третью колонку. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  .bp-seg--term .bp-seg-item input + span {
    padding: 10px 8px;
    gap: 6px;
    font-size: 0.95em;
  }
}

.bp-tpl-grid{
  display:grid;
  /* Desktop: 3 колонки (карточки крупнее и читабельнее) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  overflow:visible;
  max-height:none;
  padding-bottom:0;
}
@media (max-width: 980px){
  .bp-tpl-grid{
    gap:10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.bp-tpl-grid--expanded{
  /* legacy: раньше раскрывали список. теперь всегда без скролла */
  max-height:none;
  overflow:visible;
}
@media (max-width: 980px){
  .bp-tpl-grid--expanded{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
.bp-tpl-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border-radius:16px;
  border:2px solid rgba(27,34,48,.08);
  background:rgba(255,255,255,.6);
  cursor:pointer;
  min-width:0;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:all .2s ease;
}
.bp-tpl-card:hover{
  background:rgba(255,255,255,.9);
  border-color:rgba(27,34,48,.15);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(16,24,40,.06);
}
.bp-tpl-card.bp-tpl-card--selected:hover{background:rgba(105,124,255,.08)}
.bp-tpl-card input{position:absolute; inset:0; opacity:0; cursor:pointer}
.bp-tpl-thumb{
  aspect-ratio: 3/4;
  border-radius:10px;
  border:1px solid var(--bp-border-soft);
  background:rgba(255,255,255,.78);
  overflow:hidden;
  display:block;
  color:rgba(27,34,48,.65);
  transition:all .2s ease;
}
.bp-tpl-preview{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.bp-tpl-card input:checked + .bp-tpl-thumb{
  border-color:rgba(105,124,255,.5);
  background:rgba(105,124,255,.15);
  color:rgba(16,24,40,.85);
  box-shadow:inset 0 0 0 2px rgba(105,124,255,.2);
}
.bp-tpl-card--selected{
  border:2px solid rgba(105,124,255,.80);
  background:rgba(105,124,255,.06);
  box-shadow:0 4px 16px rgba(105,124,255,.12);
  transform:translateY(-2px);
}
.bp-tpl-card--selected::before{
  content:"✓";
  position:absolute;
  top:4px;
  right:4px;
  width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:16px;
  background:rgba(105,124,255,1);
  color:#fff;
  box-shadow:0 4px 12px rgba(105,124,255,.3);
  z-index:3;
  pointer-events:none;
  border: 2px solid #fff;
}
.bp-tpl-ico{display:block}
.bp-tpl-title{font-weight:900; font-size:14px; line-height:1.15}

/* simple previews */
.bp-tpl-thumb-cover{background:linear-gradient(135deg, rgba(61,219,134,.35), rgba(255,255,255,.55))}
.bp-tpl-thumb-benefits{background:linear-gradient(135deg, rgba(255,255,255,.65), rgba(198,209,234,.55))}
.bp-tpl-thumb-dimensions{background:linear-gradient(135deg, rgba(255,255,255,.65), rgba(198,209,234,.35))}
.bp-tpl-thumb-how_to_use{background:linear-gradient(135deg, rgba(255,255,255,.65), rgba(61,219,134,.18))}
.bp-tpl-thumb-before_after{background:linear-gradient(135deg, rgba(255,77,77,.12), rgba(255,255,255,.6))}
.bp-tpl-thumb-comparison{background:linear-gradient(135deg, rgba(255,255,255,.65), rgba(27,34,48,.06))}
.bp-tpl-thumb-kit{background:linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,204,0,.14))}
.bp-tpl-thumb-usage_scenarios{background:linear-gradient(135deg, rgba(255,255,255,.65), rgba(61,219,134,.12))}
.bp-tpl-thumb-problem_solution{background:linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,204,0,.16))}
.bp-tpl-thumb-clothing_model{background:linear-gradient(135deg, rgba(255,255,255,.65), rgba(27,34,48,.10))}

.bp-dropzone{
  position:relative;
  border:1px dashed rgba(16,24,40,.24);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  padding:14px;
  text-align:center;
}
.bp-dropzone.bp-dropzone--drag{
  background:rgba(105,124,255,.10);
  border-color:rgba(105,124,255,.35);
}
.bp-drop-input{
  position:absolute;
  inset:0;
  opacity:0;
  width:100%;
  height:100%;
  cursor:pointer;
}
.bp-drop-title{font-weight:900}
.bp-drop-file{margin-top:8px}

/* Inpaint: хотим больше места под выделение, меньше — под дропзону */
#bp-inpaint-root .bp-dropzone{
  padding:10px;
}
#bp-inpaint-root .bp-drop-title{font-size:14px}
#bp-inpaint-root .bp-drop-file{margin-top:6px}

/* Большая область выделения на desktop, и крупнее на mobile без лишних "полей" */
#bp-inpaint-root .bp-inpaint-stage{
  height:min(62vh, 640px);
}
@media (max-width: 980px){
  #bp-inpaint-root .bp-inpaint-stage{
    height:auto;
    min-height:200px;
  }
}

.bp-acc{
  margin-top:12px;
  border:1px solid var(--bp-border);
  border-radius:14px;
  background:rgba(255,255,255,.70);
  overflow:hidden;
}
.bp-acc[open]{background:rgba(255,255,255,.78)}
.bp-acc-sum{
  list-style:none;
  cursor:pointer;
  padding:12px;
  font-weight:900;
}
.bp-acc-sum::-webkit-details-marker{display:none}
.bp-acc-body{padding:0 12px 12px}

.bp-faq-list .bp-faq-item{margin-top:8px}
.bp-faq-list .bp-faq-item:first-child{margin-top:0}
.bp-faq-list .bp-acc-sum{font-weight:600;font-size:14px}
.bp-faq-list .bp-acc-body{font-size:13px;color:var(--bp-muted);line-height:1.5}

.bp-color{display:flex;gap:10px;align-items:center}
.bp-color-picker{
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--bp-border);
  border-radius:12px;
  background:rgba(255,255,255,.92);
}

.bp-font-preview{
  margin-top:8px;
  padding:10px 12px;
  border:1px solid var(--bp-border-soft);
  border-radius:12px;
  background:rgba(255,255,255,.78);
  color:var(--bp-ink);
  font-size:14px;
  line-height:1.25;
}

.bp-spinner{
  width:44px;
  height:44px;
  border-radius:999px;
  border:2px solid var(--bp-border-soft);
  border-top-color:var(--bp-ink);
  margin:10px auto 0;
  animation:bp-spin .9s linear infinite;
}
@keyframes bp-spin{to{transform:rotate(360deg)}}

.bp-btn-spinner{
  display:inline-block;
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:bp-spin .75s linear infinite;
  vertical-align:middle;
  margin-left:8px;
  flex-shrink:0;
}
.bp-btn-ghost .bp-btn-spinner{
  border-color:rgba(27,34,48,.18);
  border-top-color:var(--bp-ink);
}

.bp-progress{
  margin-top:12px;
  height:10px;
  border-radius:999px;
  background:rgba(27,34,48,.12);
  border:1px solid var(--bp-border-soft);
  overflow:hidden;
}
.bp-progress-bar{
  height:100%;
  width:40%;
  background:var(--bp-accent);
  animation:bp-progress 1.1s ease-in-out infinite;
}
.bp-progress.bp-progress--determinate .bp-progress-bar{
  width:0%;
  animation:none;
  transform:none;
  transition:width .22s linear;
}
@keyframes bp-progress{
  0%{transform:translateX(-120%)}
  50%{transform:translateX(80%)}
  100%{transform:translateX(220%)}
}

.bp-result-empty{
  padding:24px;
  border:2px dashed rgba(105,124,255,.2);
  border-radius:20px;
  background:rgba(255,255,255,.4);
  text-align:center;
  font-weight:900;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:rgba(16,24,40,.6);
  min-height:240px;
  transition: all .2s ease;
}
.bp-result-empty:hover {
  background:rgba(255,255,255,.6);
  border-color:rgba(105,124,255,.4);
}

.bp-ribbon-card{
  border:none;
  box-shadow:none;
  background:linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.40));
  border-radius:18px;
  padding:16px;
}

.bp-result-box{
  margin-top:12px;
}
.bp-result-notes{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  border:2px solid rgba(27,34,48,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(245,246,248,.82));
  color:rgba(27,34,48,.78);
  font-size:13px;
  line-height:1.35;
}
.bp-result-notes-title{
  font-weight:900;
  margin-bottom:6px;
}
.bp-result-notes-list{
  margin:0;
  padding-left:18px;
}
.bp-result-notes-details{
  margin-top:8px;
}
.bp-result-notes-details > summary{
  cursor:pointer;
  font-weight:900;
}

/* Upsell block (shown after first successful generation) */
.bp-upsell{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:2px solid rgba(27,34,48,.14);
  background:linear-gradient(135deg, rgba(105,124,255,.10), rgba(255,255,255,.55));
}
.bp-upsell-title{
  font-weight:900;
}
.bp-upsell-text{
  margin-top:6px;
  color:rgba(27,34,48,.72);
  font-size:13px;
  line-height:1.35;
}
.bp-upsell .bp-actions{margin-top:10px}

/* Billing mode toggle (subscription vs one-time) */
body.bp-billing--subscription .bp-price-one,
body.bp-billing--subscription .bp-plan-sub-one{
  display:none !important;
}
body.bp-billing--one_time .bp-price-sub,
body.bp-billing--one_time .bp-plan-sub-sub{
  display:none !important;
}
body.bp-billing--subscription .bp-plan-genprice-one{display:none !important;}
body.bp-billing--subscription .bp-plan-genprice-ot{display:none !important;}
body.bp-billing--one_time .bp-plan-genprice-sub{display:none !important;}

/* Subscription vs one-time: show relevant price blocks only (all plans support both modes). */

/* Term toggle (1/3 months) */
.bp-billing-term .bp-hint{margin-top:8px}
.bp-period-toggle--term{
  margin-top:2px;
}
.bp-hint-term--sub{display:inline}
.bp-hint-term--ot{display:none}
body.bp-billing--one_time .bp-hint-term--sub{display:none}
body.bp-billing--one_time .bp-hint-term--ot{display:inline}

/* Per-plan savings badge */
.bp-plan-saving{
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  color:rgba(27,34,48,.5);
  line-height:1;
}
.bp-plan-saving b{color:#1bba66;font-weight:800}
.bp-plan-saving-ico{flex-shrink:0;color:#1bba66}
body.bp-billing--sub-m1 .bp-plan-saving,
body.bp-billing--ot-m1 .bp-plan-saving{display:none !important}

/* Billing period toggle (monthly vs annual subscription) */
.bp-badge--accent{
  background:rgba(61,219,134,.40);
  border-color:rgba(27,34,48,.35);
}
.bp-billing-period .bp-hint{margin-top:8px}
.bp-period-toggle{
  /* Make the switch always perfectly centered between labels (no baseline drift) */
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  border:2px solid rgba(27,34,48,.14);
  border-radius:999px;
  background:rgba(255,255,255,.35);
}
.bp-period-opt{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  line-height:1;
  font-weight:900;
  color:rgba(27,34,48,.72);
}
/* Align labels symmetrically around the centered switch */
.bp-period-opt--month{justify-content:flex-end}
.bp-period-opt--year{justify-content:flex-start}
/* Reuse old "month/year" switch styling for month/3-month term. */
body.bp-billing--subscription:not(.bp-billing--sub-q) .bp-period-opt--month{color:var(--bp-ink)}
body.bp-billing--subscription.bp-billing--sub-q .bp-period-opt--year{color:var(--bp-ink)}

.bp-switch{
  /* Rebuilt from scratch: geometry via vars + border-box, no "magic" offsets */
  --bp-sw-w:56px;
  --bp-sw-h:32px;
  --bp-sw-b:1px;
  --bp-sw-gap:1px;      /* inner gap between track border and thumb */
  --bp-sw-thumb:24px;   /* thumb outer size (includes its border) */
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  line-height:0;
  vertical-align:middle;
}
.bp-switch input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
}
.bp-switch-ui{
  width:var(--bp-sw-w);
  height:var(--bp-sw-h);
  border:var(--bp-sw-b) solid var(--bp-border);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--bp-shadow-sm);
  position:relative;
  display:block;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition:background .15s ease, box-shadow .15s ease;
}
.bp-switch-ui::after{
  content:"";
  box-sizing:border-box;
  position:absolute;
  top:var(--bp-sw-gap);
  left:var(--bp-sw-gap);
  width:var(--bp-sw-thumb);
  height:var(--bp-sw-thumb);
  border-radius:999px;
  background:rgba(16,24,40,.16);
  border:var(--bp-sw-b) solid rgba(16,24,40,.16);
  transition:transform .15s ease, background .15s ease;
}
.bp-switch input:checked + .bp-switch-ui{
  background:rgba(105,124,255,.12);
}
.bp-switch input:checked + .bp-switch-ui::after{
  transform:translateX(calc(var(--bp-sw-w) - (2 * var(--bp-sw-b)) - (2 * var(--bp-sw-gap)) - var(--bp-sw-thumb)));
  background:var(--bp-accent);
}
.bp-switch input:focus-visible + .bp-switch-ui{
  outline:3px solid rgba(105,124,255,.45);
  outline-offset:2px;
}
.bp-switch:active .bp-switch-ui{box-shadow:var(--bp-shadow-sm)}

/* Hide annual controls on one-time mode */
body.bp-billing--one_time .bp-billing-period{display:none !important;}

/* =========================
   Home: function buttons grid
   ========================= */
.bp-home{
  padding-top:2px;
}
.bp-home-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 720px){
  .bp-home-grid{grid-template-columns: 1fr; gap:12px}
}

.bp-fn-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:16px;
  text-decoration:none;
  color:var(--bp-ink);
  border-radius:24px;
  border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:var(--bp-shadow-md);
  overflow:hidden;
  transition:all .25s ease;
  will-change:transform;
  touch-action:manipulation;
}
.bp-fn-card::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-120%) rotate(10deg);
  opacity:0;
  pointer-events:none;
  transition:transform .55s ease, opacity .22s ease;
}
.bp-fn-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--bp-shadow-lg);
  border-color:rgba(105,124,255,.3);
  background:rgba(255,255,255,.95);
  color:var(--bp-ink);
}
.bp-fn-card:hover::after{
  transform:translateX(120%) rotate(10deg);
  opacity:1;
}
.bp-fn-card:active{
  transform:translateY(0);
  box-shadow:var(--bp-shadow-md);
}
.bp-fn-card--primary{
  border-color:rgba(105,124,255,.26);
  background:
    radial-gradient(280px 170px at 86% 0%, rgba(105,124,255,.12), transparent 65%),
    rgba(255,255,255,.92);
}
.bp-fn-card--wide{
  grid-column: 1 / -1;
}
.bp-fn-card--locked{
  border-color:rgba(16,24,40,.10);
}
.bp-fn-card--disabled{
  opacity:.65;
  filter:saturate(.95);
  cursor:default;
}
.bp-fn-card--disabled:hover{transform:none; box-shadow:var(--bp-shadow-md); border-color:rgba(16,24,40,.10); background:rgba(255,255,255,.92);}

.bp-fn-preview{
  position:relative;
  aspect-ratio: 16/9;
  background:rgba(16,24,40,.04);
  border-bottom:1px solid rgba(255,255,255,.4);
}
.bp-fn-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.bp-fn-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 16px 14px;
}
.bp-fn-title{
  font-family: 'Onest', system-ui, sans-serif;
  font-weight:700;
  font-size:1.05rem;
  line-height:1.25;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width: 480px){
  .bp-fn-title{
    font-size:0.85rem;
    white-space:normal;
    text-overflow:clip;
    overflow:visible;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  .bp-fn-title-row{
    padding:0 12px 12px;
  }
}
.bp-fn-desc{
  padding:0 16px 16px;
  margin-top:-8px;
  font-size:0.88rem;
  line-height:1.45;
  color:rgba(27,34,48,.62);
  max-width:540px;
}
.bp-fn-go{
  font-weight:700;
  opacity:.5;
  flex:0 0 auto;
  color: var(--bp-accent);
}

.bp-fn-lock{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(16,24,40,.14);
  background:rgba(255,255,255,.78);
  box-shadow:var(--bp-shadow-sm);
  color:rgba(16,24,40,.72);
}

.bp-fn-trial-badge{
  position:absolute;
  top:10px;
  right:10px;
  padding:4px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  background:rgba(234,179,8,.15);
  color:#a16207;
  border:1px solid rgba(234,179,8,.3);
  box-shadow:var(--bp-shadow-sm);
}

@media (prefers-reduced-motion: reduce){
  .bp-fn-card,
  .bp-fn-card:hover,
  .bp-fn-card:active{
    transition:none;
    transform:none;
  }
  .bp-fn-card::after{display:none}
}
@media (hover: none), (pointer: coarse){
  .bp-fn-card::after{display:none}
}

/* Hide one-time prepay controls on subscription mode */
body.bp-billing--subscription .bp-one-time-period{display:none !important;}
/* One-time months selector: same selected color as other segmented controls */
body.bp-billing--one_time #bp-one-time-months .bp-seg-item input:checked + span{background:var(--bp-accent)}

/* All period-specific elements hidden by default */
.bp-price-one--m1,.bp-price-one--m3,.bp-price-one--m6,.bp-price-one--m12{display:none}
.bp-plan-sub-one--m1,.bp-plan-sub-one--m3,.bp-plan-sub-one--m6,.bp-plan-sub-one--m12{display:none}
.bp-plan-cv-ot--m1,.bp-plan-cv-ot--m3,.bp-plan-cv-ot--m6,.bp-plan-cv-ot--m12{display:none}
.bp-price-sub--m1,.bp-price-sub--m3,.bp-price-sub--m6,.bp-price-sub--m12{display:none}
.bp-plan-sub-sub--m1,.bp-plan-sub-sub--m3,.bp-plan-sub-sub--m6,.bp-plan-sub-sub--m12{display:none}
.bp-plan-cv-sub-wrap--m1,.bp-plan-cv-sub-wrap--m3,.bp-plan-cv-sub-wrap--m6,.bp-plan-cv-sub-wrap--m12{display:none}

/* Hide subscription meta in one-time mode */
body.bp-billing--one_time .bp-price-sub--m1,body.bp-billing--one_time .bp-price-sub--m3,body.bp-billing--one_time .bp-price-sub--m6,body.bp-billing--one_time .bp-price-sub--m12,
body.bp-billing--one_time .bp-plan-sub-sub--m1,body.bp-billing--one_time .bp-plan-sub-sub--m3,body.bp-billing--one_time .bp-plan-sub-sub--m6,body.bp-billing--one_time .bp-plan-sub-sub--m12,
body.bp-billing--one_time .bp-plan-cv-sub-wrap--m1,body.bp-billing--one_time .bp-plan-cv-sub-wrap--m3,body.bp-billing--one_time .bp-plan-cv-sub-wrap--m6,body.bp-billing--one_time .bp-plan-cv-sub-wrap--m12{display:none !important}

/* Hide one-time meta in subscription mode */
body.bp-billing--subscription .bp-price-one--m1,body.bp-billing--subscription .bp-price-one--m3,body.bp-billing--subscription .bp-price-one--m6,body.bp-billing--subscription .bp-price-one--m12,
body.bp-billing--subscription .bp-plan-sub-one--m1,body.bp-billing--subscription .bp-plan-sub-one--m3,body.bp-billing--subscription .bp-plan-sub-one--m6,body.bp-billing--subscription .bp-plan-sub-one--m12,
body.bp-billing--subscription .bp-plan-cv-ot--m1,body.bp-billing--subscription .bp-plan-cv-ot--m3,body.bp-billing--subscription .bp-plan-cv-ot--m6,body.bp-billing--subscription .bp-plan-cv-ot--m12{display:none !important}

/* Selected one-time duration: show matching period */
body.bp-billing--one_time.bp-billing--ot-m1 .bp-price-one--m1,body.bp-billing--one_time.bp-billing--ot-m1 .bp-plan-sub-one--m1,body.bp-billing--one_time.bp-billing--ot-m1 .bp-plan-cv-ot--m1{display:flex}
body.bp-billing--one_time.bp-billing--ot-m3 .bp-price-one--m3,body.bp-billing--one_time.bp-billing--ot-m3 .bp-plan-sub-one--m3,body.bp-billing--one_time.bp-billing--ot-m3 .bp-plan-cv-ot--m3{display:flex}
body.bp-billing--one_time.bp-billing--ot-m6 .bp-price-one--m6,body.bp-billing--one_time.bp-billing--ot-m6 .bp-plan-sub-one--m6,body.bp-billing--one_time.bp-billing--ot-m6 .bp-plan-cv-ot--m6{display:flex}
body.bp-billing--one_time.bp-billing--ot-m12 .bp-price-one--m12,body.bp-billing--one_time.bp-billing--ot-m12 .bp-plan-sub-one--m12,body.bp-billing--one_time.bp-billing--ot-m12 .bp-plan-cv-ot--m12{display:flex}

/* Selected subscription duration: show matching period */
body.bp-billing--subscription.bp-billing--sub-m1 .bp-price-sub--m1,body.bp-billing--subscription.bp-billing--sub-m1 .bp-plan-sub-sub--m1,body.bp-billing--subscription.bp-billing--sub-m1 .bp-plan-cv-sub-wrap--m1{display:flex}
body.bp-billing--subscription.bp-billing--sub-m3 .bp-price-sub--m3,body.bp-billing--subscription.bp-billing--sub-m3 .bp-plan-sub-sub--m3,body.bp-billing--subscription.bp-billing--sub-m3 .bp-plan-cv-sub-wrap--m3{display:flex}
body.bp-billing--subscription.bp-billing--sub-m6 .bp-price-sub--m6,body.bp-billing--subscription.bp-billing--sub-m6 .bp-plan-sub-sub--m6,body.bp-billing--subscription.bp-billing--sub-m6 .bp-plan-cv-sub-wrap--m6{display:flex}
body.bp-billing--subscription.bp-billing--sub-m12 .bp-price-sub--m12,body.bp-billing--subscription.bp-billing--sub-m12 .bp-plan-sub-sub--m12,body.bp-billing--subscription.bp-billing--sub-m12 .bp-plan-cv-sub-wrap--m12{display:flex}

/* Inline overrides for text spans */
body.bp-billing--one_time.bp-billing--ot-m1 span.bp-price-one--m1,body.bp-billing--one_time.bp-billing--ot-m1 span.bp-plan-sub-one--m1{display:inline}
body.bp-billing--one_time.bp-billing--ot-m3 span.bp-price-one--m3,body.bp-billing--one_time.bp-billing--ot-m3 span.bp-plan-sub-one--m3{display:inline}
body.bp-billing--one_time.bp-billing--ot-m6 span.bp-price-one--m6,body.bp-billing--one_time.bp-billing--ot-m6 span.bp-plan-sub-one--m6{display:inline}
body.bp-billing--one_time.bp-billing--ot-m12 span.bp-price-one--m12,body.bp-billing--one_time.bp-billing--ot-m12 span.bp-plan-sub-one--m12{display:inline}
body.bp-billing--subscription.bp-billing--sub-m1 span.bp-price-sub--m1,body.bp-billing--subscription.bp-billing--sub-m1 span.bp-plan-sub-sub--m1{display:inline}
body.bp-billing--subscription.bp-billing--sub-m3 span.bp-price-sub--m3,body.bp-billing--subscription.bp-billing--sub-m3 span.bp-plan-sub-sub--m3{display:inline}
body.bp-billing--subscription.bp-billing--sub-m6 span.bp-price-sub--m6,body.bp-billing--subscription.bp-billing--sub-m6 span.bp-plan-sub-sub--m6{display:inline}
body.bp-billing--subscription.bp-billing--sub-m12 span.bp-price-sub--m12,body.bp-billing--subscription.bp-billing--sub-m12 span.bp-plan-sub-sub--m12{display:inline}

/* Legacy compat */
.bp-plan-credits-ot,.bp-plan-gens-ot,.bp-plan-genprice-one-val{display:none}
.bp-price-sub--q,.bp-plan-sub-sub--q,.bp-plan-genprice-sub--q,.bp-plan-credits--q,.bp-plan-gens--q{display:none}
.bp-price-sub--month,.bp-plan-sub-sub--month,.bp-plan-genprice-sub--month,.bp-plan-credits--month,.bp-plan-gens--month{display:none}
.bp-price-sub--year,.bp-plan-sub-sub--year,.bp-plan-genprice-sub--year,.bp-plan-credits--year,.bp-plan-gens--year{display:none}

.bp-plan-features{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
  color:rgba(27,34,48,.82);
  font-size:13px;
}
.bp-plan-features-title{
  margin-top:12px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(27,34,48,.56);
}
.bp-plan-feature{
  display:flex;
  gap:8px;
  align-items:center;
  min-width:0;
}
.bp-plan-feature-ico{
  width:18px;
  height:18px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  line-height:1;
  border-radius:999px;
  border:none;
  background:transparent;
  color:rgba(27,34,48,.64);
}
.bp-plan-feature-txt{
  min-width:0;
  line-height:1.28;
  font-size:13px;
}
.bp-plan-features--matrix .bp-plan-feature{
  min-height:28px;
  padding:4px 0;
  border:none;
  background:transparent;
}

.bp-plan-feature--yes .bp-plan-feature-ico{
  color:#1bba66;
}
.bp-plan-feature--yes .bp-plan-feature-txt{
  color:rgba(16,24,40,.86);
}
.bp-plan-feature--no .bp-plan-feature-ico{
  color:rgba(16,24,40,.25);
}
.bp-plan-feature--no .bp-plan-feature-txt{
  color:rgba(16,24,40,.48);
}
.bp-plan-feature--no{
  opacity:.98;
}
.bp-plan-feature--new .bp-plan-feature-ico{
  color:#1bba66;
}
.bp-plan-feature--new .bp-plan-feature-txt{
  font-weight:400;
}
.bp-plan-feature--exclusive .bp-plan-feature-ico{
  border-color:rgba(11,122,52,.35);
  background:rgba(61,219,134,.20);
  color:rgba(11,122,52,.95);
}
.bp-plan-feature--exclusive .bp-plan-feature-txt{
  font-weight:700;
  color:rgba(16,24,40,.88);
}
.bp-price-business-sub{
  display:block;
  font-size:13px;
  font-weight:700;
  color:rgba(16,24,40,.56);
  margin-top:2px;
}

.bp-plan-highlights{
  margin-top:12px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(105,124,255,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.66), rgba(245,246,248,.86));
}
.bp-plan-card--business .bp-plan-highlights{
  border-color:rgba(61,219,134,.28);
}
.bp-plan-highlights-title{
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(27,34,48,.56);
}
.bp-plan-highlights-list{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
}
.bp-plan-highlights-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:rgba(16,24,40,.84);
  font-size:13px;
  line-height:1.25;
}
.bp-plan-highlights-dot{
  width:18px;
  height:18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin-top:1px;
  border:1px solid rgba(105,124,255,.26);
  background:rgba(105,124,255,.14);
  color:rgba(16,24,40,.72);
  font-weight:900;
}
.bp-plan-card--business .bp-plan-highlights-dot{
  border-color:rgba(61,219,134,.30);
  background:rgba(61,219,134,.20);
}
.bp-plan-highlights-txt{
  min-width:0;
}
.bp-result-empty-title{font-weight:900}
.bp-result-empty-ico{color:rgba(27,34,48,.55)}

/* History gallery */
.bp-history-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.bp-history-card{
  background:var(--bp-card);
  border:1px solid var(--bp-border);
  border-radius:var(--bp-radius);
  box-shadow:var(--bp-shadow-md);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.bp-history-thumb{
  position:relative;
  aspect-ratio:3/4;
  background:rgba(255,255,255,.72);
  border-bottom:1px solid var(--bp-border-soft);
  overflow:hidden;
}
.bp-history-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  cursor:zoom-in;
  user-select:none;
  -webkit-user-drag:none;
}
.bp-history-img--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  text-align:center;
}
.bp-history-actions{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;
}
.bp-history-actions-right{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  align-items:center;
}
.bp-history-card:hover .bp-history-actions,
.bp-history-card:focus-within .bp-history-actions{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.bp-history-meta{padding:12px}
.bp-history-title{font-weight:900}
.bp-history-sub{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.bp-history-desc{margin-top:8px}
.bp-history-footer{
  padding:10px 12px 12px;
  border-top:1px solid var(--bp-border-soft);
  display:flex;
  justify-content:flex-end;
}

/* History detail modal */
.bp-history-detail{
  position:fixed;
  inset:0;
  z-index:230;
  display:none;
  align-items:center;
  justify-content:center;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
}
.bp-history-detail.bp-history-detail--open{display:flex;}
.bp-history-detail-backdrop{
  position:absolute;
  inset:0;
  background:rgba(27,34,48,.62);
  backdrop-filter: blur(2px);
}
.bp-history-detail-panel{
  position:relative;
  width:min(1060px, 100%);
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  border-radius:18px;
  border:1px solid var(--bp-border);
  background:rgba(255,255,255,.97);
  box-shadow:var(--bp-shadow-lg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.bp-history-detail-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:14px 16px;
  border-bottom:1px solid var(--bp-border-soft);
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
}
.bp-history-detail-head-title{font-weight:900;font-size:15px;}
.bp-history-detail-body{
  padding:16px;
  overflow:auto;
}
.bp-history-detail-cols{
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.bp-history-detail-col--result{
  flex:0 0 auto;
  max-width:340px;
}
.bp-history-detail-col--info{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.bp-history-detail-result-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  border:1px solid var(--bp-border);
  box-shadow:var(--bp-shadow-md);
  background:rgba(255,255,255,.86);
}
.bp-history-detail-source-img{
  max-width:200px;
  max-height:200px;
  object-fit:contain;
  display:block;
  border-radius:10px;
  border:1px solid var(--bp-border);
  box-shadow:var(--bp-shadow-sm);
  background:rgba(255,255,255,.86);
  margin-top:6px;
}
.bp-history-detail-desc{
  margin-top:6px;
  font-size:13px;
  line-height:1.5;
  color:var(--bp-text);
  white-space:pre-wrap;
  word-break:break-word;
}
.bp-history-detail-meta{
  margin-top:6px;
  font-size:13px;
  line-height:1.6;
  color:var(--bp-muted-color, rgba(27,34,48,.65));
}
@media (max-width: 700px){
  .bp-history-detail-cols{flex-direction:column;}
  .bp-history-detail-col--result{max-width:100%;}
  .bp-history-detail-source-img{max-width:140px;max-height:140px;}
}

/* Image viewer (lightbox) */
html.bp-modal-open,
html.bp-modal-open body{
  overflow:hidden;
}
.bp-imgv{
  position:fixed;
  inset:0;
  z-index:220;
  display:none;
  align-items:center;
  justify-content:center;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
}
.bp-imgv.bp-imgv--open{display:flex;}
.bp-imgv-backdrop{
  position:absolute;
  inset:0;
  background:rgba(27,34,48,.62);
  backdrop-filter: blur(2px);
}
.bp-imgv-panel{
  position:relative;
  width:min(980px, 100%);
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  border-radius:18px;
  border:1px solid var(--bp-border);
  background:rgba(255,255,255,.96);
  box-shadow:var(--bp-shadow-lg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.bp-imgv-head{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:10px;
  border-bottom:1px solid var(--bp-border-soft);
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
}
.bp-imgv-body{
  padding:10px;
  overflow:auto;
}
.bp-imgv-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  border:1px solid var(--bp-border);
  box-shadow:var(--bp-shadow-md);
  background:rgba(255,255,255,.86);
}
@media (max-width: 560px){
  .bp-imgv-head{padding:8px}
  .bp-imgv-body{padding:8px}
}

.bp-badge--success{background:rgba(61,219,134,.16); border-color:rgba(61,219,134,.26)}
.bp-badge--pending{background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.24)}
.bp-badge--error{background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.24)}
.bp-badge--refund{background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.24)}

/* Brand profiles */
.bp-brand-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
  margin-top:16px;
}
.bp-brand-card{
  background:rgba(255,255,255,.6);
  border:1px solid var(--bp-border-soft, rgba(27,34,48,.1));
  border-radius:14px;
  padding:16px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.bp-brand-card:hover{
  border-color: rgba(27,34,48,.25);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.bp-brand-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 12px;
}
.bp-brand-name{
  font-weight:700;
  font-size: 16px;
  color: var(--bp-text);
  word-break: break-word;
}
.bp-brand-actions{
  display:flex;
  gap:8px;
  margin-top:16px;
}
.bp-brand-actions > * {
  flex: 1;
}
.bp-brand-actions .bp-btn {
  width: 100%;
  justify-content: center;
}
.bp-brand-palette{display:flex;gap:8px;margin-bottom:12px}
.bp-brand-swatch{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--bp-border-soft);
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.05);
}

/* Billing */
.bp-billing-wrap{
  max-width:1180px;
  margin:0 auto;
}
.bp-billing-proof{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid var(--bp-border-soft);
  background:
    radial-gradient(280px 120px at 8% 0%, rgba(105,124,255,.08), transparent 62%),
    radial-gradient(280px 120px at 100% 120%, rgba(61,219,134,.08), transparent 58%),
    rgba(255,255,255,.78);
}
.bp-billing-proof-stars{
  letter-spacing:.08em;
  color:#f59e0b;
  font-size:24px;
  line-height:1;
}
.bp-billing-proof-text{
  font-size:13px;
  font-weight:800;
  color:rgba(16,24,40,.82);
  line-height:1.25;
}
.bp-billing-proof--inline{
  margin-top:0;
  min-height:44px;
  justify-content:center;
  text-align:center;
}

/* Paywall/upgrade callout (when user opens billing via locked feature: ?need=...) */
.bp-upgrade{
  --bp-upgrade-accent: var(--bp-accent);
  --bp-upgrade-accent-soft: rgba(105,124,255,.22);
  margin-top:12px;
  padding:14px 14px;
  border-radius:14px;
  border:2px solid rgba(105,124,255,.28);
  background:
    radial-gradient(420px 180px at 8% 0%, rgba(105,124,255,.16), transparent 60%),
    radial-gradient(420px 180px at 100% 120%, rgba(61,219,134,.12), transparent 58%),
    rgba(255,255,255,.86);
  box-shadow:var(--bp-shadow-lg);
}
.bp-upgrade--business{
  --bp-upgrade-accent: var(--bp-accent2);
  --bp-upgrade-accent-soft: rgba(61,219,134,.22);
  border-color:rgba(61,219,134,.30);
}
.bp-upgrade--light{
  --bp-upgrade-accent:#0ea5e9;
  --bp-upgrade-accent-soft: rgba(14,165,233,.22);
  border-color:rgba(14,165,233,.28);
}
.bp-upgrade-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.bp-upgrade-ico{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:
    radial-gradient(240px 120px at 18% 0%, rgba(255,255,255,.26), transparent 62%),
    linear-gradient(135deg, var(--bp-upgrade-accent), rgba(61,219,134,.90));
  box-shadow:
    0 18px 44px rgba(16,24,40,.12),
    var(--bp-shadow-sm);
  flex:0 0 auto;
}
.bp-upgrade-title{
  font-weight:900;
  font-size:15px;
  line-height:1.25;
}
.bp-upgrade-sub{
  margin-top:6px;
  color:rgba(27,34,48,.62);
  font-size:13px;
  line-height:1.35;
}
.bp-upgrade-plan{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--bp-upgrade-accent-soft);
  background:rgba(255,255,255,.72);
  box-shadow:var(--bp-shadow-sm);
  text-decoration:none;
  color:inherit;
  white-space:nowrap;
}
.bp-upgrade-plan:hover{box-shadow:var(--bp-shadow-md)}
.bp-upgrade-plan:active{box-shadow:var(--bp-shadow-sm)}

#bp-upgrade{scroll-margin-top:96px;}
.bp-plan-card{scroll-margin-top:96px;}

@media (max-width: 560px){
  .bp-upgrade{padding:12px}
  .bp-upgrade-ico{width:38px;height:38px}
  .bp-upgrade-title{font-size:14px}
}

.bp-plan-grid{
  display:grid;
  gap:14px;
  margin-top:18px; /* room for top badges above plan cards */
}
.bp-plan-grid--plans{
  /* Desktop: показываем все 4 тарифа в одну линию. */
  grid-template-columns: repeat(4, 1fr);
}
.bp-plan-grid--packs{
  /* Desktop: показываем все пакеты в одну линию (S/M/L/XL). */
  grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 1181px){
  /* Раскладка по числу планов: 3 плана (A/B no_light) занимают всю ширину. */
  .bp-plan-grid--plans.bp-plan-grid--count-3{grid-template-columns: repeat(3, 1fr)}
  .bp-plan-grid--plans.bp-plan-grid--count-2{grid-template-columns: repeat(2, 1fr)}
  .bp-plan-grid--plans.bp-plan-grid--count-1{grid-template-columns: minmax(0, 460px); justify-content:center}
}
@media (max-width: 1180px){
  .bp-plan-grid--plans,
  .bp-plan-grid--packs{grid-template-columns: repeat(2, 1fr)}
}
.bp-plan-card{
  /* Visual identity per plan (defaults = Pro/purple). */
  --bp-plan-stripe: rgba(105,124,255,.14);
  --bp-plan-stripe-selected: rgba(105,124,255,.22);
  --bp-plan-accent-border: rgba(105,124,255,.35);
  --bp-plan-accent-shadow: rgba(105,124,255,.20);
  --bp-plan-selected-ring: rgba(105,124,255,.60);
  --bp-plan-selected-glow: rgba(105,124,255,.30);
  --bp-plan-selected-pill-a: rgb(105, 124, 255);
  --bp-plan-selected-pill-b: rgb(61, 219, 134);
  position:relative;
  display:block;
  flex:1 1 auto; /* тянем карточку на всю высоту .bp-plan-item → ровные края */
  padding:18px 16px 16px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor:pointer;
  overflow:hidden;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, transform .2s ease;
  box-shadow:var(--bp-shadow-md);
  scroll-margin-top:96px;
}
.bp-plan-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--bp-shadow-lg);
  background:rgba(255,255,255,.95);
}

/* Top badges above plan cards ("Самый популярный"/"Самый выгодный") */
.bp-plan-item{
  position:relative;
  min-width:0;
  /* Дельта-режим (Вариант А): базовая карточка содержит полный список фич,
     старшие — только новые. Чтобы карточки в строке были одинаковой высоты
     (ровные нижние края), тянем .bp-plan-card на всю высоту grid-ячейки. */
  display:flex;
  flex-direction:column;
}
.bp-plan-item-badges{
  position:absolute;
  top:-14px;
  left:20px;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:3;
  pointer-events:none; /* keep the whole card clickable */
}
.bp-plan-item-badges .bp-badge{
  pointer-events:none;
  border-radius:999px;
  padding:6px 12px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:900;
  border:none;
  white-space:nowrap;
  line-height:1;
}
.bp-plan-item--featured .bp-badge--popular{
  background:linear-gradient(135deg, rgba(105,124,255,1), rgba(61,219,134,.95));
  border-color:rgba(105,124,255,.55);
  color:#fff;
  font-weight:900;
  box-shadow:0 12px 28px rgba(105,124,255,.18);
}
.bp-plan-item--business .bp-badge--best{
  background:linear-gradient(135deg, rgba(61,219,134,1), rgba(61,219,134,.78));
  border-color:rgba(61,219,134,.55);
  color:#fff;
  font-weight:900;
  box-shadow:0 12px 28px rgba(61,219,134,.18);
}
.bp-badge--current{
  background:rgba(105,124,255,.18);
  border-color:rgba(105,124,255,.35);
  color:rgba(105,124,255,1);
  font-weight:700;
}
.bp-badge--upgrade{
  background:linear-gradient(135deg, rgba(255,179,0,.22), rgba(255,136,0,.18));
  border-color:rgba(255,179,0,.40);
  color:#e08600;
  font-weight:700;
}
.bp-plan-item--current{
  opacity:.65;
  pointer-events:none;
  position:relative;
}
.bp-plan-item--current .bp-plan-card{
  border-color:rgba(105,124,255,.45);
}
.bp-plan-item--downgrade{
  opacity:.88;
}
.bp-note--warn{
  background:rgba(105,124,255,.06);
  border:1px solid rgba(105,124,255,.18);
  border-radius:10px;
  padding:10px 14px;
  font-size:.85rem;
  color:var(--bp-text,#e5e5e5);
}
.bp-plan-card--pro{
  /* Matches header "Стили карточек" (purple→green), purple-dominant. */
  --bp-plan-stripe: rgba(105,124,255,.30);
  --bp-plan-stripe-selected: rgba(105,124,255,.22);
  --bp-plan-accent-border: rgba(105,124,255,.35);
  --bp-plan-accent-shadow: rgba(105,124,255,.20);
  --bp-plan-selected-ring: rgba(105,124,255,.66);
  --bp-plan-selected-glow: rgba(105,124,255,.34);
  --bp-plan-selected-pill-a: rgb(105, 124, 255);
  --bp-plan-selected-pill-b: rgb(61, 219, 134);
  border-color:rgba(105,124,255,.22);
  background:
    radial-gradient(320px 180px at 86% 0%, rgba(105,124,255,.20), transparent 66%),
    radial-gradient(260px 160px at 12% 28%, rgba(61,219,134,.10), transparent 70%),
    rgba(255,255,255,.86);
  box-shadow:var(--bp-shadow-lg);
}
.bp-plan-card--business{
  /* Matches header "Стили карточек" (purple→green), green-dominant. */
  --bp-plan-stripe: rgba(61,219,134,.28);
  --bp-plan-stripe-selected: rgba(61,219,134,.22);
  --bp-plan-accent-border: rgba(61,219,134,.35);
  --bp-plan-accent-shadow: rgba(61,219,134,.20);
  --bp-plan-selected-ring: rgba(61,219,134,.66);
  --bp-plan-selected-glow: rgba(61,219,134,.32);
  --bp-plan-selected-pill-a: rgb(61, 219, 134);
  --bp-plan-selected-pill-b: rgb(16, 185, 129);
  border-color:rgba(61,219,134,.22);
  background:
    radial-gradient(320px 180px at 86% 0%, rgba(61,219,134,.18), transparent 66%),
    radial-gradient(260px 160px at 14% 30%, rgba(105,124,255,.06), transparent 70%),
    rgba(255,255,255,.78);
  box-shadow:var(--bp-shadow-lg);
}
.bp-plan-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:10px;
  background:var(--bp-plan-stripe);
  border-bottom:1px solid var(--bp-border-soft);
  pointer-events:none;
}
.bp-plan-card:hover{
  background:rgba(255,255,255,.86);
  box-shadow:var(--bp-shadow-lg);
  filter:none;
}
.bp-plan-card--pro:hover{
  background:
    radial-gradient(320px 180px at 86% 0%, rgba(105,124,255,.20), transparent 66%),
    radial-gradient(260px 160px at 12% 28%, rgba(61,219,134,.10), transparent 70%),
    rgba(255,255,255,.86);
}
.bp-plan-card--business:hover{
  background:
    radial-gradient(320px 180px at 86% 0%, rgba(61,219,134,.22), transparent 66%),
    radial-gradient(260px 160px at 14% 30%, rgba(105,124,255,.08), transparent 70%),
    rgba(255,255,255,.86);
}
.bp-plan-card input{position:absolute; opacity:0; pointer-events:none}
.bp-plan-title{
  font-weight:900;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-0.02em;
  flex:0 0 auto;
  white-space:nowrap;
}
.bp-plan-title-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:nowrap;
  min-height:32px; /* фиксируем высоту заголовка (название + бейджи) для ровной сетки */
}
.bp-plan-top{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
  min-height:28px; /* чтобы шапка карточек была ровной даже если % пользователей скрыт */
  margin-bottom:6px;
}

/* Highlight recommended plan for paywall redirects (?need=...) */
.bp-plan-card--recommended{
  box-shadow:0 0 0 3px var(--bp-plan-accent-shadow), var(--bp-shadow-lg);
}
.bp-plan-card--recommended::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:16px;
  border:2px solid var(--bp-plan-accent-border);
  pointer-events:none;
  opacity:.55;
}
.bp-plan-card .bp-badge--need{
  background:var(--bp-plan-stripe-selected);
  border-color:var(--bp-plan-accent-border);
  font-weight:900;
}
.bp-plan-badges{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  justify-content:flex-start;
  flex:0 0 auto;
  margin:0;
}

/* Billing plan title row: keep everything on one line, but tighten on small phones */
@media (max-width: 420px){
  .bp-plan-title{font-size:20px}
  .bp-plan-title-row{gap:6px}
  .bp-plan-badges{gap:4px}
  .bp-plan-title-row .bp-badge{font-size:11px; padding:5px 6px}
}
@media (max-width: 360px){
  .bp-plan-title{font-size:19px}
  .bp-plan-title-row .bp-badge{font-size:10.5px; padding:4px 6px}
}
.bp-plan-price-wrap{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.bp-plan-price{
  font-weight:900;
  font-size:32px;
  line-height:1;
  display:flex;
  align-items:baseline;
  gap:4px;
  letter-spacing:-.02em;
}
.bp-price-suffix{
  font-weight:700;
  font-size:15px;
  color:rgba(27,34,48,.5);
  letter-spacing:normal;
}
.bp-plan-price-old-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:rgba(27,34,48,.4);
  margin-top:2px;
}
.bp-plan-price-old-wrap s{
  text-decoration-thickness:2px;
}
.bp-price-badge{
  padding:2px 6px;
  border-radius:6px;
  background:rgba(61,219,134,.15);
  color:#1bba66;
  font-size:12px;
  font-weight:800;
}
.bp-plan-core-value{
  margin-top:16px;
  padding:12px;
  background:rgba(27,34,48,.03);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.bp-plan-cv-main{
  font-size:15px;
  font-weight:800;
  color:var(--bp-ink);
}
.bp-plan-cv-sub{
  font-size:13px;
  font-weight:600;
  color:rgba(27,34,48,.55);
}
.bp-plan-cv-ot, .bp-plan-cv-sub-wrap{
  flex-direction:column;
  gap:2px;
}
.bp-plan-period{margin-top:4px}
.bp-plan-meta{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.bp-plan-includes{
  margin-top:10px;
  font-weight:900;
  color:rgba(27,34,48,.78);
}
.bp-plan-card input:checked ~ .bp-plan-price{color:var(--bp-ink)}
.bp-plan-card input:checked ~ .bp-plan-title-row .bp-plan-title{text-decoration:underline}
.bp-plan-card--selected .bp-plan-title{text-decoration:underline}
.bp-plan-card input:checked{outline:none}
.bp-plan-card:has(input:checked){
  border-color:var(--bp-plan-selected-ring);
  --bp-plan-stripe: var(--bp-plan-stripe-selected);
  box-shadow:
    0 0 0 3px var(--bp-plan-selected-ring),
    0 0 0 8px var(--bp-plan-selected-glow),
    0 20px 42px var(--bp-plan-accent-shadow),
    var(--bp-shadow-lg);
  filter:saturate(1.14) brightness(1.04);
  transform:translateY(-4px);
}
.bp-plan-card--selected{
  border-color:var(--bp-plan-selected-ring);
  --bp-plan-stripe: var(--bp-plan-stripe-selected);
  box-shadow:
    0 0 0 3px var(--bp-plan-selected-ring),
    0 0 0 8px var(--bp-plan-selected-glow),
    0 20px 42px var(--bp-plan-accent-shadow),
    var(--bp-shadow-lg);
  filter:saturate(1.14) brightness(1.04);
  transform:translateY(-4px);
}
.bp-plan-card input:checked ~ .bp-plan-title-row::after{
  content:"";
  position:absolute;
  top:20px;
  right:20px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--bp-plan-selected-ring) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow:0 4px 12px var(--bp-plan-accent-shadow);
  pointer-events:none;
}
.bp-plan-card--featured{
  /* Legacy helper: keep popular plan premium even without explicit plan class. */
  --bp-plan-stripe: rgba(105,124,255,.30);
  border-color:rgba(105,124,255,.22);
  background:
    radial-gradient(320px 180px at 86% 0%, rgba(105,124,255,.16), transparent 66%),
    radial-gradient(260px 160px at 12% 28%, rgba(61,219,134,.08), transparent 70%),
    rgba(255,255,255,.78);
  box-shadow:var(--bp-shadow-lg);
}
.bp-plan-card--pro.bp-plan-card--featured,
.bp-plan-card--standard.bp-plan-card--featured{
  /* Popular plan should look "active" even without hover. */
  background:
    radial-gradient(320px 180px at 86% 0%, rgba(105,124,255,.20), transparent 66%),
    radial-gradient(260px 160px at 12% 28%, rgba(61,219,134,.10), transparent 70%),
    rgba(255,255,255,.86);
}
.bp-plan-card--pro.bp-plan-card--featured:hover,
.bp-plan-card--standard.bp-plan-card--featured:hover{
  background:
    radial-gradient(320px 180px at 86% 0%, rgba(105,124,255,.20), transparent 66%),
    radial-gradient(260px 160px at 12% 28%, rgba(61,219,134,.10), transparent 70%),
    rgba(255,255,255,.86);
}
.bp-plan-card--featured:hover{
  box-shadow:var(--bp-shadow-lg);
  filter:none;
}
.bp-plan-card .bp-badge--share{
  gap:8px;
  align-items:center;
}

@media (max-width: 920px){
  .bp-plan-grid{grid-template-columns: 1fr}
  .bp-plan-item--light{order:1}
  .bp-plan-item--standard{order:2}
  .bp-plan-item--pro{order:3}
  .bp-plan-item--business{order:4}
}

.bp-btn-pay{
  padding:14px 18px;
  font-size:16px;
  min-height:54px;
  width:100%;
  box-shadow:var(--bp-shadow-lg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.bp-btn-pay--guarantee{
  padding:10px 18px;
}
.bp-pay-btn-main{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
}
.bp-pay-btn-sub{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:12px;
  font-weight:500;
  opacity:0.85;
  letter-spacing:0.2px;
}
.bp-btn-pay:hover{box-shadow:var(--bp-shadow-lg)}
.bp-btn-pay:active{box-shadow:var(--bp-shadow-md)}

.bp-btn-pay .bp-pay-total{
  font-weight:900;
  white-space:nowrap;
  letter-spacing:-0.01em;
  opacity:.95;
}
.bp-form-row--billing-main{
  margin-top:18px;
}
.bp-form-row--billing-trust{
  margin-top:10px;
}
.bp-pay-col{
  align-self:end;
}
.bp-pay-actions{
  width:100%;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.bp-pay-trust-wrap{
  width:100%;
  display:flex;
  justify-content:flex-end;
}
.bp-pay-trust{
  width:min(100%, 680px);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:8px;
  align-items:stretch;
}
.bp-billing-guarantee{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--bp-border-soft);
  background:rgba(255,255,255,.76);
  box-shadow:var(--bp-shadow-sm);
  font-size:13px;
  font-weight:800;
  color:rgba(16,24,40,.82);
  line-height:1.25;
  text-align:center;
}
.bp-billing-guarantee-ico{
  flex-shrink:0;
  color:#1bba66;
  width:18px;
  height:18px;
}
.bp-pay-safe{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--bp-border-soft);
  background:rgba(255,255,255,.76);
  box-shadow:var(--bp-shadow-sm);
}
.bp-pay-safe-text{
  font-size:13px;
  line-height:1.25;
  color:rgba(16,24,40,.82);
  font-weight:800;
  text-align:center;
}
.bp-pay-safe-logo{
  display:block;
  width:132px;
  max-width:100%;
  height:auto;
  object-fit:contain;
}


@media (max-width: 920px){
  .bp-card{grid-column: span 12}
  .bp-card-third{grid-column: span 12}
  .bp-field{grid-column:span 12}
  .bp-col-3,.bp-col-6,.bp-col-9{grid-column:span 12}
  .bp-field-end{justify-content:flex-start}
  .bp-pay-col{align-self:auto}
  .bp-pay-trust-wrap{justify-content:flex-start}
  .bp-pay-trust{width:100%}
  .bp-table-row{grid-template-columns:1fr}
  .bp-right{text-align:left}
  .bp-history-grid{grid-template-columns: 1fr}
  .bp-brand-grid{grid-template-columns: 1fr}
  .bp-check-group--grid{grid-template-columns:1fr}
}

@media (max-width: 560px){
  .bp-billing-proof{
    justify-content:flex-start;
    text-align:left;
    padding:8px 10px;
  }
  .bp-billing-proof-text{font-size:12.5px}
  .bp-pay-trust{
    grid-template-columns:1fr;
  }
  .bp-billing-guarantee{
    order:0;
  }
  .bp-pay-trust .bp-pay-safe{
    order:1;
  }
  .bp-pay-trust .bp-billing-proof--inline{
    order:2;
    justify-content:center;
    text-align:center;
  }
  .bp-pay-safe{
    justify-content:center;
    text-align:center;
  }
  .bp-pay-safe-text{
    white-space:normal;
    max-width:100%;
    width:100%;
  }
  .bp-pay-safe-logo{width:120px}
  .bp-history-grid{grid-template-columns: 1fr}
}

/* Tools page (mobile-first list) */
.bp-tools{padding:14px}
.bp-tools-list{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bp-tool-card{
  display:block;
  text-decoration:none;
  color:var(--bp-ink);
  border-radius:14px;
  border:1px solid var(--bp-border);
  background:rgba(255,255,255,.92);
  padding:12px 12px;
  box-shadow:var(--bp-shadow-md);
  transition:box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.bp-tool-card:hover{background:rgba(255,255,255,.98); box-shadow:var(--bp-shadow-lg)}
.bp-tool-card:active{box-shadow:var(--bp-shadow-md)}
.bp-tool-card--locked{opacity:.92}
.bp-tool-card--primary{
  border-color:rgba(105,124,255,.28);
}
.bp-tool-card--disabled{
  opacity:.65;
  filter:saturate(.95);
}
.bp-tool-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.bp-tool-title{
  font-weight:900;
  font-size:16px;
}
.bp-tool-go{
  font-weight:900;
  opacity:.65;
}
.bp-tool-desc{
  margin-top:6px;
  color:rgba(27,34,48,.72);
  font-size:13px;
  line-height:1.35;
}
.bp-tool-meta{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color:rgba(27,34,48,.78);
  font-size:12px;
}
.bp-tool-cost b{font-weight:900}

@media (min-width: 981px){
  .bp-tools{padding:16px}
  .bp-tools-list{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  .bp-tool-card{height:100%}
}

/* Mobile topbar tightening to avoid wrapping/huge header */
@media (max-width: 720px){
  .bp-topbar-inner{
    flex-wrap:nowrap;
    padding:8px 10px 8px 14px;
    width:calc(100% - 24px);
    gap:8px;
  }
  .bp-topbar-links{display:none}
  .bp-top-nav{display:none}
  .bp-user-name{display:none}
  .bp-topbar-support--auth{display:none}
  .bp-user-link--support-mobile{display:block}
  .bp-user-link--partners-mobile{display:block}
  .bp-topbar-left{flex:0 1 auto; gap:8px; min-width:0; overflow:hidden}
  .bp-topbar-right{flex:0 0 auto; gap:8px; min-width:0}

  /* keep actions off the logo on narrow screens by shrinking the logo */
  .bp-logo{flex:0 1 auto; min-width:0; overflow:hidden}
  .bp-logo-img{height:clamp(27px, 8vw, 38px); max-width:100%; object-fit:contain}

  /* lighter/compact header controls for phones */
  .bp-user-btn{padding:6px; border-radius:14px}
  .bp-user-btn svg{display:none}
  .bp-icon-btn{width:40px;height:40px; box-shadow:var(--bp-shadow-sm)}
  .bp-pill{padding:6px 8px}
  .bp-pill-dot{display:none}
  .bp-balance{padding:6px 8px; gap:8px}
  .bp-balance-ico{width:30px; height:30px}
  .bp-balance-ico::before{inset:-4px}
  .bp-balance-label{display:none}
  .bp-balance-meta{gap:0}

  /* flash stack should not overlap the smaller header too much */
  .bp-flash-stack{top:calc(72px + env(safe-area-inset-top))}

  /* persistent bottom nav + safe-area */
  body.bp-auth .bp-tabbar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:60;
    display:flex;
    gap:8px;
    padding:8px 10px calc(8px + var(--bp-safe-bottom));
    background:#fff;
    border-top:1px solid var(--bp-border);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .bp-main{padding-bottom:calc(96px + var(--bp-safe-bottom))}

  /* Make "functions" pages less bulky on phones */
  .bp-grid{gap:10px}
  .bp-card{padding:14px; border-radius:16px}
  .bp-page-title{font-size:20px}
  .bp-page-sub{margin-top:8px}
  .bp-section-title{font-size:15px}
  .bp-hero-title{font-size:18px}
  .bp-card-title{font-size:15px}

  .bp-btn{min-height:44px}
  .bp-btn-mini{min-height:40px}
  .bp-input{min-height:44px}
  textarea.bp-input{min-height:120px}

  /* Template grid cards: reduce visual noise and keep 2 columns */
  .bp-tpl-grid{gap:8px}
  .bp-tpl-card{padding:10px}
  .bp-tpl-ico{width:28px; height:28px}
}

/* Mobile shell (phones + small tablets): unify behavior up to 980px.
   In many mobile webviews 720px breakpoint is not enough -> header wraps, sticky panels overlap, bottom tabbar hides actions. */
@media (max-width: 980px){
  /* Keep header height stable: topbar links live in sidebar anyway */
  .bp-topbar-inner{flex-wrap:nowrap}
  .bp-topbar-links{display:none}
  .bp-top-nav{display:none}
  .bp-user-name{display:none}
  .bp-topbar-support--auth{display:none}
  .bp-user-link--support-mobile{display:block}
  .bp-user-link--partners-mobile{display:block}

  /* Mobile CTA: primary action should be big and easy to tap */
  .bp-actions .bp-btn-primary{width:100%}

  /* Show bottom tabbar on all mobile/small-tablet widths where sidebar becomes overlay */
  body.bp-auth .bp-tabbar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:60;
    display:flex;
    gap:8px;
    padding:8px 10px calc(8px + var(--bp-safe-bottom));
    background:#fff;
    border-top:1px solid var(--bp-border);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  /* Reserve space for fixed tabbar */
  .bp-main{padding-bottom:calc(96px + var(--bp-safe-bottom))}

  /* Panels with results often contain action buttons at the bottom — don't let tabbar cover them */
  .bp-gen-result,
  .bp-workspace-side{
    padding-bottom:calc(96px + var(--bp-safe-bottom));
  }
}

@media (max-width: 980px){
  .bp-app{grid-template-columns:1fr}
  body.bp-auth .bp-sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:min(var(--bp-sidebar), 86vw);
    height:100vh;
    height:100dvh;
    transform:translate3d(-110%, 0, 0);
    transition:transform .18s ease, visibility 0s linear .18s;
    z-index:60;
    padding-top:calc(14px + env(safe-area-inset-top));
    padding-bottom:calc(14px + var(--bp-safe-bottom));
    visibility:hidden;
    pointer-events:none;
    will-change:transform;
  }
  body.bp-auth .bp-sidebar-backdrop{
    position:fixed;
    inset:0;
    background:rgba(27,34,48,.35);
    z-index:55;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, visibility 0s linear .18s;
  }
  body.bp-sidebar-open .bp-sidebar{
    transform:translate3d(0, 0, 0);
    visibility:visible;
    pointer-events:auto;
    transition:transform .18s ease, visibility 0s;
  }
  body.bp-sidebar-open .bp-sidebar-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .18s ease, visibility 0s;
  }
}

@media (min-width: 981px){
  .bp-icon-btn--burger{display:none}
}

/* Touch UX fixes */
@media (hover: none){
  /* actions must be usable without hover */
  .bp-history-actions{
    opacity:1;
    pointer-events:auto;
    transform:none;
    transition:none;
    padding:8px;
    border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.92));
  }
  .bp-history-card:hover .bp-history-actions{opacity:1; transform:none}
  .bp-history-actions .bp-btn-mini{
    padding:10px 10px;
    font-size:13px;
  }

  .bp-ws-tile-actions{
    opacity:1;
    pointer-events:auto;
    transform:none;
    transition:none;
    padding:8px;
    border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.62));
  }
  .bp-ws-tile:hover .bp-ws-tile-actions{opacity:1; transform:none}
  .bp-ws-tile-actions .bp-btn-mini{
    padding:10px 10px;
    font-size:13px;
  }
}

/* Fallback for browsers without :has() (selection styling is applied via JS) */
.bp-plan-card--selected{
  border-color:var(--bp-plan-selected-ring);
  --bp-plan-stripe: var(--bp-plan-stripe-selected);
  box-shadow:
    0 0 0 3px var(--bp-plan-selected-ring),
    0 0 0 8px var(--bp-plan-selected-glow),
    0 20px 42px var(--bp-plan-accent-shadow),
    var(--bp-shadow-lg);
  filter:saturate(1.14) brightness(1.04);
  transform:translateY(-2px);
}

/* =========================
   Inpaint (mask editor) UI
   ========================= */
.bp-inpaint-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--bp-border);
  border-radius:12px;
  background:rgba(255,255,255,.70);
  box-shadow:var(--bp-shadow-sm);
}
.bp-inpaint-tools-left,
.bp-inpaint-tools-mid,
.bp-inpaint-tools-right{
  display:flex;
  align-items:center;
  gap:8px;
}
.bp-inpaint-tools-mid{
  flex:1;
  justify-content:center;
}
.bp-inpaint-tools-mid input[type="range"]{
  flex:1 1 auto;
  width:min(280px, 100%);
  min-width:140px;
}
.bp-inpaint-size-val{
  min-width:2.2em;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.bp-inpaint-stage{
  margin-top:10px;
  position:relative;
  width:100%;
  height:auto;
  min-height:260px;
  aspect-ratio:3/4;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--bp-border);
  background:rgba(255,255,255,.62);
}
.bp-inpaint-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:none;
  user-select:none;
  pointer-events:none;
}
.bp-inpaint-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:none;
  touch-action:none; /* we handle drawing */
  cursor:crosshair;
}
.bp-inpaint-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  text-align:center;
  color:rgba(16,24,40,.62);
  font-weight:800;
}

@media (max-width: 820px){
  .bp-inpaint-tools{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:
      "left right"
      "mid mid";
    row-gap:10px;
    align-items:center;
  }
  .bp-inpaint-tools-left{
    grid-area:left;
    flex-wrap:wrap;
  }
  .bp-inpaint-tools .bp-btn-mini{
    min-height:42px;
    padding:10px 14px;
    font-size:15px;
  }
  .bp-inpaint-tools-right{grid-area:right}
  .bp-inpaint-tools-mid{
    grid-area:mid;
    width:100%;
    justify-content:flex-start;
  }
  .bp-inpaint-tools-mid input[type="range"]{
    width:100%;
    min-width:0;
    min-height:30px;
  }
  .bp-inpaint-stage{
    min-height:220px;
  }
}

/* =========================
   Footer
   ========================= */
.bp-tg-webapp .site-footer {
  display: none;
}

.site-footer {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  padding: 32px 20px;
  margin-top: auto;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-logo {
  height: 28px;
  width: auto;
  display: block;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.footer-logo:hover {
  opacity: 1;
}

.footer-copy {
  font-size: 0.85rem;
  color: var(--bp-ink-soft);
}
.footer-legal {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--bp-ink-light);
}
.footer-legal a {
  color: var(--bp-ink-soft);
}
.footer-legal a:hover {
  color: var(--bp-accent);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bp-ink-soft);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}

.footer-link:hover {
  color: var(--bp-accent);
}

.footer-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.8;
}

.footer-link--referral {
  background: linear-gradient(135deg, rgba(105,124,255,.12), rgba(168,85,247,.12));
  color: var(--bp-accent);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(105,124,255,.22);
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.footer-link--referral:hover {
  background: linear-gradient(135deg, rgba(105,124,255,.2), rgba(168,85,247,.2));
  border-color: rgba(105,124,255,.35);
  color: var(--bp-accent);
  box-shadow: 0 2px 12px rgba(105,124,255,.15);
}
.footer-link--referral svg {
  opacity: 1;
}

.footer-brand-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 6px;
}

@media (max-width: 980px) {
  body.bp-auth .site-footer {
    padding-bottom: calc(80px + var(--bp-safe-bottom));
  }
}
@media (max-width: 600px) {
  .site-footer {
    padding: 24px 16px;
  }
  body.bp-auth .site-footer {
    padding-bottom: calc(80px + var(--bp-safe-bottom));
  }
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  .footer-brand {
    align-items: center;
  }
  .footer-links {
    justify-content: center;
    gap: 16px;
  }
  .footer-link {
    font-size: 0.9rem;
  }
}

/* ── SEO text results ────────────────────────────── */
.bp-seo-block{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  border:2px solid rgba(27,34,48,.12);
  background:rgba(255,255,255,.50);
}
.bp-seo-block--warn{
  border-color:rgba(245,158,11,.30);
  background:rgba(245,158,11,.06);
}
.bp-seo-block-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.bp-seo-block-label{
  font-weight:900;
  line-height:1.3;
}
.bp-seo-block-content{
  margin-top:8px;
  line-height:1.55;
  word-break:break-word;
}
.bp-seo-field-value{
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.80);
  border:1px solid var(--bp-border-soft);
  font-size:14px;
  user-select:all;
}
.bp-seo-copy{
  flex-shrink:0;
  font-size:12px !important;
  padding:5px 10px !important;
  border-radius:8px !important;
}
.bp-seo-bullets{
  margin:0;
  padding-left:20px;
}
.bp-seo-bullets li{
  margin-bottom:4px;
}
.bp-seo-keywords{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.bp-seo-raw{
  margin:0;
  padding:10px;
  border-radius:8px;
  background:rgba(16,24,40,.04);
  font-size:13px;
  white-space:pre-wrap;
  word-break:break-word;
  max-height:400px;
  overflow:auto;
}
.bp-btn--sm{
  font-size:13px;
  padding:6px 12px;
  border-radius:10px;
}

/* ── Feedback popup ── */
.bp-feedback-overlay{
  position:fixed;
  inset:0;
  z-index:900;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .22s ease;
}
.bp-feedback-overlay--open{
  pointer-events:auto;
  opacity:1;
}
.bp-feedback-backdrop{
  position:absolute;
  inset:0;
  background:rgba(27,34,48,.38);
  backdrop-filter:blur(2px);
}
.bp-feedback-popup{
  position:relative;
  width:100%;
  max-width:420px;
  margin:0 12px 24px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:24px;
  box-shadow:0 12px 40px rgba(0,0,0,.14);
  transform:translateY(30px);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
.bp-feedback-overlay--open .bp-feedback-popup{
  transform:translateY(0);
}
.bp-feedback-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px 0;
}
.bp-feedback-title{
  font-family:'Onest',sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--bp-ink,#1b2230);
}
.bp-feedback-close{
  background:none;
  border:none;
  cursor:pointer;
  font-size:22px;
  color:var(--bp-muted,#667085);
  padding:4px 6px;
  border-radius:8px;
  line-height:1;
  transition:background .15s ease;
}
.bp-feedback-close:hover{background:rgba(0,0,0,.06)}
.bp-feedback-body{
  padding:16px 20px;
  text-align:center;
}
.bp-feedback-subtitle{
  font-size:14px;
  color:var(--bp-muted,#667085);
  margin-bottom:14px;
}
.bp-feedback-stars{
  display:flex;
  gap:6px;
  justify-content:center;
}
.bp-feedback-star{
  background:none;
  border:none;
  cursor:pointer;
  font-size:36px;
  color:#d0d5dd;
  padding:2px 4px;
  transition:color .12s ease, transform .12s ease;
  line-height:1;
}
.bp-feedback-star:hover{transform:scale(1.15)}
.bp-feedback-star.bp-star--active{color:#f59e0b}
.bp-feedback-star.bp-star--hover{color:#fbbf24}

.bp-feedback-comment{
  margin-top:14px;
  text-align:left;
  animation:bpFbSlide .2s ease;
}
@keyframes bpFbSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.bp-feedback-comment-label{
  font-size:13px;
  color:var(--bp-muted,#667085);
  margin-bottom:6px;
}
.bp-feedback-textarea{
  width:100%;
  min-height:72px;
  padding:10px 12px;
  border:1px solid var(--bp-border,#e4e7ec);
  border-radius:12px;
  font-family:inherit;
  font-size:14px;
  resize:vertical;
  outline:none;
  transition:border-color .15s ease;
  box-sizing:border-box;
}
.bp-feedback-textarea:focus{border-color:var(--bp-accent,#6366f1)}
.bp-feedback-submit{
  margin-top:8px;
  width:100%;
  padding:10px 16px;
  font-size:14px;
  font-weight:600;
  border:none;
  border-radius:12px;
  cursor:pointer;
  color:#fff;
  background:var(--bp-accent,#6366f1);
  transition:background .15s ease, opacity .15s ease;
}
.bp-feedback-submit:hover{opacity:.88}
.bp-feedback-submit:disabled{opacity:.5;cursor:default}
.bp-feedback-foot{
  padding:0 20px 16px;
  text-align:center;
}
.bp-feedback-optout{
  background:none;
  border:none;
  cursor:pointer;
  font-size:13px;
  color:var(--bp-muted,#667085);
  text-decoration:underline;
  text-underline-offset:2px;
  padding:4px 8px;
  transition:color .15s ease;
}
.bp-feedback-optout:hover{color:var(--bp-ink,#1b2230)}
.bp-feedback-thankyou{
  padding:24px 20px;
  text-align:center;
}
.bp-feedback-thankyou-ico{font-size:32px;margin-bottom:6px}
.bp-feedback-thankyou-text{
  font-size:15px;
  font-weight:600;
  color:var(--bp-ink,#1b2230);
}
@media (min-width:600px){
  .bp-feedback-overlay{align-items:center}
  .bp-feedback-popup{margin-bottom:0}
}

/* ═══════════════════════════════════════════════════════════
   Mobile Wizard — generate page step-by-step flow
   Desktop: everything visible, wizard chrome hidden.
   Mobile (≤720px): one step at a time with progress bar.
   ═══════════════════════════════════════════════════════════ */
.bp-wiz-bar{display:none}
.bp-wiz-nav{display:none}

@media (max-width:720px){
  .bp-wiz-bar{
    display:block;
    position:sticky;
    top:0;
    z-index:12;
    background:linear-gradient(180deg,rgba(198,209,234,.97) 70%,rgba(198,209,234,0));
    padding:14px 0 18px;
    margin:-10px 0 4px;
  }
  .bp-wiz-steps{
    display:flex;
    align-items:flex-start;
    gap:0;
  }
  .bp-wiz-dot{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0 6px;
    flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
  }
  .bp-wiz-dot[disabled]{pointer-events:none;opacity:.55}
  .bp-wiz-num{
    width:30px;height:30px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:13px;
    border:2px solid rgba(16,24,40,.15);
    color:rgba(16,24,40,.35);
    background:rgba(255,255,255,.55);
    transition:all .25s ease;
  }
  .bp-wiz-dot--done .bp-wiz-num{
    background:var(--bp-accent);
    border-color:var(--bp-accent);
    color:#fff;
  }
  .bp-wiz-dot--active .bp-wiz-num{
    background:var(--bp-ink);
    border-color:var(--bp-ink);
    color:#fff;
    box-shadow:0 2px 8px rgba(16,24,40,.22);
    transform:scale(1.08);
  }
  .bp-wiz-label{
    font-size:10px;
    font-weight:700;
    color:rgba(16,24,40,.38);
    white-space:nowrap;
    transition:color .2s;
  }
  .bp-wiz-dot--active .bp-wiz-label{color:var(--bp-ink)}
  .bp-wiz-dot--done .bp-wiz-label{color:var(--bp-ink2)}
  .bp-wiz-line{
    flex:1;
    height:2px;
    background:rgba(16,24,40,.10);
    min-width:10px;
    align-self:flex-start;
    margin-top:14px;
    border-radius:1px;
    transition:background .25s;
  }
  .bp-wiz-line--done{background:var(--bp-accent)}

  /* Step visibility */
  .bp-wiz-step{display:none}
  .bp-wiz-step--active{display:block;animation:bp-wiz-in .25s ease}
  @keyframes bp-wiz-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

  /* Nav buttons */
  .bp-wiz-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:24px;
    gap:12px;
  }
  .bp-wiz-nav--last{justify-content:flex-start}
  .bp-wiz-next{margin-left:auto}
  .bp-wiz-back{
    min-width:90px;
  }
  .bp-wiz-next{
    min-width:120px;
  }
}

/* ── Announcement bar (history purge warning) ── */
/* Плашка стоит ПЕРВОЙ в DOM-потоке внутри .bp-shell (см. base.html) → она всегда
   рендерится сверху, до хедера. Когда плашка есть, хедер переключается из fixed
   в sticky и встаёт ПОД ней с зазором (margin-top), оставаясь "приклеенным"
   при скролле. .bp-main padding-top уменьшаем — оба элемента уже в потоке. */
.bp-announce-bar{
  background:var(--bp-ink);
  color:rgba(255,255,255,.85);
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  padding:calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
  position:relative;
  z-index:110;
  margin:0;
  border-radius:0;
  box-shadow:0 4px 16px rgba(11,18,32,.18);
}
html.bp-tg-webapp .bp-announce-bar{
  padding-top:calc(var(--bp-tg-top-inset, 0px) + 52px);
}
.bp-shell:has(> .bp-announce-bar) .bp-topbar{
  position:sticky;
  top:16px;
  margin-top:16px;
}
@media (max-width:980px){
  .bp-shell:has(> .bp-announce-bar) .bp-topbar{
    top:8px;
    margin-top:12px;
  }
}
html.bp-tg-webapp .bp-shell:has(> .bp-announce-bar) .bp-topbar{
  top:calc(var(--bp-tg-top-inset, 0px) + 44px);
  margin-top:10px;
}
.bp-shell:has(> .bp-announce-bar) .bp-main{
  padding-top:24px;
}
.bp-announce-inner{
  max-width:1120px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.bp-announce-ico{
  flex-shrink:0;
  display:flex;
  align-items:center;
  color:var(--bp-warn);
}
.bp-announce-text{
  text-align:center;
  color:#ffffff;
}
.bp-announce-text b{
  font-weight:600;
  color:#fff;
}
.bp-announce-text b.bp-warn-text{
  color:var(--bp-warn);
}
.bp-announce-btn{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 16px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  background:#fff;
  color:var(--bp-ink);
  text-decoration:none;
  transition:transform .15s, background .15s;
  white-space:nowrap;
}
.bp-announce-btn:hover{
  transform:translateY(-1px);
  background:#f3f4f6;
}
.bp-announce-btn:active{
  transform:translateY(0);
  background:#e5e7eb;
}
@media(max-width:600px){
  .bp-announce-bar{
    font-size:12.5px;
    padding:calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px;
    line-height:1.3;
  }
  .bp-announce-inner{
    gap:8px;
    flex-wrap:nowrap;
    justify-content:space-between;
  }
  .bp-announce-ico{display:none}
  .bp-announce-text{
    text-align:left;
    flex:1 1 auto;
    min-width:0;
  }
  .bp-announce-btn{
    padding:6px 12px;
    font-size:12px;
    width:auto;
    flex:0 0 auto;
  }
}

/* ── B2B section (billing) ── */
.bp-b2b-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.bp-b2b-ico{font-size:28px;line-height:1;flex-shrink:0}
.bp-b2b-details{margin-top:4px}
.bp-b2b-form{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.bp-b2b-form[hidden]{display:none}
.bp-b2b-form .bp-form-row{display:flex;gap:12px;flex-wrap:wrap}
.bp-b2b-form .bp-col-6{flex:1 1 220px;min-width:0}
.bp-b2b-submit-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:4px;
}
.bp-b2b-status{
  font-size:13px;
  color:var(--bp-warn);
  min-height:20px;
}
.bp-b2b-success{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 0 4px;
}
.bp-b2b-success-ico{font-size:28px;line-height:1;flex-shrink:0}
.bp-b2b-success-text{font-size:14px;line-height:1.5}
.bp-required{color:var(--bp-accent);font-weight:600}

/* ── Cancel subscription modal ── */
.bp-cancel-overlay{
  position:fixed;
  inset:0;
  z-index:910;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .22s ease;
}
.bp-cancel-overlay--open{
  pointer-events:auto;
  opacity:1;
}
.bp-cancel-backdrop{
  position:absolute;
  inset:0;
  background:rgba(27,34,48,.42);
  backdrop-filter:blur(3px);
}
.bp-cancel-popup{
  position:relative;
  width:100%;
  max-width:460px;
  margin:0 16px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:24px;
  box-shadow:0 16px 48px rgba(0,0,0,.16);
  transform:translateY(24px) scale(.97);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
.bp-cancel-overlay--open .bp-cancel-popup{
  transform:translateY(0) scale(1);
}
.bp-cancel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px 0;
}
.bp-cancel-title{
  font-family:'Onest',sans-serif;
  font-weight:700;
  font-size:17px;
  color:var(--bp-ink,#1b2230);
}
.bp-cancel-close{
  background:none;
  border:none;
  cursor:pointer;
  font-size:24px;
  color:var(--bp-muted,#667085);
  padding:4px 8px;
  border-radius:8px;
  line-height:1;
  transition:background .15s ease;
}
.bp-cancel-close:hover{background:rgba(0,0,0,.06)}

.bp-cancel-step{
  animation:bpCancelStepIn .25s ease;
}
@keyframes bpCancelStepIn{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:translateX(0)}
}
.bp-cancel-body{
  padding:20px 24px;
  text-align:center;
}
.bp-cancel-offer-ico{
  font-size:36px;
  margin-bottom:8px;
}
.bp-cancel-offer-title{
  font-family:'Onest',sans-serif;
  font-weight:700;
  font-size:17px;
  color:var(--bp-ink,#1b2230);
  margin-bottom:8px;
}
.bp-cancel-subtitle{
  font-size:14px;
  color:var(--bp-muted,#667085);
  line-height:1.55;
  margin-bottom:16px;
}
.bp-cancel-reasons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.bp-cancel-reason-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:10px 18px;
  font-size:14px;
  font-weight:500;
  border:1px solid var(--bp-border,#e4e7ec);
  border-radius:12px;
  background:rgba(255,255,255,.7);
  color:var(--bp-ink,#1b2230);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.bp-cancel-reason-btn:hover{
  border-color:var(--bp-accent,#6366f1);
  background:rgba(99,102,241,.06);
}
.bp-cancel-reason-btn:active{
  transform:scale(.97);
}

.bp-cancel-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}
.bp-cancel-action-btn{
  width:100%;
  justify-content:center;
  padding:11px 16px;
  font-size:14px;
  border-radius:12px;
}
.bp-cancel-action-btn--danger{
  color:#ef4444;
}
.bp-cancel-action-btn--outline{
  background:transparent;
  color:var(--bp-accent,#6366f1);
  border:1.5px solid var(--bp-accent,#6366f1);
}
.bp-cancel-action-btn--outline:hover{
  background:rgba(99,102,241,.06);
}

@media (max-width:480px){
  .bp-cancel-overlay{align-items:flex-end}
  .bp-cancel-popup{
    margin:0;
    border-radius:24px 24px 0 0;
    max-width:100%;
    transform:translateY(100%);
  }
  .bp-cancel-overlay--open .bp-cancel-popup{
    transform:translateY(0);
  }
  .bp-cancel-reasons{flex-direction:column}
  .bp-cancel-reason-btn{width:100%;justify-content:center}
}

/* ========== Legal pages (privacy / consent) ========== */
.bp-legal__meta{
  margin-top:-6px;
  margin-bottom:18px;
}
.bp-legal__body{
  font-size:15px;
  line-height:1.65;
  color:var(--bp-text, #1f2937);
  max-width:780px;
}
.bp-legal__body p{margin:0 0 14px;}
.bp-legal__body h2{
  font-size:18px;
  font-weight:700;
  margin:26px 0 10px;
  color:var(--bp-text, #1f2937);
}
.bp-legal__body ul{
  margin:0 0 14px;
  padding-left:22px;
}
.bp-legal__body li{margin:0 0 6px;}
.bp-legal__body a{
  color:var(--bp-accent, #4f6ef7);
  text-decoration:underline;
  text-underline-offset:2px;
}
.bp-legal__body a:hover{opacity:.85;}
@media (max-width: 640px){
  .bp-legal__body{font-size:14px;line-height:1.6;}
  .bp-legal__body h2{font-size:16px;margin-top:22px;}
}

.footer-brand-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 6px;
}