:root{
  --cc-purple: #6452FE;
  --aa-purple: #6452FE;
  --aa-primary: #6452FE;
  --aa-primary-30: rgba(100,82,254,.06);
  --cc-green: #05C981;
  --cc-red: #F0142F;
  --cc-orange: #F99600;
  --cc-text: #131523;
  --cc-muted: #5A607F;
  --cc-soft: #7E84A3;
  --cc-border: #E6E9F4;
  --cc-border-soft: #e6e9f4;
  --cc-radius: 10px;
  --cc-shadow: 0 6px 24px rgba(38,44,71,.06);
}

/* Respect HTML hidden attribute (author CSS can otherwise override UA stylesheet). */
[hidden]{ display:none !important; }

/* Match admin grid: 250px sidebar + fluid content, 56px topbar row */
.cc-op-app{
  --sidebar-width: 250px;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 56px 1fr;
  padding-top: 0 !important;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

/* Use customer logo image instead of admin logo.svg */
.cc-logo{ background-image: url('/static/customer/img/logo.png') !important; }

/* Sidebar: match admin sticky positioning and spacing */
.cc-sidebar{
  position: fixed;
  top: 56px;
  left: 0;
  bottom: 0;
  z-index: 45;
  width: 250px;
  height: calc(100vh - 56px);
  padding: 20px 16px 18px;
  background: #fff;
  border-right: none;
  border-top: none;
  box-shadow: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cc-op-app .aa-main{
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 1;
  background: #F5F6FA;
  height: calc(100vh - 56px);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.cc-op-app .aa-main::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}
.cc-company{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 4px 8px 0;
  border-radius: 8px;
  margin-bottom: 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.cc-company-avatar{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--cc-purple);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 12px;
  overflow:hidden;
  flex: 0 0 32px;
}
.cc-company-avatar img{ width:100%; height:100%; object-fit: cover; display:block; }
.cc-company-name{
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  color: var(--aa-text, #131523);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Topbar: span both grid columns, 56px high, fixed */
.cc-actions{ gap: 12px; }
.cc-header{
  grid-column: 1 / 3;
  height: 56px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0 24px 0 0;
  background: #fff;
  border-bottom: 1px solid #f0f1f5;
  box-shadow: none;
}
.cc-op-app .aa-topbar.cc-header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 70 !important;
}
.cc-op-app::before{
  content: "";
  position: fixed;
  left: 250px;
  right: 0;
  top: 56px;
  height: 24px;
  z-index: 46;
  pointer-events: none;
  background: linear-gradient(#F5F6FA 0%, rgba(245,246,250,.96) 70%, rgba(245,246,250,0) 100%);
}
/* ─────────────────────────────────────────────────────────────────────
   Topbar redesign 2026-06-07: slimmer header, single brand <img>, no plan
   pill, all action items unified to 36px square / 36px tall.
───────────────────────────────────────────────────────────────────── */
/* Override aa-topbar--modernize defaults for cabinet (slimmer height,
   tighter padding so all items breathe but the bar stays compact). */
.cc-op-app .aa-topbar.aa-topbar--modernize{
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 20px 0 16px !important;
  gap: 16px !important;
}
/* Brand image — replaces the inline SVG mark + wordmark */
.cc-op-app .aa-brand.cc-brand{
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0;
  text-decoration: none;
}
.cc-op-app .aa-brand.cc-brand .cc-brand-img{
  height: 30px;
  width: auto;
  display: block;
  object-fit: contain;
}
/* Force-hide any remnants of the old aa-brand__mark / aa-brand__name */
.cc-op-app .aa-brand.cc-brand .aa-brand__mark,
.cc-op-app .aa-brand.cc-brand .aa-brand__name,
.cc-op-app .aa-brand.cc-brand .aa-brand__suffix{ display: none !important; }
/* Search field aligned to 36px */
.cc-op-app .aa-search.aa-search--modernize{
  height: 36px !important;
  border-radius: 10px !important;
}
/* Actions row — all items 36px tall, equal vertical alignment */
.cc-op-app .cc-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
}

.cc-wallet{
  display:flex;
  align-items:center;
  gap: 6px;
  color: var(--cc-text);
  font-weight: 700;
  font-size: 13px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--aa-border, #E6E9F4);
  background: #fff;
  padding: 0 10px 0 12px;
  cursor: pointer;
  user-select: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
}
.cc-wallet:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(100,82,254,.08);
  border-color: var(--cc-purple);
}
.cc-wallet:hover{
  border-color: rgba(100,82,254,.2);
  box-shadow: 0 2px 8px rgba(100,82,254,.08);
}
.cc-wallet-amount{
  height: 100%;
  display:inline-flex;
  align-items:center;
  padding: 0;
  border: 0;
  background: transparent;
  white-space: nowrap;
}
.cc-wallet-ico{
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  color: var(--cc-text);
  border: 0;
}
.cc-wallet-ico svg{
  width: 20px;
  height: 20px;
}
/* Bell — same shape/size as wallet (rounded rect, 36px) instead of pill */
.cc-bell{
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: #fff !important;
  border: 1px solid var(--aa-border, #E6E9F4) !important;
  color: var(--cc-text);
  cursor:pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
  position: relative;
  box-sizing: border-box;
}
.cc-bell svg{ width: 20px; height: 20px; }
.cc-bell:hover{
  border-color: rgba(100,82,254,.30);
  color: #6452FE;
  background: #fff;
  transform: none;
}
.cc-bell-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #EF4444;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(239,68,68,.35);
}
.cc-notifs{
  display: grid;
  gap: 14px;
}
.cc-notifs-titlebar{
  align-items: flex-start;
}
.cc-notifs-refresh{
  width: 38px;
  height: 38px;
  border: 1px solid #E7E9F2;
  border-radius: 10px;
  background: #fff;
  color: var(--aa-primary, #6452FE);
}
.cc-notifs-refresh:hover{
  background: rgba(100,82,254,.08);
  border-color: rgba(100,82,254,.35);
}
.cc-notifs-summary{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.cc-notifs-stat{
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 38px;
  grid-template-areas: "label icon" "value icon";
  align-items: center;
  gap: 4px 10px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #EBEEF6;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.cc-notifs-stat__icon{
  grid-area: icon;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6452FE;
  background: rgba(100,82,254,.12);
}
.cc-notifs-stat--unread .cc-notifs-stat__icon{ color:#1E5EFF; background:rgba(30,94,255,.12); }
.cc-notifs-stat--last .cc-notifs-stat__icon{ color:#F59E0B; background:rgba(245,158,11,.14); }
.cc-notifs-stat__icon svg{ width: 18px; height: 18px; }
.cc-notifs-stat__label{
  grid-area: label;
  color: #7E84A3;
  font-size: 11px;
  font-weight: 800;
}
.cc-notifs-stat strong{
  grid-area: value;
  color: #131523;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-notifs-list{
  display: grid;
  gap: 10px;
}
.cc-notif-card{
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 12px;
  background: #fff;
  border: 1px solid #EBEEF6;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
  transition: border-color .15s, box-shadow .15s;
}
.cc-notif-card:hover{
  border-color: rgba(100,82,254,.22);
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}
.cc-notif-card.is-unread{
  border-color: rgba(100,82,254,.38);
}
.cc-notif-card.is-unread::after{
  content:"";
  position:absolute;
  top: 16px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6452FE;
}
.cc-notif-card__icon{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6452FE;
  background: rgba(100,82,254,.12);
}
.cc-notif-card--green .cc-notif-card__icon{ color:#18A873; background:rgba(24,202,142,.14); }
.cc-notif-card--blue .cc-notif-card__icon{ color:#1E5EFF; background:rgba(30,94,255,.12); }
.cc-notif-card--orange .cc-notif-card__icon{ color:#C97700; background:rgba(245,158,11,.16); }
.cc-notif-card__icon svg{ width:18px; height:18px; }
.cc-notif-card__content{ min-width: 0; }
.cc-notif-card__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-right: 14px;
  margin-bottom: 5px;
}
.cc-notif-card__title{
  color: #131523;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}
.cc-notif-card__time{
  color: #7E84A3;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.cc-notif-card__body{
  color: #5A607F;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.cc-notif-card__meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.cc-notif-card__kind,
.cc-notif-card__job,
.cc-notif-card__new{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #F8FAFF;
  border: 1px solid #E6E9F4;
  color: #5A607F;
  font-size: 11px;
  font-weight: 800;
}
.cc-notif-card__new{
  color:#6452FE;
  background: rgba(100,82,254,.10);
  border-color: transparent;
}
.cc-notifs-empty{
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: #7E84A3;
  background: #fff;
  border: 1px solid #EBEEF6;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
  padding: 24px;
  font-size: 13px;
  font-weight: 700;
}
.cc-notifs-empty__icon{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6452FE;
  background: rgba(100,82,254,.10);
}
.cc-notifs-empty__icon svg{ width: 26px; height: 26px; }
.cc-notifs-empty strong{
  color:#131523;
  font-size: 16px;
  font-weight: 900;
}
.cc-notifs-empty span{
  max-width: 360px;
  line-height: 1.5;
}
@media (max-width: 640px){
  .cc-notifs-summary{
    grid-template-columns: 1fr;
  }
  .cc-notif-card{
    grid-template-columns: 38px minmax(0,1fr);
    padding: 14px;
  }
  .cc-notif-card__icon{
    width: 38px;
    height: 38px;
  }
  .cc-notif-card__top{
    flex-direction: column;
    gap: 4px;
  }
}
.cc-plan{
  display:flex;
  align-items:center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--aa-border, #E6E9F4);
  background: #fff;
  font-size: 12px;
  width: 270px;
  max-width: 270px;
  box-sizing: border-box;
  overflow: hidden;
}
.cc-plan-name{ font-weight: 800; color: var(--cc-text); }
.cc-plan-sub{ color: var(--cc-muted); font-weight: 600; }
.cc-plan-freemium{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}

/* Header-compact current plan widget (inside .cc-plan pill) */
.cc-plan .cc-current-plan--header{
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
  grid-template-columns: 28px minmax(0, 1fr) 1fr max-content;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 1px;
  align-items:center;
}
.cc-plan .cc-current-plan--header .cc-current-plan-ico{
  width: 28px;
  height: 28px;
  border-radius: 10px;
}
.cc-plan .cc-current-plan--header .cc-current-plan-name{
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-plan .cc-current-plan--header .cc-current-plan-price{
  font-size: 11px;
  margin-top: 0;
  white-space: nowrap;
}
.cc-plan .cc-current-plan--header .cc-current-plan-bar{
  min-width: 70px;
  height: 6px;
}
.cc-plan .cc-current-plan--header .cc-current-plan-count{
  font-size: 12px;
  min-width: 52px;
  text-align: right;
}

.cc-user{
  display:flex;
  align-items:center;
  gap: 8px;
  height: 36px;
  min-height: 36px;
  padding: 0 8px 0 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #fff;
  cursor: pointer;
  position: relative;
  box-shadow: none;
  box-sizing: border-box;
  transition: border-color .15s ease;
}
.cc-user:hover{ background: #fff; box-shadow: none; border-color: rgba(100,82,254,.18); }
.cc-user-avatar{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--cc-purple, #6452FE);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 12px;
  overflow: hidden;
  flex: 0 0 auto;
}
.cc-user-avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.cc-user-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center; /* keep name/email centered within fixed header height */
}
.cc-user-name{ font-weight: 800; font-size: 13px; line-height: 1.1; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; }
.cc-user-email{ font-size: 12px; color: var(--cc-muted); white-space:nowrap; overflow:hidden; text-overflow: ellipsis; }
.cc-user-chevron{
  margin-left: auto;
  width: 14px;
  height: 14px;
  opacity: .7;
  /* Use real served asset path (avoid 404 /templates/register/...) */
  background: url('/register/img/chevron_down_figma.svg') no-repeat center / 14px 14px;
  transform: rotate(0deg);
  transition: transform .2s ease;
}
.cc-user.is-open .cc-user-chevron{ transform: rotate(180deg); }
.cc-user-menu{
  position:absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(38, 44, 71, .16);
  padding: 8px;
  display:none;
  z-index: 60;
  animation: aaPopIn .22s cubic-bezier(.22, .61, .36, 1) both;
}
.cc-user.is-open .cc-user-menu{ display:block; }
#aaProfile:has(.cc-user.is-open) .cc-user-menu{
  display: block;
}
.cc-user-menu-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--cc-text);
  font-weight: 700;
  font-size: 13px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.cc-user-menu-item:hover{ background: rgba(100,82,254,.04); color: #6452FE; }
.cc-user-menu-ico{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: #6b7280;
  flex: 0 0 18px;
}
.cc-user-menu-item:hover .cc-user-menu-ico{ color: #6452FE; }

/* Customer sidebar uses inline SVGs (admin hides them for mask-image icons) */
.cc-op-app .aa-nav__ico svg{ display: block !important; }
.cc-op-app .aa-nav__ico::before{ display: none; }
.cc-op-app .aa-logout__ico svg{ display: block !important; }
.cc-op-app .aa-logout__ico::before{ display: none; }
.cc-op-app .aa-search__ico svg{ display: block !important; }
.cc-op-app .aa-search__ico::before{ display: none; }
.cc-op-app .aa-profile__chevron svg{ display: block !important; }
.cc-op-app .aa-profile__chevron{ background: none; }

/* Sidebar nav: compact admin sizing */
.cc-sidebar .cc-nav{
  cursor: pointer;
}
.cc-op-app.aa-app .aa-nav{
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 10px;
}
.cc-op-app.aa-app .aa-nav__ico{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.cc-op-app.aa-app .aa-nav__ico svg{
  width: 20px;
  height: 20px;
}
.cc-op-app.aa-app .aa-nav__label{
  font-size: 13px;
  font-weight: 600;
}
.cc-op-app.aa-app .aa-nav:hover{
  background: rgba(100,82,254,.06);
  color: #6452FE;
}
.cc-op-app.aa-app .aa-nav--active{
  background: #6452FE !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(100,82,254,.25);
}
.cc-op-app.aa-app .aa-nav--active .aa-nav__ico{ color: #fff; }
.cc-op-app.aa-app .aa-nav--active .aa-nav__label{ color: #fff; }
.cc-op-app.aa-app .aa-logout{
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
}
.cc-op-app.aa-app .aa-logout__ico{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.cc-op-app.aa-app .aa-logout__ico svg{
  width: 20px;
  height: 20px;
}
/* cc-nav-ico removed: customer sidebar now uses aa-nav__ico like admin */
.cc-nav-ico{ display: none; }
.cc-nav-text{ display:block; }

/* Active nav styles remain from operator, but ensure spacing matches */
.cc-sidebar .op-nav{ margin-top: 2px; }

/* Cabinet background: match admin --aa-bg */
.cc-op-app{ background: #F5F6FA; }
.cc-op-app .op-content,
.cc-op-app .cc-content{
  background: #F5F6FA;
  padding: 20px 20px 24px;
  position: relative;
}

/* Typography: match operator “jobs” feel (smaller + less bold) */
.cc-op-app .op-input,
.cc-op-app .bb-input{
  height: 40px;
  border: 1px solid var(--aa-border, #E6E9F4);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--aa-text, #131523);
  background: #fff;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cc-op-app .op-input:focus,
.cc-op-app .bb-input:focus{
  border-color: var(--cc-purple);
  box-shadow: 0 0 0 3px rgba(100,82,254,.08);
  outline: none;
}
.cc-op-app .op-input::placeholder,
.cc-op-app .bb-input::placeholder{
  color: #A1A7C4;
  font-weight: 500;
}
.cc-op-app .bb-dd__text{ font-size: 13px; font-weight: 600; color: var(--aa-text, #131523); }

/* Dropdown: Modernize style */
.cc-op-app .bb-dd__header{
  height: 40px;
  border: 1px solid var(--aa-border, #E6E9F4);
  border-radius: 10px;
  background: #fff;
  padding: 0 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cc-op-app .bb-dd__header:hover,
.cc-op-app .bb-dd.is-open .bb-dd__header{
  border-color: var(--cc-purple);
  box-shadow: 0 0 0 3px rgba(100,82,254,.08);
}
.cc-op-app .bb-dd__menu{
  border: 1px solid var(--aa-border, #E6E9F4);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(38,44,71,.12);
  padding: 6px;
  background: #fff;
}
.cc-op-app .bb-dd__item{
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.cc-op-app .bb-dd__item:hover{
  background: #F5F6FA;
}
.cc-op-app .bb-dd__item.selected,
.cc-op-app .bb-dd__item.is-selected{
  background: rgba(100,82,254,.06);
  color: #6452FE;
}

/* Buttons: Modernize style */
.cc-op-app .op-btn{
  border-radius: 8px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  transition: all .18s ease;
}
.cc-op-app .op-btn:hover{
  transform: none;
  box-shadow: none;
}
.cc-op-app #create-job{
  background: #6452FE;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0 16px;
  height: 36px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
  transition: background .15s;
}
.cc-op-app #create-job:hover{
  background: #5341E5;
  transform: none;
  box-shadow: none;
}

/* Filter button: ghost style */
.cc-op-app .op-filter-btn{
  background: #fff;
  border: 1px solid var(--aa-border, #E6E9F4);
  color: var(--aa-muted, #5A607F);
  border-radius: 8px;
  height: 36px;
  padding: 0 14px;
}
.cc-op-app .op-filter-btn:hover{
  background: #F8FAFF;
  border-color: rgba(100,82,254,.2);
  color: var(--cc-purple);
  box-shadow: none;
  transform: none;
}

/* Jobs header: place "+ Создать заявку" in the same row */
.cc-jobs-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cc-jobs-head .op-jobs-tabs{
  margin-bottom: 0;
  border-bottom: 0;
  flex: 1 1 auto;
  position: relative;
}
.cc-jobs-actions{
  display:flex;
  justify-content:flex-end;
  margin-top: 0;
}

/* When a page title is present, keep jobs head snug */
.cc-prof-title + .cc-jobs-head{ margin-top: 0; }

/* ------------------------------------------------------------------
   Job tabs: compact admin-style pill tabs (match operator overrides)
------------------------------------------------------------------- */
.cc-op-app .op-jobs-tabs{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding-bottom: 0;
  border-bottom: none;
}
.cc-op-app .op-jobs-tab{
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--aa-border, #E6E9F4);
  border-radius: 8px;
  background: #fff;
  color: var(--aa-muted, #5A607F);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 0;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.cc-op-app .op-jobs-tab:hover{
  color: #6452FE;
  background: rgba(100,82,254,.06);
  border-color: rgba(100,82,254,.2);
}
.cc-op-app .op-jobs-tab.active{
  color: #fff;
  background: #6452FE;
  border-color: #6452FE;
  box-shadow: none;
}

/* Remove old sliding indicator */
.cc-jobs-ind{ display: none; }

/* ===== Profile page (customer) ===== */
.cc-prof-title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  line-height: 1.1;
  color: var(--aa-text, #131523);
}

/* ------------------------------------------------------------------
   Table & Pagination: admin density in customer cabinet
------------------------------------------------------------------- */
.cc-op-app .aa-panel--jobs-shell{
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--aa-border, #E6E9F4);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}
.cc-op-app .aa-panel--jobs-shell .op-table{
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.cc-op-app .op-table{
  margin-top: 0;
  border: 1px solid var(--aa-border, #E6E9F4);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.cc-op-app .op-table .row{
  padding: 0 16px;
  min-height: 48px;
  border-top: 1px solid #F0F1F5;
}
.cc-op-app .op-table .row:first-child{
  border-top: 0;
}
.cc-op-app .op-table .row:hover{
  background: #F8FAFF;
}
.cc-op-app .op-table .row.head{
  min-height: 40px;
  background: #F8FAFC;
  border-top: 0;
}
.cc-op-app .op-table .row.head:hover{
  background: #F8FAFC;
}
.cc-op-app .op-table .row.head > div{
  font-size: 11px;
  font-weight: 700;
  color: var(--aa-muted, #5A607F);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cc-op-app .op-table .row > div{
  font-size: 13px;
  font-weight: 500;
  color: var(--aa-text, #131523);
}
.cc-op-app .op-table .job-number-cell{
  color: #6452FE !important;
  font-weight: 700 !important;
}

.cc-op-app .op-pagination{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 0;
}
.cc-op-app .op-pagination .op-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--aa-border, #E6E9F4);
  border-radius: 8px;
  background: #fff;
  color: var(--aa-muted, #5A607F);
  font-size: 12px;
  font-weight: 700;
}
.cc-op-app .op-pagination .op-btn:hover{
  background: rgba(100,82,254,.06);
  color: #6452FE;
  border-color: rgba(100,82,254,.2);
  transform: none;
  box-shadow: none;
}
.cc-op-app .op-pagination span{
  font-size: 12px;
  font-weight: 700;
  color: var(--aa-muted, #5A607F);
}

.cc-section-shell{
  display: grid;
  gap: 16px;
}

.aa-panel--section-shell{
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--aa-border, #E6E9F4);
  background: #fff;
  box-shadow: var(--aa-shadow, 0 6px 24px rgba(38,44,71,.06));
}

.aa-panel--subsection-shell{
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--aa-border, #E6E9F4);
  background: #fff;
  box-shadow: none;
}

.aa-panel--subsection-shell .op-table{
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cc-section-shell--profile{
  gap: 16px;
}

/* ===== Finance (packages / ops / topup) ===== */
.cc-fin{
  display:flex;
  flex-direction: column;
  gap: 14px;
  font-family: 'GilroyLanding', 'Gilroy', sans-serif; /* match landing packages typography 1:1 */
}
/* Make sure finance UI controls don't fall back to operator fonts */
.cc-fin button,
.cc-fin input,
.cc-fin textarea{
  font-family: inherit;
}
.cc-fin-balance{
  width: 360px;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background:#fff;
  display:flex;
  align-items:center;
  padding: 16px 18px; /* match current plan card height */
  gap: 8px;
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
  min-height: 82px; /* visually match current plan block */
}
.cc-fin-balance--inline{
  width: auto;      /* don't stretch */
  flex: 0 0 auto;
}
.cc-fin-balance-label{ color: rgba(15,23,42,.55); font-weight: 700; font-size: 13px; }
.cc-fin-balance-value{ font-weight: 800; color: rgba(15,23,42,.92); }

.cc-fin-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.cc-fin-tabs{
  display: flex;
  gap: 6px;
  position: relative;
}
.cc-fin-tab{
  min-height: 32px;
  background: transparent;
  border: 1px solid var(--aa-border, #E6E9F4);
  border-radius: 8px;
  padding: 0 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--aa-muted, #5A607F);
  transition: background .15s, border-color .15s, color .15s;
}
.cc-fin-tab:hover{
  color: #6452FE;
  background: rgba(100,82,254,.06);
  border-color: rgba(100,82,254,.2);
}
.cc-fin-tab.active{
  color: #fff;
  background: #6452FE;
  border-color: #6452FE;
}
.cc-fin-ind{ display: none; }
.cc-fin-topup-btn{
  white-space: nowrap;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  background: #6452FE;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.cc-fin-topup-btn:hover{ background: #5341E5; }
.cc-fin-section{ display:none; }
.cc-fin-section.active{ display:block; }
@media (prefers-reduced-motion: no-preference){
  .cc-fin-section.active{
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
  }
  .cc-fin-section.active.is-entering{ opacity: 0; transform: translateY(10px); }
  .cc-fin-section.active.is-leaving{ opacity: 0; transform: translateY(-6px); }
}

/* Current plan widget */
.cc-fin-packages-head{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* align with package cards */
  gap: 22px;
  align-items: start;
  margin-top: 6px;
}
.cc-current-plan{
  grid-column: 1 / 2;     /* same right edge as "Лайт" card */
  justify-self: stretch;
  width: 100%;            /* match "Лайт" card width 1:1 */
  box-sizing: border-box; /* include border in the 100% width */
  display:grid;
  /* icon | meta (name+price) | progress bar | count */
  grid-template-columns: 40px max-content 1fr max-content;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items:center;
  background:#fff;
  border: 1px solid var(--aa-border);
  border-radius: 14px;
  padding: 12px 14px; /* more compact like in mock */
  box-shadow: var(--aa-shadow);
  max-width: 100%;
}
.cc-current-plan-ico{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(100,82,254,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--cc-purple);
  grid-column: 1;
  grid-row: 1 / 3;
}
.cc-current-plan-ico svg{ display:block; }
.cc-current-plan-meta{
  min-width: 0;
  grid-column: 2;
  grid-row: 1 / 3;
}
.cc-current-plan-name{ font-weight: 900; font-size: 16px; line-height: 1.1; }
.cc-current-plan-price{ font-weight: 800; font-size: 13px; color: rgba(15,23,42,.65); margin-top: 1px; }
.cc-current-plan-bar{
  width: 100%;            /* extend left into free space (closer to meta) */
  min-width: 120px;       /* keep it readable on narrow widths */
  height: 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  overflow:hidden;
  grid-column: 3;
  grid-row: 2;            /* align with price line */
  justify-self: stretch;
}
.cc-current-plan-barfill{
  display:block;
  height: 100%;
  background: var(--cc-purple);
  border-radius: 999px;
}
.cc-current-plan-count{
  font-weight: 800;
  color: rgba(15,23,42,.55);
  min-width: 60px;
  text-align:right;
  grid-column: 4;
  grid-row: 2;            /* align with price line */
  justify-self: end;
}

@media (max-width: 980px){
  .cc-fin-packages-head{ grid-template-columns: 1fr; gap: 12px; }
  .cc-current-plan{ grid-column: auto; width: 100%; }
  .cc-current-plan-bar{ max-width: 100%; min-width: 140px; }
}

/* Bring landing plan card design 1:1 inside cabinet (scoped) */
.cc-fin .lz-packages-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 18px;
}
.cc-fin .lz-plan{
  position: relative;
  background:#fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 18px;
  padding: 26px 22px 22px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 16px 36px rgba(15, 23, 42, 0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cc-fin .lz-plan--pro{
  border: 2px solid rgba(100, 83, 248, 0.55);
  box-shadow:
    0 2px 10px rgba(15, 23, 42, 0.08),
    0 26px 56px rgba(100, 83, 248, 0.12);
}
.cc-fin .lz-plan-popular{
  position: absolute;
  top: -14px;
  left: 18px;
  background: var(--bb-green);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  padding: 9px 12px;
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(24,202,142,.22);
  z-index: 4;
  pointer-events: none;
}
.cc-fin .lz-plan:hover{
  transform: translateY(-2px);
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow:
    0 2px 10px rgba(15, 23, 42, 0.08),
    0 22px 46px rgba(15, 23, 42, 0.08);
}
.cc-fin .lz-plan--pro:hover{
  border-color: rgba(100, 83, 248, 0.75);
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.10),
    0 30px 64px rgba(100, 83, 248, 0.16);
}
.cc-fin .lz-plan-name{
  font-size: 40px;
  line-height: 1.05;
  margin: 0 0 10px;
  font-weight: 900;
}
.cc-fin .lz-plan-price{
  display:flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.cc-fin .lz-plan-price-now{
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0b1220;
}
.cc-fin .lz-plan-price-now--purple{ color: var(--bb-purple); }
.cc-fin .lz-plan-price-now--green{ color: var(--bb-green); }
.cc-fin .lz-plan-price-old{
  font-size: 18px;
  color: rgba(100, 83, 248, 0.65);
  text-decoration: line-through;
}
.cc-fin .lz-plan-price-old--purple{ color: rgba(100, 83, 248, 0.65); }
.cc-fin .lz-plan-subtitle{
  margin: 0 0 14px;
  font-size: 18px;
  color: var(--bb-text);
}
.cc-fin .lz-plan-features{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.cc-fin .lz-plan-features li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  margin: 10px 0;
  color: var(--bb-text);
  font-size: 18px;
}
.cc-fin .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-top: 9px;
  flex: 0 0 auto;
}
.cc-fin .dot-green{ background: var(--bb-green); }
.cc-fin .dot-purple{ background: var(--bb-purple); }

.cc-fin .lz-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  user-select:none;
  cursor: pointer;
  will-change: transform;
  border: none;
}
.cc-fin .lz-btn:active{ transform: translateY(1px); }
.cc-fin .lz-btn:hover{ transform: translateY(-2px); }
.cc-fin .lz-btn-primary{
  background: var(--bb-green);
  color: #fff;
  box-shadow: 0 12px 24px rgba(24,202,142,.22);
}
.cc-fin .lz-btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(24,202,142,.26);
}
.cc-fin .lz-btn-purple{
  background: var(--bb-purple);
  color: #fff;
  box-shadow: 0 12px 24px rgba(100,82,254,.22);
}
.cc-fin .lz-btn-purple:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(100,82,254,.26);
}
.cc-fin .lz-plan-cta{
  width: 100%;
  justify-content:center;
  border-radius: 14px;
  padding: 12px 16px;
}
.cc-fin .lz-plan-badge{
  position:absolute;
  right: 14px;
  bottom: 18px;
  transform: rotate(18deg);
  background: #ff3b30;
  color: #fff;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(255,59,48,.22);
  z-index: 3;
  pointer-events: none;
}

@media (max-width: 980px){
  .cc-fin .lz-packages-grid{ grid-template-columns: 1fr; }
}

/* Operations table: keep consistent spacing */
.cc-fin-ops-table .row .cell{ padding: 14px; }
.cc-fin-ops-table .row{
  /* override operator table 9-col grid for finance ops */
  grid-template-columns:
    minmax(110px, .7fr)
    minmax(180px, 1.2fr)
    minmax(170px, 1fr)
    minmax(170px, 1fr)
    minmax(220px, 1.2fr);
}
.cc-fin-ops-table .row.head{ font-weight: 900; }
.cc-fin-ops-table{
  width: 100%;
  font-variant-numeric: tabular-nums; /* prevents “staircase” effect */
}
.cc-fin-ops-table .row > div{ min-width: 0; }
.cc-fin-ops-table .row > div:nth-child(1),
.cc-fin-ops-table .row > div:nth-child(3),
.cc-fin-ops-table .row > div:nth-child(5){
  white-space: nowrap;
}
.cc-fin-ops-table .row > div:nth-child(5){ text-align: left; }

/* status pill inside ops */
.cc-op-status{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.cc-op-status--success{ background: rgba(24,202,142,.14); color: #0f766e; }
.cc-op-status--pending,
.cc-op-status--created{ background: rgba(100,82,254,.12); color: var(--cc-purple); }
.cc-op-status--failed,
.cc-op-status--cancelled{ background: rgba(239,68,68,.12); color: #ef4444; }

@media (max-width: 980px){
  .cc-fin-ops-table .row{ grid-template-columns: 1fr 1fr; }
  .cc-fin-ops-table .row.head{ display:none; }
  .cc-fin-ops-table .row > div:nth-child(1){ grid-column: 1; }
  .cc-fin-ops-table .row > div:nth-child(2){ grid-column: 2; text-align:right; }
  .cc-fin-ops-table .row > div:nth-child(3){ grid-column: 1; }
  .cc-fin-ops-table .row > div:nth-child(4){ grid-column: 2; text-align:right; }
  .cc-fin-ops-table .row > div:nth-child(5){ grid-column: 1 / -1; text-align:left; color: rgba(15,23,42,.55); font-weight: 800; }
}

/* Expandable operation details */
.cc-op-row-expandable{ position: relative; }
.cc-op-expand-icon{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--cc-muted);
  transition: transform 0.2s ease;
}
.cc-op-details{
  grid-column: 1 / -1;
  padding: 12px 14px;
  background: rgba(15,23,42,.02);
  border-top: 1px solid rgba(15,23,42,.06);
  margin-top: -1px;
  font-size: 13px;
}
.cc-op-details-method{
  margin-bottom: 8px;
  color: var(--cc-muted);
  font-weight: 600;
}
.cc-op-details-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cc-op-detail-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  color: var(--cc-text);
}
.cc-op-details-total{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(15,23,42,.08);
  font-weight: 700;
  color: var(--cc-text);
}

.cc-op-admin-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 16px;
}

.cc-op-admin-item{
  display:grid;
  gap:2px;
  padding:4px 0;
}

.cc-op-admin-item span{
  color:rgba(15,23,42,.52);
  font-size:12px;
  font-weight:700;
}

.cc-op-admin-item strong{
  color:var(--cc-text);
  font-size:13px;
  font-weight:800;
  line-height:1.4;
  word-break:break-word;
}

.cc-op-sum--positive{
  color:#10b981;
}

.cc-op-sum--negative{
  color:#ef4444;
}

/* Topup */
.cc-topup-plans{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 6px;
}
.cc-mini-plan{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background:#fff;
  padding: 16px 16px 14px;
  text-align:left;
  cursor:pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  display:flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.cc-mini-plan--pro{
  border: 2px solid rgba(24,202,142,.55); /* green frame for "Про" like in mock */
  box-shadow: 0 18px 44px rgba(24,202,142,.12);
}
.cc-mini-plan--pro:hover{
  border-color: rgba(24,202,142,.75);
  box-shadow: 0 22px 52px rgba(24,202,142,.16);
}
.cc-mini-plan--pro.is-selected{
  /* keep "Про" green even when selected */
  border-color: rgba(24,202,142,.85);
  box-shadow: 0 24px 56px rgba(24,202,142,.18);
}
.cc-mini-plan-popular{
  position: absolute;
  top: -14px;
  left: 14px;
  background: var(--bb-green, #18CA8E);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(24,202,142,.22);
  z-index: 2;
  pointer-events: none;
}
.cc-mini-plan-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cc-mini-plan:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(15,23,42,.08);
  border-color: rgba(15,23,42,.16);
}
.cc-mini-plan.is-selected{
  border-color: rgba(100,82,254,.65);
  box-shadow: 0 22px 50px rgba(100,82,254,.12);
}
.cc-mini-plan-name{
  font-weight: 900;
  font-size: 22px;
  line-height: 1.05;
  color: rgba(15,23,42,.92);
}
.cc-mini-plan-price{
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  color: rgba(15,23,42,.92);
  white-space: nowrap;
  margin-left: auto;
}
.cc-mini-plan-sub{ margin-top: 8px; color: rgba(15,23,42,.62); font-weight: 600; font-size: 13px; line-height: 1.35; }
.cc-mini-plan-credit{
  margin-top: 2px;
  color: var(--cc-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.cc-mini-plan-bonus{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(100,82,254,.10);
  color: var(--cc-purple);
  font-size: 12px;
  font-weight: 900;
}
.cc-mini-plan-cta{
  margin-top: 12px;
  background: var(--bb-purple);
  color:#fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  text-align:center;
}
.cc-mini-plan-cta.is-purple{ background: var(--bb-green); }

.cc-topup-form{
  margin-top: 16px;
  background:#fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 18px;
}
.cc-topup-title{ font-weight: 900; font-size: 18px; margin-bottom: 10px; }
.cc-topup-input{
  width: 100%;
  height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  padding: 0 14px;
  font-size: 16px;
  font-weight: 700;
  outline: none;
  box-sizing: border-box; /* prevent overflow outside the form card */
}
.cc-topup-input:hover{ border-color: rgba(100,82,254,.35); }
.cc-topup-input:focus{
  border-color: var(--cc-purple);
  box-shadow: none; /* product: plain purple border, no glow */
}
.cc-topup-total{
  margin-top: 14px;
  background: #EEF6FF;
  border-radius: 12px;
  padding: 16px 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  font-weight: 900;
}
.cc-topup-total-val{ font-weight: 900; font-size: 22px; }
.cc-topup-bonus{
  margin-top: 10px;
  display:inline-flex;
  align-items:center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(24,202,142,.12);
  color: #0f766e;
  font-size: 13px;
  font-weight: 800;
}
.cc-topup-pay{
  margin-top: 16px;
  float: right;
  min-width: 160px;
}
.cc-topup-hint{ margin: 12px 0 0; color: rgba(15,23,42,.55); font-weight: 700; font-size: 13px; clear: both; }
.cc-op-sum-note{
  display:block;
  margin-top: 3px;
  color: var(--cc-muted);
  font-size: 11px;
  font-weight: 700;
}

/* Modernized customer finance shell: applied after legacy package styles. */
.cc-fin{
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.cc-fin-overview{
  display:grid;
  grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr);
  gap: 16px;
  margin-bottom: 18px;
}
.cc-fin-overview .aa-card{
  min-height: 148px;
  border-radius: 16px;
}
.cc-fin-balance-card .aa-card__icon::before{
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  background: currentColor;
  -webkit-mask: url('/static/admin/modernize-icons/statistics.svg') center / contain no-repeat;
  mask: url('/static/admin/modernize-icons/statistics.svg') center / contain no-repeat;
}
.cc-fin-balance-card .aa-card__value{
  color: var(--cc-purple);
}
.cc-fin-rules-card{
  background:
    radial-gradient(circle at top right, rgba(100,82,254,.12), transparent 34%),
    #fff;
}
.cc-fin-rules{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.cc-fin-rules span{
  display:inline-flex;
  align-items:center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: #F8FAFF;
  border: 1px solid var(--aa-border, #E6E9F4);
  color: var(--cc-text);
  font-size: 13px;
  font-weight: 800;
}
.cc-fin-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin: 4px 0 12px;
}
.cc-fin-section-head h2{
  margin:0;
  color: var(--cc-text);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
}
.cc-fin-section-head p{
  margin: 6px 0 0;
  color: var(--cc-muted);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}
.cc-topup-plans{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.cc-mini-plan{
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.cc-mini-plan--pro{
  border-color: rgba(100,82,254,.55);
  box-shadow: 0 10px 26px rgba(100,82,254,.10);
}
.cc-mini-plan--pro:hover,
.cc-mini-plan--pro.is-selected{
  border-color: rgba(100,82,254,.75);
  box-shadow: 0 16px 34px rgba(100,82,254,.14);
}
.cc-mini-plan-popular{
  background: var(--cc-purple);
  box-shadow: 0 12px 24px rgba(100,82,254,.22);
}
.cc-mini-plan-cta.is-purple{
  background: var(--cc-purple);
}
.cc-topup-form{
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.cc-topup-total{
  background: #F8FAFF;
  border: 1px solid var(--aa-border, #E6E9F4);
}

@media (max-width: 1100px){
  .cc-fin-overview,
  .cc-topup-plans{
    grid-template-columns: 1fr;
  }
}

/* ===== Customer finance Modernize rebuild (compact admin density) ===== */
.cc-op-app .cc-fin-title{
  margin: 0;
  color: var(--aa-text, #131523);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cc-op-app .cc-fin{
  gap: 14px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

.cc-op-app .cc-fin-panel{
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #EBEEF6;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}

.cc-op-app .cc-fin-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 18px 0;
  border-bottom: 0;
}

.cc-op-app .cc-fin-tabs{
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cc-op-app .cc-fin-tabs::-webkit-scrollbar{ display: none; }

.cc-op-app .cc-fin-tab{
  position: relative;
  min-height: auto;
  padding: 14px 2px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #7E84A3;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  box-shadow: none;
  white-space: nowrap;
}

.cc-op-app .cc-fin-tab:hover{
  color: var(--aa-primary, #6452FE);
  background: none;
}

.cc-op-app .cc-fin-tab.is-active{
  color: var(--aa-primary, #6452FE);
  background: none;
  border: 0;
  box-shadow: none;
}

.cc-op-app .cc-fin-ind{
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--cc-fin-ind-w, 0px);
  height: 2px;
  transform: translateX(var(--cc-fin-ind-x, 0px));
  border-radius: 999px;
  background: var(--aa-primary, #6452FE);
  transition: transform .22s ease, width .22s ease;
}

.cc-op-app .cc-fin-toolbar__actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}

.cc-op-app .cc-fin-topup-btn{
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  background: #fff;
  color: var(--aa-primary, #6452FE);
  border: 1px solid #E7E9F2;
  box-shadow: none;
}

.cc-op-app .cc-fin-topup-btn:hover{
  background: rgba(100,82,254,.08);
  border-color: var(--aa-primary, #6452FE);
}

.cc-op-app .cc-fin-refresh-btn{
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E7E9F2;
  border-radius: 10px;
  background: #fff;
  color: var(--aa-primary, #6452FE);
}

.cc-op-app .cc-fin-refresh-btn:hover{
  background: rgba(100,82,254,.08);
  border-color: var(--aa-primary, #6452FE);
}

.cc-op-app .cc-fin-summary.aa-cards--modernize{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 16px;
  padding: 0;
  background: #fff;
  border: 1px solid #EBEEF6;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
  overflow: hidden;
}

.cc-op-app .cc-fin-summary .aa-mcard{
  min-height: 88px;
  padding: 16px 18px;
  border-right: 1px solid #EBEEF6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.cc-op-app .cc-fin-summary .aa-mcard:last-child{
  border-right: 0;
}

.cc-op-app .cc-fin-summary .aa-mcard__value{
  color: #2A3547;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.cc-op-app .cc-fin-summary .aa-mcard__label{
  margin-top: 6px;
  color: #7E84A3;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
}

.cc-op-app .cc-fin-summary .aa-mcard__icon{
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--aa-primary, #6452FE);
  background: rgba(100,82,254,.10);
}

.cc-op-app .cc-topup-heading{
  padding: 16px 18px 10px;
}

.cc-op-app .cc-topup-heading h2{
  margin: 0;
  color: #2A3547;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
}

.cc-op-app .cc-topup-heading p{
  margin: 4px 0 0;
  color: #7E84A3;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
}

.cc-op-app .cc-topup-surface{
  margin: 0 18px 18px;
  padding: 0;
}

.cc-op-app .cc-topup-plans{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.cc-op-app .cc-mini-plan{
  min-height: auto;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #E7E9F2;
  background: #fff;
  box-shadow: none;
  gap: 8px;
}

.cc-op-app .cc-mini-plan:hover{
  transform: none;
  border-color: rgba(100,82,254,.28);
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

.cc-op-app .cc-mini-plan.is-selected,
.cc-op-app .cc-mini-plan--pro.is-selected,
.cc-op-app .cc-mini-plan--pro{
  border: 1px solid rgba(100,82,254,.45);
  box-shadow: 0 8px 22px rgba(100,82,254,.10);
}

.cc-op-app .cc-mini-plan-main{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cc-op-app .cc-mini-plan-name{
  color: #2A3547;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
}

.cc-op-app .cc-mini-plan-popular{
  position: static;
  padding: 0 8px;
  min-height: 22px;
  border-radius: 7px;
  background: rgba(100,82,254,.10);
  color: var(--aa-primary, #6452FE);
  box-shadow: none;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.cc-op-app .cc-mini-plan-price{
  margin: 2px 0 0;
  color: #131523;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
}

.cc-op-app .cc-mini-plan-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #7E84A3;
  font-size: 12px;
  font-weight: 700;
}

.cc-op-app .cc-mini-plan-meta b{
  color: #13B680;
  font-weight: 800;
}

.cc-op-app .cc-mini-plan-credit{
  color: #5A607F;
  font-size: 12px;
  font-weight: 600;
}

.cc-op-app .cc-mini-plan-bonus,
.cc-op-app .cc-mini-plan-cta{
  display: none !important;
}

.cc-op-app .cc-topup-form{
  margin-top: 14px;
  padding: 0;
  border-radius: 12px;
  border: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.cc-op-app .cc-topup-form__main{
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(170px, .72fr);
  gap: 10px;
  align-items: end;
}

.cc-op-app .cc-topup-field{
  display: grid;
  gap: 6px;
}

.cc-op-app .cc-topup-field span{
  color: #7E84A3;
  font-size: 12px;
  font-weight: 700;
}

.cc-op-app .cc-topup-input{
  height: 42px;
  border-radius: 8px;
  border: 1px solid #E6E9F4;
  padding: 0 12px;
  color: #2A3547;
  font-size: 14px;
  font-weight: 700;
}

.cc-op-app .cc-topup-total{
  height: 42px;
  margin: 0;
  padding: 0 12px;
  border-radius: 8px;
  background: #F8FAFF;
  border: 1px solid #E6E9F4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cc-op-app .cc-topup-total span{
  color: #7E84A3;
  font-size: 12px;
  font-weight: 700;
}

.cc-op-app .cc-topup-total strong{
  color: #2A3547;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.cc-op-app .cc-topup-form__actions{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.cc-op-app .cc-topup-bonus{
  margin: 0;
  min-height: 30px;
  border-radius: 8px;
  font-size: 12px;
}

.cc-op-app .cc-topup-pay{
  float: none;
  margin: 0;
  min-width: 124px;
  height: 42px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}

.cc-op-app .cc-topup-hint{
  grid-column: 1 / -1;
  margin: -2px 0 0;
  font-size: 12px;
  font-weight: 600;
}

.cc-op-app .cc-fin-ops-panel{
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cc-op-app .cc-fin-ops-toolbar.aa-table-toolbar{
  padding: 14px 16px;
  border-bottom: 0;
  gap: 12px;
}

.cc-op-app .cc-fin-ops-toolbar .aa-table-toolbar__filters{
  flex: 0 0 170px;
}

.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar{
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-width: 150px;
  height: 36px;
  border: 1px solid #E7E9F2;
  border-radius: 8px;
  background: #fff;
  color: #2A3547;
  overflow: visible;
}

.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar:hover,
.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar.is-open{
  border-color: #6452FE;
  box-shadow: 0 0 0 3px rgba(100,82,254,.10);
}

.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar::after{
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 10px;
  height: 6px;
  transform: translateY(-50%);
  background: #A1A7C4;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  pointer-events: none;
  transition: transform .18s ease, background .18s ease;
}

.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar.is-open::after{
  transform: translateY(-50%) rotate(180deg);
  background: #6452FE;
}

.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar select{
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar .aa-select__trigger{
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 32px 0 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #2A3547;
  font: 700 13px/1 "Plus Jakarta Sans", system-ui, sans-serif;
  cursor: pointer;
}

.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar .aa-select__value{
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar .aa-select__chevron{
  display: none !important;
}

.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar .aa-select__menu{
  position: absolute;
  z-index: 90;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(260px, 72vw);
  display: none;
  padding: 6px;
  border: 1px solid #E7E9F2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(15,23,42,.12);
}

.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar.is-open .aa-select__menu{
  display: block;
}

.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar .aa-select__option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  color: #2A3547;
  font: 700 13px/1.2 "Plus Jakarta Sans", system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar .aa-select__option:hover,
.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar .aa-select__option.is-selected{
  background: rgba(100,82,254,.08);
  color: #6452FE;
}

.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar .aa-select__option > span:first-child{
  flex: 1 1 auto;
}

.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar .aa-select__check{
  opacity: 0;
  color: #6452FE;
}

.cc-op-app .cc-fin-ops-toolbar .aa-select.aa-select--toolbar .aa-select__option.is-selected .aa-select__check{
  opacity: 1;
}

.cc-op-app .cc-fin-ops-table{
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

.cc-op-app .cc-fin-ops-table .row{
  display: grid;
  grid-template-columns: minmax(90px,.7fr) minmax(190px,1.6fr) minmax(120px,.9fr) minmax(110px,.8fr) minmax(150px,1fr) 28px;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 0;
}

.cc-op-app .cc-fin-ops-table .row.head{
  background: transparent;
  color: #7E84A3;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  padding-top: 12px;
  padding-bottom: 12px;
}

.cc-op-app .cc-fin-ops-table .row:not(.head){
  color: #2A3547;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  border-top: 1px solid #F5F6FA;
}

.cc-op-app .cc-fin-ops-table .row:last-child{
  border-bottom: 0;
}

.cc-op-id{
  color: #5A607F;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cc-op-title{
  color: #2A3547;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-op-sum{
  color: #5A607F;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cc-op-sum--positive{ color: #13B680; }
.cc-op-sum--negative{ color: #FA896B; }

.cc-op-date{
  color: #7E84A3;
  font-size: 12px;
  font-weight: 600;
}

.cc-op-status{
  min-height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

.cc-op-status--success{ background: rgba(19,182,128,.14); color: #13B680; }
.cc-op-status--pending,
.cc-op-status--created{ background: #F1F3F9; color: #5A6A85; }
.cc-op-status--failed,
.cc-op-status--cancelled{ background: rgba(250,137,107,.16); color: #FA896B; }

.cc-op-expand-icon{
  position: static;
  transform: none;
  text-align: center;
  color: #7E84A3;
  font-size: 16px;
}

.cc-op-details{
  padding: 12px 16px;
  margin: 0;
  background: #F8FAFF;
  border-bottom: 1px solid #F1F3F9;
}

.cc-fin-empty{
  padding: 34px 18px;
  color: #7E84A3;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 1100px){
  .cc-op-app .cc-topup-form__main{
    grid-template-columns: minmax(170px, 1fr) minmax(160px, .72fr);
  }
}

@media (max-width: 760px){
  .cc-op-app .cc-fin-summary.aa-cards--modernize{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cc-op-app .cc-fin-summary .aa-mcard{
    min-height: 74px;
    padding: 12px 10px;
    border-right: 1px solid #EBEEF6;
    border-bottom: 0;
    align-items: flex-start;
  }

  .cc-op-app .cc-fin-summary .aa-mcard:last-child{
    border-right: 0;
  }

  .cc-op-app .cc-fin-summary .aa-mcard__value{
    font-size: 18px;
  }

  .cc-op-app .cc-fin-summary .aa-mcard__label{
    font-size: 11px;
  }

  .cc-op-app .cc-fin-summary .aa-mcard__icon{
    display: none;
  }

  .cc-op-app .cc-topup-plans{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .cc-op-app .cc-mini-plan{
    padding: 10px;
    gap: 6px;
  }

  .cc-op-app .cc-mini-plan-main{
    display: block;
  }

  .cc-op-app .cc-mini-plan-popular{
    display: none;
  }

  .cc-op-app .cc-mini-plan-name{
    font-size: 12px;
  }

  .cc-op-app .cc-mini-plan-price{
    font-size: 16px;
  }

  .cc-op-app .cc-mini-plan-meta{
    display: block;
    font-size: 11px;
  }

  .cc-op-app .cc-mini-plan-meta b{
    display: block;
    margin-top: 2px;
  }

  .cc-op-app .cc-mini-plan-credit{
    font-size: 11px;
  }

  .cc-op-app .cc-topup-form__actions{
    width: 100%;
    justify-content: space-between;
  }

  .cc-op-app .cc-topup-pay{
    width: auto;
  }

  .cc-op-app .cc-fin-ops-toolbar.aa-table-toolbar{
    flex-wrap: wrap;
    padding: 12px;
  }

  .cc-op-app .cc-fin-ops-toolbar .aa-table-toolbar__filters{
    flex: 0 0 148px;
  }

  .cc-op-app .cc-fin-ops-toolbar .aa-table-toolbar__search{
    flex: 1 1 180px;
    min-width: 0;
  }

  .cc-op-app .cc-fin-ops-toolbar .aa-table-toolbar__icons{
    margin-left: auto;
  }

  .cc-op-app .cc-fin-ops-table .row.head{
    display: none;
  }

  .cc-op-app .cc-fin-ops-table .row{
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 12px;
    min-height: 0;
  }

  .cc-op-app .cc-fin-ops-table .row:not(.head){
    font-size: 12px;
  }

  .cc-op-app .cc-op-id{
    grid-column: 1;
    grid-row: 2;
    font-size: 11px;
  }

  .cc-op-app .cc-op-title{
    grid-column: 1;
    grid-row: 1;
    font-size: 13px;
    white-space: normal;
  }

  .cc-op-app .cc-op-sum{
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    font-size: 13px;
  }

  .cc-op-app .cc-op-date{
    grid-column: 1;
    grid-row: 3;
  }

  .cc-op-app .cc-fin-ops-table .row > div:nth-child(4){
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: center;
    text-align: right;
  }

  .cc-op-app .cc-op-expand-icon{
    display: none;
  }

  .cc-op-app .cc-op-sum-note{
    text-align: right;
    font-size: 10px;
  }
}

@media (max-width: 520px){
  .cc-op-app .cc-fin-summary.aa-cards--modernize,
  .cc-op-app .cc-topup-plans{
    grid-template-columns: 1fr;
  }

  .cc-op-app .cc-topup-form,
  .cc-op-app .cc-topup-form__main{
    grid-template-columns: 1fr;
  }

  .cc-op-app .cc-fin-summary .aa-mcard{
    border-right: 0;
    border-bottom: 1px solid #EBEEF6;
  }

  .cc-op-app .cc-fin-summary .aa-mcard:last-child{
    border-bottom: 0;
  }

  .cc-op-app .cc-fin-summary .aa-mcard__icon{
    display: inline-flex;
  }
}

/* Plan activation modal */
.cc-plan-activate-body{
  width: 620px;
  max-width: 92vw;
  padding: 26px 24px;
}

/* Activation modal stages (active plan warning -> details), smooth and in the same window */
.cc-act-stage{ display:none; }
.cc-act-stage.active{ display:block; }
@media (prefers-reduced-motion: no-preference){
  .cc-act-stage.active{
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
  }
  .cc-act-stage.active.is-entering{ opacity: 0; transform: translateY(10px); }
}
.cc-act-warn{
  background: rgba(100,82,254,.06);
  border: 1px solid rgba(100,82,254,.18);
  border-radius: 14px;
  padding: 14px 14px;
  color: rgba(15,23,42,.72);
  font-size: 14px;
  line-height: 1.4;
}
.cc-act-warn b{ color: rgba(15,23,42,.92); }
.cc-plan-activate-actions.is-split{ justify-content: space-between; gap: 12px; }
.cc-plan-activate-btn.cc-btn-ghost{
  background: #F3F4F6;
  color: #6b7280;
}
.cc-plan-activate-btn.cc-btn-ghost:hover{ background:#E5E7EB; }
.cc-plan-activate-title{
  font-weight: 700;
  color: rgba(15,23,42,.62);
  font-size: 14px;
  margin-bottom: 14px;
}
.cc-plan-activate-name{
  font-weight: 900;
  font-size: 34px;
  margin-bottom: 14px;
  color: rgba(15,23,42,.92);
}
.cc-plan-activate-line{
  color: rgba(15,23,42,.62);
  font-size: 15px;
  margin: 10px 0;
}
.cc-plan-activate-total{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.10);
}
.cc-plan-activate-total-label{
  font-weight: 900;
  color: rgba(15,23,42,.92);
  font-size: 18px;
}
.cc-plan-activate-total-val{
  font-weight: 900;
  color: rgba(15,23,42,.92);
  font-size: 22px;
}
.cc-plan-activate-actions{
  display:flex;
  justify-content:flex-end;
  margin-top: 18px;
}
.cc-plan-activate-btn{
  min-width: 160px;
}
.cc-prof-tabs{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: none;
  padding-bottom: 0;
  position: relative;
}
.cc-prof-tab{
  min-height: 32px;
  background: transparent;
  border: 1px solid var(--aa-border, #E6E9F4);
  border-radius: 8px;
  padding: 0 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--aa-muted, #5A607F);
  transition: background .15s, border-color .15s, color .15s;
}
.cc-prof-tab:hover{
  color: #6452FE;
  background: rgba(100,82,254,.06);
  border-color: rgba(100,82,254,.2);
}
.cc-prof-tab.active{
  color: #fff;
  background: #6452FE;
  border-color: #6452FE;
}

/* Sliding underline (like "jobs" feel, but actually smooth movement) */
.cc-prof-ind{
  display: none;
}
.cc-prof-action{
  margin-left: auto;
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid rgba(100,82,254,.26);
  background: #fff;
  color: var(--cc-purple);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transform: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cc-prof-action:hover{
  background: #F8FAFF;
  border-color: rgba(100,82,254,.46);
}
.cc-prof-action.is-save{
  background: var(--cc-purple);
  border-color: var(--cc-purple);
  color: #fff;
}
.cc-prof-action.is-save:hover{ background: #5A46FF; }
.cc-prof-section{ display:none; }
.cc-prof-section.active{ display:block; }

.cc-prof-card{
  background:#fff;
  border: 1px solid var(--aa-border);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  box-shadow: var(--aa-shadow);
}
.cc-prof-card__top{
  display:flex;
  align-items:center;
  gap: 14px;
}
.cc-prof-card__avatar{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(100,82,254,.14);
  color: var(--cc-purple);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 14px;
  overflow: hidden;
}
.cc-prof-card__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.cc-prof-card__who{ flex: 1 1 auto; min-width: 0; display:flex; flex-direction: column; justify-content:center; gap: 2px; }
.cc-prof-card__name{
  border:none;
  background:transparent;
  font-weight: 900;
  font-size: 20px;
  padding: 0;
  margin: 0;
  outline:none;
  width: auto;
  min-width: 140px;
}
.cc-prof-card__name:disabled{ color: var(--cc-text); }
.cc-prof-card__id{
  color: rgba(15,23,42,.35);
  font-weight: 700;
  margin-top: 4px;
  margin-left: 0;
  white-space: nowrap;
}

.cc-prof-card__fields{
  display:grid;
  /* like Business block: compact columns that never overlap */
  /* wider fields + last column stretches so Exit can stick to the far right */
  grid-template-columns: minmax(0, 360px) minmax(0, 360px) 1fr;
  gap: 16px;
  margin-top: 14px;
  align-items: end;
  justify-content: stretch;
}
.cc-prof-field{ min-width: 0; }
.cc-prof-field__label{ font-size: 12px; color: #A0ABBB; font-weight: 600; margin-bottom: 8px; }
.cc-prof-field__row{ display:flex; align-items:center; gap: 10px; }
.cc-prof-field__input{ width: 100%; max-width: 100%; }
.cc-prof-exit{
  /* match .op-btn sizing (like "Сохранить"), but outlined */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing: border-box;
  height: 44px;            /* match account inputs */
  padding: 0 16px;         /* no vertical padding to keep exact height */
  line-height: 44px;
  border-radius: 10px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #fff;
  border: 1px solid rgba(160,171,187,.9);
  color: rgba(15,23,42,.92);
  font-weight: 700;
  cursor: pointer;
  width: auto;
  min-width: 0;
}
.cc-prof-exit-field .cc-prof-field__row{ justify-content: flex-end; }
.cc-prof-exit-field .cc-prof-field__label{ visibility: hidden; }
.cc-prof-exit-field .cc-prof-field__error{ visibility: hidden; }
.cc-prof-exit-field{ justify-self: end; }
.cc-prof-exit{ white-space: nowrap; }

/* Phone/email edit button inside the field (pencil icon), like the top-right edit control */
.cc-prof-field__row--editable{ padding: 0; }
.cc-editfield{
  position: relative;
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
}
.cc-editfield__input{
  width: 100%;
  height: 44px;              /* match business inputs visual height */
  padding: 0 44px 0 14px;    /* right space for pencil, normal left padding */
  line-height: 44px;         /* center text vertically like other inputs */
  box-sizing: border-box;
}
.cc-field-edit{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.cc-field-edit::before{
  content:"";
  width: 16px;
  height: 16px;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  background: url('/static/customer/img/edit.svg') no-repeat center / 16px 16px;
  opacity: .85;
}
.cc-field-edit:hover::before{ opacity: 1; }

/* If viewport gets tight, stack to avoid overlaps */
@media (max-width: 860px){
  .cc-prof-card__fields{ grid-template-columns: 1fr; }
  .cc-editfield{ width: 100%; max-width: 100%; }
  .cc-prof-exit-field{ justify-self: start; }
  .cc-prof-exit-field .cc-prof-field__row{ justify-content: flex-start; }
}

/* Close button for bb-modals (green X like in mock) */
.bb-modal__panel{ position: relative; }
.bb-modal__close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  cursor: pointer;
  /* ensure nothing overlaps the close button hit-area */
  z-index: 50;
  pointer-events: auto;
}
.bb-modal__close::before,
.bb-modal__close::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 3px;
  background: var(--bb-green, #18CA8E);
  border-radius: 2px;
  transform-origin: center;
}
.bb-modal__close::before{ transform: translate(-50%,-50%) rotate(45deg); }
.bb-modal__close::after{ transform: translate(-50%,-50%) rotate(-45deg); }
.bb-modal__close:hover{
  background: rgba(24,202,142,.06);
  border-color: rgba(24,202,142,.25);
}

/* Cabinet OTP modals: keep phone/email panels stable size across stages */
#bbChangePhoneModal .bb-modal__panel,
#bbChangeEmailModal .bb-modal__panel{
  width: min(520px, calc(100% - 32px));
  margin: 0; /* we will center via flex on the modal itself */
  border-radius: 22px;
  padding: 34px 34px 26px;
  box-shadow: 0 24px 70px rgba(15,23,42,.25);
  opacity: 1;
  transform: none;
  transition: none;
  height: min(660px, calc(100vh - 120px)); /* keep border visible above taskbar */
  max-height: calc(100vh - 120px);
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* Center these 4 modals safely inside viewport (no clipped bottom border) */
#bbChangePhoneModal.is-open,
#bbChangeEmailModal.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px; /* guarantees visible border on all sides */
}
#bbChangePhoneModal .bb-modal__backdrop,
#bbChangeEmailModal .bb-modal__backdrop{
  opacity: 1;
  transition: none;
}
#bbChangePhoneModal.is-closing .bb-modal__panel,
#bbChangeEmailModal.is-closing .bb-modal__panel{
  opacity: 1;
  transform: none;
}
#bbChangePhoneModal.is-closing .bb-modal__backdrop,
#bbChangeEmailModal.is-closing .bb-modal__backdrop{
  opacity: 1;
}

/* Keep input blocks aligned with confirmation modals rhythm */
#bbChangePhoneModal .bb-modal__field-slot,
#bbChangeEmailModal .bb-modal__field-slot{
  width: 100%;
  max-width: 420px;
  /* vertical rhythm like confirm screens (so input+button are not too high) */
  margin-top: 18px;
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
}

#bbChangePhoneModal .bb-modal__field-slot .bb-phonefield,
#bbChangeEmailModal .bb-modal__field-slot .bb-emailfield{
  /* push the input+button block down so it matches confirm-modals composition */
  margin: 0;
  /* match overall modal inputs vibe (neutral border instead of thick purple) */
  border: 1px solid #A0ABBB;
  border-radius: 12px;
  padding: 0 16px;
  height: 56px;
  gap: 10px;
  /* IMPORTANT: match confirm modal button width (max 420px) */
  max-width: 420px;
}

/* OTP field slot: keep same rhythm as input slot */
#bbChangePhoneModal .bb-modal__field-slot--otp,
#bbChangeEmailModal .bb-modal__field-slot--otp{
  width: 100%;
  max-width: 420px;
  margin-top: 18px;
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
}
#bbChangePhoneModal .bb-modal__field-slot--otp .bb-otp__inputs,
#bbChangeEmailModal .bb-modal__field-slot--otp .bb-otp__inputs{
  margin: 0;
}

/* Smooth stage switch INSIDE the modal (no backdrop flicker) */
#bbChangePhoneModal .bb-stage,
#bbChangeEmailModal .bb-stage{
  display: none;
}
#bbChangePhoneModal .bb-stage.active,
#bbChangeEmailModal .bb-stage.active{
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}
#bbChangePhoneModal .bb-stage.active.is-entering,
#bbChangeEmailModal .bb-stage.active.is-entering{
  opacity: 0;
  transform: translateY(10px);
}
#bbChangePhoneModal .bb-stage--confirm .bb-btn--green,
#bbChangeEmailModal .bb-stage--confirm .bb-btn--green{
  box-shadow: none !important;
}
@media (prefers-reduced-motion: reduce){
  #bbChangePhoneModal .bb-stage.active,
  #bbChangeEmailModal .bb-stage.active{
    transition: none !important;
    transform: none !important;
  }
}
#bbChangePhoneModal .bb-phonefield__flag{
  width: 28px;
  height: 20px;
}
#bbChangePhoneModal .bb-phonefield__input{
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
#bbChangeEmailModal .bb-emailfield__input{
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  width: 100%;
}

#bbChangePhoneModal .bb-modal__icon,
#bbChangeEmailModal .bb-modal__icon{
  /* make phone/email icons occupy the same vertical space -> fields/buttons align */
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
#bbChangePhoneModal .bb-modal__icon img,
#bbChangeEmailModal .bb-modal__icon img{
  width: 165px; /* same baseline as confirm modals */
  max-height: 190px;
  object-fit: contain;
  margin: 0; /* wrapper owns the spacing */
}
#bbChangePhoneModal .bb-modal__actions,
#bbChangeEmailModal .bb-modal__actions{
  /* keep CTA close to the input like in confirm modals (no huge empty space) */
  margin-top: 14px;
  padding-top: 0;
}

#bbChangePhoneModal .bb-modal__text,
#bbChangeEmailModal .bb-modal__text{
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* Validation like the rest of the customer forms */
.cc-op-app .op-input.is-invalid{
  border-color: rgba(239,68,68,.95) !important;
}
.cc-op-app .op-input.is-invalid:focus{
  border-color: rgba(239,68,68,.95) !important;
  box-shadow: inset 0 0 0 2px rgba(239,68,68,.18) !important;
}
.cc-prof-field__error{ min-height: 16px; margin-top: 6px; }

/* Single edit toggle button (top-right) */
.cc-prof-edit{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  cursor: pointer;
  color: rgba(15,23,42,.70);
}
.cc-prof-edit::before{
  content:"";
  width: 16px;
  height: 16px;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  background: url('/static/customer/img/edit.svg') no-repeat center / 16px 16px;
  opacity: .85;
}
.cc-prof-edit:hover{ border-color: rgba(100,82,254,.25); }
.cc-prof-edit:hover::before{ opacity: 1; }
.cc-prof-card.is-editing .cc-prof-edit::before{
  background: url('/static/customer/img/close.svg') no-repeat center / 16px 16px;
  opacity: .9;
}

/* Save should appear only in edit mode */
.cc-prof-card:not(.is-editing) #ccProfileSaveBtn{ display: none; }
.cc-prof-card.is-editing #ccProfileSaveBtn{ display: inline-flex; }

/* Exit button should look like other inputs/buttons (grey outline) */
.cc-prof-exit{
  background: #fff;
  border: 1px solid rgba(160,171,187,.9);
  border-radius: 10px;
  padding: 10px 14px;
  color: rgba(15,23,42,.92);
  font-weight: 800;
}
.cc-prof-exit:hover{
  border-color: rgba(100,82,254,.35);
  background: #F8FAFF;
}

/* Business tab: editing is toggled from the profile tabs row */
.cc-biz-compact{ position: relative; }

/* Readonly legal_name/inn should look locked */
.cc-biz-compact input[readonly]{
  background: #F9FAFB;
  cursor: not-allowed;
}

/* Customer cabinet profile reuses the admin customer-profile module. */
#tab-profile:has(.cc-acp-profile-app){
  max-width: 1180px;
  width: 100%;
}
.cc-acp-profile-app{
  font-family: 'Plus Jakarta Sans', sans-serif;
  width: 100%;
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
.cc-acp-profile-app .cc-acp-toolbar{
  margin: 0 0 18px;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.cc-acp-profile-app .cc-acp-toolbar .acp-page-toolbar__heading{
  flex: 1 1 auto;
  min-width: 0;
}
.cc-acp-profile-app .cc-acp-toolbar .acp-page-toolbar__actions{
  flex: 0 0 auto;
  margin-left: auto;
  justify-content: flex-end;
}
.cc-acp-profile-app .cc-acp-shell{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.cc-acp-profile-app .acp-loader{
  min-height: 280px;
}
.cc-acp-profile-app .acp-sections{
  display: block;
}
.cc-acp-profile-app .acp-section[data-section="profile"]{
  display: block !important;
}
.cc-acp-profile-app .acp-card{
  border-radius: 18px;
}
.cc-acp-profile-app .acp-grid{
  align-items: start;
}
.cc-acp-profile-app .acp-prof-actions,
.cc-acp-profile-app #acpBalanceQuickBtn,
.cc-acp-profile-app .acp-edit.acp-edit--inline,
.cc-acp-profile-app .acp-admin-only,
.cc-acp-profile-app .acp-edit-all__check{
  display: none !important;
}
.cc-acp-profile-app .acp-edit-page__card{
  border-radius: 18px;
}
.cc-acp-profile-app .acp-page-toolbar__actions{
  gap: 10px;
}

/* Unified Modernize dropdown arrows across the customer cabinet. */
.cc-op-app{
  --cc-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%237E84A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cc-op-app .aa-select.aa-select--toolbar,
.cc-op-app .bb-dd{
  position: relative;
}
.cc-op-app .aa-select.aa-select--toolbar::after,
.cc-op-app .bb-dd .bb-dd__icons::before{
  content: "" !important;
  width: 16px !important;
  height: 16px !important;
  background: var(--cc-select-chevron) no-repeat center / 16px 16px !important;
  clip-path: none !important;
  border: 0 !important;
  transform: none !important;
  transition: transform .18s ease, opacity .18s ease !important;
  opacity: .9;
  pointer-events: none;
}
.cc-op-app .aa-select.aa-select--toolbar::after{
  position: absolute;
  right: 12px !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}
.cc-op-app .aa-select.aa-select--toolbar.is-open::after{
  transform: translateY(-50%) rotate(180deg) !important;
}
.cc-op-app .bb-dd .bb-dd__icons{
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  background: none !important;
}
.cc-op-app .bb-dd .bb-dd__icons::before{
  position: static !important;
  display: block !important;
}
.cc-op-app .bb-dd.is-open .bb-dd__icons::before{
  transform: rotate(180deg) !important;
}
.cc-op-app .bb-dd__header{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-right: 12px !important;
}
.cc-op-app .bb-dd__text{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-op-app .aa-select.aa-select--toolbar select{
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
}

/* Support compose final polish: keep modal centered and dropdowns readable. */
.cc-op-app .cc-support-compose-overlay{
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  overflow: auto !important;
}
.cc-op-app .cc-support-compose-panel{
  width: min(560px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: auto !important;
  margin: auto !important;
  display: flex;
  flex-direction: column;
}
.cc-op-app .cc-support-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.cc-op-app .cc-support-form__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.cc-op-app .cc-support-field{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cc-op-app .cc-support-field > span{
  color: #7E84A3;
  font: 700 11px/1.25 "Plus Jakarta Sans", sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.cc-op-app .cc-support-field input,
.cc-op-app .cc-support-field textarea{
  width: 100%;
  border: 1px solid var(--aa-border, #E6E9F4);
  border-radius: 10px;
  background: #fff;
  color: #131523;
  font: 600 13px/1.4 "Plus Jakarta Sans", sans-serif;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cc-op-app .cc-support-field input{
  height: 42px;
  padding: 0 14px;
}
.cc-op-app .cc-support-field textarea{
  min-height: 104px;
  resize: vertical;
  padding: 12px 14px;
}
.cc-op-app .cc-support-field input:focus,
.cc-op-app .cc-support-field textarea:focus{
  border-color: #6452FE;
  box-shadow: 0 0 0 3px rgba(100,82,254,.10);
}
.cc-op-app .cc-support-dd .bb-dd__header{
  width: 100%;
  height: 42px;
  min-height: 42px;
}
.cc-op-app .cc-support-dd .bb-dd__menu{
  position: absolute;
  z-index: 9100;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(260px, 42vh);
  overflow: auto;
}
.cc-op-app .cc-support-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}
.cc-op-app .cc-support-upload input{
  display: none;
}
.cc-op-app .cc-support-upload__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--aa-border, #E6E9F4);
  border-radius: 10px;
  background: #fff;
  color: #6452FE;
  font: 700 13px/1 "Plus Jakarta Sans", sans-serif;
  cursor: pointer;
}
.cc-op-app .cc-support-create-btn{
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
}
@media (max-width: 720px){
  .cc-op-app .cc-support-form__grid{ grid-template-columns: 1fr; }
  .cc-op-app .cc-support-actions{ align-items: stretch; flex-direction: column; }
  .cc-op-app .cc-support-upload__button,
  .cc-op-app .cc-support-create-btn{ width: 100%; }
}

/* profile page: keep content nicely packed like operator screens */
#tab-profile{ max-width: 900px; }
#tab-profile:has(.cc-acp-profile-app){ max-width: 1180px; }
.cc-prof-card{ max-width: 900px; }
.cc-biz-compact{ max-width: 900px; }
.cc-packed{
  margin-top: 14px;
  box-shadow: 0 18px 40px rgba(15,23,42,.06);
}
.cc-section-shell--profile .cc-packed{
  margin-top: 0;
}

/* Make Business tab container look like the Account card (white panel on grey background) */
.cc-biz-compact{
  background: #fff;
  border: 1px solid var(--aa-border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--aa-shadow);
}

/* (Removed) old 980px breakpoint for profile fields to avoid width conflicts.
   Profile stacking is handled by the 860px breakpoint above. */

/* Make business grid not “too wide” and avoid visual collisions */
.cc-biz-compact .bb-grid{ max-width: 900px; }
.cc-biz-compact .bb-input{ font-size: 14px; padding: 12px 14px; }
.cc-biz-compact .bb-field__label{ font-size: 12px; }
.cc-biz-compact .bb-field{ min-width: 0; }
.cc-biz-compact .bb-input{ box-sizing: border-box; }
.cc-biz-compact .bb-dd__header{ box-sizing: border-box; }
.cc-biz-compact .bb-dd__menu{ box-sizing: border-box; }

/* Business layout like mock: fields left, logo right */
.cc-biz-top{
  display:grid;
  /* Right column should be exactly the logo square width (no empty space inside) */
  grid-template-columns: 1fr auto;
  gap: 18px;
  /* stretch so right column can size to the left column height */
  align-items: stretch;
}
.cc-biz-left{ min-height: 0; }
.cc-biz-right{
  min-height: 0;
  display:flex;
  width: var(--cc-logo-size, 300px);
}
.cc-biz-right .bb-field{
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
  flex-direction: column;
}
.cc-biz-right .bb-drop{
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
  margin-top: auto; /* keep logo block at the bottom of the right column */
}
.cc-biz-right .bb-drop__box{
  /* Square size is synced to the left column height via JS (see customer_cabinet.js) */
  width: 100%;
  height: 100%;
  padding: 18px;
  overflow: hidden;
  position: relative;
}
.cc-biz-right #ccLogoDrop.has-preview .bb-drop__box{
  padding: 0;
  background: #fff;
}
.cc-biz-right #ccLogoDrop.has-preview .bb-drop__preview{
  display:block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* Blurred logo preview + "View" overlay (to avoid weird crops for different aspect ratios) */
#ccLogoDrop.has-preview .bb-drop__preview{
  filter: blur(10px);
  transform: scale(1.08);
}
#ccLogoDrop .cc-logo-overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
}
#ccLogoDrop.has-preview .cc-logo-overlay{ display:flex; }
.cc-logo-view-btn{
  border: 1px solid transparent; /* no dull outline by default */
  background: rgba(255,255,255,.92);
  color: #0F172A;
  font-weight: 800;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 14px; /* match inputs/buttons radius */
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(15,23,42,.14);
  outline: none;
}
.cc-logo-view-btn:hover{
  border-color: rgba(100,82,254,.55);
  background: #fff;
}
.cc-logo-view-btn:focus-visible{
  border-color: rgba(100,82,254,.70);
  box-shadow: 0 14px 30px rgba(15,23,42,.14), 0 0 0 3px rgba(100,82,254,.22);
}

/* Logo modal (mini-app-like) */
.cc-photo-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(121,121,121,0.5); /* match mini-app avatar modal backdrop */
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
  z-index: 70;
}
.cc-photo-modal-backdrop[hidden]{ display:none; }
.cc-photo-modal{
  background:#fff;
  width: 368px; /* match mini-app avatar modal width */
  max-width: 92vw;
  border-radius: 12px;
  box-shadow: 0px 5px 20px 0px rgba(204, 204, 204, 0.3);
  overflow: hidden;
  max-height: 90vh;
}
.cc-photo-modal-content{
  padding: 16px 16px 12px 16px;
  display:flex;
  flex-direction: column;
  gap: 16px;
}
.cc-photo-modal-title{
  font-weight: 800;
  font-size: 18px;
  color: rgba(15,23,42,.92);
}
.cc-photo-preview{
  width: 100%;
  height: 284px; /* match mini-app avatar preview height */
  object-fit: contain; /* keep full logo visible (mini-app avatar uses cover, but logo shouldn't be cropped) */
  border-radius: 8px;
  background: #EEEDFF;
  border: 1px dashed #EEEDFF;
}
.cc-photo-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}
.cc-photo-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  height: 40px;
  border-radius: 8px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.cc-photo-btn--ghost{
  background: #FFFFFF;
  border: 1px solid #B6C2E2;
  color: #6452FE;
}
.cc-photo-btn--ghost:hover{ background: #FFFFFF; border-color: rgba(100,82,254,.55); }
.cc-photo-btn--primary{
  background: #6452FE;
  color: #fff;
  border: none;
}
.cc-photo-btn--primary:hover{ background: #5b4af0; }
.cc-biz-bottom{ margin-top: 4px; }

/* Make city dropdown match input sizing */
.cc-biz-compact .bb-dd{ width: 100%; }
.cc-biz-compact .bb-dd__header{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #A0ABBB;
  border-radius: 10px;
  min-width: 0;
  min-height: 40px; /* match bb-input visual height */
}
.cc-biz-compact .bb-dd__text{
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: #333;
}
.cc-biz-compact .bb-dd{ min-width: 0; }

/* Address suggestions are defined in customer_cabinet.css (used by registration + cabinet) */

/* Dropdown icon was 24x24 which made "City" field taller than inputs */
.cc-biz-compact .bb-dd__icons{
  width: 16px;
  height: 16px;
}
.cc-biz-compact .bb-dd__icons::before{
  left: 2px;
  top: 4px;
  width: 12px;
  height: 7px;
  opacity: .85;
}

/* Floating contact widget (needed in cabinet too; landing styles are not loaded here) */
/* Font parity with landing: landing loads base.css (Gilroy), cabinet doesn't. */
@font-face{
  font-family: 'Gilroy';
  src:
    local('Gilroy Regular'),
    local('Gilroy-Regular'),
    url('../font/Gilroy-Regular.woff2') format('woff2'),
    url('../font/Gilroy-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Gilroy';
  src:
    local('Gilroy Bold'),
    local('Gilroy-Bold'),
    url('../font/Gilroy-Bold.woff2') format('woff2'),
    url('../font/Gilroy-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Landing package cards use Gilroy but only 400/700 faces are defined in base.css.
   font-weight:900 is therefore SYNTHESIZED from 700. To match 1:1, we mirror that behavior here. */
@font-face{
  font-family: 'GilroyLanding';
  src:
    local('Gilroy Regular'),
    local('Gilroy-Regular'),
    url('../font/Gilroy-Regular.woff2') format('woff2'),
    url('../font/Gilroy-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'GilroyLanding';
  src:
    local('Gilroy Bold'),
    local('Gilroy-Bold'),
    url('../font/Gilroy-Bold.woff2') format('woff2'),
    url('../font/Gilroy-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.bb-contact{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45; /* below operator modals (50/60) */
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Gilroy', sans-serif; /* match landing widget typography */
}
/* Cabinet doesn't load normalize.css/base.css, so we must hard-reset widget sizing */
.bb-contact,
.bb-contact *{
  box-sizing: border-box;
}
.bb-contact__label{
  background: var(--bb-green, #18CA8E);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
  white-space: nowrap;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  height: 40px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.bb-contact.is-ready .bb-contact__label{ opacity: 1; transform: translateY(0); }
.bb-contact__btn{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--bb-green, #18CA8E);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 34px rgba(24,202,142,.28);
  position: relative;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  border: 0;
  padding: 0; /* remove browser default padding that увеличивает кнопку */
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  line-height: 1;
}
.bb-contact__btn:hover{ transform: translateY(-2px); box-shadow: 0 22px 40px rgba(24,202,142,.34); }
.bb-contact__btn-ring{
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  border: 2px solid rgba(24,202,142,.35);
  animation: bb-contact-ring 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes bb-contact-ring{
  0% { transform: scale(.75); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}
.bb-contact__btn-icon{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .16s ease, transform .16s ease;
}
.bb-contact__btn-icon.is-switching{ opacity: 0; transform: scale(.88); }
.bb-contact__panel{
  position: absolute;
  right: 0;
  bottom: 72px;
  width: 300px;
  background: #fff;
  border: 1px solid rgba(100,82,254,.22);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 26px 66px rgba(15,23,42,.18);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.bb-contact.is-open .bb-contact__panel{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.bb-contact__panel-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 2px 6px;
}
.bb-contact__panel-title{
  font-weight: 950;
  color: rgba(15,23,42,.92);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.bb-contact__panel-close{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(100,82,254,.22);
  background: #fff;
  color: rgba(15,23,42,.60);
  cursor: pointer;
  line-height: 28px;
  font-size: 18px;
  padding: 0;
  transition: transform .16s ease, background .16s ease, color .16s ease;
}
.bb-contact__panel-close:hover{
  transform: translateY(-1px);
  background: rgba(100,82,254,.08);
  color: rgba(15,23,42,.86);
}
.bb-contact__panel-actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bb-contact__panel-action{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1.5px solid rgba(100,82,254,.40);
  background: #fff;
  color: rgba(15,23,42,.92);
  font-weight: 800;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bb-contact__panel-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--bb-purple, #6453F8);
}
.bb-contact__panel-ico svg{ display:block; }
.bb-contact__panel-action:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: rgba(100,82,254,.65);
  box-shadow: 0 14px 30px rgba(15,23,42,.12);
}

@media (prefers-reduced-motion: reduce){
  .bb-contact__btn-ring{ animation: none !important; }
  .bb-contact__btn,
  .bb-contact__panel{ transition: none !important; }
  .bb-contact__btn-icon{ transition: none !important; }
  .bb-contact__label{ transition: none !important; }
}

@media (max-width: 980px){
  .cc-biz-top{ grid-template-columns: 1fr; }
  .cc-biz-right .bb-drop__box{ aspect-ratio: auto; min-height: 128px; }
}

/* Logo modal hint */
.cc-photo-hint{
  margin-top: 10px;
  min-height: 18px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,23,42,.60);
}
.cc-photo-hint.is-error{ color: #ef4444; }
.cc-photo-hint.is-ok{ color: #10b981; }

.cc-prof-card__bottom{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-top: 16px;
}
.cc-prof-exit{
  margin-left: auto;
}

.cc-pen{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background:#fff;
  cursor:pointer;
  position: relative;
}
.cc-pen::before{
  content:"";
  width: 16px;
  height: 16px;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  background: url('/static/customer/img/edit.svg') no-repeat center / 16px 16px;
  opacity: .7;
}
.cc-pen:hover{ border-color: rgba(100,82,254,.25); }
.cc-pen:hover::before{ opacity: 1; }
.cc-pen--sm{ width: 34px; height: 34px; }
.cc-hint{ color: rgba(15,23,42,.55); font-weight: 700; font-size: 13px; }
.cc-hint.is-ok{ color: var(--cc-green); }
.cc-hint.is-error{ color: #ef4444; }

/* user menu buttons */
.cc-user-menu-btn{
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font: inherit;
}

/* Business form: make registration form a bit more compact inside cabinet */
.cc-biz-compact .bb-form--grid{ gap: 14px; }
.cc-biz-compact .bb-onboard__title{ margin-bottom: 12px; }
.cc-biz-compact .bb-grid{ gap: 14px; }
.cc-biz-compact .bb-form__actions{ margin-top: 10px; }
.cc-biz-compact .bb-drop__box{ height: auto; }


/* ===================================================================
   Support: two-column chat (admin-style)
   =================================================================== */
.cc-support-chat{
  display: grid;
  grid-template-columns: 320px 1fr;
  height: calc(100vh - 180px);
  min-height: 480px;
  border: 1px solid var(--aa-border, #E6E9F4);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.as-chat__list{
  border-right: 1px solid var(--aa-border, #E6E9F4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.as-chat__list-head{
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--aa-border, #E6E9F4);
}
.as-chat__search{
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F8FAFC;
  border: 1px solid var(--aa-border, #E6E9F4);
  border-radius: 10px;
  padding: 0 12px;
  height: 38px;
}
.as-chat__search-icon{ opacity: .5; flex-shrink: 0; }
.as-chat__search input{
  border: none;
  outline: none;
  background: transparent;
  font: 500 13px/1 'Plus Jakarta Sans', sans-serif;
  width: 100%;
  color: var(--aa-text, #131523);
}
.as-chat__threads{
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.as-chat__thread{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .15s;
}
.as-chat__thread:hover{ background: #F8FAFC; }
.as-chat__thread.active{
  background: rgba(100,82,254,.06);
  border-left-color: #6452FE;
}
.as-chat__thread-avatar{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E9EEFF;
  color: #6452FE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.as-chat__thread-body{ flex: 1; min-width: 0; }
.as-chat__thread-name{
  font-size: 13px;
  font-weight: 700;
  color: var(--aa-text, #131523);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.as-chat__thread-preview{
  font-size: 12px;
  color: var(--aa-muted, #5A607F);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.as-chat__thread-time{
  font-size: 11px;
  color: var(--aa-muted, #5A607F);
  flex-shrink: 0;
}
.as-chat__thread-unread{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6452FE;
  flex-shrink: 0;
}

/* Right pane */
.as-chat__pane{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.as-chat__empty{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--aa-muted, #5A607F);
}
.as-chat__empty-title{ font-size: 15px; font-weight: 700; color: var(--aa-text, #131523); }
.as-chat__empty-text{ font-size: 13px; }
.as-chat__active{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.as-chat__header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  min-height: 52px;
}
.as-chat__header-user{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}
.as-chat__header-meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.as-chat__header-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.as-chat__header-actions{
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.as-chat__header-name{ font-size: 14px; font-weight: 700; color: var(--aa-text, #131523); }
.as-chat__header-sub{ font-size: 12px; color: var(--aa-muted, #5A607F); margin-top: 1px; }
.as-chat__header-actions{ display: flex; gap: 8px; align-items: center; }

.as-chat__messages{
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cc-op-app .as-chat__msg{
  display: flex;
  max-width: 78%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  position: static;
}
.cc-op-app .as-chat__msg--out{
  align-self: flex-end;
}
.cc-op-app .as-chat__msg--in{
  align-self: flex-start;
}
.cc-op-app .as-chat__msg--system{
  align-self: center;
  max-width: 92%;
}
.cc-op-app .as-chat__msg-body{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cc-op-app .as-chat__msg--out .as-chat__msg-body{
  align-items: flex-end;
}
.cc-op-app .as-chat__msg--in .as-chat__msg-body{
  align-items: flex-start;
}
.cc-op-app .as-chat__msg--system .as-chat__msg-body{
  align-items: center;
}
.cc-op-app .as-chat__bubble{
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  word-break: break-word;
  white-space: pre-wrap;
}
.cc-op-app .as-chat__msg--out .as-chat__bubble{
  background: #6452FE;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.cc-op-app .as-chat__msg--in .as-chat__bubble{
  background: #F1F5F9;
  color: var(--aa-text, #131523);
  border-bottom-left-radius: 4px;
}
.cc-op-app .as-chat__bubble--system,
.cc-op-app .as-chat__msg--system .as-chat__bubble{
  padding: 2px 0;
  background: transparent;
  color: #8A95A8;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.cc-op-app .as-chat__msg-time{
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  color: #9AA3B8;
  opacity: 1;
  margin-top: 0;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.cc-op-app .as-chat__msg--out .as-chat__msg-time{
  text-align: right;
}
.cc-op-app .as-chat__msg--in .as-chat__msg-time{
  text-align: left;
}
.cc-op-app .as-chat__msg--system .as-chat__msg-time{
  text-align: center;
  font-size: 9px;
}
.cc-op-app .cc-support-message__attachments{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cc-op-app .as-chat__msg--out .cc-support-message__attachments{
  justify-content: flex-end;
}
.cc-op-app .cc-support-message__attachment{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #F5F7FB;
  border: 1px solid #E6E9F4;
  font-size: 12px;
  font-weight: 600;
  color: #2A3547;
  text-decoration: none;
}

.as-chat__composer{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #fff;
}
/* Hide the floating "Я тут, если что" support widget on the support tab
   itself — user is already in support chat. */
body:has(#tab-support.active) #bbContact{ display: none !important; }
.cc-support-thread-badge{
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: #F1F5F9;
  font-size: 11px;
  font-weight: 600;
  color: var(--aa-muted, #5A607F);
  white-space: nowrap;
}
.as-chat__icon-btn{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #5A607F;
  cursor: pointer;
  transition: background .15s;
}
.as-chat__icon-btn:hover{ background: #F5F7FB; }
.as-chat__icon-btn--danger:hover{ background: rgba(239,68,68,.08); color: #ef4444; }
.as-chat__attach{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--aa-border, #E6E9F4);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--aa-muted, #5A607F);
  transition: border-color .15s;
}
.as-chat__attach:hover{ border-color: #6452FE; color: #6452FE; }
.as-chat__composer input[type="text"]{
  flex: 1;
  border: 1px solid var(--aa-border, #E6E9F4);
  border-radius: 10px;
  padding: 8px 14px;
  font: 500 13px/1.4 'Plus Jakarta Sans', sans-serif;
  outline: none;
  background: #F8FAFC;
  transition: border-color .15s;
}
.as-chat__composer input[type="text"]:focus{ border-color: #6452FE; background: #fff; }
.as-chat__send{
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}

/* New ticket button */
.cc-support-new-btn{
  height: 38px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  background: #6452FE;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.cc-support-new-btn:hover{ background: #5341E5; }

/* Page titlebar */
.aa-page-titlebar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.aa-page-subtitle{
  font-size: 13px;
  color: var(--aa-muted, #5A607F);
  margin-top: 2px;
}

/* Compose overlay */
.cc-support-compose-overlay{
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cc-support-compose-panel{
  width: 100%;
  max-width: 560px;
  border-radius: 16px;
  padding: 24px 28px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(15,23,42,.12);
}
.cc-support-compose-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cc-support-compose-head h3{
  font-size: 18px;
  font-weight: 800;
  color: var(--aa-text, #131523);
  margin: 0;
}
.op-close{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--aa-border, #E6E9F4);
  background: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aa-muted, #5A607F);
}
.op-close:hover{ border-color: #ef4444; color: #ef4444; }

@media (max-width: 860px){
  .cc-support-chat{ grid-template-columns: 1fr; height: auto; }
  .as-chat__list{ max-height: 260px; border-right: none; border-bottom: 1px solid var(--aa-border, #E6E9F4); }
}

/* ===================================================================
   Inline Job Creation View
   =================================================================== */
.cc-job-create-view{
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cc-job-create-head{
  margin-bottom: 14px;
}
.cc-op-app .cc-job-create-head .aa-page-titlebar{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cc-op-app .cc-job-create-title{
  margin: 8px 0 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--aa-text, #131523);
}
.cc-job-back-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: #6452FE;
  cursor: pointer;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  transition: color .15s ease;
}
.cc-job-back-btn:hover{ color: #5341E5; }
.cc-job-back-btn svg{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.cc-job-create-body{
  /* Let iframe size determine height — JS auto-resizes iframe to its body
     height, so the parent page scrolls (no inner scroll). */
  min-height: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}
.cc-job-create-body iframe{
  width: 100%;
  border: none;
  display: block;
  min-height: 0;
}
/* Hide the floating "Я тут, если что" support widget when the inline job-create
   view is open (it overlaps the form area). */
.cc-op-app:has(#cc-job-create-view:not([hidden])) .as-floating,
.cc-op-app:has(#cc-job-create-view:not([hidden])) #floating-support-widget,
.cc-op-app:has(#cc-job-create-view:not([hidden])) .as-fab,
.cc-op-app:has(#cc-job-create-view:not([hidden])) .bb-contact,
.cc-op-app:has(#cc-job-create-view:not([hidden])) [class*="ya-tut"]{
  display: none !important;
}

body.cc-job-create-open{
  scrollbar-width: auto;
  -ms-overflow-style: auto;
}
body.cc-job-create-open::-webkit-scrollbar{
  width: initial;
  height: initial;
  display: initial;
}
body.cc-job-create-open .cc-job-create-head,
body.cc-job-create-open .cc-job-create-head .aa-page-titlebar{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.cc-job-create-open .cc-job-create-view{
  min-height: 0;
}
body.cc-job-create-open .cc-job-create-body{
  min-height: 0;
  overflow: hidden;
  background: #F5F6FA;
}
body.cc-job-create-open .cc-job-create-body iframe{
  min-height: 0;
  background: #F5F6FA;
}
body.cc-job-create-open .cc-content{
  padding-top: 20px;
}
body.cc-job-create-open .cc-job-create-view{
  position: relative;
  overflow: hidden;
  background: #F5F6FA;
}

/* Finance top-up final layout: heading outside card, unified fields, pay button below. */
.cc-op-app .cc-topup-heading--outside{
  padding: 0;
  margin: 0 0 10px;
}
.cc-op-app .cc-topup-heading--outside h2{
  margin: 0;
  color: #2A3547;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
}
.cc-op-app .cc-topup-heading--outside p{
  margin: 4px 0 0;
  color: #7E84A3;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
}
.cc-op-app .cc-fin-panel{
  margin-top: 0;
}
.cc-op-app .cc-topup-surface{
  margin: 0 18px 18px;
  padding: 0;
}
.cc-op-app .cc-topup-plans{
  padding: 0;
  margin: 0;
}
.cc-op-app .cc-topup-form{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.cc-op-app .cc-topup-form__main{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr);
  gap: 10px;
  align-items: end;
}
.cc-op-app .cc-topup-field,
.cc-op-app .cc-topup-field--total{
  display: grid;
  gap: 6px;
}
.cc-op-app .cc-topup-field span,
.cc-op-app .cc-topup-field--total > span{
  color: #7E84A3;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}
.cc-op-app .cc-topup-input,
.cc-op-app .cc-topup-total{
  width: 100%;
  height: 42px;
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid #E6E9F4;
  background: #fff;
  box-sizing: border-box;
}
.cc-op-app .cc-topup-input{
  padding: 0 12px;
  color: #2A3547;
  font-size: 14px;
  font-weight: 700;
}
.cc-op-app .cc-topup-total{
  margin: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.cc-op-app .cc-topup-total > span{
  display: none;
}
.cc-op-app .cc-topup-total strong{
  color: #2A3547;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
.cc-op-app .cc-topup-form__actions{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.cc-op-app .cc-topup-pay{
  width: auto;
  min-width: 124px;
  height: 42px;
  margin: 0;
  float: none;
}
.cc-op-app .cc-topup-hint{
  margin: -2px 0 0;
}

.cc-op-app .cc-fin.is-topup-tab .cc-fin-panel{
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.cc-op-app .cc-fin.is-topup-tab .cc-fin-toolbar{
  margin-bottom: 10px;
  padding: 0;
  background: transparent;
}
.cc-op-app .cc-fin.is-topup-tab .cc-topup-surface{
  margin: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid #EBEEF6;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.cc-op-app .cc-fin.is-topup-tab .cc-topup-plans{
  gap: 12px;
}
.cc-op-app .cc-fin.is-topup-tab .cc-mini-plan{
  min-height: 110px;
}
.cc-op-app .cc-fin.is-topup-tab .cc-topup-form{
  margin-top: 12px;
}
.cc-op-app .cc-fin.is-topup-tab .cc-topup-form__main{
  grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr);
  gap: 10px;
}
.cc-op-app .cc-fin.is-topup-tab .cc-topup-form__actions{
  margin-top: 10px;
  transform: none;
}
.cc-op-app .cc-fin.is-topup-tab .cc-topup-pay{
  height: 40px;
  min-width: 126px;
  border-radius: 8px;
}

.cc-op-app .cc-fin.is-ops-tab .cc-fin-panel{
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.cc-op-app .cc-fin.is-ops-tab .cc-fin-toolbar{
  margin-bottom: 10px;
  padding: 0;
  background: transparent;
}
.cc-op-app .cc-fin.is-ops-tab #cc-fin-ops{
  overflow: hidden;
  background: #fff;
  border: 1px solid #EBEEF6;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.cc-op-app .cc-fin.is-topup-tab #ccTopupHistoryView{
  overflow: hidden;
  background: #fff;
  border: 1px solid #EBEEF6;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}

@media (max-width: 900px){
  .cc-op-app .cc-fin.is-topup-tab .cc-topup-plans{
    grid-template-columns: 1fr;
  }
  .cc-op-app .cc-fin.is-topup-tab .cc-mini-plan{
    min-height: auto;
  }
  .cc-op-app .cc-fin.is-topup-tab .cc-topup-form__main{
    grid-template-columns: 1fr;
  }
  .cc-op-app .cc-fin.is-topup-tab .cc-topup-form__actions{
    justify-content: flex-end;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Customer cabinet — Jobs page (admin-aligned redesign 20260607)
   Mirrors templates/admin/user_admin.html + moderation.html structure:
   • aa-head + aa-page-titlebar (title + create button on right)
   • aa-cards aa-cards--modernize (4 metric cards)
   • aa-section-header (panel title + subtitle)
   • aa-panel aa-table-panel (single white panel)
   •   aa-table-toolbar (status dropdown + search + icon buttons)
   •   op-table (existing div-based table, restyled)
   •   aa-pagination (compact pill buttons + total info)
───────────────────────────────────────────────────────────────────── */

/* — Title bar (Заявки + create button on right) — */
.cc-op-app #cc-jobs-list-view .aa-head{
  margin-bottom: 16px;
}
.cc-op-app #cc-jobs-list-view .aa-page-titlebar{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cc-op-app #cc-jobs-list-view .aa-title{
  font-size: 20px;
  font-weight: 800;
  color: var(--aa-text, #131523);
  margin: 0;
  letter-spacing: -0.01em;
}
.cc-op-app #cc-jobs-list-view .aa-page-subtitle{
  display: block;
  font-size: 13px;
  color: var(--aa-muted, #5A607F);
  margin-top: 4px;
  font-weight: 500;
}
.cc-op-app .cc-create-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  background: #6452FE;
  color: #fff;
  border: 1px solid #6452FE;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
  white-space: nowrap;
}
.cc-op-app .cc-create-btn:hover{
  background: #5341E5;
  border-color: #5341E5;
}
.cc-op-app .cc-create-btn:active{ transform: translateY(1px); }
.cc-op-app .cc-create-btn svg{ flex: 0 0 16px; }

/* — Metric cards (aa-mcard, 4 in a row, admin spec) — */
.cc-op-app .cc-jobs-cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: #fff;
  border: 1px solid var(--aa-border, #E6E9F4);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}
.cc-op-app .cc-jobs-cards .aa-mcard{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
.cc-op-app .cc-jobs-cards .aa-mcard + .aa-mcard::before{
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: #ECEEF3;
}
.cc-op-app .cc-jobs-cards .aa-mcard__main{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cc-op-app .cc-jobs-cards .aa-mcard__value{
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--aa-text, #131523);
  letter-spacing: -.01em;
}
.cc-op-app .cc-jobs-cards .aa-mcard__label{
  font-size: 12.5px;
  font-weight: 500;
  color: var(--aa-muted, #5A607F);
  line-height: 1.3;
}
.cc-op-app .cc-jobs-cards .aa-mcard__icon{
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cc-op-app .cc-jobs-cards .aa-mcard__icon svg{
  width: 20px;
  height: 20px;
  display: block;
}

/* — Section header (panel title + subtitle, no buttons) — */
.cc-op-app #cc-jobs-list-view .aa-section-header{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 2px;
}
.cc-op-app #cc-jobs-list-view .aa-section-header__main{ min-width: 0; }
.cc-op-app #cc-jobs-list-view .aa-section-header__title{
  font-size: 16px;
  font-weight: 700;
  color: var(--aa-text, #131523);
  margin: 0;
}
.cc-op-app #cc-jobs-list-view .aa-section-header__subtitle{
  font-size: 12.5px;
  color: var(--aa-muted, #5A607F);
  margin: 4px 0 0;
  font-weight: 500;
}

/* — Panel + toolbar — */
.cc-op-app .cc-jobs-panel{
  background: #fff;
  border: 1px solid var(--aa-border, #E6E9F4);
  border-radius: 12px;
  overflow: hidden;
}
.cc-op-app .cc-jobs-toolbar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 0;
  background: #fff;
}
.cc-op-app .cc-jobs-toolbar .aa-table-toolbar__filters{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
/* Custom dropdown — uses admin's aa-select--toolbar pattern (initCustomSelect
   builds .aa-select__trigger / __value / __chevron / __menu inside). The
   underlying native <select> stays opacity:0 (admin behavior). */
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar{
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--aa-border, #E6E9F4);
  background: #fff;
  padding: 0 32px 0 12px;
  min-width: 200px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar:hover{
  border-color: rgba(100, 82, 254, .35);
}
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar.is-open{
  border-color: #6452FE;
  box-shadow: 0 0 0 3px rgba(100, 82, 254, .12);
}
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar::after{
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='m6 9 6 6 6-6' stroke='%237E84A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  pointer-events: none;
  transition: transform .2s ease;
}
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar.is-open::after{
  transform: rotate(180deg);
}
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar select{
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 100% !important;
  height: 100% !important;
}
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar .aa-select__trigger{
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar .aa-select__value{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: #131523;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar .aa-select__chevron{ display: none !important; }
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar .aa-select__menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: none;
  min-width: 100%;
  max-width: 280px;
  background: #fff;
  border: 1px solid #E5E9F2;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
  z-index: 30;
  overflow: hidden;
  animation: ccPopIn .18s cubic-bezier(.22, .61, .36, 1) both;
}
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar.is-open .aa-select__menu{ display: block; }
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar .aa-select__option{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #131523;
  user-select: none;
  transition: background .12s ease, color .12s ease;
}
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar .aa-select__option:hover{
  background: #EDE8FF;
  color: #6452FE;
}
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar .aa-select__option.is-selected{
  background: #EDE8FF;
  color: #6452FE;
}
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar .aa-select__option > span:first-child{ flex: 1 1 auto; }
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar .aa-select__check{
  flex: 0 0 auto;
  font-size: 14px;
  color: #6452FE;
  opacity: 0;
}
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar .aa-select__option.is-selected .aa-select__check{ opacity: 1; }
@keyframes ccPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.cc-op-app .cc-jobs-toolbar .aa-table-toolbar__search{
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  height: 36px;
}
.cc-op-app .cc-jobs-toolbar .aa-table-toolbar__search-ico{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa3b2;
  pointer-events: none;
  display: inline-flex;
}
.cc-op-app .cc-jobs-toolbar .aa-table-toolbar__search-ico svg{ width: 18px; height: 18px; }
.cc-op-app .cc-jobs-toolbar .aa-table-toolbar__search input{
  width: 100%;
  height: 36px;
  padding: 0 12px 0 38px;
  border-radius: 8px;
  border: 1px solid var(--aa-border, #E6E9F4);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--aa-text, #131523);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cc-op-app .cc-jobs-toolbar .aa-table-toolbar__search input::placeholder{ color: #9aa3b2; }
.cc-op-app .cc-jobs-toolbar .aa-table-toolbar__search input:focus{
  outline: 0;
  border-color: rgba(100,82,254,.45);
  box-shadow: 0 0 0 3px rgba(100,82,254,.10);
}
.cc-op-app .cc-jobs-toolbar .aa-table-toolbar__icons{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.cc-op-app .cc-jobs-toolbar .aa-icon-btn{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--aa-border, #E6E9F4);
  background: #fff;
  color: #6452FE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cc-op-app .cc-jobs-toolbar .aa-icon-btn svg{ width: 18px; height: 18px; }
.cc-op-app .cc-jobs-toolbar .aa-icon-btn:hover{
  background: rgba(100,82,254,.08);
  border-color: #6452FE;
  color: #6452FE;
}
.cc-op-app .cc-jobs-toolbar .aa-icon-btn:active{
  background: rgba(100,82,254,.14);
}
.cc-op-app .cc-jobs-toolbar .aa-icon-btn--danger{ color: #EF4444; }
.cc-op-app .cc-jobs-toolbar .aa-icon-btn--danger:hover{
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.30);
  color: #DC2626;
}
.cc-op-app .cc-jobs-toolbar .aa-icon-btn--success{ color: #18CA8E; }
.cc-op-app .cc-jobs-toolbar .aa-icon-btn--success:hover{
  background: rgba(24,202,142,.10);
  border-color: rgba(24,202,142,.30);
  color: #0FB37D;
}
.cc-op-app .cc-jobs-toolbar [data-selection-only]{
  animation: ccPopIn .16s cubic-bezier(.22, .61, .36, 1) both;
}

/* — Table inside panel (op-table re-skin) — */
.cc-op-app .cc-jobs-panel .cc-op-table{
  border: 0;
  border-radius: 0;
  margin: 0;
  background: transparent;
  overflow: visible;
}
/* 9 columns: 36px checkbox + the 8 original job columns. Override the
   admin-rule that targets #jobs-search-table .row etc. */
.cc-op-app .cc-jobs-panel #jobs-search-table .row,
.cc-op-app .cc-jobs-panel #jobs-active-table .row,
.cc-op-app .cc-jobs-panel #jobs-history-table .row{
  grid-template-columns: 36px 1.2fr .8fr 1.2fr 1fr .8fr .8fr 1fr 40px;
}
.cc-op-app .cc-jobs-panel .cc-op-table .row{
  padding: 0 16px;
  min-height: 56px;
  border-top: 1px solid #ECEEF3;
}
/* Checkbox cell (admin aa-checkbox parity) */
.cc-op-app .cc-jobs-panel .cc-op-table .row > .cc-job-check{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cc-op-app .cc-jobs-panel .cc-op-table .cc-job-check input{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.cc-op-app .cc-jobs-panel .cc-op-table .cc-job-check__box{
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid #C9CDD8;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.cc-op-app .cc-jobs-panel .cc-op-table .cc-job-check__box svg{
  width: 12px;
  height: 12px;
  color: #fff;
  opacity: 0;
}
.cc-op-app .cc-jobs-panel .cc-op-table .cc-job-check label{
  display: inline-flex;
  position: relative;
  cursor: pointer;
}
.cc-op-app .cc-jobs-panel .cc-op-table .cc-job-check input:checked + .cc-job-check__box{
  background: #6452FE;
  border-color: #6452FE;
}
.cc-op-app .cc-jobs-panel .cc-op-table .cc-job-check input:checked + .cc-job-check__box svg{ opacity: 1; }
.cc-op-app .cc-jobs-panel .cc-op-table .row.is-selected{ background: rgba(100,82,254,.04); }
.cc-op-app .cc-jobs-panel .cc-op-table .row.is-selected:hover{ background: rgba(100,82,254,.06); }
.cc-op-app .cc-jobs-panel .cc-op-table .row:first-child{ border-top: 0; }
/* Table head — no grey fill (admin parity: just bottom border, plain white). */
.cc-op-app .cc-jobs-panel .cc-op-table .row.head{
  min-height: 44px;
  background: transparent !important;
  border-top: 0;
  border-bottom: 1px solid #ECEEF3;
}
.cc-op-app .cc-jobs-panel .cc-op-table .row.head:hover{ background: transparent !important; }
.cc-op-app .cc-jobs-panel .cc-op-table .row.head > div{
  font-size: 12px;
  font-weight: 600;
  color: #7E84A3;
  text-transform: none;
  letter-spacing: 0;
}
.cc-op-app .cc-jobs-panel .cc-op-table .row > div{
  font-size: 13px;
  color: var(--aa-text, #131523);
}
.cc-op-app .cc-jobs-panel .cc-op-table .row:hover{ background: #F8FAFF; }
.cc-op-app .cc-jobs-panel .cc-op-table .job-number-cell{
  color: #6452FE !important;
  font-weight: 700 !important;
}
.cc-op-app .cc-jobs-panel .op-menu-row{
  position: relative;
  justify-self: end;
}
.cc-op-app .cc-jobs-panel .job-kebab{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7E84A3;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: background .14s ease, color .14s ease;
}
.cc-op-app .cc-jobs-panel .job-kebab:hover{
  background: rgba(100,82,254,.08);
  color: #6452FE;
}
.cc-op-app .cc-jobs-panel .job-kebab-menu{
  min-width: 210px;
  padding: 8px;
  border: 1px solid #E6E9F4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(15,23,42,.14);
  z-index: 120;
}
.cc-op-app .cc-jobs-panel .job-menu-icon-action{
  width: 100%;
  min-height: 40px;
  padding: 7px 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #2A3547;
  font: 700 13px/1.2 "Plus Jakarta Sans", system-ui, sans-serif;
  cursor: pointer;
  text-align: left;
  transition: background .14s ease, color .14s ease;
}
.cc-op-app .cc-jobs-panel .job-menu-icon-action + .job-menu-icon-action{
  margin-top: 4px;
}
.cc-op-app .cc-jobs-panel .job-menu-icon-action__ico{
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cc-op-app .cc-jobs-panel .job-menu-icon-action__ico svg{
  width: 16px;
  height: 16px;
  display: block;
}
.cc-op-app .cc-jobs-panel .job-menu-icon-action--view .job-menu-icon-action__ico{
  color: #1E5EFF;
  background: rgba(30,94,255,.12);
}
.cc-op-app .cc-jobs-panel .job-menu-icon-action--edit .job-menu-icon-action__ico{
  color: #F59E0B;
  background: rgba(245,158,11,.14);
}
.cc-op-app .cc-jobs-panel .job-menu-icon-action--delete .job-menu-icon-action__ico{
  color: #EF4444;
  background: rgba(239,68,68,.12);
}
.cc-op-app .cc-jobs-panel .job-menu-icon-action--renew .job-menu-icon-action__ico{
  color: #18A873;
  background: rgba(24,168,115,.12);
}
.cc-op-app .cc-jobs-panel .job-menu-icon-action:hover{
  background: #F8FAFF;
  color: #6452FE;
}
.cc-op-app .cc-jobs-panel .job-menu-icon-action--delete:hover{
  background: rgba(239,68,68,.08);
  color: #EF4444;
}

/* Job detail card: icon-only action buttons (edit / delete / renew / resend) */
.cc-op-app .op-job-detail-actions,
.cc-op-app .op-job-detail-card--inline .op-job-detail-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cc-op-app .op-job-action-btn--icon,
.cc-op-app .op-job-detail-card--inline .op-job-action-btn--icon{
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: transform .12s ease, background .14s ease;
}
.cc-op-app .op-job-action-btn--icon:hover,
.cc-op-app .op-job-detail-card--inline .op-job-action-btn--icon:hover{
  transform: translateY(-1px);
  background: transparent !important;
}
.cc-op-app .op-job-action-btn--icon .op-job-action-btn__ico{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cc-op-app .op-job-action-btn--icon .op-job-action-btn__ico svg{
  width: 18px;
  height: 18px;
  display: block;
}
.cc-op-app .op-job-action-btn--icon.op-job-action-btn--edit .op-job-action-btn__ico,
.cc-op-app .op-job-action-btn--icon.edit .op-job-action-btn__ico{
  color: #F59E0B;
  background: rgba(245,158,11,.14);
}
.cc-op-app .op-job-action-btn--icon.op-job-action-btn--delete .op-job-action-btn__ico,
.cc-op-app .op-job-action-btn--icon.delete .op-job-action-btn__ico{
  color: #EF4444;
  background: rgba(239,68,68,.12);
}
.cc-op-app .op-job-action-btn--icon.op-job-action-btn--renew .op-job-action-btn__ico,
.cc-op-app .op-job-action-btn--icon.renew .op-job-action-btn__ico{
  color: #18A873;
  background: rgba(24,168,115,.12);
}
.cc-op-app .op-job-action-btn--icon.op-job-action-btn--resend .op-job-action-btn__ico,
.cc-op-app .op-job-action-btn--icon.resend .op-job-action-btn__ico{
  color: #6452FE;
  background: rgba(100,82,254,.12);
}
.cc-op-app .op-job-action-btn--icon.op-job-action-btn--view .op-job-action-btn__ico{
  color: #1E5EFF;
  background: rgba(30,94,255,.12);
}
.cc-op-app .op-job-action-btn--icon.op-job-action-btn--pay .op-job-action-btn__ico,
.cc-op-app .op-job-action-btn--icon.pay .op-job-action-btn__ico{
  color: #18A873;
  background: rgba(24,168,115,.12);
}
.cc-op-app .op-job-action-btn--icon.op-job-action-btn--attendance .op-job-action-btn__ico,
.cc-op-app .op-job-action-btn--icon.attendance .op-job-action-btn__ico{
  color: #1E5EFF;
  background: rgba(30,94,255,.12);
}
.cc-op-app .op-job-action-btn--icon.op-job-action-btn--rating .op-job-action-btn__ico,
.cc-op-app .op-job-action-btn--icon.rating .op-job-action-btn__ico{
  color: #F59E0B;
  background: rgba(245,158,11,.14);
}

.cc-op-app .op-job-customer-banner{
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid rgba(100,82,254,.16);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(100,82,254,.08), rgba(30,94,255,.05));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.cc-op-app .op-job-customer-banner__title{
  color: #2A3547;
  font: 800 14px/1.25 "Plus Jakarta Sans", system-ui, sans-serif;
}
.cc-op-app .op-job-customer-banner__text{
  margin-top: 3px;
  color: #5A607F;
  font: 600 12.5px/1.35 "Plus Jakarta Sans", system-ui, sans-serif;
}
.cc-op-app .op-job-customer-banner__actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* — Pagination (admin parity)
   Layout: [< 1 2 3 >]  ............................  10 заявок
   Numbered pill buttons + arrows on LEFT, total count on RIGHT. */
.cc-op-app .cc-jobs-pagination{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-top: 1px solid #ECEEF3;
  background: #fff;
  gap: 12px;
}
.cc-op-app .cc-jobs-pagination .aa-pagination__pages{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  order: 1;
}
.cc-op-app .cc-jobs-pagination .aa-pagination__info{
  order: 2;
  margin-left: auto;
  font-size: 13px;
  color: #7E84A3;
  font-weight: 500;
}
.cc-op-app .cc-jobs-pagination .aa-pagination__page{
  min-width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #131523;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.cc-op-app .cc-jobs-pagination .aa-pagination__page:hover{
  background: rgba(100,82,254,.08);
  color: #6452FE;
}
.cc-op-app .cc-jobs-pagination .aa-pagination__page--active{
  background: #EDE8FF !important;
  color: #6452FE !important;
}
.cc-op-app .cc-jobs-pagination .aa-pagination__page--prev,
.cc-op-app .cc-jobs-pagination .aa-pagination__page--next{
  border: 0;
  background: transparent;
  color: #5A6072;
  min-width: 32px;
  height: 32px;
  border-radius: 8px;
}
.cc-op-app .cc-jobs-pagination .aa-pagination__page--prev svg,
.cc-op-app .cc-jobs-pagination .aa-pagination__page--next svg{
  width: 16px;
  height: 16px;
}
.cc-op-app .cc-jobs-pagination .aa-pagination__page--prev:hover,
.cc-op-app .cc-jobs-pagination .aa-pagination__page--next:hover{
  border: 0;
  background: rgba(100,82,254,.08);
  color: #6452FE;
}
.cc-op-app .cc-jobs-pagination .aa-pagination__page--prev:disabled,
.cc-op-app .cc-jobs-pagination .aa-pagination__page--next:disabled{
  opacity: .4;
  cursor: default;
  pointer-events: none;
  border: 0;
  background: transparent;
  color: #5A6072;
}
.cc-op-app .cc-jobs-pagination .aa-pagination__ellipsis{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 32px;
  font-size: 13px;
  color: #9aa3b2;
}
.cc-op-app .cc-jobs-pagination .aa-pagination__expand{
  margin-left: 12px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--aa-border, #E6E9F4);
  background: #fff;
  color: #6452FE;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.cc-op-app .cc-jobs-pagination .aa-pagination__expand:hover{
  background: rgba(100,82,254,.06);
  border-color: rgba(100,82,254,.25);
}

/* — Sections: only one visible at a time — */
.cc-op-app .cc-jobs-sections .jobs-section{ display: none; }
.cc-op-app .cc-jobs-sections .jobs-section.active{ display: block; }

/* — Hide legacy old jobs-tabs row in customer cabinet (moved to dropdown) — */
.cc-op-app #cc-jobs-list-view .cc-jobs-head,
.cc-op-app #cc-jobs-list-view .op-jobs-tabs{ display: none !important; }

/* Drop unused old aa-panel--jobs-shell wrapper inside our new layout */
.cc-op-app .cc-jobs-sections .aa-panel--jobs-shell{
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Responsive: stack metric cards on narrow widths */
@media (max-width: 1100px){
  .cc-op-app .cc-jobs-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-op-app .cc-jobs-cards .aa-mcard:nth-child(3)::before{ display: none; }
}
@media (max-width: 720px){
  .cc-op-app .cc-jobs-cards{ grid-template-columns: 1fr; }
  .cc-op-app .cc-jobs-cards .aa-mcard::before{ display: none !important; }
  .cc-op-app .cc-jobs-toolbar{ flex-wrap: wrap; }
  .cc-op-app .cc-jobs-toolbar .aa-table-toolbar__search{ order: 3; flex-basis: 100%; }
}

/* ===================================================================
   Modernize Modal System — customer cabinet final pass
   Matches Modernize 08 Modal: white card, compact actions, no dividers.
   =================================================================== */
.cc-op-app .op-modal,
.cc-support-compose-overlay,
.cc-photo-modal-backdrop,
.bb-modal.is-open{
  background: rgba(19,21,35,.42) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cc-op-app .op-confirm-body,
.cc-op-app .op-modal-body,
.cc-op-app .op-job-detail-body,
.cc-support-compose-panel,
.cc-photo-modal,
.bb-modal__panel{
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(38,44,71,.16) !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

.cc-support-compose-overlay{
  background: rgba(255,255,255,.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.cc-op-app .op-confirm-body,
.cc-op-app .op-modal-body.cc-plan-activate-body,
.cc-support-compose-panel,
.bb-modal__panel{
  width: min(560px, calc(100vw - 48px)) !important;
  max-width: 560px !important;
  padding: 28px !important;
}
.bb-modal.is-open{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}
.bb-modal__backdrop{
  background: transparent !important;
}
.bb-modal__panel{
  margin: 0 !important;
  text-align: center;
}
.bb-modal__title,
.cc-support-compose-head h3,
.cc-photo-modal-title,
.cc-plan-activate-name{
  color: #131523 !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  letter-spacing: -.01em;
}
.bb-modal__title{
  margin: 0 0 14px !important;
  font-size: 24px !important;
  line-height: 1.32 !important;
  font-weight: 800 !important;
}
.bb-modal__text,
.cc-plan-activate-line,
.cc-photo-hint{
  color: #5A607F !important;
  font: 500 14px/1.55 "Plus Jakarta Sans", system-ui, sans-serif !important;
}
.bb-modal__icon{
  min-height: 132px !important;
  margin: 2px auto 14px !important;
}
.bb-modal__icon img{
  width: 120px !important;
  max-height: 132px !important;
  object-fit: contain !important;
}
.bb-modal__actions,
.cc-photo-actions,
.cc-plan-activate-actions{
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 22px !important;
}
.bb-modal__panel .bb-btn--xl,
.cc-photo-btn,
.cc-plan-activate-btn,
.cc-op-app .op-confirm-btn{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 99px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 22px !important;
  border-radius: 6px !important;
  font: 600 14px/1 "Plus Jakarta Sans", system-ui, sans-serif !important;
  box-shadow: none !important;
}
.bb-btn--green,
.bb-btn--purple,
.cc-photo-btn--primary,
.cc-plan-activate-btn,
.cc-op-app .op-confirm-ok{
  background: #6452FE !important;
  color: #fff !important;
  border: 0 !important;
}
.bb-btn--green:hover,
.bb-btn--purple:hover,
.cc-photo-btn--primary:hover,
.cc-plan-activate-btn:hover,
.cc-op-app .op-confirm-ok:hover{
  background: #5642F5 !important;
}
.bb-btn--ghost,
.cc-photo-btn--ghost,
.cc-op-app .op-confirm-cancel{
  background: transparent !important;
  border: 0 !important;
  color: #6452FE !important;
}
.bb-btn--ghost:hover,
.cc-photo-btn--ghost:hover,
.cc-op-app .op-confirm-cancel:hover{
  background: rgba(100,82,254,.08) !important;
  color: #5642F5 !important;
}
.bb-modal__close,
.op-close{
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #7E84A3 !important;
}
.bb-modal__close::before,
.bb-modal__close::after{
  background: currentColor !important;
}
.bb-modal__close:hover,
.op-close:hover{
  background: rgba(100,82,254,.08) !important;
  color: #6452FE !important;
}
.cc-photo-modal{
  width: min(420px, calc(100vw - 48px)) !important;
}
.cc-photo-modal-content{
  padding: 24px !important;
  gap: 14px !important;
}
.cc-photo-preview{
  height: 220px !important;
  border: 1px dashed #D9E1EC !important;
  border-radius: 8px !important;
}
.cc-plan-activate-total{
  border-top: 0 !important;
  padding-top: 0 !important;
}
.cc-support-compose-head{
  margin-bottom: 18px !important;
  padding-right: 34px;
}

/* ===================================================================
   Customer registration auth-flow
   Modernize-style centered staged card: no blue backdrop, purple accent.
   =================================================================== */
body.bb-page:has(.bb-auth-flow){
  background: #F2F0FB !important;
  padding-top: 0 !important;
  margin: 0 !important;
}

.bb-auth-flow{
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background:
    radial-gradient(760px 620px at -13% 40%, rgba(183,174,255,.56) 0 39%, rgba(183,174,255,0) 40%),
    radial-gradient(680px 570px at 112% -10%, rgba(215,211,255,.82) 0 42%, rgba(215,211,255,0) 43%),
    radial-gradient(760px 650px at 108% 98%, rgba(126,109,255,.20) 0 45%, rgba(126,109,255,0) 46%),
    radial-gradient(640px 540px at 20% -16%, rgba(245,244,255,.90) 0 42%, rgba(245,244,255,0) 43%),
    linear-gradient(135deg, #F7F6FC 0%, #F0EEFA 46%, #E8E4F8 100%);
  color: #131523;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow: hidden;
}

.bb-auth-flow::before,
.bb-auth-flow::after{
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 48% 52% 58% 42%;
  background: rgba(100,82,254,.06);
}

.bb-auth-flow::before{
  width: min(760px, 54vw);
  height: min(820px, 78vh);
  left: -220px;
  bottom: -22vh;
  transform: rotate(-18deg);
  box-shadow: inset -42px 44px 90px rgba(255,255,255,.18);
}

.bb-auth-flow::after{
  width: min(720px, 52vw);
  height: min(780px, 74vh);
  right: -210px;
  top: -22vh;
  transform: rotate(15deg);
  background: rgba(100,82,254,.055);
  box-shadow: inset 34px -38px 92px rgba(62,43,194,.07);
}

.bb-auth-flow__brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: center;
  color: #fff;
}

.bb-auth-flow__brand-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-auth-flow__brand-mark svg path:first-child{
  fill: #fff;
}

.bb-auth-flow__brand-text{
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
}

.bb-auth-flow__brand-text span{
  color: rgba(255,255,255,.72);
}

.bb-auth-flow__card{
  position: relative;
  z-index: 1;
  width: min(548px, 100%);
  background: linear-gradient(180deg, #FFFFFF 0%, #FEFEFF 100%);
  border: 1px solid rgba(214,218,236,.90);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(49,43,91,.12), 0 4px 16px rgba(38,44,71,.05);
  padding: 28px 46px 24px;
  overflow: hidden;
}

.bb-auth-flow__card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #6452FE 0%, #9284FF 62%, #1FD286 100%);
}

.bb-auth-flow__card::after{
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -96px;
  top: -104px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100,82,254,.09) 0 38%, rgba(100,82,254,0) 70%);
  pointer-events: none;
}

.bb-auth-flow__progress,
.bb-auth-flow__stage{
  position: relative;
  z-index: 1;
}

.bb-auth-flow__progress{
  display: grid;
  grid-template-columns: 28px 1fr 28px 1fr 28px;
  align-items: center;
  gap: 10px;
  width: min(280px, 100%);
  margin: 0 auto 16px;
}

.bb-auth-flow__dot{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F3F4F8;
  color: #7E84A3;
  font-size: 12px;
  font-weight: 800;
}

.bb-auth-flow__dot.is-active{
  background: #6452FE;
  color: #fff;
  box-shadow: 0 4px 12px rgba(100,82,254,.28);
}

.bb-auth-flow__dot.is-done{
  background: rgba(31,210,134,.14);
  color: #1EAD72;
}

.bb-auth-flow__line{
  height: 1px;
  background: #E6E9F4;
}

.bb-auth-flow__stage{
  display: none;
}

.bb-auth-flow__stage.is-active{
  display: block;
}

.bb-auth-flow__head{
  text-align: center;
  margin: 0 auto 18px;
  padding: 18px 18px 16px;
  border: 1px solid #ECEEFA;
  border-radius: 12px;
  background:
    radial-gradient(180px 120px at 100% 0%, rgba(100,82,254,.10), rgba(100,82,254,0) 72%),
    linear-gradient(180deg, #FAFAFF 0%, #F7F8FE 100%);
}

.bb-auth-flow__eyebrow{
  margin: 0 0 8px;
  color: #6452FE;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bb-auth-flow__title{
  margin: 0;
  color: #131523;
  font-size: 30px;
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: 0;
}

.bb-auth-flow__subtitle{
  max-width: 430px;
  margin: 9px auto 0;
  color: #5A607F;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}

.bb-auth-flow__subtitle strong{
  color: #131523;
  font-weight: 800;
  white-space: nowrap;
}

.bb-auth-flow__form{
  display: grid;
  gap: 12px;
}

.bb-auth-flow .bb-field__label{
  margin-bottom: 7px;
  color: #5A607F;
  font-size: 13px;
  font-weight: 600;
}

.bb-auth-flow .bb-input.bb-auth-flow__input{
  height: 48px;
  border: 1px solid #D7DBEC;
  border-radius: 6px !important;
  background: #FCFDFF !important;
  padding: 0 16px !important;
  color: #131523;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}

.bb-auth-flow .bb-input.bb-auth-flow__input::placeholder{
  color: #A1A7C4;
  font-weight: 500;
}

.bb-auth-flow .bb-input.bb-auth-flow__input:focus{
  outline: none !important;
  border-color: #6452FE !important;
  box-shadow: 0 0 0 4px rgba(100,82,254,.12) !important;
}

/* Mini-app WebView: visible caret, no system-blue focus ring */
.bb-auth-flow input,
.bb-auth-flow textarea,
.bb-auth-flow .bb-otp__digit{
  caret-color: #6452FE;
  accent-color: #6452FE;
  -webkit-tap-highlight-color: transparent;
}

.bb-auth-flow input[type="tel"],
.bb-auth-flow input[name="name"],
.bb-auth-flow .bb-input.bb-auth-flow__input{
  background-image: none !important;
  padding-left: 16px !important;
  -webkit-appearance: none;
  appearance: none;
}

.bb-auth-flow .bb-btn--purple,
.bb-auth-flow .bb-auth-flow__submit{
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(180deg, #7161FF 0%, #6452FE 100%) !important;
  color: #fff !important;
}

.bb-auth-flow .bb-btn--purple:focus,
.bb-auth-flow .bb-btn--purple:focus-visible,
.bb-auth-flow .bb-auth-flow__submit:focus,
.bb-auth-flow .bb-auth-flow__submit:focus-visible{
  outline: none !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 4px rgba(100,82,254,.28) !important;
}

.bb-auth-flow__submit,
.bb-auth-flow .bb-btn--purple.bb-auth-flow__submit{
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #7161FF 0%, #6452FE 100%) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.bb-auth-flow__submit:hover,
.bb-auth-flow .bb-btn--purple.bb-auth-flow__submit:hover{
  background: linear-gradient(180deg, #6654FF 0%, #5845F1 100%) !important;
}

.bb-auth-flow .bb-btn:disabled{
  opacity: .68;
  cursor: progress;
  transform: none;
}

.bb-auth-flow__ghost,
.bb-auth-flow .bb-btn--ghost.bb-auth-flow__ghost{
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 6px !important;
  border: 1px solid #D7DBEC !important;
  background: #fff !important;
  color: #6452FE !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.bb-auth-flow__ghost:hover,
.bb-auth-flow .bb-btn--ghost.bb-auth-flow__ghost:hover{
  background: #F8FAFF !important;
}

.bb-auth-flow__hint{
  min-height: 20px;
  margin: -2px 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
}

.bb-auth-flow__links{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
}

.bb-auth-flow .bb-link{
  min-height: 34px;
  color: #6452FE;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
  text-decoration: none;
}

.bb-auth-flow__links .bb-link{
  width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

.bb-auth-flow__links #bbResendPhone{
  display: inline-flex !important;
  margin: 0 !important;
}

.bb-auth-flow .bb-link:hover{
  color: #5642F5;
  text-decoration: underline;
}

.bb-auth-flow__otp{
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px !important;
  margin: 0 !important;
}

.bb-auth-flow .bb-otp__digit{
  width: 100%;
  height: 48px;
  border: 1px solid #D7DBEC;
  border-radius: 6px;
  color: #131523;
  font-size: 18px;
  font-weight: 800;
  box-shadow: none;
}

.bb-auth-flow .bb-otp__digit:focus{
  outline: none !important;
  border-color: #6452FE !important;
  box-shadow: 0 0 0 4px rgba(100,82,254,.12) !important;
}

.bb-auth-flow__signin{
  margin: 0;
  color: #5A607F;
  font-size: 13px;
  font-weight: 600;
}

.bb-auth-flow__signin a{
  color: #6452FE;
  font-weight: 800;
}

.bb-auth-flow__card--simple{
  width: min(500px, 100%);
}

.bb-auth-flow--company{
  justify-content: flex-start;
  gap: 14px;
  padding: 28px 28px 34px;
  overflow-x: hidden;
  overflow-y: auto;
}

.bb-auth-flow--company .lz-container{
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  max-width: 1120px;
  padding: 0;
}

.bb-auth-flow--company .bb-onboard__card{
  position: relative;
  width: 100%;
  max-width: none;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 22px;
  margin: 0;
  padding: 22px;
  border: 1px solid rgba(214,218,236,.90);
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FEFEFF 100%);
  box-shadow: 0 24px 64px rgba(49,43,91,.12), 0 4px 16px rgba(38,44,71,.05);
  overflow: hidden;
}

.bb-auth-flow--company .bb-onboard__card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #6452FE 0%, #8E7CFF 58%, #1FD286 100%);
}

.bb-auth-flow--company .bb-onboard__card::after{
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -142px;
  top: -154px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100,82,254,.08) 0 38%, rgba(100,82,254,0) 70%);
  pointer-events: none;
}

.bb-auth-flow--company .bb-steps,
.bb-auth-flow--company .bb-onboard__content{
  position: relative;
  z-index: 1;
}

.bb-auth-flow--company .bb-steps{
  padding: 2px 18px 2px 0;
  border-right: 1px solid #E6E9F4;
}

.bb-auth-flow--company .bb-steps__title{
  margin: 0 0 18px;
  color: #131523;
  font-size: 19px;
  line-height: 1.28;
  font-weight: 800;
}

.bb-auth-flow--company .bb-steps__list{
  gap: 12px;
}

.bb-auth-flow--company .bb-steps__item{
  gap: 10px;
  color: #5A607F;
  font-size: 13px;
  line-height: 1.38;
  font-weight: 600;
}

.bb-auth-flow--company .bb-steps__badge{
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #F3F4F8;
  color: #7E84A3;
  font-size: 12px;
}

.bb-auth-flow--company .bb-steps__item.is-active .bb-steps__badge{
  background: #6452FE;
  color: #fff;
  box-shadow: 0 4px 12px rgba(100,82,254,.28);
}

.bb-auth-flow--company .bb-steps__item.is-done .bb-steps__badge{
  background: rgba(31,210,134,.14);
  color: #1EAD72;
}

.bb-auth-flow--company .bb-onboard__content{
  min-height: 0;
  padding: 0;
}

.bb-auth-flow--company .bb-onboard__title{
  margin: 0 0 16px;
  color: #131523;
  font-size: 24px;
  line-height: 1.22;
  font-weight: 800;
}

.bb-auth-flow--company .bb-form--grid{
  gap: 12px;
}

.bb-auth-flow--company .bb-grid{
  gap: 12px;
}

.bb-auth-flow--company .bb-field__label{
  margin-bottom: 7px;
  color: #5A607F;
  font-size: 13px;
  font-weight: 600;
}

.bb-auth-flow--company .bb-input,
.bb-auth-flow--company .bb-dd__header{
  min-height: 44px;
  border: 1px solid #D7DBEC !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #131523;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none !important;
}

.bb-auth-flow--company .bb-input:not(.bb-input--textarea){
  height: 44px;
  padding: 0 14px !important;
}

.bb-auth-flow--company .bb-input--textarea{
  min-height: 88px;
  padding: 12px 14px !important;
  resize: vertical;
}

.bb-auth-flow--company .bb-input:focus,
.bb-auth-flow--company .bb-dd.is-open .bb-dd__header{
  border-color: #6452FE !important;
  box-shadow: 0 0 0 4px rgba(100,82,254,.10) !important;
}

.bb-auth-flow--company .bb-dd__text,
.bb-auth-flow--company .bb-dd__text.is-placeholder{
  color: #A1A7C4;
  font-size: 14px;
  font-weight: 500;
}

.bb-auth-flow--company #bbCityDropdown .bb-dd__header{
  height: 44px;
}

.bb-auth-flow--company .bb-drop__box{
  min-height: 92px;
  padding: 14px;
  border-color: #D7DBEC;
  border-radius: 8px;
  background: #F8FAFF;
}

.bb-auth-flow--company .bb-drop__plus{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(100,82,254,.12);
  color: #6452FE;
  font-size: 24px;
}

.bb-auth-flow--company .bb-drop__preview{
  height: 82px;
}

.bb-auth-flow--company .bb-form__actions{
  justify-content: flex-start;
  gap: 14px;
  margin-top: 10px;
}

.bb-auth-flow--company .bb-form__actions .bb-btn{
  min-width: 176px;
  height: 46px;
  min-height: 46px;
  border-radius: 6px !important;
  background: #6452FE;
  font-size: 14px;
  font-weight: 700;
  box-shadow: none;
}

.bb-auth-flow--company .bb-form__hint{
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.bb-auth-flow--company .bb-email-step{
  max-width: 560px;
  margin: 0 auto;
  padding-top: 2px;
}

.bb-auth-flow--company .bb-email-step__icon img{
  width: 150px;
}

.bb-auth-flow--company .bb-email-step__text{
  color: #5A607F;
  font-size: 13px;
}

.bb-auth-flow--company .bb-btn--confirm{
  width: min(360px, 100%);
  height: 48px;
  border-radius: 6px;
  background: #6452FE;
}

.bb-auth-flow--company .bb-email-step__footer{
  align-items: center;
  margin-top: 14px;
}

.bb-auth-flow--company .bb-btn--back{
  height: 42px;
  border-radius: 6px;
  background: #6452FE;
}

.bb-auth-flow--company .bb-done-step{
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  margin-top: 2px;
}

.bb-auth-flow--company .bb-done-step__lead{
  margin-bottom: 14px;
  color: #131523;
  font-size: 17px;
  line-height: 1.5;
}

.bb-auth-flow--company .bb-done-step__p{
  color: #5A607F;
  font-size: 13px;
}

.bb-auth-flow--company .bb-done-step__p--strong{
  color: #131523;
  font-size: 17px;
}

.bb-auth-flow--company .bb-done-step__art img{
  width: 230px;
  transform: translateY(18px);
}

@media (prefers-reduced-motion: no-preference){
  .bb-auth-flow__card{
    animation: bb-auth-flow-enter .24s ease-out both;
  }
  .bb-auth-flow__stage.is-active{
    animation: bb-auth-stage-enter .18s ease-out both;
  }
  @keyframes bb-auth-flow-enter{
    from{ opacity: 0; transform: translateY(8px); }
    to{ opacity: 1; transform: translateY(0); }
  }
  @keyframes bb-auth-stage-enter{
    from{ opacity: 0; transform: translateY(8px); }
    to{ opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 720px){
  .bb-auth-flow{
    padding: 24px 16px;
    align-items: start;
  }
  .bb-auth-flow__card{
    min-height: 0;
    padding: 34px 22px 28px;
  }
  .bb-auth-flow__progress{
    margin-bottom: 28px;
  }
  .bb-auth-flow__title{
    font-size: 30px;
  }
  .bb-auth-flow__subtitle{
    font-size: 14px;
  }
  .bb-auth-flow__otp{
    gap: 7px !important;
  }
  .bb-auth-flow .bb-otp__digit{
    height: 50px;
    font-size: 18px;
  }
  .bb-auth-flow__brand-text{
    font-size: 20px;
  }
}

@media (max-width: 980px){
  .bb-auth-flow--company{
    padding: 18px 16px 28px;
  }
  .bb-auth-flow--company .bb-onboard__card{
    grid-template-columns: 1fr;
  }
  .bb-auth-flow--company .bb-steps{
    border-right: 0;
    border-bottom: 1px solid #E6E9F4;
    padding: 0 0 16px;
  }
  .bb-auth-flow--company .bb-steps__list{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bb-auth-flow--company .bb-steps__item{
    flex-direction: column;
    gap: 7px;
  }
  .bb-auth-flow--company .bb-done-step{
    grid-template-columns: 1fr;
  }
  .bb-auth-flow--company .bb-done-step__art{
    justify-content: flex-start;
  }
}

@media (max-width: 720px){
  .bb-auth-flow--company .bb-onboard__card{
    padding: 18px;
  }
  .bb-auth-flow--company .bb-steps__list{
    grid-template-columns: 1fr 1fr;
  }
  .bb-auth-flow--company .bb-grid__col-8,
  .bb-auth-flow--company .bb-grid__col-6,
  .bb-auth-flow--company .bb-grid__col-4{
    grid-column: span 12;
  }
  .bb-auth-flow--company .bb-onboard__title{
    font-size: 22px;
  }
}

/* Registration forms final polish: plain admin-like surface, no decorative gradients. */
body.bb-page:has(.bb-auth-flow){
  background: #F5F6FA !important;
}

.bb-auth-flow{
  background: #F5F6FA !important;
}

.bb-auth-flow::before,
.bb-auth-flow::after{
  display: none !important;
}

.bb-auth-flow__card,
.bb-auth-flow--company .bb-onboard__card{
  background: #fff !important;
  border: 1px solid #E6E9F4 !important;
  box-shadow: 0 10px 34px rgba(38,44,71,.08) !important;
}

.bb-auth-flow__card::before,
.bb-auth-flow--company .bb-onboard__card::before{
  background: #6452FE !important;
}

.bb-auth-flow__card::after,
.bb-auth-flow--company .bb-onboard__card::after{
  display: none !important;
}

.bb-auth-flow__head{
  background: #F8FAFF !important;
}

.bb-auth-flow__submit,
.bb-auth-flow .bb-btn--purple.bb-auth-flow__submit,
.bb-auth-flow--company .bb-form__actions .bb-btn,
.bb-auth-flow--company .bb-btn--confirm,
.bb-auth-flow--company .bb-btn--back{
  background: #6452FE !important;
  box-shadow: none !important;
}

.bb-auth-flow__submit:hover,
.bb-auth-flow .bb-btn--purple.bb-auth-flow__submit:hover,
.bb-auth-flow--company .bb-form__actions .bb-btn:hover,
.bb-auth-flow--company .bb-btn--confirm:hover,
.bb-auth-flow--company .bb-btn--back:hover{
  background: #5845F1 !important;
}

.bb-auth-flow--company .bb-onboard__card{
  padding: 28px 30px 30px;
}

.bb-auth-flow--company .bb-onboard__content{
  padding: 2px 0 0;
}

.bb-auth-flow--company .bb-onboard__title{
  margin-bottom: 18px;
}

.bb-company-photo{
  display: grid;
  justify-items: center;
  gap: 9px;
  margin: 0 0 24px;
}

.bb-company-photo > .bb-field__label{
  display: none;
}

.bb-company-photo__drop{
  width: auto;
  height: auto;
  display: inline-grid;
  justify-items: center;
  gap: 8px;
  cursor: pointer;
  inline-size: max-content;
}

.bb-auth-flow--company .bb-company-photo .bb-drop__box{
  display: grid;
  place-items: center;
  position: relative;
  width: 82px;
  height: 82px;
  min-height: 82px;
  padding: 0;
  border: 0 !important;
  border-radius: 50% !important;
  background: #ECEEF4 !important;
  box-shadow: inset 0 0 0 1px rgba(19,21,35,.03);
  overflow: hidden;
}

.bb-auth-flow--company .bb-company-photo .bb-drop__box:hover,
.bb-auth-flow--company .bb-company-photo .bb-drop__box:focus-visible,
.bb-company-photo__drop:hover .bb-drop__box,
.bb-company-photo__drop:focus-within .bb-drop__box{
  background: #E6E8EF !important;
  box-shadow: 0 0 0 4px rgba(100,82,254,.12);
  outline: none;
}

.bb-auth-flow--company .bb-company-photo .bb-drop__box > *{
  grid-area: 1 / 1;
}

.bb-auth-flow--company .bb-company-photo .bb-drop__plus{
  position: relative;
  display: block;
  width: 28px;
  height: 22px;
  border-radius: 4px;
  background: #3F424A;
  color: transparent;
  font-size: 0;
}

.bb-auth-flow--company .bb-company-photo .bb-drop__plus::before{
  content: "";
  position: absolute;
  width: 12px;
  height: 6px;
  left: 8px;
  top: -5px;
  border-radius: 3px 3px 0 0;
  background: #3F424A;
}

.bb-auth-flow--company .bb-company-photo .bb-drop__plus::after{
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  left: 9px;
  top: 7px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.bb-auth-flow--company .bb-company-photo .bb-drop__preview{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  place-items: center;
  border-radius: 50%;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transform: translateZ(0);
}

.bb-auth-flow--company .bb-company-photo .bb-drop__preview-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
  transform: none !important;
}

.bb-auth-flow--company .bb-company-photo .bb-company-photo__drop.has-preview .bb-drop__plus{
  display: none !important;
}

.bb-auth-flow--company .bb-company-photo .bb-company-photo__drop.has-preview .bb-drop__box{
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(100,82,254,.12);
}

.bb-auth-flow--company .bb-company-photo .bb-company-photo__drop.has-preview .bb-drop__preview{
  display: grid !important;
  opacity: 1 !important;
}

.bb-company-photo__text{
  color: #6452FE;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color .16s ease;
}

.bb-company-photo__drop:hover .bb-company-photo__text,
.bb-company-photo__drop:focus-within .bb-company-photo__text{
  color: #5845F1;
}

.bb-company-photo #bbLogoError{
  min-height: 16px;
  text-align: center;
}

.bb-auth-flow--company .bb-grid{
  gap: 18px 60px;
}

.bb-auth-flow--company .bb-input,
.bb-auth-flow--company .bb-dd__header{
  background: #F6F7FB !important;
}

.bb-auth-flow--company .bb-input:not(.bb-input--textarea),
.bb-auth-flow--company #bbCityDropdown .bb-dd__header{
  height: 52px;
  min-height: 52px;
  padding: 0 16px !important;
}

.bb-auth-flow--company .bb-input--textarea{
  min-height: 104px;
}

@media (max-width: 720px){
  .bb-auth-flow--company .bb-grid{
    gap: 14px;
  }
  .bb-company-photo{
    margin-bottom: 18px;
  }
}

/* Auth/company scale correction after review. */
.bb-auth-flow__head{
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.bb-auth-flow__title{
  font-size: 28px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
}

.bb-auth-flow__subtitle{
  font-size: 13px !important;
  font-weight: 500 !important;
}

.bb-auth-flow--company .bb-onboard__card{
  grid-template-columns: 220px minmax(0, 1fr) !important;
  max-width: 1060px !important;
  padding: 24px 26px 26px !important;
}

.bb-auth-flow--company .bb-onboard__title{
  font-size: 23px !important;
  font-weight: 800 !important;
}

.bb-company-photo{
  gap: 8px !important;
  margin-bottom: 18px !important;
}

.bb-auth-flow--company .bb-company-photo .bb-drop__box{
  width: 76px !important;
  height: 76px !important;
  min-height: 76px !important;
}

.bb-company-photo__drop{
  width: auto !important;
  height: auto !important;
  inline-size: max-content !important;
}

.bb-company-photo__text{
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.bb-auth-flow--company .bb-grid{
  gap: 14px 34px !important;
}

.bb-auth-flow--company .bb-field__label{
  margin-bottom: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.bb-auth-flow--company .bb-input,
.bb-auth-flow--company .bb-dd__header{
  font-size: 13px !important;
  font-weight: 400 !important;
}

.bb-auth-flow--company .bb-input:not(.bb-input--textarea),
.bb-auth-flow--company #bbCityDropdown .bb-dd__header{
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 14px !important;
}

.bb-auth-flow--company .bb-input--textarea{
  min-height: 88px !important;
  padding: 11px 14px !important;
}

.bb-auth-flow--company .bb-form__actions .bb-btn{
  height: 44px !important;
  min-height: 44px !important;
  min-width: 160px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

@media (max-width: 980px){
  .bb-auth-flow--company .bb-onboard__card{
    grid-template-columns: 1fr !important;
  }
}

/* Final customer-cabinet UI audit overrides: dropdown consistency. */
.cc-op-app .aa-select.aa-select--toolbar::after{
  content:"" !important;
  position:absolute !important;
  right:12px !important;
  top:50% !important;
  width:16px !important;
  height:16px !important;
  margin:0 !important;
  background:var(--cc-select-chevron) no-repeat center / 16px 16px !important;
  clip-path:none !important;
  transform:translateY(-50%) !important;
  transition:transform .18s ease, opacity .18s ease !important;
  pointer-events:none !important;
  opacity:.9 !important;
}
.cc-op-app .aa-select.aa-select--toolbar.is-open::after{
  transform:translateY(-50%) rotate(180deg) !important;
}
.cc-op-app .cc-jobs-toolbar .aa-select.aa-select--toolbar.is-open::after{
  transform:translateY(-50%) rotate(180deg) !important;
}
.cc-op-app .aa-select.aa-select--toolbar .aa-select__chevron{
  display:none !important;
}
.cc-op-app .bb-dd .bb-dd__icons::before{
  content:"" !important;
  display:block !important;
  position:static !important;
  width:16px !important;
  height:16px !important;
  background:var(--cc-select-chevron) no-repeat center / 16px 16px !important;
  clip-path:none !important;
  transform:none !important;
  transition:transform .18s ease, opacity .18s ease !important;
}
.cc-op-app .bb-dd.is-open .bb-dd__icons::before{
  transform:rotate(180deg) !important;
}
.cc-op-app .cc-support-form__grid{
  grid-template-columns:1fr !important;
}
.cc-op-app .cc-support-dd,
.cc-op-app .cc-support-dd .bb-dd__header{
  width:100% !important;
}
.cc-op-app .cc-support-compose-panel{
  max-width:560px !important;
  max-height:calc(100vh - 48px) !important;
}

/* Customer registration onboarding: compact staged company form. */
.bb-auth-flow--company .lz-container{
  width: min(980px, 100%) !important;
  max-width: 980px !important;
}

.bb-auth-flow--company .bb-onboard__card{
  grid-template-columns: 214px minmax(0, 1fr) !important;
  min-height: 560px !important;
  padding: 26px !important;
  border-radius: 14px !important;
}

.bb-auth-flow--company .bb-steps{
  padding-right: 22px !important;
}

.bb-auth-flow--company .bb-steps__title{
  margin-bottom: 22px !important;
  font-size: 22px !important;
  line-height: 1.22 !important;
}

.bb-auth-flow--company .bb-steps__list{
  gap: 14px !important;
}

.bb-auth-flow--company .bb-steps__item{
  align-items: center !important;
  color: #5A607F !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.bb-auth-flow--company .bb-steps__item--muted{
  opacity: .58;
}

.bb-auth-flow--company .bb-steps__badge{
  width: 26px !important;
  height: 26px !important;
  border-radius: 9px !important;
}

.bb-auth-flow--company .bb-onboard__content{
  min-height: 500px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bb-auth-flow--company .bb-step-panel{
  width: 100%;
}

.bb-form-page{
  display: none;
  min-height: 500px;
}

.bb-form-page.is-active{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bb-onboard__head{
  margin-bottom: 18px;
}

.bb-onboard__eyebrow{
  margin: 0 0 8px;
  color: #6452FE;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bb-auth-flow--company .bb-onboard__title{
  margin: 0 !important;
  color: #131523 !important;
  font-size: 25px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
}

.bb-onboard__subtitle{
  max-width: 500px;
  margin: 8px 0 0;
  color: #5A607F;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
}

.bb-auth-flow--company .bb-grid{
  gap: 14px 18px !important;
}

.bb-auth-flow--company .bb-field__label{
  color: #4D5268 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.bb-auth-flow--company .bb-input,
.bb-auth-flow--company .bb-dd__header{
  border-color: #D7DBEC !important;
  background: #F7F8FC !important;
  color: #131523 !important;
}

.bb-auth-flow--company .bb-input:not(.bb-input--textarea),
.bb-auth-flow--company #bbCityDropdown .bb-dd__header{
  height: 46px !important;
  min-height: 46px !important;
}

.bb-auth-flow--company .bb-input--textarea{
  min-height: 118px !important;
}

.bb-auth-flow--company .bb-form__actions{
  min-height: 44px;
  margin-top: 18px !important;
}

.bb-form__actions--split{
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr);
  justify-content: start !important;
}

.bb-auth-flow--company .bb-form__actions .bb-btn{
  min-width: 148px !important;
  height: 44px !important;
  min-height: 44px !important;
}

.bb-auth-flow--company .bb-form__actions .bb-btn--ghost{
  border: 1px solid #D7DBEC !important;
  background: #fff !important;
  color: #6452FE !important;
}

.bb-company-photo{
  margin-bottom: 18px !important;
}

.bb-company-photo__drop,
.bb-auth-flow--company .bb-company-photo .bb-drop__box{
  width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
}

.bb-company-photo__text{
  color: #6452FE !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.bb-email-step{
  max-width: 560px !important;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center;
}

.bb-email-step__icon{
  margin: 0 0 12px !important;
}

.bb-email-step__icon img{
  width: 118px !important;
  height: 118px !important;
  object-fit: contain;
}

.bb-email-step .bb-onboard__title{
  margin-bottom: 10px !important;
}

.bb-email-step__text{
  max-width: 460px !important;
  margin: 0 auto 18px !important;
  color: #5A607F !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.bb-email-step__email{
  color: #131523 !important;
  font-weight: 800 !important;
}

.bb-email-step__otp{
  display: grid !important;
  grid-template-columns: repeat(6, 50px) !important;
  justify-content: center;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.bb-auth-flow--company .bb-email-step .bb-otp__digit{
  width: 50px !important;
  height: 50px !important;
  border-radius: 8px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.bb-auth-flow--company .bb-btn--confirm{
  width: min(360px, 100%) !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 auto !important;
}

.bb-email-step__links{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 12px;
}

.bb-email-step__footer{
  align-items: center !important;
  margin-top: 12px !important;
}

.bb-done-step{
  min-height: 500px;
  grid-template-columns: minmax(0, 1fr) 230px !important;
  align-items: center !important;
  gap: 30px !important;
  margin: 0 !important;
}

.bb-done-step__lead{
  margin: 18px 0 12px !important;
  color: #131523 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
}

.bb-done-step__p{
  max-width: 470px;
  color: #5A607F !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.bb-done-step__p--strong{
  margin-top: 18px !important;
  color: #131523 !important;
  font-size: 18px !important;
}

.bb-done-step__art{
  justify-content: center !important;
}

.bb-done-step__art img{
  width: 190px !important;
  transform: none !important;
  filter: drop-shadow(0 18px 28px rgba(31, 210, 134, .18)) !important;
}

@media (max-width: 980px){
  .bb-auth-flow--company .bb-onboard__card{
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .bb-auth-flow--company .bb-onboard__content,
  .bb-form-page,
  .bb-email-step,
  .bb-done-step{
    min-height: 0 !important;
  }
  .bb-form__actions--split{
    grid-template-columns: 1fr 1fr !important;
  }
  .bb-form__actions--split .bb-form__hint{
    grid-column: 1 / -1;
  }
}

/* ===================================================================
   Customer auth market polish: compact centered shell for login/register
   and the same-sized modal step window for OTP/password/change flows.
   =================================================================== */
body.bb-page:has(.bb-auth-flow){
  background: #f2efff !important;
}

.bb-auth-flow{
  min-height: 100vh;
  min-height: 100dvh;
  padding: 28px 18px !important;
  background: #f2efff !important;
}

.bb-auth-flow::before,
.bb-auth-flow::after{
  display: none !important;
}

.bb-auth-flow__card{
  width: min(456px, 100%) !important;
  min-height: 548px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 24px 70px rgba(55, 54, 115, .16), 0 4px 18px rgba(43, 52, 91, .06) !important;
  padding: 34px 40px 28px !important;
}

.bb-auth-flow__card::before,
.bb-auth-flow__card::after{
  display: none !important;
}

.bb-auth-flow__logo{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  line-height: 1;
}

.bb-auth-flow__progress{
  grid-row: 2;
  margin: 30px auto 18px !important;
}

.bb-auth-flow__stage{
  grid-row: 3;
}

.bb-auth-flow__stage.is-active{
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

.bb-auth-flow__logo img{
  width: 188px;
  height: auto;
  display: block;
  flex: 0 0 auto;
}

.bb-auth-flow__logo span{
  display: none;
}

.bb-auth-flow__head{
  margin: 0 auto 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.bb-auth-flow__eyebrow{
  margin-bottom: 10px !important;
  color: #6452FE !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}

.bb-auth-flow__title,
.bb-modal__title{
  color: #18172f !important;
  font-size: 28px !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}

.bb-auth-flow__subtitle{
  max-width: 350px;
  margin-top: 10px !important;
  color: #6f7488 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
}

.bb-auth-flow__form{
  gap: 18px !important;
}

.bb-auth-flow .bb-field__label{
  margin-bottom: 9px !important;
  color: #27293f !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.bb-auth-flow .bb-input.bb-auth-flow__input,
.bb-modal__panel .bb-input{
  height: 44px !important;
  min-height: 44px !important;
  border: 1px solid #dfe3ee !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #18172f !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  box-shadow: 0 8px 18px rgba(19, 21, 35, .035) !important;
}

.bb-auth-flow .bb-input.bb-auth-flow__input:focus,
.bb-modal__panel .bb-input:focus{
  outline: none !important;
  border-color: #6452FE !important;
  box-shadow: 0 0 0 4px rgba(100,82,254,.12) !important;
}

.bb-auth-flow__submit,
.bb-auth-flow .bb-btn--purple.bb-auth-flow__submit,
.bb-modal__panel .bb-btn--xl{
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 8px !important;
  background: #5d4bff !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: 0 14px 26px rgba(93,75,255,.18) !important;
}

.bb-auth-flow__submit:hover,
.bb-auth-flow .bb-btn--purple.bb-auth-flow__submit:hover,
.bb-modal__panel .bb-btn--xl:hover{
  background: #523ff0 !important;
  box-shadow: 0 16px 30px rgba(93,75,255,.20) !important;
}

.bb-auth-flow__ghost,
.bb-auth-flow .bb-btn--ghost.bb-auth-flow__ghost,
.bb-modal__panel .bb-btn--ghost{
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid #dfe3ee !important;
  color: #5d4bff !important;
  box-shadow: none !important;
}

.bb-auth-flow__hint{
  min-height: 18px !important;
}

.bb-auth-flow__signin{
  grid-row: 4;
  align-self: end;
  width: 100%;
  margin: 26px 0 0 !important;
  padding-top: 20px;
  border-top: 1px solid #edf0f7;
  color: #6f7488 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  text-align: center;
}

.bb-auth-flow__signin a{
  color: #5d4bff !important;
  text-decoration: none;
}

body.bb-page:has(.bb-auth-flow) .bb-modal.is-open{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: #f2efff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.bb-page:has(.bb-auth-flow) .bb-modal__backdrop{
  background: transparent !important;
}

body.bb-page:has(.bb-auth-flow) .bb-modal__panel{
  width: min(456px, calc(100vw - 32px)) !important;
  max-width: 456px !important;
  min-height: 548px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 24px 70px rgba(55, 54, 115, .16), 0 4px 18px rgba(43, 52, 91, .06) !important;
  padding: 36px 40px 32px !important;
  text-align: center;
}

body.bb-page:has(.bb-auth-flow) .bb-modal__panel .bb-auth-flow__logo{
  margin-bottom: 28px;
}

body.bb-page:has(.bb-auth-flow) .bb-modal__title{
  margin: 0 0 12px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-modal__text,
body.bb-page:has(.bb-auth-flow) .bb-modal__help{
  max-width: 350px;
  margin: 0 auto 18px !important;
  color: #6f7488 !important;
  font: 600 13px/1.55 "Plus Jakarta Sans", system-ui, sans-serif !important;
}

body.bb-page:has(.bb-auth-flow) .bb-modal__text-phone{
  margin-top: 3px;
  color: #18172f !important;
  font-weight: 850 !important;
}

body.bb-page:has(.bb-auth-flow) .bb-modal__icon{
  min-height: 116px !important;
  margin: 2px auto 14px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-modal__icon img{
  width: 104px !important;
  max-height: 116px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-modal__panel .bb-btn--xl{
  width: 100% !important;
  max-width: none !important;
}

body.bb-page:has(.bb-auth-flow) .bb-modal__panel .bb-form--modal,
body.bb-page:has(.bb-auth-flow) .bb-modal__panel .bb-otp{
  display: grid;
  gap: 14px;
  width: 100%;
}

body.bb-page:has(.bb-auth-flow) .bb-otp__inputs{
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px !important;
  width: 100%;
  margin: 0 !important;
}

body.bb-page:has(.bb-auth-flow) .bb-otp__digit{
  width: 100% !important;
  height: 44px !important;
  border: 1px solid #dfe3ee !important;
  border-radius: 8px !important;
  color: #18172f !important;
  box-shadow: 0 8px 18px rgba(19, 21, 35, .035) !important;
}

body.bb-page:has(.bb-auth-flow) .bb-modal__panel .bb-link{
  min-height: 28px !important;
  margin: 2px auto !important;
  color: #6452FE !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body.bb-page:has(.bb-auth-flow) .bb-modal__panel .bb-link--muted{
  color: rgba(100,82,254,.68) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

body.bb-page:has(.bb-auth-flow) .bb-phonefield,
body.bb-page:has(.bb-auth-flow) .bb-emailfield{
  width: 100%;
  max-width: none;
  min-height: 44px;
  margin: 0 0 14px;
  border: 1px solid #dfe3ee;
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(19, 21, 35, .035);
}

body.bb-page:has(.bb-auth-flow) .bb-phonefield__input,
body.bb-page:has(.bb-auth-flow) .bb-emailfield__input{
  min-height: 42px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

@media (max-width: 720px){
  .bb-auth-flow{
    align-items: center !important;
    padding: 18px 14px !important;
  }

  .bb-auth-flow__card,
  body.bb-page:has(.bb-auth-flow) .bb-modal__panel{
    width: 100% !important;
    min-height: min(548px, calc(100dvh - 36px));
    padding: 30px 22px 26px !important;
  }

  .bb-auth-flow__logo{
    margin-bottom: 26px;
  }

  .bb-auth-flow__logo img{
    width: 164px;
    height: auto;
  }

  .bb-auth-flow__title,
  .bb-modal__title{
    font-size: 25px !important;
  }
}

/* Final auth OTP alignment override: must stay after legacy #bbResendPhone rules. */
body.bb-page:has(.bb-auth-flow) .bb-auth-flow__links{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 16px 0 0 !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow__links .bb-link,
body.bb-page:has(.bb-auth-flow) .bb-auth-flow__links #bbResendPhone{
  width: 100% !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #6452FE !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow__links #bbResendPhone{
  color: rgba(100,82,254,.72) !important;
  font-weight: 650 !important;
}

/* Company onboarding: clean email confirmation and moderation states. */
body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step{
  width: min(480px, 100%) !important;
  min-height: 0 !important;
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 0 !important;
  margin: 0 auto !important;
  padding: 26px 0 0 !important;
  text-align: center !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__icon{
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 0 18px !important;
  border-radius: 16px !important;
  background: #F3F5FB !important;
  box-shadow: none !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__icon img{
  display: none !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__icon::before{
  content: "";
  width: 28px;
  height: 22px;
  border: 2px solid #6452FE;
  border-radius: 7px;
  background: #fff;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__icon::after{
  content: "";
  position: absolute;
  width: 18px;
  height: 10px;
  margin-top: 1px;
  border-left: 2px solid #6452FE;
  border-bottom: 2px solid #6452FE;
  transform: rotate(-45deg);
  transform-origin: center;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step .bb-onboard__title{
  margin: 0 0 10px !important;
  font-size: 24px !important;
  line-height: 1.18 !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__text{
  max-width: 430px !important;
  margin: 0 auto 18px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__otp{
  grid-template-columns: repeat(6, 44px) !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step .bb-otp__digit{
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  font-size: 17px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-btn--confirm{
  width: min(332px, 100%) !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 auto !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__links{
  width: min(332px, 100%) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 18px auto 0 !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__links .bb-link{
  min-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__footer{
  width: min(332px, 100%) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 14px auto 0 !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-btn--back{
  width: auto !important;
  min-width: 108px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  gap: 6px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-btn--back .bb-btn__ico{
  width: 14px !important;
  height: 14px !important;
  display: inline-grid !important;
  place-items: center !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-done-step{
  min-height: 0 !important;
  max-width: 560px !important;
  display: block !important;
  margin: 0 !important;
  padding: 40px 0 0 18px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-done-step__text{
  max-width: 520px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-done-step .bb-onboard__title{
  margin: 0 0 22px !important;
  font-size: 28px !important;
  line-height: 1.18 !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-done-step__lead{
  margin: 0 0 14px !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-done-step__p{
  max-width: 500px !important;
  margin: 0 0 18px !important;
  font-size: 14px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-done-step__p--strong{
  margin-top: 4px !important;
  font-size: 18px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-done-step__art{
  display: none !important;
}

@media (max-width: 720px){
  body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step{
    padding-top: 10px !important;
  }

  body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__otp{
    grid-template-columns: repeat(6, minmax(34px, 1fr)) !important;
  }

  body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step .bb-otp__digit{
    width: 100% !important;
  }

  body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-done-step{
    padding: 10px 0 0 !important;
  }
}

/* Company onboarding final visual pass: email confirmation and moderation. */
body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-onboard__content{
  justify-content: flex-start !important;
  align-items: stretch !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step{
  width: min(520px, 100%) !important;
  margin: 0 auto !important;
  padding: 18px 0 0 !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__icon{
  width: 82px !important;
  height: 82px !important;
  margin: 0 auto 18px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__icon::before,
body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__icon::after{
  display: none !important;
  content: none !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__icon img{
  width: 82px !important;
  height: 82px !important;
  display: block !important;
  object-fit: contain !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step .bb-onboard__title{
  margin-bottom: 10px !important;
  font-size: 28px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__text{
  max-width: 470px !important;
  margin-bottom: 20px !important;
  font-size: 14px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__otp{
  justify-content: center !important;
  margin-bottom: 18px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step .bb-otp,
body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__links,
body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__footer{
  width: min(360px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-btn--confirm{
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__links{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 34px !important;
  margin-top: 16px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__links .bb-link{
  width: auto !important;
  min-height: 20px !important;
  flex: 0 0 auto !important;
  color: #6452FE !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__footer{
  justify-content: flex-start !important;
  margin-top: 12px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-btn--back{
  min-width: 86px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  gap: 4px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-btn--back .bb-btn__ico{
  width: 12px !important;
  height: 12px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-btn--back svg{
  width: 12px !important;
  height: 12px !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company #bbCompanyStep5{
  width: 100% !important;
  align-self: stretch !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-done-step{
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 34px 0 0 40px !important;
  text-align: left !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-done-step__text{
  max-width: 540px !important;
  margin: 0 !important;
  text-align: left !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-done-step .bb-onboard__title,
body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-done-step__lead,
body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-done-step__p,
body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-done-step__p--strong{
  text-align: left !important;
}

@media (max-width: 720px){
  body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-email-step__links{
    width: 100% !important;
    gap: 18px !important;
  }

  body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-done-step{
    padding: 18px 0 0 !important;
  }
}

/* Company logo upload: keep the icon centered and reserve clipping for real previews. */
body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-company-photo{
  justify-items: center !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-company-photo__drop{
  width: max-content !important;
  height: auto !important;
  min-width: max-content !important;
  min-height: 0 !important;
  display: inline-grid !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 8px !important;
  inline-size: max-content !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-company-photo .bb-drop__box{
  width: 84px !important;
  height: 84px !important;
  min-width: 84px !important;
  min-height: 84px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 2px solid rgba(100,82,254,.14) !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-company-photo .bb-drop__plus{
  position: relative !important;
  width: 28px !important;
  height: 22px !important;
  display: block !important;
  border-radius: 4px !important;
  background: #3F424A !important;
  transform: none !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-company-photo .bb-drop__plus::before,
body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-company-photo .bb-drop__plus::after{
  content: "" !important;
  position: absolute !important;
  display: block !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-company-photo .bb-drop__plus::before{
  width: 12px !important;
  height: 6px !important;
  left: 8px !important;
  top: -5px !important;
  border-radius: 3px 3px 0 0 !important;
  background: #3F424A !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-company-photo .bb-drop__plus::after{
  width: 9px !important;
  height: 9px !important;
  left: 9px !important;
  top: 7px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: transparent !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-company-photo .bb-drop__preview{
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  grid-area: auto !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  border-radius: 50% !important;
  background-image: none !important;
  background: none !important;
  overflow: hidden !important;
  transform: none !important;
  --bb-preview-scale: 1;
  --bb-preview-x: 0px;
  --bb-preview-y: 0px;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-company-photo .bb-drop__preview-img{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: calc(100% * var(--bb-preview-scale, 1)) !important;
  height: calc(100% * var(--bb-preview-scale, 1)) !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  border-radius: 50% !important;
  transform: translate(calc(-50% + var(--bb-preview-x, 0px)), calc(-50% + var(--bb-preview-y, 0px))) !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-company-photo__drop.has-preview .bb-drop__box{
  border-color: rgba(100,82,254,.18) !important;
  overflow: hidden !important;
}

body.bb-page:has(.bb-auth-flow) .bb-auth-flow--company .bb-company-photo__text{
  width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* Login/profile contact change modals: keep fields and buttons inside the card. */
body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal.is-open,
#bbChangePhoneModal.is-open,
#bbChangeEmailModal.is-open{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-modal__panel,
#bbChangePhoneModal .bb-modal__panel,
#bbChangeEmailModal .bb-modal__panel{
  box-sizing: border-box !important;
  width: min(560px, calc(100vw - 48px)) !important;
  max-width: 560px !important;
  min-height: auto !important;
  max-height: calc(100dvh - 48px) !important;
  margin: 0 !important;
  padding: 44px 54px 38px !important;
  overflow: auto !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-auth-flow__logo{
  margin: 0 auto 38px !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-auth-flow__logo img{
  width: 208px !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-modal__title,
#bbChangePhoneModal .bb-modal__title,
#bbChangeEmailModal .bb-modal__title{
  margin: 0 auto 22px !important;
  text-align: center !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-phonefield,
body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-emailfield,
#bbChangePhoneModal .bb-modal__field-slot,
#bbChangeEmailModal .bb-modal__field-slot{
  width: 100% !important;
  max-width: 420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-phonefield,
body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-emailfield,
#bbChangePhoneModal .bb-phonefield,
#bbChangeEmailModal .bb-emailfield{
  height: 56px !important;
  min-height: 56px !important;
  margin-bottom: 22px !important;
  border: 1px solid #DFE3EE !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(19,21,35,.035) !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-phonefield__input,
body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-emailfield__input,
#bbChangePhoneModal .bb-phonefield__input,
#bbChangeEmailModal .bb-emailfield__input{
  min-width: 0 !important;
  width: 100% !important;
  padding-left: 0 !important;
  background-image: none !important;
  font-size: 16px !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-modal__help,
#bbChangePhoneModal .bb-modal__text,
#bbChangeEmailModal .bb-modal__text{
  max-width: 420px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-modal__actions,
#bbChangePhoneModal .bb-modal__actions,
#bbChangeEmailModal .bb-modal__actions{
  width: 100% !important;
  max-width: 420px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  margin: 24px auto 0 !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-modal__actions{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-modal__actions .bb-btn,
#bbChangePhoneModal .bb-modal__actions .bb-btn,
#bbChangeEmailModal .bb-modal__actions .bb-btn{
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal #bbChangeLoginCancel{
  border: 1px solid #DFE3EE !important;
  background: #fff !important;
}

@media (max-width: 560px){
  body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-modal__panel,
  #bbChangePhoneModal .bb-modal__panel,
  #bbChangeEmailModal .bb-modal__panel{
    width: calc(100vw - 32px) !important;
    padding: 34px 22px 28px !important;
  }

  body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-modal__actions{
    grid-template-columns: 1fr !important;
  }
}

/* Login OTP change modal must match the compact auth confirmation windows. */
body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-modal__panel{
  width: min(456px, calc(100vw - 32px)) !important;
  max-width: 456px !important;
  min-height: 548px !important;
  padding: 36px 40px 32px !important;
  justify-content: center !important;
  overflow: hidden !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-auth-flow__logo{
  width: 188px !important;
  max-width: 100% !important;
  margin: 0 auto 28px !important;
  overflow: hidden !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-auth-flow__logo img{
  width: 188px !important;
  max-width: 100% !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-modal__title{
  margin: 0 0 22px !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-phonefield,
body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-emailfield,
body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-modal__help,
body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-modal__actions{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-phonefield,
body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-emailfield{
  height: 52px !important;
  min-height: 52px !important;
  margin-bottom: 18px !important;
  padding: 0 14px !important;
  overflow: hidden !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-phonefield__input,
body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-emailfield__input{
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body.bb-page:has(.bb-auth-flow) #bbChangeLoginModal .bb-modal__actions{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-top: 22px !important;
}