:root{
  /* Landing background (bitiypixel.ru) */
  --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:#7c5cff; /* primary accent */
  --bp-accent2:#22c55e; /* 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; /* legacy var (sidebar removed from layout) */
  /* 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}
html,body{height:100%}
body{
  margin:0;
  color:var(--bp-ink);
  font-family:Inter,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:3px;
  z-index:9999;
  background:linear-gradient(90deg, transparent, var(--bp-accent), transparent);
  background-size:240px 3px;
  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(181,249,94,.24), transparent 55%),
    radial-gradient(900px 900px at 78% 90%, rgba(124,58,237,.18), transparent 55%),
    linear-gradient(180deg, var(--bp-bg), var(--bp-bg2));
  background-attachment:fixed;
  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:0;
  padding-top:var(--bp-tg-top-inset, 0px);
  background:#fff;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
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:#fff;
    overscroll-behavior-y:none;
  }
  .bp-topbar{
    background:#fff;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .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"],
html.bp-tg-webapp .bp-footer-legal,
html.bp-tg-webapp .bp-footer{
  display:none !important;
}

.bp-topbar{
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
  border-bottom:1px solid var(--bp-border);
}
.bp-topbar-inner{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:10px;
  flex-wrap:wrap;
}
.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(124,92,255,.28);
  color:#fff;
  background:
    radial-gradient(240px 120px at 18% 0%, rgba(255,255,255,.28), transparent 62%),
    linear-gradient(135deg, rgba(124,92,255,1), rgba(34,197,94,.90));
  box-shadow:
    0 18px 44px rgba(124,92,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{
  transform:translateY(-1px);
  box-shadow:
    0 24px 60px rgba(124,92,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{
  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:72px;
  width:auto;
  display:block;
  image-rendering: pixelated;
}
.bp-logo-pixel{
  font-family:Inter,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:Inter,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:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.bp-nav-link{
  text-decoration:none;
  color:var(--bp-ink);
  font-weight:600;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
}
.bp-nav-link:hover{background:rgba(255,255,255,.5)}
.bp-nav-link-muted{opacity:.8}
.bp-nav-link--active{
  background:rgba(124,92,255,.12);
  border:1px solid rgba(124,92,255,.22);
}
/* Active nav item should stay visually stable on hover */
.bp-nav-link.bp-nav-link--active:hover{background:rgba(124,92,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(124,92,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(124,92,255,.22), transparent 60%),
    radial-gradient(220px 110px at 100% 130%, rgba(34,197,94,.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(124,92,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(124,92,255,1), rgba(124,92,255,.78));
  box-shadow:
    0 10px 22px rgba(124,92,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(124,92,255,.26) 0%, rgba(124,92,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:18px 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(124,92,255,.12);
  border-color:rgba(124,92,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(124,92,255,1), rgba(34,197,94,.90));
  border:1px solid rgba(124,92,255,.28);
  border-radius:18px;
  box-shadow:
    0 18px 44px rgba(124,92,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(124,92,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(124,92,255,1), rgba(34,197,94,.92));
  border-color:rgba(124,92,255,.32);
  box-shadow:
    0 24px 60px rgba(124,92,255,.26),
    var(--bp-shadow-md);
  filter:saturate(1.08);
}
.bp-tabbar-item--cta{
  color:var(--bp-ink);
  background:rgba(124,92,255,.16);
  border-color:rgba(124,92,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(181,249,94,.35)}
.bp-side-link--active{
  background:rgba(181,249,94,.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(181,249,94,.35);
}
.bp-side-link.bp-side-link--brand.bp-side-link--active:hover{
  transform:none;
  background:rgba(181,249,94,.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:#22c55e}
.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(124,92,255,.28);
  background:
    radial-gradient(240px 120px at 18% 0%, rgba(255,255,255,.28), transparent 62%),
    linear-gradient(135deg, rgba(124,92,255,1), rgba(34,197,94,.90));
  box-shadow:
    0 18px 44px rgba(124,92,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(124,92,255,.08)}
.bp-user-link--support-mobile{display:none}

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

.bp-card{
  grid-column: span 6;
  background:var(--bp-card);
  border:1px solid var(--bp-border);
  border-radius:var(--bp-radius);
  box-shadow:var(--bp-shadow-md);
  padding:18px;
}
.bp-card-wide{grid-column: span 12;}
.bp-card-third{grid-column: span 4;}
.bp-card-hero{
  background:linear-gradient(135deg, rgba(124,92,255,.08), rgba(255,255,255,.92));
}
.bp-card-title{
  font-weight:900;
  font-size:18px;
  margin-bottom:8px;
}
.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(124,92,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(124,92,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(124,92,255,.14);
  border:1px solid rgba(124,92,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(124,92,255,.35);
  background:var(--bp-accent);
  color:#fff;
  font-weight:900;
}
.bp-btn-accent:hover{
  border-color:rgba(124,92,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-welcome .bp-topbar,
body.bp-welcome .bp-footer,
body.bp-welcome .bp-tabbar{
  display:none;
}
body.bp-welcome .bp-container{
  width:min(760px, calc(100% - 32px));
}
.bp-welcome-wrap{
  padding:22px 0 34px;
}
.bp-welcome-card{
  max-width:760px;
  margin:0 auto;
}
body.bp-welcome .bp-welcome-q .bp-hero-title{
  margin-bottom:14px;
}
.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(34,197,94,1));
  transition:width .22s ease;
}
.bp-welcome-loading{
  text-align:center;
  padding:18px 0 10px;
}
.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-actions{margin-top:14px}

/* Mobile: bigger tap targets for welcome flow (buttons were too small). */
@media (max-width: 720px){
  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:15px}
  body.bp-welcome .bp-hero-title{font-size:24px}
}

.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(124,92,255,.14), transparent 68%),
    radial-gradient(260px 160px at 10% 30%, rgba(34,197,94,.10), transparent 70%),
    rgba(255,255,255,.92);
  border-color:rgba(124,92,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-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 12px;
  text-decoration:none;
  border:1px solid var(--bp-border);
  border-radius:12px;
  box-shadow:var(--bp-shadow-sm);
  color:var(--bp-ink);
  background:rgba(255,255,255,.92);
  font-weight:600;
  cursor:pointer;
  transition:box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.bp-btn:hover{box-shadow:var(--bp-shadow-md)}
.bp-btn:active{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 16px;
  min-height:52px;
  font-weight:900;
  letter-spacing:-0.01em;
  border-radius:16px;
  color:#fff;
  background:
    radial-gradient(240px 120px at 18% 0%, rgba(255,255,255,.28), transparent 62%),
    linear-gradient(135deg, var(--bp-accent), rgba(34,197,94,.92));
  border-color:rgba(124,92,255,.32);
  box-shadow:
    0 18px 44px rgba(124,92,255,.20),
    var(--bp-shadow-sm);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
  will-change:transform;
}
.bp-btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  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-primary > *{position:relative; z-index:1}
.bp-btn-primary:hover{
  box-shadow:
    0 24px 60px rgba(124,92,255,.24),
    var(--bp-shadow-md);
  filter:saturate(1.06);
}
.bp-btn-primary:active{
  transform:translateY(1px);
  box-shadow:
    0 10px 26px rgba(124,92,255,.18),
    var(--bp-shadow-sm);
  filter:none;
}
.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)}

/* =========================
   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(124,92,255,1), rgba(34,197,94,.90));
  box-shadow:
    0 18px 44px rgba(124,92,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}
@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(124,92,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(124,92,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(124,92,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(124,92,255,.38);
  background:
    radial-gradient(160px 90px at 18% 0%, rgba(255,255,255,.26), transparent 62%),
    linear-gradient(135deg, var(--bp-accent), rgba(34,197,94,.92));
  color:#fff;
  box-shadow:0 18px 44px rgba(124,92,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:8px;
}
.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);
}
.bp-brand-preview-palette{display:flex; gap:6px}
.bp-brand-preview-swatch{
  width:18px;
  height:18px;
  border-radius:8px;
  border:2px solid rgba(27,34,48,.35);
  box-shadow:2px 2px 0 rgba(27,34,48,.25);
}
.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(124,92,255,.38);
  background:rgba(124,92,255,.06);
  box-shadow:0 0 0 3px rgba(124,92,255,.18), var(--bp-shadow-md);
}
.bp-mode-opt input:checked + .bp-mode-card::before{
  border-color:rgba(124,92,255,.62);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 38%, transparent 42%),
    linear-gradient(135deg, rgba(124,92,255,1), rgba(34,197,94,.92));
}
.bp-mode-opt input:focus-visible + .bp-mode-card{
  outline:3px solid rgba(124,92,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{
  padding:10px 12px;
  border:1px solid var(--bp-border);
  border-radius:12px;
  box-shadow:var(--bp-shadow-md);
  background:rgba(255,255,255,.92);
  font-weight:600;
  pointer-events:auto;
}
.bp-flash-error{background:rgba(239,68,68,.10)}
.bp-flash-info{background:#FFFFFF}
.bp-flash-success{background:rgba(34,197,94,.12)}
.bp-flash-warn{background:rgba(245,158,11,.14)}
.bp-flash-warning{background:rgba(245,158,11,.14)}

.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-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(124,92,255,.14);
  border-color:rgba(124,92,255,.24);
}
body.bp-billing--one_time #bp-billing-form .bp-badge--metric{
  background:rgba(124,92,255,.14);
  border-color:rgba(124,92,255,.24);
}
.bp-badge--popular{
  background:rgba(34,197,94,.18);
  border-color:rgba(34,197,94,.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--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:0;
  padding:0;
  border:1px solid var(--bp-border);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  box-shadow:var(--bp-shadow-sm);
  overflow:hidden;
}
.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:44px;
  border-radius:0;
  font-weight:600;
  text-align:center;
  line-height:1.15;
  background:transparent;
  min-width:0;
}
.bp-seg-item + .bp-seg-item input + span{border-left:1px solid var(--bp-border-soft)}
.bp-seg-item input:checked + span{
  background:var(--bp-accent);
  color:#fff;
}
/* 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:var(--bp-accent)}

.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:6px;
  padding:10px;
  border-radius:14px;
  border:2px solid rgba(27,34,48,.14);
  background:rgba(245,246,248,.85);
  cursor:pointer;
  min-width:0;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.bp-tpl-card:hover{background:rgba(245,246,248,.95)}
.bp-tpl-card.bp-tpl-card--selected:hover{background:rgba(245,246,248,.85)}
.bp-tpl-card input{position:absolute; inset:0; opacity:0; cursor:pointer}
.bp-tpl-thumb{
  aspect-ratio: 3/4;
  border-radius:12px;
  border:1px solid var(--bp-border-soft);
  background:rgba(255,255,255,.78);
  overflow:hidden;
  display:block;
  color:rgba(27,34,48,.65);
}
.bp-tpl-preview{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.bp-tpl-card input:checked + .bp-tpl-thumb{
  border-color:rgba(124,92,255,.35);
  background:rgba(124,92,255,.12);
  color:rgba(16,24,40,.85);
}
.bp-tpl-card--selected{
  border:2px solid rgba(124,92,255,.80);
  background:rgba(124,92,255,.08);
  box-shadow:0 0 0 3px rgba(124,92,255,.16), var(--bp-shadow-lg);
  transform:translateY(-1px);
}
.bp-tpl-card--selected::before{
  content:"✓";
  position:absolute;
  top:10px;
  right:10px;
  width:24px;
  height:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:14px;
  background:rgba(124,92,255,.95);
  color:#fff;
  box-shadow:0 10px 22px rgba(124,92,255,.25);
  z-index:3;
  pointer-events:none;
}
.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(181,249,94,.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(181,249,94,.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(181,249,94,.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(124,92,255,.10);
  border-color:rgba(124,92,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-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-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:18px;
  border:none;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(245,246,248,.88));
  box-shadow: inset 0 0 0 1px rgba(27,34,48,.12);
  text-align:center;
  font-weight:900;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:rgba(27,34,48,.70);
  min-height:240px;
}

.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(124,92,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--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}

/* Billing period toggle (monthly vs annual subscription) */
.bp-badge--accent{
  background:rgba(181,249,94,.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(124,92,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(124,92,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:12px;
  text-decoration:none;
  color:var(--bp-ink);
  border-radius:18px;
  border:1px solid rgba(16,24,40,.10);
  background:rgba(255,255,255,.92);
  box-shadow:var(--bp-shadow-md);
  overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s 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(-2px);
  box-shadow:var(--bp-shadow-lg);
  border-color:rgba(124,92,255,.22);
  background:rgba(255,255,255,.96);
}
.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(124,92,255,.26);
  background:
    radial-gradient(280px 170px at 86% 0%, rgba(124,92,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(16,24,40,.08);
}
.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 14px 14px;
}
.bp-fn-title{
  font-weight:900;
  font-size:16px;
  line-height:1.15;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bp-fn-go{
  font-weight:900;
  opacity:.6;
  flex:0 0 auto;
}

.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);
}

@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)}

/* One-time prepay variants (1/3/6/12 months) */
.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-credits-ot,
.bp-plan-gens-ot,
.bp-plan-genprice-one-val{display:none}

/* In one-time mode hide subscription meta (month/year) */
body.bp-billing--one_time .bp-plan-credits--month,
body.bp-billing--one_time .bp-plan-credits--year,
body.bp-billing--one_time .bp-plan-gens--month,
body.bp-billing--one_time .bp-plan-gens--year{
  display:none !important;
}

/* Selected one-time duration */
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-credits-ot--m1,
body.bp-billing--one_time.bp-billing--ot-m1 .bp-plan-gens-ot--m1,
body.bp-billing--one_time.bp-billing--ot-m1 .bp-plan-genprice-one-val--m1{display:inline}

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-credits-ot--m3,
body.bp-billing--one_time.bp-billing--ot-m3 .bp-plan-gens-ot--m3,
body.bp-billing--one_time.bp-billing--ot-m3 .bp-plan-genprice-one-val--m3{display:inline}

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-credits-ot--m6,
body.bp-billing--one_time.bp-billing--ot-m6 .bp-plan-gens-ot--m6,
body.bp-billing--one_time.bp-billing--ot-m6 .bp-plan-genprice-one-val--m6{display:inline}

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-credits-ot--m12,
body.bp-billing--one_time.bp-billing--ot-m12 .bp-plan-gens-ot--m12,
body.bp-billing--one_time.bp-billing--ot-m12 .bp-plan-genprice-one-val--m12{display:inline}

/* Subscription period variants (monthly / quarterly / annual) */
.bp-price-sub--q,
.bp-plan-sub-sub--q,
.bp-plan-genprice-sub--q,
.bp-plan-credits--q,
.bp-plan-gens--q,
.bp-price-sub--year,
.bp-plan-sub-sub--year,
.bp-plan-genprice-sub--year,
.bp-plan-credits--year,
.bp-plan-gens--year{
  display:none;
}

/* Quarterly: show 3-month variant, hide month+year */
body.bp-billing--subscription.bp-billing--sub-q .bp-price-sub--month,
body.bp-billing--subscription.bp-billing--sub-q .bp-plan-sub-sub--month,
body.bp-billing--subscription.bp-billing--sub-q .bp-plan-genprice-sub--month,
body.bp-billing--subscription.bp-billing--sub-q .bp-plan-credits--month,
body.bp-billing--subscription.bp-billing--sub-q .bp-plan-gens--month,
body.bp-billing--subscription.bp-billing--sub-q .bp-price-sub--year,
body.bp-billing--subscription.bp-billing--sub-q .bp-plan-sub-sub--year,
body.bp-billing--subscription.bp-billing--sub-q .bp-plan-genprice-sub--year,
body.bp-billing--subscription.bp-billing--sub-q .bp-plan-credits--year,
body.bp-billing--subscription.bp-billing--sub-q .bp-plan-gens--year{
  display:none !important;
}
body.bp-billing--subscription.bp-billing--sub-q .bp-price-sub--q,
body.bp-billing--subscription.bp-billing--sub-q .bp-plan-sub-sub--q,
body.bp-billing--subscription.bp-billing--sub-q .bp-plan-genprice-sub--q,
body.bp-billing--subscription.bp-billing--sub-q .bp-plan-credits--q,
body.bp-billing--subscription.bp-billing--sub-q .bp-plan-gens--q{
  display:inline;
}

body.bp-billing--subscription.bp-billing--annual .bp-price-sub--month,
body.bp-billing--subscription.bp-billing--annual .bp-plan-sub-sub--month,
body.bp-billing--subscription.bp-billing--annual .bp-plan-genprice-sub--month,
body.bp-billing--subscription.bp-billing--annual .bp-plan-credits--month,
body.bp-billing--subscription.bp-billing--annual .bp-plan-gens--month{
  display:none !important;
}
body.bp-billing--subscription.bp-billing--annual .bp-price-sub--q,
body.bp-billing--subscription.bp-billing--annual .bp-plan-sub-sub--q,
body.bp-billing--subscription.bp-billing--annual .bp-plan-genprice-sub--q,
body.bp-billing--subscription.bp-billing--annual .bp-plan-credits--q,
body.bp-billing--subscription.bp-billing--annual .bp-plan-gens--q{
  display:none !important;
}
body.bp-billing--subscription.bp-billing--annual .bp-price-sub--year,
body.bp-billing--subscription.bp-billing--annual .bp-plan-sub-sub--year,
body.bp-billing--subscription.bp-billing--annual .bp-plan-genprice-sub--year,
body.bp-billing--subscription.bp-billing--annual .bp-plan-credits--year,
body.bp-billing--subscription.bp-billing--annual .bp-plan-gens--year{
  display:inline;
}

.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:20px;
  height:20px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  line-height:1;
  border-radius:999px;
  border:1px solid rgba(27,34,48,.14);
  background:rgba(255,255,255,.82);
  color:rgba(27,34,48,.64);
}
.bp-plan-feature-txt{
  min-width:0;
  line-height:1.28;
}
.bp-plan-features--matrix .bp-plan-feature{
  min-height:32px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(16,24,40,.10);
  background:rgba(255,255,255,.42);
}

.bp-plan-feature--yes .bp-plan-feature-ico{
  border-color:rgba(11,122,52,.30);
  background:rgba(34,197,94,.20);
  color:rgba(11,122,52,.95);
}
.bp-plan-feature--yes .bp-plan-feature-txt{
  color:rgba(16,24,40,.86);
}
.bp-plan-feature--no .bp-plan-feature-ico{
  border-color:rgba(16,24,40,.16);
  background:rgba(16,24,40,.08);
  color:rgba(16,24,40,.46);
}
.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{
  border-color:rgba(11,122,52,.30);
  background:rgba(34,197,94,.20);
  color:rgba(11,122,52,.95);
}
.bp-plan-feature--new .bp-plan-feature-txt{
  font-weight:900;
}

.bp-plan-highlights{
  margin-top:12px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(124,92,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(34,197,94,.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(124,92,255,.26);
  background:rgba(124,92,255,.14);
  color:rgba(16,24,40,.72);
  font-weight:900;
}
.bp-plan-card--business .bp-plan-highlights-dot{
  border-color:rgba(34,197,94,.30);
  background:rgba(34,197,94,.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;
}

/* 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(34,197,94,.16); border-color:rgba(34,197,94,.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(3, 1fr);
  gap:14px;
  margin-top:10px;
}
.bp-brand-card{
  background:rgba(255,255,255,.35);
  border:2px solid rgba(27,34,48,.18);
  border-radius:14px;
  padding:12px;
}
.bp-brand-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.bp-brand-name{font-weight:900}
.bp-brand-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.bp-brand-palette{display:flex;gap:8px;margin-top:12px}
.bp-brand-swatch{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid var(--bp-border-soft);
  box-shadow:none;
}

/* 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(124,92,255,.08), transparent 62%),
    radial-gradient(280px 120px at 100% 120%, rgba(34,197,94,.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(124,92,255,.22);
  margin-top:12px;
  padding:14px 14px;
  border-radius:14px;
  border:2px solid rgba(124,92,255,.28);
  background:
    radial-gradient(420px 180px at 8% 0%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(420px 180px at 100% 120%, rgba(34,197,94,.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(34,197,94,.22);
  border-color:rgba(34,197,94,.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(34,197,94,.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 (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(124,92,255,.14);
  --bp-plan-stripe-selected: rgba(124,92,255,.22);
  --bp-plan-accent-border: rgba(124,92,255,.35);
  --bp-plan-accent-shadow: rgba(124,92,255,.20);
  --bp-plan-selected-ring: rgba(124,92,255,.60);
  --bp-plan-selected-glow: rgba(124,92,255,.30);
  --bp-plan-selected-pill-a: rgb(109, 75, 255);
  --bp-plan-selected-pill-b: rgb(34, 197, 94);
  position:relative;
  display:block;
  padding:18px 16px 16px;
  border-radius:14px;
  border:1px solid var(--bp-border);
  background:rgba(255,255,255,.78);
  cursor:pointer;
  overflow:hidden;
  transition: background .12s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease, transform .12s ease;
  box-shadow:var(--bp-shadow-md);
}

/* Top badges above plan cards ("Самый популярный"/"Самый выгодный") */
.bp-plan-item{
  position:relative;
  min-width:0;
}
.bp-plan-item-badges{
  position:absolute;
  top:-12px;
  left:14px;
  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}
.bp-plan-item--featured .bp-badge--popular{
  /* Make "Самый популярный" really pop (same as featured card style). */
  background:linear-gradient(135deg, rgba(124,92,255,1), rgba(34,197,94,.95));
  border-color:rgba(124,92,255,.55);
  color:#fff;
  font-weight:900;
  box-shadow:0 12px 28px rgba(124,92,255,.18);
}
.bp-plan-item--business .bp-badge--best{
  background:linear-gradient(135deg, rgba(34,197,94,1), rgba(34,197,94,.78));
  border-color:rgba(34,197,94,.55);
  color:#fff;
  font-weight:900;
  box-shadow:0 12px 28px rgba(34,197,94,.18);
}
.bp-plan-card--pro{
  /* Matches header "Стили карточек" (purple→green), purple-dominant. */
  --bp-plan-stripe: rgba(124,92,255,.30);
  --bp-plan-stripe-selected: rgba(124,92,255,.22);
  --bp-plan-accent-border: rgba(124,92,255,.35);
  --bp-plan-accent-shadow: rgba(124,92,255,.20);
  --bp-plan-selected-ring: rgba(124,92,255,.66);
  --bp-plan-selected-glow: rgba(124,92,255,.34);
  --bp-plan-selected-pill-a: rgb(109, 75, 255);
  --bp-plan-selected-pill-b: rgb(145, 106, 255);
  border-color:rgba(124,92,255,.22);
  background:
    radial-gradient(320px 180px at 86% 0%, rgba(124,92,255,.20), transparent 66%),
    radial-gradient(260px 160px at 12% 28%, rgba(34,197,94,.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(34,197,94,.28);
  --bp-plan-stripe-selected: rgba(34,197,94,.22);
  --bp-plan-accent-border: rgba(34,197,94,.35);
  --bp-plan-accent-shadow: rgba(34,197,94,.20);
  --bp-plan-selected-ring: rgba(34,197,94,.66);
  --bp-plan-selected-glow: rgba(34,197,94,.32);
  --bp-plan-selected-pill-a: rgb(34, 197, 94);
  --bp-plan-selected-pill-b: rgb(16, 185, 129);
  border-color:rgba(34,197,94,.22);
  background:
    radial-gradient(320px 180px at 86% 0%, rgba(34,197,94,.18), transparent 66%),
    radial-gradient(260px 160px at 14% 30%, rgba(124,92,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(124,92,255,.20), transparent 66%),
    radial-gradient(260px 160px at 12% 28%, rgba(34,197,94,.10), transparent 70%),
    rgba(255,255,255,.86);
}
.bp-plan-card--business:hover{
  background:
    radial-gradient(320px 180px at 86% 0%, rgba(34,197,94,.22), transparent 66%),
    radial-gradient(260px 160px at 14% 30%, rgba(124,92,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{
  font-weight:900;
  font-size:22px;
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
}
.bp-price-old{
  font-weight:700;
  font-size:13px;
  color:rgba(27,34,48,.55);
  opacity:.92;
}
.bp-price-old s{
  text-decoration-thickness:2px;
}
.bp-price-suffix{
  font-weight:800;
  font-size:13px;
  color:rgba(27,34,48,.65);
  white-space:nowrap;
}
.bp-plan-period{margin-top:2px}
.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(-2px);
}
.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);
}
.bp-plan-card input:checked ~ .bp-plan-title-row::after{
  content:"✓ Выбран";
  position:absolute;
  top:12px;
  right:12px;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--bp-plan-selected-pill-a), var(--bp-plan-selected-pill-b));
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 10px 24px var(--bp-plan-accent-shadow);
  color:#fff;
  text-shadow:0 1px 1px rgba(16,24,40,.35);
  font-size:12px;
  font-weight:900;
  pointer-events:none;
}
.bp-plan-card--featured{
  /* Legacy helper: keep popular plan premium even without explicit plan class. */
  --bp-plan-stripe: rgba(124,92,255,.30);
  border-color:rgba(124,92,255,.22);
  background:
    radial-gradient(320px 180px at 86% 0%, rgba(124,92,255,.16), transparent 66%),
    radial-gradient(260px 160px at 12% 28%, rgba(34,197,94,.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(124,92,255,.20), transparent 66%),
    radial-gradient(260px 160px at 12% 28%, rgba(34,197,94,.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(124,92,255,.20), transparent 66%),
    radial-gradient(260px 160px at 12% 28%, rgba(34,197,94,.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;
}
.bp-plan-card--featured .bp-badge--popular{
  /* Make "Самый популярный" really pop. */
  background:linear-gradient(135deg, rgba(124,92,255,1), rgba(34,197,94,.95));
  border-color:rgba(124,92,255,.55);
  color:#fff;
  font-weight:900;
  box-shadow:0 12px 28px rgba(124,92,255,.18);
}
.bp-plan-card--business .bp-badge--best{
  background:linear-gradient(135deg, rgba(34,197,94,1), rgba(34,197,94,.78));
  border-color:rgba(34,197,94,.55);
  color:#fff;
  font-weight:900;
  box-shadow:0 12px 28px rgba(34,197,94,.18);
}

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

.bp-btn-pay{
  padding:14px 18px;
  font-size:16px;
  min-height:54px;
  width:100%;
  box-shadow:var(--bp-shadow-lg);
}
.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%, 520px);
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  align-items:stretch;
}
.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;
}

.bp-footer{
  padding:18px 0;
  margin-top:auto;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
  border-top:1px solid var(--bp-border);
}
.bp-footer-bar{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:10px 14px;
  border:1px solid var(--bp-border);
  border-radius:16px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--bp-shadow-sm);
  font-size:12px;
  max-width:980px;
  margin:0 auto;
  text-align:center;
}
.bp-footer-legal{
  font-size:11px;
  line-height:1.35;
  color:var(--bp-ink2);
}
.bp-footer-legal a{
  text-decoration:underline;
  text-underline-offset:2px;
}
@media (max-width: 560px){
  .bp-footer-bar{
    max-width:none;
    align-items:flex-start;
    text-align:left;
  }
  .bp-footer-legal{text-align:left;}
}

/* Footer should not be hidden behind the fixed mobile tabbar */
@media (max-width: 980px){
  body.bp-auth .bp-footer{
    padding-bottom:calc(18px + 96px + var(--bp-safe-bottom));
  }
  body.bp-guest .bp-footer{
    padding-bottom:calc(18px + var(--bp-safe-bottom));
  }
}

@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-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(124,92,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:calc(10px + env(safe-area-inset-top)) 0 10px;
    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-topbar-left{flex:0 1 auto; gap:8px; min-width:0}
  .bp-topbar-right{flex:1 1 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}
  .bp-logo-img{height:clamp(34px, 10vw, 48px)}

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

  /* background-attachment: fixed is janky in many mobile webviews */
  .bp-bg{background-attachment:scroll}

  /* 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:22px}
  .bp-page-sub{margin-top:8px}
  .bp-hero-title{font-size:20px}
  .bp-card-title{font-size:16px}

  .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}

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