/* Panel UX layer: loading / empty / error states, setup stepper and mobile layout.
   Loaded after styles.css; uses the dashboard's existing accent (var(--bs-primary)). */

/* ---------- States ---------- */
.pn-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 44px 24px; gap: 6px;
}
.pn-state--card { background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 16px; }
.pn-state-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 10px;
  color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .12); border: 1px solid rgba(var(--bs-primary-rgb), .3);
}
.pn-state--error .pn-state-icon { color: #f87171; background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); }
.pn-state h3 { font-size: 1.05rem; font-weight: 700; margin: 0; color: #fafafa; }
.pn-state p { margin: 0 0 8px; max-width: 420px; color: #a1a1aa; font-size: .9rem; line-height: 1.55; }
.pn-state-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.pn-state--compact { padding: 22px 16px; }
.pn-state--compact .pn-state-icon { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 4px; }

.pn-skel { display: block; border-radius: 8px; background: linear-gradient(90deg, #1f1830 25%, #2a2140 37%, #1f1830 63%); background-size: 400% 100%; animation: pn-shimmer 1.4s ease infinite; }
.pn-skel-line { height: 12px; margin: 8px 0; }
.pn-skel-block { height: 84px; }
@keyframes pn-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Setup stepper ---------- */
.pn-setup { background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 18px; padding: 24px; margin-bottom: 24px; }
.pn-setup-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pn-setup-head h2 { font-size: 1.15rem; font-weight: 800; margin: 0 0 4px; color: #fafafa; }
.pn-setup-head p { margin: 0; color: #a1a1aa; font-size: .88rem; }
.pn-progress { width: 100%; height: 6px; border-radius: 3px; background: var(--brand-border); overflow: hidden; margin-bottom: 18px; }
.pn-progress > i { display: block; height: 100%; background: var(--brand-gradient); border-radius: 3px; transition: width .4s ease; }
.pn-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pn-step { display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid transparent; background: rgba(255,255,255,.02); }
.pn-step-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: #a1a1aa; background: var(--brand-border); border: 1px solid var(--brand-border-strong); }
.pn-step-body strong { display: block; color: #fafafa; font-size: .95rem; }
.pn-step-body span { display: block; color: #a1a1aa; font-size: .82rem; margin-top: 2px; line-height: 1.45; }
.pn-step.is-done .pn-step-dot { color: #052e16; background: #4ade80; border-color: #4ade80; }
.pn-step.is-done .pn-step-body strong { color: #a1a1aa; text-decoration: line-through; text-decoration-color: #52525b; }
.pn-step.is-current { background: rgba(var(--bs-primary-rgb), .08); border-color: rgba(var(--bs-primary-rgb), .4); }
.pn-step.is-current .pn-step-dot { color: #fff; background: var(--brand-violet-deep); border-color: var(--bs-primary); }
.pn-step.is-todo { opacity: .75; }
.pn-step-action { white-space: nowrap; }
.pn-done-tag { font-size: .75rem; font-weight: 700; color: #4ade80; }

.pn-sdk { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--bs-border-color); }
.pn-sdk-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: .88rem; margin-bottom: 14px; border: 1px solid; }
.pn-sdk-status i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pn-sdk-status.is-waiting { color: #fcd34d; background: rgba(252,211,77,.07); border-color: rgba(252,211,77,.3); }
.pn-sdk-status.is-waiting i { background: #fcd34d; animation: pn-pulse 1.6s ease infinite; }
.pn-sdk-status.is-connected { color: #7dd3fc; background: rgba(125,211,252,.07); border-color: rgba(125,211,252,.3); }
.pn-sdk-status.is-connected i { background: #7dd3fc; }
.pn-sdk-status.is-delivered { color: #86efac; background: rgba(134,239,172,.07); border-color: rgba(134,239,172,.3); }
.pn-sdk-status.is-delivered i { background: #4ade80; }
@keyframes pn-pulse { 50% { opacity: .35; } }
.pn-code { position: relative; }
.pn-code pre { margin: 0; padding: 16px; background: var(--brand-inset); border: 1px solid var(--bs-border-color); border-radius: 12px; overflow-x: auto; font-size: .78rem; line-height: 1.6; color: #d4d4d8; }
.pn-copy { position: absolute; top: 8px; right: 8px; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 7px; border: 1px solid var(--brand-border-strong); background: var(--brand-border); color: #d4d4d8; cursor: pointer; }
.pn-copy:hover { color: #fff; }
.pn-keyrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pn-keyrow code { background: var(--brand-inset); border: 1px dashed #52525b; border-radius: 8px; padding: 5px 10px; color: #fafafa; word-break: break-all; }

.pn-optional { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--brand-surface); border: 1px dashed var(--brand-border-strong); border-radius: 16px; padding: 18px 20px; margin-bottom: 24px; }
.pn-optional strong { color: #fafafa; }
.pn-optional p { margin: 2px 0 0; color: #a1a1aa; font-size: .85rem; max-width: 560px; }
.pn-tag { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #a1a1aa; border: 1px solid var(--brand-border-strong); border-radius: 6px; padding: 1px 7px; margin-left: 8px; vertical-align: middle; }

.pn-lang { padding: 0 14px 4px; margin-top: 18px; }

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
  .view-container > .d-flex.flex-grow-1 { flex-direction: column !important; }
  .app-sidebar {
    width: 100% !important; min-width: 0 !important; border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.06); padding: 10px 12px !important;
    position: sticky; top: 0; z-index: 20; background: var(--brand-sidebar);
  }
  .app-sidebar #sidebarAppHeader { display: none !important; }
  .app-sidebar .text-uppercase { display: none; }
  .app-sidebar .mb-2 > .d-flex { flex-direction: row !important; overflow-x: auto; gap: 6px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .app-sidebar .mb-2 > .d-flex::-webkit-scrollbar { display: none; }
  .app-sidebar .sidebar-nav-btn { flex: none; padding: 9px 14px; white-space: nowrap; }
  .app-sidebar .pn-lang { flex: none; padding: 0 4px; margin: 0 0 0 4px; align-self: center; }
  main.p-4 { padding: 18px 14px !important; }
  .top-nav { height: auto; min-height: 60px; padding: 8px 0; }
  .top-nav .nav-divider, #navAuthStatus { display: none !important; }
  .top-nav .container, .top-nav .container-fluid { gap: 8px; flex-wrap: wrap; padding-left: 14px !important; padding-right: 14px !important; }
  .top-nav .brand-logo h4 { font-size: 1.05rem; }
  .pn-step { grid-template-columns: 32px 1fr; }
  .pn-step-action { grid-column: 2; justify-self: start; }
  .pn-setup { padding: 18px 14px; }
  .card .table, main table { min-width: 560px; }
  .card:has(table), .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 991.98px) {
  .app-sidebar .mb-2 { min-width: 0; max-width: 100%; }
  .app-sidebar .sidebar-nav-btn { width: auto; }
  #detailAppPlatformBadge { display: none; }
  .top-nav .d-flex.align-items-center.gap-3 { min-width: 0; }
}
@media (max-width: 575.98px) {
  .top-nav .brand-logo h4 { display: none; }
  .top-nav .d-flex.align-items-center.gap-3 { gap: 8px !important; }
  #detailAppName { max-width: 36vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
  .pn-done-tag { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .pn-skel, .pn-sdk-status i { animation: none !important; } .pn-progress > i { transition: none; } }
@media (max-width: 575.98px) {
  #openCreateAppButton { white-space: nowrap; padding: 8px 12px; flex: none; }
  .container.py-5 { padding-top: 24px !important; }
  .container.py-5 .mb-5 { margin-bottom: 1.5rem !important; gap: 12px; }
}
@media (max-width: 991.98px) {
  /* Keep a state row inside the visible width of a horizontally scrolling table. */
  .pn-sticky { position: sticky; left: 0; width: calc(100vw - 56px); max-width: 100%; }
}

/* ---------- Triggers: modal and list ---------- */
.tg-modal { background: var(--brand-surface); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; }
.tg-section { padding: 16px; border: 1px solid var(--bs-border-color); border-radius: 14px; margin-bottom: 14px; background: rgba(255,255,255,.02); }
.tg-step { display: flex; gap: 10px; align-items: center; font-weight: 700; color: #fafafa; margin-bottom: 12px; }
.tg-step b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-violet-deep); color: #fff; font-size: .75rem; flex: none; }
.tg-label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #a1a1aa; margin-bottom: 6px; }
.tg-input { background: rgba(0,0,0,.3) !important; border: 1px solid var(--brand-border-strong) !important; color: #fafafa !important; font-size: .92rem; }
.tg-input:focus { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .2) !important; }
.tg-input.is-invalid { border-color: #f87171 !important; background-image: none !important; }
.tg-addon { background: rgba(0,0,0,.3); border: 1px solid var(--brand-border-strong); color: #a1a1aa; font-size: .75rem; }
.tg-error { color: #fca5a5; font-size: .8rem; margin-top: 6px; }
.tg-alert { color: #fecaca; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.4); border-radius: 12px; padding: 10px 14px; font-size: .88rem; margin-bottom: 14px; }
.tg-note { color: #fde68a; background: rgba(252,211,77,.08); border: 1px solid rgba(252,211,77,.3); border-radius: 12px; padding: 10px 14px; font-size: .85rem; margin-bottom: 10px; }
.tg-seg { display: inline-flex; padding: 3px; gap: 2px; background: rgba(0,0,0,.35); border: 1px solid var(--brand-border-strong); border-radius: 10px; }
.tg-seg button { border: 0; background: none; color: #a1a1aa; font-weight: 700; font-size: .8rem; padding: 7px 14px; border-radius: 7px; cursor: pointer; }
.tg-seg button:hover { color: #fff; }
.tg-seg button.on { background: var(--brand-violet-deep); color: #fff; }
.tg-advanced { border: 1px solid var(--bs-border-color); border-radius: 14px; margin-bottom: 14px; }
.tg-advanced > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.tg-advanced > summary::-webkit-details-marker { display: none; }
.tg-advanced > summary::after { content: "▾"; color: #a1a1aa; transition: transform .2s; }
.tg-advanced[open] > summary::after { transform: rotate(180deg); }
.tg-adv-title { font-weight: 700; color: #fafafa; }
.tg-adv-summary { font-size: .78rem; color: #a1a1aa; margin-left: auto; text-align: right; }
.tg-adv-body { padding: 0 16px 6px; }
.tg-opt { padding: 14px 0; border-top: 1px solid var(--bs-border-color); }
.tg-opt-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tg-opt h6 { margin: 0 0 4px; font-weight: 700; color: #fafafa; font-size: .92rem; }
.tg-opt p { color: #a1a1aa; font-size: .82rem; margin: 0 0 10px; line-height: 1.5; }
.tg-pill { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--brand-border-strong); color: #a1a1aa; white-space: nowrap; }
.tg-pill.is-on { color: #86efac; border-color: rgba(134,239,172,.4); }
.tg-status { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--bs-border-color); border-radius: 14px; }
.tg-rulelist { margin: 0; padding-left: 18px; font-size: .82rem; color: #d4d4d8; }
.tg-rulelist li { margin-bottom: 8px; }
.tg-rulelist span { display: block; color: #a1a1aa; }
.tg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-chip { font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #d4d4d8; }
.tg-key { display: inline-block; margin-top: 2px; }
.tg-variant { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tg-vname { color: #fafafa; font-size: .88rem; }
.tg-vweight { color: #a1a1aa; font-size: .8rem; }
.tg-rules { margin-top: 6px; font-size: .8rem; }
.tg-rules summary { color: #4ade80; cursor: pointer; }
.tg-rules ol { margin: 8px 0 0; padding-left: 18px; color: #d4d4d8; }
.tg-rules li { margin-bottom: 6px; }
.tg-rules li.is-off { opacity: .6; }
.tg-rules li span { color: #a1a1aa; }

/* Stacked "card" tables on small screens */
@media (max-width: 767.98px) {
  .pn-cards, main .pn-cards { min-width: 0 !important; display: block; }
  .pn-cards thead { display: none; }
  .pn-cards tbody { display: block; }
  .pn-cards tbody tr { display: block; border: 1px solid var(--bs-border-color); border-radius: 14px; margin: 10px; padding: 6px 0; background: rgba(255,255,255,.02); }
  .pn-cards td { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px !important; border: 0 !important; text-align: left; }
  .pn-cards td::before { content: attr(data-label); color: #a1a1aa; font-size: .7rem; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; flex: none; max-width: 32%; padding-top: 3px; }
  .pn-cards td > * { min-width: 0; }
  .pn-cards td.tg-actions { justify-content: flex-end; }
  .pn-cards td.tg-actions::before { display: none; }
  .pn-cards td.p-0 { display: block; padding: 0 !important; }
  .pn-cards td.p-0::before { display: none; }
}
@media (max-width: 767.98px) {
  .pn-cards td:first-child { display: block; }
  .pn-cards td:first-child::before { display: none; }
  .pn-cards td:first-child .tg-key { word-break: break-all; }
}

/* ---------- Account & security ---------- */
.acc-page { max-width: 920px; }
.acc-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 20px; padding-bottom: 4px; scrollbar-width: none; position: sticky; top: 0; z-index: 10; background: var(--bs-body-bg); }
.acc-tabs::-webkit-scrollbar { display: none; }
.acc-tabs a { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--brand-border-strong); color: #a1a1aa; font-size: .85rem; font-weight: 600; text-decoration: none; }
.acc-tabs a:hover { color: #fff; }
.acc-card { background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 18px; padding: 22px; margin-bottom: 20px; scroll-margin-top: 64px; }
.acc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.acc-head h2 { margin: 0; font-size: 1.1rem; font-weight: 800; color: #fafafa; }
.acc-app-select { min-width: 220px; max-width: 100%; }
.acc-field { margin-bottom: 14px; max-width: 420px; }
.acc-field label { display: block; font-size: .78rem; font-weight: 700; color: #a1a1aa; margin-bottom: 6px; }
.acc-card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.acc-card fieldset:disabled { opacity: .5; }
.acc-meter { display: flex; gap: 4px; margin-top: 8px; max-width: 420px; }
.acc-meter i { flex: 1; height: 4px; border-radius: 2px; background: var(--brand-border-strong); }
.acc-meter[data-level="1"] i:nth-child(-n+1) { background: #ef4444; }
.acc-meter[data-level="2"] i:nth-child(-n+2) { background: #f59e0b; }
.acc-meter[data-level="3"] i:nth-child(-n+3) { background: #84cc16; }
.acc-meter[data-level="4"] i { background: #4ade80; }
.acc-note { color: #d4d4d8; background: rgba(255,255,255,.04); border: 1px solid var(--brand-border-strong); border-radius: 12px; padding: 10px 14px; font-size: .85rem; line-height: 1.5; margin-bottom: 12px; }
.acc-note:empty { display: none; }
.acc-note a { font-weight: 700; }
.acc-tag { display: inline-block; font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--brand-border-strong); color: #a1a1aa; white-space: nowrap; vertical-align: middle; }
.acc-tag.ok { color: #86efac; border-color: rgba(134,239,172,.4); background: rgba(134,239,172,.07); }
.acc-tag.warn { color: #fcd34d; border-color: rgba(252,211,77,.4); background: rgba(252,211,77,.07); }
.acc-tag.bad { color: #fca5a5; border-color: rgba(248,113,113,.45); background: rgba(248,113,113,.08); }
.acc-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0 0 14px; }
.acc-dl dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #a1a1aa; font-weight: 700; margin-bottom: 4px; }
.acc-dl dd { margin: 0; color: #fafafa; word-break: break-word; }
.acc-kv { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); margin-bottom: 12px; color: #d4d4d8; font-size: .9rem; }
.acc-details { margin-top: 4px; font-size: .78rem; color: #a1a1aa; }
.acc-details summary { cursor: pointer; color: #a1a1aa; }
.acc-details div { margin-top: 4px; word-break: break-all; }
.acc-details span { color: #71717a; margin-right: 4px; }
.acc-copy { background: none; border: 1px solid var(--brand-border-strong); color: #a1a1aa; border-radius: 6px; font-size: .68rem; padding: 1px 7px; cursor: pointer; }
.acc-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.acc-table { border-radius: 12px; overflow: hidden; border: 1px solid var(--bs-border-color); }
@media (max-width: 575.98px) {
  .acc-card { padding: 16px; }
  .acc-dl { grid-template-columns: 1fr; }
  .acc-app-select { width: 100%; }
}

/* ---------- Guided setup (onboarding) ---------- */
.ob-page { max-width: 1040px; }
.ob-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.ob-head p { color: #a1a1aa; margin: 0 0 16px; max-width: 620px; }
.ob-head .pn-progress { margin-bottom: 8px; max-width: 520px; }
.ob-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
.ob-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 16px; }
.ob-step { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; background: rgba(255,255,255,.02); color: #fafafa; cursor: pointer; }
.ob-step:hover { background: rgba(255,255,255,.05); }
.ob-step.is-selected { border-color: rgba(var(--bs-primary-rgb), .5); background: rgba(var(--bs-primary-rgb), .08); }
.ob-dot { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem; background: var(--brand-border); border: 1px solid var(--brand-border-strong); color: #a1a1aa; }
.ob-step.is-done .ob-dot { background: #4ade80; border-color: #4ade80; color: #052e16; }
.ob-step.is-current .ob-dot { background: var(--brand-violet-deep); border-color: var(--bs-primary); color: #fff; }
.ob-step-text { display: flex; flex-direction: column; min-width: 0; }
.ob-step-text strong { font-size: .92rem; }
.ob-step-text small { color: #a1a1aa; font-size: .75rem; }
.ob-step.is-done .ob-step-text small { color: #4ade80; }
.ob-panel { background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 18px; padding: 26px; min-height: 340px; outline: 0; }
.ob-panel h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 6px; color: #fafafa; }
.ob-section { margin: 18px 0; }
.ob-note { color: #d4d4d8; background: rgba(255,255,255,.04); border: 1px solid var(--brand-border-strong); border-radius: 12px; padding: 12px 14px; font-size: .86rem; line-height: 1.55; margin: 16px 0; }
.ob-note.is-warn { color: #fde68a; background: rgba(252,211,77,.07); border-color: rgba(252,211,77,.35); }
.ob-note a { font-weight: 700; }
.ob-choose { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ob-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 18px 0; }
.ob-summary dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #a1a1aa; font-weight: 700; margin-bottom: 4px; }
.ob-summary dd { margin: 0; color: #fafafa; word-break: break-all; }
.ob-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.ob-platform { position: relative; cursor: pointer; }
.ob-platform input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ob-platform > span { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--brand-border-strong); border-radius: 14px; background: rgba(0,0,0,.25); }
.ob-platform b { color: #fafafa; }
.ob-platform small { color: #a1a1aa; }
.ob-platform input:checked + span { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .1); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .2); }
.ob-platform input:focus-visible + span { outline: 2px solid var(--brand-tint); outline-offset: 2px; }
.ob-rows { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.ob-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--bs-border-color); border-radius: 14px; background: rgba(255,255,255,.02); }
.ob-row.is-done { border-color: rgba(74,222,128,.3); }
.ob-check { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #52525b; font-size: .75rem; font-weight: 800; color: #052e16; }
.ob-row.is-done .ob-check { background: #4ade80; border-color: #4ade80; }
.ob-row-body strong { display: block; color: #fafafa; font-size: .95rem; }
.ob-row-body span { display: block; color: #a1a1aa; font-size: .84rem; line-height: 1.5; margin-top: 2px; }
.ob-row-action { white-space: nowrap; }
.ob-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--bs-border-color); }
.ob-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.ob-next a { display: block; padding: 14px 16px; border: 1px solid var(--bs-border-color); border-radius: 14px; text-decoration: none; background: rgba(255,255,255,.02); }
.ob-next a:hover { border-color: rgba(var(--bs-primary-rgb), .5); }
.ob-next strong { display: block; color: #fafafa; }
.ob-next span { color: #a1a1aa; font-size: .84rem; }
@media (max-width: 767.98px) {
  .ob-layout { grid-template-columns: 1fr; gap: 16px; }
  .ob-steps { position: static; flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; scrollbar-width: none; }
  .ob-steps::-webkit-scrollbar { display: none; }
  .ob-steps li { flex: none; }
  .ob-step { padding: 8px 12px; width: auto; }
  .ob-step-text small { display: none; }
  .ob-step-text strong { font-size: .8rem; white-space: nowrap; }
  .ob-panel { padding: 18px 16px; }
  .ob-summary, .ob-next, .ob-platforms { grid-template-columns: 1fr; }
  .ob-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob-row { grid-template-columns: 24px minmax(0, 1fr); }
  .ob-row-action { grid-column: 2; }
}
.tg-label code{color:inherit;text-transform:none;background:rgba(139,92,246,.12);padding:1px 5px;border-radius:5px}
.ob-layout > *, .ob-panel, .pn-code { min-width: 0; } .ob-panel pre { max-width: 100%; }

/* ---------- Shared top bar ---------- */
nav.top-nav[data-header] { height: 64px; padding: 0; position: relative; z-index: 50; }
.hd-inner { width: 100%; max-width: 1560px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hd-left, .hd-right { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hd-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fafafa; font-weight: 800; font-size: 1.05rem; flex: none; }
.hd-brand:hover { color: #fff; }
.hd-divider { width: 1px; height: 22px; background: var(--bs-border-color); flex: none; }
.hd-crumbs { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .9rem; white-space: nowrap; }
.hd-crumbs a { color: #a1a1aa; text-decoration: none; }
.hd-crumbs a:hover { color: #fff; }
.hd-sep { color: #52525b; }
.hd-app { color: #fafafa; font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.hd-current { color: #fafafa; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.hd-crumbs #detailAppPlatformBadge { display: none; }
.hd-user { position: relative; }
.hd-user-btn { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 5px 10px 5px 5px; color: #e4e4e7; font: 600 .82rem Manrope, system-ui, sans-serif; cursor: pointer; }
.hd-user-btn:hover, .hd-user.open .hd-user-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); }
.hd-user-btn:focus-visible, .hd-menu a:focus-visible, .hd-menu button:focus-visible { outline: 2px solid var(--brand-tint); outline-offset: 2px; }
.hd-avatar { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-violet-deep); color: #fff; font-weight: 800; font-size: .8rem; box-shadow: inset 0 0 0 1px rgba(236,72,153,.55); }
.hd-user-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-chev { opacity: .7; transition: transform .15s; }
.hd-user.open .hd-chev { transform: rotate(180deg); }
.hd-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; padding: 6px; background: var(--brand-surface); border: 1px solid var(--brand-border-strong); border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.55); }
.hd-user.open .hd-menu { display: block; }
.hd-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--bs-border-color); margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hd-menu-head strong { color: #fafafa; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; }
.hd-menu-head span { color: #a1a1aa; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
.hd-menu-head em { font-style: normal; font-size: .7rem; font-weight: 700; color: var(--brand-tint); margin-top: 4px; }
.hd-menu a, .hd-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 12px; color: #d4d4d8; font: 500 .86rem Manrope, system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.hd-menu a:hover, .hd-menu button:hover { background: rgba(255,255,255,.07); color: #fff; }
.hd-menu-sep { height: 1px; background: var(--bs-border-color); margin: 6px 0; }
@media (max-width: 767.98px) {
  nav.top-nav[data-header] { height: 56px; }
  .hd-inner { padding: 0 14px; gap: 8px; }
  .hd-brand-text, .hd-divider, .hd-user-name, .hd-chev { display: none; }
  .hd-user-btn { padding: 4px; }
  .hd-app { max-width: 110px; }
  .hd-crumbs { gap: 7px; font-size: .84rem; }
}

/* ---------- Apps list ---------- */
.ap-page { max-width: 1120px; }
.ap-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.ap-title { font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.ap-count { font-size: .78rem; font-weight: 700; color: #a1a1aa; border: 1px solid var(--brand-border-strong); border-radius: 999px; padding: 2px 10px; letter-spacing: 0; }
.ap-sub { color: #a1a1aa; margin: 0; }
.ap-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.ap-search { position: relative; flex: 1 1 260px; max-width: 380px; }
.ap-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #71717a; pointer-events: none; }
.ap-search input { padding-left: 38px; height: 40px; }
.ap-card { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 18px; background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 16px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s, background .15s; }
.ap-card:hover { border-color: rgba(var(--bs-primary-rgb), .5); background: var(--brand-surface-hover); transform: translateY(-2px); color: inherit; }
.ap-card:focus-visible { outline: 2px solid var(--brand-tint); outline-offset: 2px; }
.ap-card-top { display: flex; gap: 14px; align-items: center; min-width: 0; }
.ap-card-title { min-width: 0; }
.ap-card-title h2 { font-size: 1.02rem; font-weight: 700; margin: 0 0 6px; color: #fafafa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-state { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; color: #a1a1aa; }
.ap-state i { width: 7px; height: 7px; border-radius: 50%; background: #71717a; }
.ap-state.is-live { color: #86efac; }
.ap-state.is-live i { background: #4ade80; }
.ap-card-id { min-height: 22px; font-size: .78rem; color: #a1a1aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-card-id code { background: none; color: #a1a1aa; padding: 0; }
.ap-card-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--bs-border-color); display: flex; justify-content: space-between; color: #a1a1aa; font-size: .85rem; font-weight: 600; }
.ap-card:hover .ap-card-foot { color: #fff; }

/* ---------- App overview ---------- */
.ov-main { max-width: 1240px; }
.ov-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.ov-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ov-id h1 { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; }
.ov-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ov-meta code { background: none; color: #a1a1aa; padding: 0; font-size: .8rem; }
.ov-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ov-kpis { margin-bottom: 24px; }
.ov-kpis-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.ov-kpis-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #fafafa; }
.ov-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ov-kpi { background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 18px 20px; min-width: 0; display: flex; flex-direction: column; }
.ov-kpi-label { font-size: .85rem; color: #a1a1aa; font-weight: 600; margin-bottom: 10px; }
.ov-kpi strong { font-size: 2rem; font-weight: 800; color: #fafafa; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ov-kpi.is-missing strong { color: #71717a; }
.ov-kpi-foot { margin-top: 8px; font-size: .75rem; color: #71717a; min-height: 1.2em; }
/* App Store card (overview) */
.asc-head-meta { display: flex; align-items: center; gap: 10px; font-size: .75rem; color: #71717a; }
.asc-refresh { padding: 0 !important; font-size: .78rem; font-weight: 600; color: #c4b5fd !important; text-decoration: none; }
.asc-refresh:hover { color: #fff !important; }
.asc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.asc-tile .asc-value { font-size: 1.35rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asc-tile .ov-kpi-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.asc-state { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; border: 1px solid; white-space: nowrap; }
.asc-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.asc-state.is-live { color: #86efac; border-color: rgba(134,239,172,.3); background: rgba(34,197,94,.08); }
.asc-state.is-review { color: #93c5fd; border-color: rgba(147,197,253,.3); background: rgba(59,130,246,.08); }
.asc-state.is-bad { color: #fca5a5; border-color: rgba(252,165,165,.3); background: rgba(239,68,68,.08); }
.asc-state.is-draft { color: #fcd34d; border-color: rgba(252,211,77,.3); background: rgba(234,179,8,.07); }
.asc-state.is-old { color: #a1a1aa; border-color: rgba(161,161,170,.25); background: transparent; }
.asc-card { background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 16px 20px; }
.asc-card-title { font-size: .85rem; color: #a1a1aa; font-weight: 600; margin-bottom: 6px; }
.asc-empty { color: #a1a1aa; font-size: .85rem; }
.asc-row { display: grid; grid-template-columns: minmax(90px, 160px) auto 1fr; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--bs-border-color); }
.asc-row:first-child { border-top: 0; }
.asc-ver { font-weight: 700; color: #fafafa; font-variant-numeric: tabular-nums; }
.asc-date { justify-self: end; font-size: .78rem; color: #71717a; }
.asc-issue { margin: 10px 0 0; font-size: .75rem; color: #a1a1aa; }
@media (max-width: 991.98px) { .asc-grid { grid-template-columns: 1fr; } }
.ov-badge { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; }
.ov-badge.is-missing { color: #fcd34d; background: rgba(252, 211, 77, .1); border: 1px solid rgba(252, 211, 77, .3); }
.ov-badge.is-estimate { color: #fcd34d; background: rgba(252, 211, 77, .1); border: 1px solid rgba(252, 211, 77, .3); }
.ov-badge.is-ok { color: #86efac; background: rgba(134, 239, 172, .1); border: 1px solid rgba(134, 239, 172, .3); }
.ov-banner { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.ov-banner-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #c4b5fd; background: rgba(139, 92, 246, .12); border: 1px solid rgba(139, 92, 246, .25); }
.ov-banner-body { flex: 1 1 260px; min-width: 0; }
.ov-banner-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #fafafa; font-weight: 700; }
.ov-banner p { margin: 4px 0 0; color: #a1a1aa; font-size: .85rem; }
.ov-banner-link { color: #e4e4e7; font-weight: 600; font-size: .875rem; text-decoration: none; white-space: nowrap; }
.ov-banner-link:hover { color: #fff; }
.ov-card { background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 16px; height: 100%; overflow: hidden; }
.ov-card-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--bs-border-color); }
.ov-card-head h2 { margin: 0; font-size: .95rem; font-weight: 700; color: #fafafa; }
.ov-card-head a { font-size: .8rem; color: #a1a1aa; text-decoration: none; }
.ov-card-head a:hover { color: #fff; }
@media (max-width: 767.98px) { .ov-actions { width: 100%; } .ov-actions .btn { flex: 1; } }
@media (max-width: 767.98px) { .ov-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ov-kpi { padding: 14px 16px; } .ov-kpi strong { font-size: 1.5rem; } }

/* ---------- Settings: SDK key ---------- */
.hd-left { flex: 1; }
.hd-crumbs { overflow: hidden; }
@media (max-width: 575.98px) {
  .hd-crumbs > a, .hd-crumbs > .hd-sep:first-of-type { display: none; }
  .hd-app { max-width: 120px; }
  .lang-dd-code { display: none; }
}

/* ---------- Revenue ---------- */
.rv-main { max-width: 1100px; }
.rv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.rv-head h1 { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.rv-head p { margin: 0; color: #a1a1aa; max-width: 620px; }
.rv-range select { min-width: 170px; }
.rv-warning { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; margin-bottom: 18px; border: 1px solid rgba(252,211,77,.35); background: rgba(252,211,77,.07); border-radius: 14px; color: #fde68a; font-size: .86rem; line-height: 1.5; }
.rv-card { background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 18px; padding: 20px; margin-bottom: 18px; min-width: 0; }
.rv-card[hidden] { display: none; }
.rv-card.is-muted { border-style: dashed; background: rgba(255,255,255,.015); }
.rv-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; flex-wrap: wrap; }
.rv-card-head h2 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; color: #fafafa; }
.rv-card-head p { margin: 0; color: #a1a1aa; font-size: .84rem; max-width: 560px; line-height: 1.5; }
.rv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rv-two .rv-card { margin-bottom: 0; }
.rv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.rv-kpi { padding: 14px 16px; border: 1px solid var(--bs-border-color); border-radius: 14px; background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-kpi > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #a1a1aa; font-weight: 700; }
.rv-kpi strong { font-size: 1.45rem; font-weight: 800; color: #fafafa; }
.rv-kpi small, .rv-amount small { display: block; color: #a1a1aa; font-size: .75rem; line-height: 1.45; margin-top: 2px; }
.rv-unknown { color: #a1a1aa !important; font-weight: 600 !important; font-size: 1rem !important; font-style: italic; }
.rv-table { background: transparent; }
.rv-table strong { color: #fafafa; }
.rv-note { margin: 0; color: #a1a1aa; font-size: .82rem; line-height: 1.55; }
.rv-foot { margin: 16px 0 0; color: #71717a; font-size: .78rem; line-height: 1.55; max-width: 780px; }
@media (max-width: 991.98px) { .rv-two { grid-template-columns: 1fr; } }

/* ---------- Alignment: header, sidebar and content share the same edges ---------- */
/* Pages with a sidebar: the bar spans the full width like the sidebar below it. */
nav.top-nav[data-header][data-app] .hd-inner { max-width: none; padding: 0 24px; }
/* Pages without a sidebar: the bar uses the same width and gutter as the page content. */
nav.top-nav[data-header="apps"] .hd-inner { max-width: 1120px; }
nav.top-nav[data-header="account"] .hd-inner, nav.top-nav[data-header="billing"] .hd-inner { max-width: 920px; }
nav.top-nav[data-header="onboarding"] .hd-inner { max-width: 1040px; }
nav.top-nav[data-header="admin"] .hd-inner { max-width: 1320px; }
.ap-page, .acc-page, .ob-page { padding-left: 24px !important; padding-right: 24px !important; margin-left: auto; margin-right: auto; width: 100%; }
/* Sidebar pages: content is centred in the space next to the sidebar, not stuck to its left. */
.view-container > .d-flex.flex-grow-1 > main { width: 100%; max-width: 1840px; margin-left: auto; margin-right: auto; }
.ov-main, .rv-main { max-width: none; }
@media (max-width: 767.98px) {
  .ap-page, .acc-page, .ob-page { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 767.98px) {
  .rv-table tbody tr { margin: 0; border: 0; border-top: 1px solid var(--bs-border-color); border-radius: 0; background: none; padding: 8px 0; }
}

/* ---------- Integrations ---------- */
.in-main { }
.in-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; align-items: start; }
.in-card { background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 18px; padding: 22px; min-width: 0; }
.in-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.in-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; color: #fafafa; }
.in-head p, .in-card > p { margin: 0; color: #a1a1aa; font-size: .85rem; line-height: 1.5; max-width: 560px; }
.in-note { color: #d4d4d8; background: rgba(255,255,255,.04); border: 1px solid var(--brand-border-strong); border-radius: 12px; padding: 10px 14px; font-size: .84rem; line-height: 1.5; margin-bottom: 14px; }
.in-note a { font-weight: 700; }
@media (max-width: 575.98px) { .in-grid { grid-template-columns: minmax(0, 1fr); } .in-card { padding: 16px; } }

/* ---------- Store listing ---------- */
.st-main { }
.st-card { background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 18px; padding: 22px; margin-bottom: 18px; min-width: 0; }
.st-card h3 { font-size: .95rem; font-weight: 800; color: #fafafa; margin: 0 0 12px; }
.st-top { display: flex; gap: 18px; align-items: center; }
.st-icon { width: 80px; height: 80px; border-radius: 20px; object-fit: cover; border: 1px solid var(--brand-border-strong); flex: none; }
.st-icon-empty { background: var(--brand-surface-hover); }
.st-top-body { min-width: 0; }
.st-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.st-title h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: #fafafa; }
.st-dev { margin: 2px 0 12px; color: #a1a1aa; }
.st-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.st-facts dt, .st-meta dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #a1a1aa; font-weight: 700; }
.st-facts dd, .st-meta dd { margin: 2px 0 0; color: #fafafa; }
.st-star { color: #fbbf24; }
.st-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.st-grid .st-card { margin-bottom: 0; }
.st-desc { white-space: pre-wrap; color: #c9c2d8; font-size: .9rem; line-height: 1.6; max-height: 360px; overflow-y: auto; }
.st-meta { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.st-meta code { background: none; color: var(--brand-tint); padding: 0; }
.st-reviews { margin-top: 28px; }
.st-reviews-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.st-reviews-head h2 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.st-reviews-head select { min-width: 140px; }
.st-reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.st-review { background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st-review header { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: #a1a1aa; }
.st-review header strong { color: #fafafa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-stars { color: #fbbf24; font-size: .85rem; letter-spacing: 1px; }
.st-stars span { color: #3b3350; }
.st-review h4 { margin: 0; font-size: .9rem; color: #fafafa; }
.st-review p { margin: 0; color: #c9c2d8; font-size: .86rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.st-review footer { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--bs-border-color); font-size: .75rem; color: #71717a; }
@media (max-width: 767.98px) { .st-grid { grid-template-columns: 1fr; } .st-top { align-items: flex-start; } .st-icon { width: 64px; height: 64px; border-radius: 16px; } .st-card { padding: 16px; } }
.an-note { margin: 0 0 16px; color: #a1a1aa; font-size: .84rem; }
.an-note a { font-weight: 700; }

.au-page { max-width: 1320px; padding-left: 24px !important; padding-right: 24px !important; margin-left: auto; margin-right: auto; width: 100%; }
@media (max-width: 767.98px) { .au-page { padding-left: 14px !important; padding-right: 14px !important; } }

/* Apps page: first-run empty state */
.ap-empty { text-align: center; padding: 56px 24px 36px; background: radial-gradient(120% 90% at 50% 0%, rgba(139,92,246,.16), transparent 60%), var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 22px; }
.ap-empty-art { position: relative; width: 84px; height: 84px; margin: 0 auto 22px; display: grid; place-items: center; color: #c4b5fd; border-radius: 24px; background: linear-gradient(145deg, rgba(139,92,246,.28), rgba(236,72,153,.16)); border: 1px solid rgba(167,139,250,.35); }
.ap-empty-glow { position: absolute; inset: -18px; border-radius: 40px; background: radial-gradient(circle, rgba(139,92,246,.28), transparent 70%); z-index: -1; }
.ap-empty h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.ap-empty-text { max-width: 480px; margin: 0 auto 24px; color: #a59db8; }
.ap-empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.ap-empty-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; counter-reset: none; }
.ap-empty-steps li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; }
.ap-empty-steps strong { font-size: .95rem; margin-top: 8px; }
.ap-empty-steps li > span:last-child { font-size: .84rem; color: #a59db8; line-height: 1.5; }
.ap-empty-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #c4b5fd; background: rgba(139,92,246,.14); }
.ap-empty-num { position: absolute; top: 16px; right: 18px; font-size: .75rem; font-weight: 800; color: #6b6280; }
.ap-empty-foot { margin: 26px 0 0; font-size: .84rem; color: #7f7794; }
.ap-empty-foot a { color: #c4b5fd; margin-left: 6px; }
@media (max-width: 720px) { .ap-empty { padding: 40px 16px 28px; } .ap-empty-steps { grid-template-columns: 1fr; } }

/* Create-app modal */
.app-modal-dialog { max-width: 480px; }
.app-modal { background: var(--brand-surface); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; overflow: hidden; }
.app-modal-head { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 24px 56px 18px 24px; }
.app-modal-head .btn-close { position: absolute; top: 20px; right: 20px; opacity: .6; }
.app-modal-head .btn-close:hover { opacity: 1; }
.app-modal-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: #c4b5fd; background: linear-gradient(145deg, rgba(139,92,246,.28), rgba(236,72,153,.14)); border: 1px solid rgba(167,139,250,.3); }
.app-modal-title { margin: 0 0 2px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.app-modal-sub { margin: 0; font-size: .85rem; color: #a59db8; line-height: 1.5; }
.app-modal-body { padding: 4px 24px 8px; }
.app-ai { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 4px 0 2px; border-radius: 14px; text-decoration: none; color: inherit; border: 1px solid rgba(139, 92, 246, .45); background: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(139, 92, 246, .05)); transition: border-color .15s, background .15s; }
.app-ai:hover, .app-ai:focus-visible { color: inherit; border-color: rgba(167, 139, 250, .9); background: linear-gradient(135deg, rgba(139, 92, 246, .28), rgba(139, 92, 246, .08)); }
.app-ai[hidden], .app-or[hidden] { display: none; }
.app-ai-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--brand-violet-deep, #6d28d9); color: #fff; font-size: 1.05rem; }
.app-ai-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app-ai-text strong { font-size: .95rem; font-weight: 700; }
.app-ai-text small { font-size: .78rem; color: #a59db8; line-height: 1.45; }
.app-ai-go { margin-left: auto; color: #c4b5fd; font-size: 1.1rem; }
.app-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; font-size: .75rem; color: #8b839d; text-transform: uppercase; letter-spacing: .06em; }
.app-or::before, .app-or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .08); }
.app-field { margin-bottom: 18px; }
.app-label { display: block; margin-bottom: 7px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: #c9c2d8; }
.app-input { height: 44px; border-radius: 12px; padding: 0 14px; font-size: .95rem; }
.app-input.is-invalid { border-color: #f87171; box-shadow: 0 0 0 2px rgba(248,113,113,.2); }
.app-help { margin-top: 7px; font-size: .78rem; color: #8b839d; line-height: 1.5; }
.app-error { margin-top: 7px; font-size: .8rem; color: #fca5a5; }
.app-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app-platform { display: flex; align-items: center; justify-content: center; gap: 9px; height: 46px; border-radius: 12px; background: var(--brand-inset); border: 1px solid var(--brand-border); color: #a59db8; font-weight: 700; font-size: .92rem; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.app-platform:hover { color: #fff; border-color: rgba(167,139,250,.5); }
.app-platform.on { color: #fff; background: rgba(139,92,246,.16); border-color: #8B5CF6; box-shadow: 0 0 0 2px rgba(139,92,246,.2); }
.app-platform:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }
.app-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 22px; }
.app-modal-foot .btn { height: 42px; padding: 0 20px; border-radius: 11px; font-weight: 700; }
@media (max-width: 520px) { .app-modal-head { padding: 20px 52px 14px 18px; } .app-modal-body { padding: 4px 18px 6px; } .app-modal-foot { padding: 14px 18px 18px; } .app-modal-foot .btn { flex: 1; } }

/* Overview: compact setup checklist. Only the step you are on is expanded. */
.pn-setup { padding: 20px 22px; }
.pn-setup .pn-step.is-done, .pn-setup .pn-step.is-todo { padding: 8px 14px; grid-template-columns: 24px 1fr auto; gap: 12px; background: transparent; }
.pn-setup .pn-step.is-done .pn-step-dot, .pn-setup .pn-step.is-todo .pn-step-dot { width: 24px; height: 24px; font-size: .7rem; }
.pn-setup .pn-step.is-done .pn-step-body span, .pn-setup .pn-step.is-todo .pn-step-body span { display: none; }
.pn-setup .pn-step.is-done .pn-step-body strong, .pn-setup .pn-step.is-todo .pn-step-body strong { font-size: .88rem; font-weight: 600; }
.pn-setup .pn-step.is-todo { opacity: .6; }
.pn-setup .pn-step.is-current { padding: 16px; }
.pn-setup .pn-step.is-current .pn-step-body strong { font-size: 1.02rem; }
.pn-setup .pn-step.is-current .pn-step-body span { font-size: .86rem; margin-top: 4px; max-width: 640px; }
.pn-setup .pn-steps { gap: 4px; }
.pn-setup .pn-progress { margin-bottom: 14px; }

/* Help & support */
.hp-page { max-width: 1040px; }
.hp-head { margin-bottom: 24px; }
.hp-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.hp-link { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 16px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.hp-link:hover { border-color: rgba(var(--bs-primary-rgb), .5); transform: translateY(-2px); color: inherit; }
.hp-link:focus-visible { outline: 2px solid var(--brand-tint); outline-offset: 2px; }
.hp-link strong { margin-top: 8px; font-size: .98rem; color: #fafafa; }
.hp-link > span:last-child { font-size: .84rem; color: #a1a1aa; line-height: 1.5; }
.hp-ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #c4b5fd; background: rgba(139,92,246,.14); }
.hp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.hp-grid .acc-card { margin-bottom: 0; }
.hp-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hp-types .app-platform { height: auto; min-height: 46px; padding: 8px 10px; text-align: center; line-height: 1.3; font-size: .86rem; }
.hp-textarea { border-radius: 12px; padding: 12px 14px; font-size: .95rem; resize: vertical; min-height: 140px; }
.hp-side h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 8px; }
.hp-mail { display: inline-block; font-weight: 700; color: #c4b5fd; overflow-wrap: anywhere; }
.hp-sep { border-color: var(--bs-border-color); opacity: 1; margin: 18px 0; }
.hp-legal { display: flex; gap: 16px; }
.hp-legal a { color: #a1a1aa; font-size: .88rem; }
.hp-legal a:hover { color: #fff; }
.hp-done { text-align: center; padding: 28px 8px; }
.hp-done-ico { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; font-size: 1.5rem; font-weight: 800; color: #052e16; background: #4ade80; }
.hp-done h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 8px; }
.hp-done p { color: #a1a1aa; margin-bottom: 18px; }
.hp-ref { display: block; margin-top: 6px; font-size: .85rem; }
.hp-ref code { color: #c4b5fd; background: none; }
@media (max-width: 860px) { .hp-grid { grid-template-columns: 1fr; } .hp-links { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .hp-types { grid-template-columns: 1fr; } }

/* AI agents */
.ag-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.ag-step { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 16px; }
.ag-step strong { color: #fafafa; }
.ag-step > span:last-child { font-size: .84rem; color: #a1a1aa; line-height: 1.5; }
.ag-num { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: .8rem; font-weight: 800; color: #fff; background: var(--brand-violet-deep); margin-bottom: 6px; }
.ag-form { margin: 4px 0 18px; padding: 18px; border: 1px solid var(--bs-border-color); border-radius: 14px; background: rgba(255,255,255,.02); max-width: 520px; }
.ag-apps { display: flex; flex-direction: column; gap: 6px; }
.ag-app { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--brand-border); border-radius: 10px; cursor: pointer; background: var(--brand-inset); }
.ag-app small { margin-left: auto; color: #8b839d; text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; }
.ag-reveal { margin: 4px 0 18px; padding: 18px; border: 1px solid rgba(74,222,128,.35); background: rgba(74,222,128,.06); border-radius: 14px; }
.ag-reveal h3 { font-size: 1rem; font-weight: 800; margin: 0 0 4px; }
.ag-reveal .pn-keyrow code { overflow-wrap: anywhere; }
.ag-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 10px; }
.ag-tabs button { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--brand-border-strong); background: none; color: #a1a1aa; font-size: .85rem; font-weight: 600; cursor: pointer; }
.ag-tabs button.on { color: #fff; border-color: var(--bs-primary); background: rgba(139,92,246,.16); }
.ag-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ag-keys li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--bs-border-color); border-radius: 12px; }
.ag-keys li > .btn { grid-row: 1 / span 3; grid-column: 2; }
.ag-key-main { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ag-key-main code { color: #a1a1aa; background: none; padding: 0; }
.ag-key-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: .8rem; }
.ag-chip { padding: 2px 9px; border-radius: 999px; background: rgba(139,92,246,.14); color: #c4b5fd; font-size: .75rem; font-weight: 600; }
.ag-expired { color: #fca5a5; font-weight: 700; }
.ag-empty { padding: 22px; text-align: center; color: #a1a1aa; border: 1px dashed var(--brand-border-strong); border-radius: 12px; }
.ag-prompts, .ag-safe { margin: 0; padding-left: 1.1rem; color: #cfc8de; }
.ag-prompts li, .ag-safe li { margin: 8px 0; line-height: 1.55; font-size: .92rem; }
.ag-prompts li { font-style: italic; }
@media (max-width: 720px) { .ag-steps { grid-template-columns: 1fr; } .ag-keys li { grid-template-columns: 1fr; } .ag-keys li > .btn { grid-row: auto; grid-column: 1; justify-self: start; margin-top: 6px; } }

/* New paywall chooser and editor tip */
.nw-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:6px 0 4px}
.nw-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:20px;border-radius:16px;border:1px solid var(--bs-border-color);background:var(--brand-inset);color:#cfc8de;font:inherit;text-decoration:none;cursor:pointer;transition:border-color .15s,transform .15s,background .15s}
.nw-card:hover{border-color:rgba(var(--bs-primary-rgb),.6);transform:translateY(-2px);color:#fff}
.nw-card:focus-visible{outline:2px solid var(--brand-tint);outline-offset:2px}
.nw-card strong{color:#fafafa;font-size:1.02rem;margin-top:6px}
.nw-card > span:not(.nw-ico):not(.nw-badge){font-size:.86rem;line-height:1.5;color:#a59db8}
.nw-card em{font-style:normal;margin-top:auto;padding-top:10px;color:#c4b5fd;font-weight:700;font-size:.86rem}
.nw-ico{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(139,92,246,.14);color:#c4b5fd;font-size:1.2rem}
.nw-ai{background:linear-gradient(150deg,rgba(139,92,246,.18),rgba(236,72,153,.08)),var(--brand-inset);border-color:rgba(167,139,250,.35)}
.nw-badge{position:absolute;top:14px;right:14px;padding:2px 9px;border-radius:99px;background:linear-gradient(120deg,#7c3aed,#c026d3);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.04em}
.nw-foot{justify-content:flex-start}
.ed-tip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;padding:10px 20px;background:linear-gradient(90deg,rgba(139,92,246,.18),rgba(236,72,153,.08));border-bottom:1px solid rgba(167,139,250,.3);font-size:.88rem;color:#e0d6ff}
.ed-tip[hidden]{display:none}
.ed-tip-ico{color:#c4b5fd}
.ed-tip-text{flex:1 1 280px;color:#cfc8de}.ed-tip-text strong{color:#fff}
.ed-tip-close{opacity:.6}
@media (max-width:640px){.nw-grid{grid-template-columns:1fr}}
/* Live agent pairing (paywall editor) */
.ed-agent-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(167,139,250,.45);background:linear-gradient(90deg,rgba(139,92,246,.22),rgba(236,72,153,.12));color:#efe9ff;font-size:.85rem;font-weight:600;white-space:nowrap;transition:border-color .2s,background .2s}
.ed-agent-btn:hover{border-color:#a78bfa;background:linear-gradient(90deg,rgba(139,92,246,.34),rgba(236,72,153,.2))}
.ed-agent-btn:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
.ed-agent-dot{width:8px;height:8px;border-radius:50%;background:#c4b5fd;box-shadow:0 0 0 0 rgba(196,181,253,.6)}
.ed-agent-btn.is-waiting .ed-agent-dot{background:#fbbf24;animation:eaPulse 1.6s infinite}
.ed-agent-btn.is-live{border-color:rgba(52,211,153,.55);background:rgba(16,185,129,.14)}
.ed-agent-btn.is-live .ed-agent-dot{background:#34d399;animation:eaPulse 1.6s infinite}
@keyframes eaPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.ea-panel{position:fixed;top:132px;right:20px;z-index:1060;width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 152px);overflow:auto;padding:18px;border-radius:16px;background:rgba(20,18,28,.97);border:1px solid rgba(167,139,250,.28);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset;color:#e7e3f0;font-size:.88rem;backdrop-filter:blur(10px);animation:eaIn .22s ease-out}
.ea-panel[hidden]{display:none}
@keyframes eaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ea-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ea-title{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1rem;color:#fff}
.ea-spark{color:#c4b5fd}
.ea-close{font-size:.7rem;opacity:.6}
.ea-close:hover{opacity:1}
.ea-wait,.ea-live{width:9px;height:9px;border-radius:50%;flex:none}
.ea-wait{background:#fbbf24;animation:eaPulse 1.6s infinite}
.ea-live{background:#34d399;animation:eaPulse 1.6s infinite}
.ea-lead{color:#bdb6cc;margin:0 0 10px;line-height:1.5}
.ea-points{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:6px}
.ea-points li{position:relative;padding-left:22px;color:#d9d3e6}
.ea-points li::before{content:"✓";position:absolute;left:0;color:#a78bfa;font-weight:700}
.ea-steps{list-style:none;counter-reset:ea;padding:0;margin:0 0 14px;display:grid;gap:16px}
.ea-steps>li{counter-increment:ea;position:relative;padding-left:34px}
.ea-steps>li::before{content:counter(ea);position:absolute;left:0;top:-1px;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;background:rgba(139,92,246,.2);color:#d8ccff;border:1px solid rgba(167,139,250,.4)}
.ea-step-t{font-weight:600;color:#fff;margin-bottom:8px}
.ea-chips{display:flex;flex-wrap:wrap;gap:6px}
.ea-chips span{padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:.78rem;color:#d4cfe0}
.ea-tabs{display:flex;gap:4px;padding:3px;border-radius:10px;background:rgba(255,255,255,.05);margin-bottom:8px}
.ea-tabs button{flex:1;border:0;background:transparent;color:#a9a2b8;font-size:.78rem;font-weight:600;padding:6px 4px;border-radius:7px}
.ea-tabs button.on{background:rgba(139,92,246,.3);color:#fff}
.ea-tabs button:focus-visible{outline:2px solid #a78bfa}
.ea-note{font-size:.78rem;color:#9f98ae;margin-bottom:6px}
.ea-code,.ea-prompt{position:relative;border-radius:10px;background:#0c0b11;border:1px solid rgba(255,255,255,.09)}
.ea-code pre{margin:0;padding:10px 84px 10px 12px;font-size:.76rem;color:#e3dcff;white-space:pre-wrap;word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ea-prompt{padding:12px 84px 12px 12px;font-size:.84rem;color:#fff;line-height:1.45;border-color:rgba(167,139,250,.4);background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(12,11,17,.9))}
.ea-copy{position:absolute;top:8px;right:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#e9e4f5;font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:7px}
.ea-copy:hover{background:rgba(255,255,255,.14)}
.ea-codeline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:.78rem;color:#9f98ae}
.ea-pair{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;letter-spacing:.06em;color:#fff;font-size:.9rem}
.ea-codeline .btn-link,.ea-expired .btn-link{color:#c4b5fd;font-size:.78rem;text-decoration:none}
.ea-expired{font-size:.84rem;color:#fbbf24}
.ea-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.ea-agent{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.ea-avatar{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:1.1rem;color:#fff;background:linear-gradient(135deg,#8b5cf6,#ec4899)}
.ea-agent-name{font-weight:700;color:#fff}
.ea-agent-meta{font-size:.76rem;color:#9f98ae}
.ea-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.ea-stats div{padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.ea-stats dt{font-size:.7rem;font-weight:600;color:#9f98ae;text-transform:uppercase;letter-spacing:.04em}
.ea-stats dd{margin:2px 0 0;font-weight:700;color:#fff}
.ea-sub{font-size:.72rem;font-weight:700;color:#9f98ae;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.ea-activity{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:2px}
.ea-activity li{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:8px;font-size:.82rem;color:#e0dae9}
.ea-activity li:first-child{background:rgba(139,92,246,.14)}
.ea-activity time{color:#8d869c;font-size:.74rem;white-space:nowrap}
.ea-activity .ea-empty{color:#9f98ae;background:none}
.ea-hint{font-size:.78rem;color:#9f98ae;line-height:1.45;margin:0 0 12px}
.ea-undo-what{opacity:.65}
.preview-area{position:relative;min-width:0}
.preview-header{flex-shrink:0}
.ea-working{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:5;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(20,18,28,.92);border:1px solid rgba(167,139,250,.5);color:#efe9ff;font-size:.8rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.ea-working[hidden]{display:none}
.ea-spin{width:12px;height:12px;border-radius:50%;border:2px solid rgba(196,181,253,.3);border-top-color:#c4b5fd;animation:eaSpin .8s linear infinite}
@keyframes eaSpin{to{transform:rotate(360deg)}}
.mobile-frame.ea-flash{animation:eaFlash 1s ease-out}
@keyframes eaFlash{0%{box-shadow:0 0 0 0 rgba(167,139,250,.75)}100%{box-shadow:0 0 0 18px rgba(167,139,250,0)}}
@media (min-width:1200px){.editor-container.ea-docked{grid-template-columns:minmax(360px,30vw) minmax(0,1fr) 360px}.editor-container.ea-docked .preview-header{padding:8px 14px!important}.ea-panel{position:relative;top:auto;right:auto;z-index:auto;width:auto;max-height:none;height:100%;border-radius:0;border:0;border-left:1px solid rgba(167,139,250,.22);box-shadow:none;backdrop-filter:none;background:#14121c}}
@media (max-width:767.98px){.ed-agent-btn #edAgentBtnText{display:none}.ed-agent-btn{padding:0 11px}.ea-panel{top:auto;bottom:76px;right:16px;left:16px;width:auto;max-height:70vh}}
@media (prefers-reduced-motion:reduce){.ea-panel,.mobile-frame.ea-flash,.ea-wait,.ea-live,.ed-agent-dot{animation:none!important}}
.ag-live{border:1px solid rgba(167,139,250,.3);border-radius:14px;margin:0 0 20px}

/* My templates */
.tm-modal .modal-content{background:var(--brand-plum,#171122);border:1px solid var(--brand-border-strong);border-radius:18px}
.tm-modal .modal-header{align-items:flex-start;border-bottom:1px solid var(--bs-border-color);padding:20px 24px}
.tm-modal .modal-title{font-size:1.15rem;font-weight:800;margin:0}
.tm-sub{margin:4px 0 0;color:#9a95ab;font-size:.85rem;line-height:1.5;max-width:520px}
.tm-modal .modal-body{padding:8px 24px 20px}
.tm-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:rgba(139,92,246,.3);color:#e9e2ff;font-size:.72rem;font-weight:800;display:inline-grid;place-items:center}
.tm-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--bs-border-color)}
.tm-row:last-child{border-bottom:0}
.tm-name{font-weight:700;color:#f1eefa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-meta{display:flex;align-items:center;gap:10px;margin-top:4px;color:#8b8799;font-size:.78rem;flex-wrap:wrap}
.tm-chip{padding:2px 8px;border-radius:999px;border:1px solid var(--brand-border-strong);font-weight:700;font-size:.7rem;color:#c9c4d6}
.tm-chip.is-agent{border-color:rgba(167,139,250,.5);color:#c4b5fd;background:rgba(139,92,246,.12)}
.tm-usage{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:.8rem;color:#c9c4d6;text-align:right}
.tm-live{color:#86efac;font-size:.74rem;font-weight:700}
.tm-unused{color:#8b8799}
@media (max-width:640px){.tm-row{grid-template-columns:1fr auto}.tm-usage{grid-column:1;align-items:flex-start;text-align:left}.tm-actions{grid-row:1;grid-column:2}}
.tm-row .btn:disabled{opacity:.35}
.tm-name{background:none;border:0;padding:0;text-align:left;cursor:pointer;max-width:100%}
.tm-name:hover{color:#c4b5fd;text-decoration:underline}
.tm-actions{display:flex;gap:8px}
.tm-back{background:none;border:0;color:#c4b5fd;font-weight:700;font-size:.85rem;padding:12px 0 8px;cursor:pointer}
.tm-back:hover{color:#fff}
.tm-detail{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;padding:8px 0 4px;align-items:start}
.tm-stage{display:flex;flex-direction:column;align-items:center;gap:12px;background:radial-gradient(circle at center,#1b1429 0%,#0d0916 100%);border:1px solid var(--bs-border-color);border-radius:16px;padding:16px;min-width:0}
.tm-device{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--brand-border-strong);border-radius:9px;background:rgba(0,0,0,.3)}
.tm-device button{border:0;background:none;color:#a1a1aa;font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:7px;cursor:pointer}
.tm-device button.on{background:var(--brand-violet-deep);color:#fff}
.tm-frame{position:relative;border-radius:22px;overflow:hidden;border:6px solid #241b35;background:#fff;box-sizing:content-box}
.tm-frame iframe{border:0;transform-origin:top left;display:block;background:#fff}
.tm-noprev{padding:60px 20px;color:#8b8799;font-size:.85rem;text-align:center}
.tm-info{display:flex;flex-direction:column;gap:16px;min-width:0}
.tm-facts{display:grid;gap:10px;margin:0}
.tm-facts div{display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--bs-border-color)}
.tm-facts dt{color:#8b8799;font-weight:600;font-size:.82rem}
.tm-facts dd{margin:0;color:#f1eefa;font-size:.85rem;text-align:right}
.tm-note{margin:0;color:#8b8799;font-size:.78rem;line-height:1.5}
.tm-detail-actions{display:flex;gap:10px;flex-wrap:wrap}
.tm-modal.is-detail .modal-dialog{max-width:900px}
@media (max-width:760px){.tm-detail{grid-template-columns:1fr}}

/* ---------- Global surface and field polish: no hard black or neutral grey anywhere in the panel ---------- */
:root { --pn-field-bg: rgba(255,255,255,.04); --pn-field-border: rgba(167,139,250,.22); --pn-inset: rgba(15,10,25,1); --pn-line: rgba(167,139,250,.16); }
.form-control, .form-select, .input-group-text, textarea.form-control {
  background-color: var(--pn-field-bg) !important; border: 1px solid var(--pn-field-border) !important; border-radius: 10px !important;
  color: #f1eefa !important; box-shadow: none; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control::placeholder { color: #7d7890 !important; opacity: 1; }
.form-control:hover, .form-select:hover { border-color: rgba(167,139,250,.4) !important; }
.form-control:focus, .form-select:focus { border-color: #8B5CF6 !important; background-color: rgba(139,92,246,.07) !important; box-shadow: 0 0 0 3px rgba(139,92,246,.25) !important; }
.form-control[readonly] { background-color: rgba(255,255,255,.025) !important; color: #c9c4d6 !important; }
.form-control:disabled, .form-select:disabled { opacity: .6; }
.input-group > .form-control:not(:last-child), .input-group > .input-group-text:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .form-control:not(:first-child), .input-group > .input-group-text:not(:first-child), .input-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px; }
.input-group-text { color: #a8a3b8 !important; }
.form-check-input { background-color: rgba(255,255,255,.05); border-color: rgba(167,139,250,.4); }
.form-check-input:checked { background-color: #7C3AED; border-color: #7C3AED; }
.form-check-input:focus { box-shadow: var(--brand-focus); border-color: #8B5CF6; }
.bg-dark { background-color: rgba(15,10,25,var(--bs-bg-opacity,1)) !important; }
.bg-black { background-color: rgba(139,92,246,calc(var(--bs-bg-opacity,1) * .35)) !important; }
.bg-black.bg-opacity-25, .bg-black.bg-opacity-10, .bg-black.bg-opacity-50 { background-color: rgba(139,92,246,.08) !important; }
.border-secondary { border-color: var(--pn-line) !important; }
.table, .table-dark { --bs-table-bg: transparent; --bs-table-color: #e4e0ee; --bs-table-border-color: var(--pn-line); --bs-table-hover-bg: rgba(139,92,246,.06); --bs-table-striped-bg: transparent; }
.table thead, .table thead th { background-color: rgba(139,92,246,.08) !important; border-color: var(--pn-line) !important; }
.table td, .table th { border-color: var(--pn-line) !important; }
.btn-dark { background-color: rgba(255,255,255,.04); border-color: var(--brand-border-strong); color: #d4d0e0; }
.btn-dark:hover, .btn-dark:focus-visible { background-color: rgba(139,92,246,.14); border-color: rgba(167,139,250,.5); color: #fff; }
.modal-content { background-color: var(--brand-plum, #171122); border-color: var(--brand-border-strong); }
pre, .font-monospace.bg-dark, code.d-block { background-color: rgba(15,10,25,1); }
::selection { background: rgba(139,92,246,.4); }

/* RevenueCat guide */
.rc-status{display:inline-flex;align-items:center;gap:8px;margin:2px 0 14px;padding:5px 12px;border-radius:999px;border:1px solid var(--brand-border-strong);font-size:.78rem;font-weight:700;color:#a8a3b8}
.rc-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#71717a}
.rc-status[data-state="wait"]{color:#fcd34d;border-color:rgba(252,211,77,.4)}.rc-status[data-state="wait"]::before{background:#fcd34d}
.rc-status[data-state="on"]{color:#86efac;border-color:rgba(134,239,172,.4)}.rc-status[data-state="on"]::before{background:#4ade80}
.rc-status:empty{display:none}
.rc-steps{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:12px}
.rc-steps li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.rc-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(139,92,246,.18);border:1px solid rgba(167,139,250,.4);color:#ddd6fe;font-weight:800;font-size:.8rem}
.rc-steps strong{display:block;color:#f1eefa;font-size:.92rem;margin-bottom:2px}
.rc-steps p{margin:0;color:#a8a3b8;font-size:.84rem;line-height:1.55}
.rc-steps code,.rc-help code{background:rgba(139,92,246,.14);color:#ddd6fe;padding:1px 6px;border-radius:6px;font-size:.8rem}
.rc-help{margin:0 0 18px;padding:12px 14px;border:1px solid var(--pn-line,rgba(167,139,250,.16));border-radius:12px;background:rgba(139,92,246,.05)}
.rc-help a{color:#c4b5fd;font-weight:700;white-space:nowrap}

/* ---------- Revenue page v2 ---------- */
.rv-main { max-width: 1180px; }
.rv-range { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--brand-border-strong); border-radius: 11px; background: rgba(255,255,255,.03); }
.rv-range button { border: 0; background: none; color: #a8a3b8; font-weight: 700; font-size: .8rem; padding: 7px 14px; border-radius: 8px; cursor: pointer; }
.rv-range button:hover { color: #fff; }
.rv-range button.on { background: var(--brand-violet-deep); color: #fff; }
.rv-range button:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.rv-note-bar { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; margin-bottom: 18px; border: 1px solid rgba(167,139,250,.25); background: rgba(139,92,246,.07); border-radius: 12px; color: #c9c4d6; font-size: .84rem; line-height: 1.5; }
.rv-note-bar svg { flex: none; margin-top: 2px; color: #c4b5fd; }
.rv-note-bar strong { color: #ede9fe; }
.rv-card { border-radius: 16px; padding: 22px; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset; }
.rv-card-head h2 { display: flex; align-items: center; gap: 8px; }
.rv-hero { background: linear-gradient(135deg, rgba(139,92,246,.16), rgba(236,72,153,.07) 55%, transparent), var(--brand-surface); border-color: rgba(167,139,250,.28); }
.rv-est { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding: 6px 0 20px; }
.rv-est-num { display: block; font-size: clamp(2.2rem, 5vw, 3.1rem); font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1.05; }
.rv-est-more { display: flex; gap: 12px; margin-top: 4px; color: #c9c4d6; font-weight: 700; }
.rv-est-cap { display: block; margin-top: 6px; color: #a8a3b8; font-size: .84rem; }
.rv-est-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.rv-est-stats > div { min-width: 150px; padding: 12px 16px; border: 1px solid var(--pn-line, rgba(167,139,250,.16)); border-radius: 12px; background: rgba(15,10,25,.45); }
.rv-est-stats span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #a8a3b8; font-weight: 700; }
.rv-est-stats strong { font-size: 1.25rem; color: #fff; }
.rv-est-note { margin-top: 14px; }
.rv-bar-cell { min-width: 170px; }
.rv-bar { display: block; height: 6px; margin-top: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.rv-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8B5CF6, #EC4899); }
.rv-two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); margin-bottom: 18px; }
.rv-two .rv-card { margin-bottom: 0; }
.rv-kpi { background: rgba(15,10,25,.45); border-color: var(--pn-line, rgba(167,139,250,.16)); }
.rv-kpi strong { font-size: 1.35rem; }
.rv-card.is-muted { background: rgba(255,255,255,.02); }
.rv-card:empty, .rv-card[hidden] { display: none; }

/* Delete app confirmation */
.da-modal .modal-content{background:var(--brand-plum,#171122);border:1px solid rgba(248,113,113,.35);border-radius:18px}
.da-modal .modal-body{padding:28px}
.da-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(248,113,113,.12);color:#fca5a5;margin-bottom:14px}
.da-modal h2{font-size:1.25rem;font-weight:800;margin:0 0 6px}
.da-lead{color:#c9c4d6;margin:0 0 12px;font-size:.92rem;line-height:1.55}
.da-list{margin:0 0 18px;padding-left:18px;color:#a8a3b8;font-size:.85rem;line-height:1.7}
.da-label{color:#d9d4e8;font-size:.84rem;font-weight:600}
.da-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* Revenue: confirmed sources and the "get exact numbers" prompt */
.rv-tabs{display:inline-flex;padding:3px;gap:2px;border:1px solid var(--brand-border-strong);border-radius:10px;background:rgba(255,255,255,.03)}
.rv-tabs button{border:0;background:none;color:#a8a3b8;font-weight:700;font-size:.8rem;padding:6px 14px;border-radius:7px;cursor:pointer}
.rv-tabs button.on{background:var(--brand-violet-deep);color:#fff}
.rv-tabs button:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
.rv-pane[hidden]{display:none}
.rv-pane .rv-card-head{display:none}
.rv-improve{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-style:dashed}
.rv-improve h2{margin:0 0 4px;font-size:1.05rem;font-weight:800;color:#fff}
.rv-improve p{margin:0;color:#a8a3b8;font-size:.86rem;max-width:420px;line-height:1.5}
.rv-imp-grid{display:grid;grid-template-columns:repeat(2,minmax(190px,1fr));gap:12px;flex:1;min-width:min(100%,420px);max-width:560px}
.rv-imp{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--pn-line,rgba(167,139,250,.16));border-radius:14px;background:rgba(15,10,25,.45);color:inherit;text-decoration:none;transition:border-color .15s,background .15s}
.rv-imp:hover{border-color:rgba(167,139,250,.5);background:rgba(139,92,246,.1)}
.rv-imp strong{color:#f1eefa;font-size:.92rem}
.rv-imp span{color:#a8a3b8;font-size:.8rem;line-height:1.45}
.rv-imp em{font-style:normal;color:#c4b5fd;font-weight:700;font-size:.82rem;margin-top:4px}
#rvSources{margin-bottom:18px}
#rvSources .rv-card{margin-bottom:0}
@media(max-width:640px){.rv-imp-grid{grid-template-columns:1fr}}
.rv-imp-grid:has(.rv-imp:only-child){grid-template-columns:minmax(220px,1fr);max-width:340px}
.tm-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0 6px}
.tm-tabs{display:inline-flex;padding:3px;gap:2px;border:1px solid var(--brand-border-strong);border-radius:10px;background:rgba(255,255,255,.03)}
.tm-tabs button{border:0;background:none;color:#a8a3b8;font-weight:700;font-size:.8rem;padding:6px 14px;border-radius:7px;cursor:pointer}
.tm-tabs button.on{background:var(--brand-violet-deep);color:#fff}
.tm-tabs button:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
.tm-limit{color:#8b8799;font-size:.78rem}
.tm-limit.is-full{color:#fcd34d;font-weight:700}
/* New paywall dialog: template picker with tabs */
.nw-modal .app-modal-body.nw-body{padding-top:4px}
.nw-ai-strip{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;border:1px solid rgba(167,139,250,.38);background:linear-gradient(110deg,rgba(139,92,246,.2),rgba(236,72,153,.08));color:#e9e4f7;text-decoration:none;margin-bottom:18px;transition:border-color .15s,background .15s}
.nw-ai-strip:hover{border-color:#a78bfa;color:#fff;background:linear-gradient(110deg,rgba(139,92,246,.3),rgba(236,72,153,.12))}
.nw-ai-strip:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
.nw-ai-ico{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;background:rgba(139,92,246,.28);color:#ddd6fe;font-size:1.1rem}
.nw-ai-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.nw-ai-text strong{color:#fff;font-size:.95rem}
.nw-ai-text span{font-size:.82rem;color:#bdb4d1}
.nw-ai-go{flex:none;font-weight:700;font-size:.85rem;color:#ddd6fe}
.nw-tabs{display:flex;align-items:center;gap:4px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:16px;flex-wrap:wrap}
.nw-tabs [data-nw-tab]{position:relative;display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:#a59db8;font-weight:600;font-size:.9rem;padding:10px 14px;margin-bottom:-1px;border-bottom:2px solid transparent}
.nw-tabs [data-nw-tab]:hover{color:#fff}
.nw-tabs [data-nw-tab].on{color:#fff;border-bottom-color:#8b5cf6}
.nw-tabs [data-nw-tab]:focus-visible{outline:2px solid #a78bfa;outline-offset:-2px;border-radius:6px}
.nw-count{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:rgba(139,92,246,.3);color:#ede9fe;font-size:.72rem;font-weight:700;display:inline-grid;place-items:center}
.nw-tabs-extra{margin-left:auto;padding-bottom:4px}
.nw-link{border:0;background:none;color:#c4b5fd;font-weight:600;font-size:.84rem;text-decoration:none;padding:4px 6px}
.nw-link:hover{color:#fff}
/* Template picker cards: the design fills the card (like the public playground); name and action appear on hover. */
.nw-grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px;min-height:300px;padding:10px 4px 16px}
.nw-tcard{position:relative;display:block;padding:0;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#1a1426;color:inherit;text-decoration:none;text-align:left;font:inherit;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),border-color .16s,box-shadow .16s;animation:nwCardIn .36s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*30ms)}
.nw-tcard:hover,.nw-tcard:focus-visible{transform:perspective(900px) translate3d(0,-6px,24px) rotateX(3deg) scale(1.04);border-color:#8b5cf6;box-shadow:0 26px 50px rgba(0,0,0,.5),0 0 0 1px rgba(139,92,246,.35);z-index:1}
.nw-tcard:focus-visible{outline:2px solid #a78bfa;outline-offset:3px}
.nw-tcard:active{transform:perspective(900px) translate3d(0,-3px,10px) scale(1.02)}
.nw-tcard.is-loading{cursor:default;animation:none}
.nw-tcard.is-loading:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,.08)}
.nw-tcard.is-busy{opacity:.6;pointer-events:none}
.nw-stage{position:relative;display:block;aspect-ratio:390/844;overflow:hidden;background:linear-gradient(160deg,#2a2040,#1a1426)}
.nw-skel{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.nw-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.nw-shot.is-ready{opacity:1}
.nw-frame{position:absolute;top:0;left:0;width:390px;height:844px;border:0;transform-origin:top left;transform:scale(var(--nw-scale,.5));pointer-events:none;background:#fff}
.nw-cm-stage{display:grid;place-items:center;font-size:.75rem;color:#8d869c;text-align:center;padding:8px}
.nw-cm-stage .cm-card-frame{position:absolute;top:50%;left:50%;width:390px;height:844px;border:0;pointer-events:none;background:#120d1c}
.nw-hover{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:48px 14px 16px;text-align:center;
  background:linear-gradient(180deg,rgba(13,9,21,0),rgba(13,9,21,.78) 45%,rgba(13,9,21,.94));opacity:0;transform:translateY(10px);transition:opacity .16s,transform .16s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.nw-tcard:hover .nw-hover,.nw-tcard:focus-visible .nw-hover,.nw-tcard.is-busy .nw-hover{opacity:1;transform:none}
.nw-tname{max-width:100%;font-weight:800;color:#fff;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nw-tmeta{max-width:100%;font-size:.75rem;color:#c9c2d8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nw-try{margin-top:8px;padding:8px 18px;border-radius:999px;background:#7c3aed;color:#fff;font-weight:800;font-size:.8rem;box-shadow:0 6px 18px rgba(124,58,237,.45)}
@media (hover:none){.nw-hover{opacity:1;transform:none;padding-top:36px}.nw-try{display:none}}
@keyframes nwCardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nw-tcard,.nw-hover{animation:none;transition:none}.nw-tcard:hover,.nw-tcard:focus-visible{transform:none}}
.nw-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:48px 16px;color:#a59db8;min-height:300px;justify-content:center}
.nw-empty strong{color:#fff;font-size:1rem}
.nw-empty p{max-width:420px;margin:0 0 6px;font-size:.88rem}
.nw-empty-ico{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:rgba(139,92,246,.16);color:#c4b5fd}
@media (max-width:575.98px){.nw-grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.nw-ai-go{display:none}}
.nw-modal{height:min(860px,calc(100vh - 3.5rem))}
/* The body is not a .modal-body, so Bootstrap's scrollable dialog does not scroll it; the fixed-height card would clip the grid. */
.nw-modal .nw-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.acc-lang{display:flex;gap:10px;flex-wrap:wrap}
.acc-lang-opt{display:inline-flex;align-items:center;gap:10px;min-width:180px;padding:12px 14px;border-radius:12px;border:1px solid var(--bs-border-color);background:rgba(255,255,255,.03);color:#e7e3f0;font-weight:600;text-align:left}
.acc-lang-opt:hover{border-color:rgba(167,139,250,.55);color:#fff}
.acc-lang-opt.on{border-color:#8b5cf6;background:rgba(139,92,246,.14)}
.acc-lang-opt:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
.acc-lang-code{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(139,92,246,.2);color:#ddd6fe;font-size:.75rem;font-weight:800}
.acc-lang-tick{margin-left:auto;color:#a78bfa;font-weight:800}
.ed-alltpl{border:0;background:none;padding:0 2px;color:#c4b5fd;font-size:.8rem;font-weight:600;margin-bottom:6px}
.ed-alltpl:hover{color:#fff;text-decoration:underline}
.ed-alltpl:focus-visible{outline:2px solid #a78bfa;outline-offset:2px;border-radius:4px}
.ed-alltpl-pv{margin:0 0 0 8px;padding:3px 10px;border:1px solid rgba(167,139,250,.35);border-radius:8px;font-size:.75rem;text-decoration:none!important}
.ed-alltpl-pv:hover{background:rgba(139,92,246,.18)}
.nw-tcard.is-current{border-color:#8b5cf6;box-shadow:0 0 0 2px rgba(139,92,246,.55)}
.nw-current{position:absolute;top:12px;left:12px;z-index:2;box-shadow:0 4px 12px rgba(0,0,0,.35);padding:2px 9px;border-radius:99px;background:#7c3aed;color:#fff;font-size:.7rem;font-weight:800}

/* Subscription & billing */
.bill-callout{margin:0 0 14px;padding:12px 14px;border-radius:12px;border:1px solid rgba(167,139,250,.3);background:rgba(139,92,246,.1);color:#d9d3ea;font-size:.9rem}
.bill-callout strong{color:#fff}
.bill-lead{color:#d9d3ea;margin:0 0 14px}
.bill-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0 0 16px}
.bill-rows div{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--bs-border-color)}
.bill-rows dt{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#9b96ab}
.bill-rows dd{margin:3px 0 0;font-weight:700;color:#fff}
.bill-notice{margin:0 0 14px;padding:12px 14px;border-radius:12px;font-size:.9rem;border:1px solid}
.bill-notice.is-info{background:rgba(125,211,252,.08);border-color:rgba(125,211,252,.3);color:#bae6fd}
.bill-notice.is-success{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.3);color:#bbf7d0}
.bill-notice.is-warning{background:rgba(252,211,77,.08);border-color:rgba(252,211,77,.35);color:#fde68a}
.bill-notice.is-error{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.35);color:#fecaca}
#billNotice{margin-bottom:0}
#billNotice .bill-notice{margin-bottom:16px}
.bill-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px}
.bill-plan{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px;border-radius:14px;border:1px solid var(--bs-border-color);background:rgba(255,255,255,.03);color:#e7e3f0;transition:border-color .15s,background .15s}
.bill-plan:hover{border-color:rgba(167,139,250,.55)}
.bill-plan.on{border-color:#8b5cf6;background:rgba(139,92,246,.14);box-shadow:0 0 0 1px #8b5cf6 inset}
.bill-plan:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
.bill-plan-name{display:flex;align-items:center;gap:8px;font-weight:700}
.bill-plan-name em{font-style:normal;font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:99px;background:#7c3aed;color:#fff}
.bill-plan-price{font-size:1.6rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.bill-plan-price small{font-size:.8rem;font-weight:500;color:#9b96ab;margin-left:6px}
.bill-cta{height:44px;padding:0 22px;border-radius:12px;font-weight:700}
.bill-fine{margin:10px 0 0;font-size:.78rem;color:#9b96ab}
.bill-policy{margin:0;padding-left:18px;color:#c9c3d6;display:grid;gap:8px;font-size:.9rem}
@media (max-width:575.98px){.bill-plans{grid-template-columns:1fr}.bill-cta{width:100%}}

/* Inline template picker inside the editor preview area */
.preview-frame-container.picker-mode{display:block!important;align-items:stretch;justify-content:flex-start;overflow:auto;padding:22px 26px 34px!important}
.nw-inline{max-width:1180px;margin:0 auto}
button.nw-ai-strip{width:100%;text-align:left;font:inherit;cursor:pointer}
.nw-inline .nw-tabs{position:sticky;top:-22px;z-index:3;background:#0b0911;padding-top:6px;margin-bottom:18px}
.nw-inline .nw-grid2{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
@media (max-width:991.98px){.preview-frame-container.picker-mode{padding:16px!important}}

/* One-time AI agent introduction */
body.ai-intro-open{overflow:hidden}
.ai-intro{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .25s ease}
.ai-intro.is-in{opacity:1}
.ai-intro-backdrop{position:absolute;inset:0;background:rgba(7,5,12,.72);backdrop-filter:blur(6px)}
.ai-intro-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;width:min(1020px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:24px;border:1px solid rgba(167,139,250,.35);background:radial-gradient(90% 70% at 0% 0%,rgba(139,92,246,.22),transparent 60%),radial-gradient(70% 60% at 100% 100%,rgba(236,72,153,.14),transparent 60%),#14101f;box-shadow:0 40px 100px rgba(0,0,0,.6);outline:none;transform:translateY(14px) scale(.98);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.ai-intro.is-in .ai-intro-card{transform:none}
.ai-intro-x{position:absolute;top:12px;right:14px;z-index:3;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.07);color:#d9d3ea;font-size:1.3rem;line-height:1}
.ai-intro-x:hover{background:rgba(255,255,255,.14);color:#fff}
.ai-intro-x:focus-visible,.ai-intro-later:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
.ai-intro-copy{padding:40px 36px 32px 40px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.ai-intro-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:99px;background:rgba(139,92,246,.18);border:1px solid rgba(167,139,250,.4);color:#ddd6fe;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.ai-intro-badge i{width:7px;height:7px;border-radius:50%;background:#c4b5fd;animation:aiPulse 1.8s infinite}
.ai-intro-copy h2{font-size:clamp(1.6rem,3vw,2.15rem);font-weight:800;letter-spacing:-.025em;color:#fff;margin:0 0 10px;line-height:1.15}
.ai-intro-copy>p{color:#b9b1cc;margin:0 0 18px;line-height:1.6;font-size:.98rem}
.ai-intro-points{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.ai-intro-points li{display:flex;align-items:center;gap:12px;color:#e4dff1;font-size:.92rem;font-weight:600}
.ai-intro-points span{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(139,92,246,.2);color:#c4b5fd;font-size:.85rem}
.ai-intro-actions{display:flex;gap:10px;flex-wrap:wrap}
.ai-intro-cta{height:44px;padding:0 22px;border-radius:12px;font-weight:700}
.ai-intro-later{height:44px;padding:0 16px;border-radius:12px;color:#b9b1cc;background:transparent;border:1px solid rgba(255,255,255,.12)}
.ai-intro-later:hover{color:#fff;border-color:rgba(167,139,250,.5)}
.ai-intro-fine{margin:16px 0 0;font-size:.78rem;color:#8d869c}
@keyframes aiPulse{0%{box-shadow:0 0 0 0 rgba(196,181,253,.55)}70%{box-shadow:0 0 0 8px rgba(196,181,253,0)}100%{box-shadow:0 0 0 0 rgba(196,181,253,0)}}

/* The animated scene: one 11s timeline shared by the terminal, the link and the phone */
.ai-intro-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:0;padding:36px 28px;min-width:0;background:linear-gradient(160deg,rgba(255,255,255,.025),transparent);border-left:1px solid rgba(255,255,255,.06)}
.ai-term{flex:1 1 0;min-width:0;max-width:290px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#0b0911;box-shadow:0 18px 40px rgba(0,0,0,.45);overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ai-term-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#1a1526;border-bottom:1px solid rgba(255,255,255,.06)}
.ai-term-bar i{width:8px;height:8px;border-radius:50%;background:#3a3150}
.ai-term-bar span{margin-left:8px;font-size:.68rem;color:#8d869c}
.ai-term-body{padding:12px;min-height:236px;font-size:.68rem;line-height:1.55;color:#cfc8de}
.ai-line{opacity:0;animation:var(--k) 11s infinite both}
.ai-line b{color:#a78bfa;margin-right:6px}
.ai-line em{font-style:normal;color:#4ade80;margin-right:6px}
.ai-line.l-cmd{--k:aiL0}.ai-line.l-prompt{--k:aiL1;margin:4px 0 6px;color:#fff}
.ai-line.l-t1{--k:aiL2}.ai-line.l-t2{--k:aiL3}.ai-line.l-t3{--k:aiL4}.ai-line.l-t4{--k:aiL5}.ai-line.l-t5{--k:aiL6}
.ai-type{display:block;white-space:normal;word-break:break-word;overflow:hidden;max-height:0;animation:aiTyping 11s infinite both}
.ai-line.l-prompt .ai-type::after{content:"▌";color:#c4b5fd;animation:aiCaret .8s steps(1) infinite}
@keyframes aiTyping{0%,4%{max-height:0}12%,92%{max-height:5.2em}100%{max-height:0}}
@keyframes aiCaret{50%{opacity:0}}
@keyframes aiL0{0%,2%{opacity:0}4%,92%{opacity:1}100%{opacity:0}}
@keyframes aiL1{0%,5%{opacity:0}6%,92%{opacity:1}100%{opacity:0}}
@keyframes aiL2{0%,20%{opacity:0;transform:translateX(-6px)}23%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aiL3{0%,32%{opacity:0;transform:translateX(-6px)}35%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aiL4{0%,46%{opacity:0;transform:translateX(-6px)}49%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aiL5{0%,60%{opacity:0;transform:translateX(-6px)}63%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aiL6{0%,74%{opacity:0;transform:translateX(-6px)}77%,92%{opacity:1;transform:none}100%{opacity:0}}
.ai-link{flex:none;width:46px;display:flex;align-items:center;justify-content:center;gap:5px}
.ai-link i{width:6px;height:6px;border-radius:50%;background:#8b5cf6;animation:aiHop 1.2s infinite}
.ai-link i:nth-child(2){animation-delay:.2s}.ai-link i:nth-child(3){animation-delay:.4s}
@keyframes aiHop{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.ai-phone{position:relative;flex:none;width:176px;height:340px;border-radius:30px;background:#0b0911;border:6px solid #26203a;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 50px rgba(0,0,0,.55);overflow:hidden}
.ai-screen{position:absolute;inset:0;padding:14px 12px 12px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(180deg,#2a1859,#140e26 70%)}
.ai-hero{height:74px;border-radius:12px;background:linear-gradient(135deg,#8b5cf6,#ec4899);display:grid;place-items:center}
.ai-hero span{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.85)}
.ai-title{height:11px;width:70%;border-radius:5px;background:#fff;align-self:center}
.ai-sub{height:7px;width:52%;border-radius:4px;background:rgba(255,255,255,.35);align-self:center;margin-top:-3px}
.ai-feat{display:flex;align-items:center;gap:7px}
.ai-feat i{width:12px;height:12px;border-radius:50%;background:#4ade80}
.ai-feat b{height:6px;flex:1;border-radius:3px;background:rgba(255,255,255,.3)}
.ai-feat.d2 b{max-width:78%}.ai-feat.d3 b{max-width:62%}
.ai-plans{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:2px}
.ai-plans div{padding:7px 6px;border-radius:9px;border:1px solid rgba(255,255,255,.18);text-align:center;color:#fff}
.ai-plans small{display:block;font-size:.5rem;color:#c9c3d6}
.ai-plans strong{font-size:.72rem}
.ai-plans .pick{border-color:#a78bfa;background:rgba(139,92,246,.3)}
.ai-cta{margin-top:auto;height:30px;border-radius:10px;background:linear-gradient(90deg,#7c3aed,#c026d3);color:#fff;font-size:.66rem;font-weight:800;display:grid;place-items:center}
.ai-screen>*{opacity:0;animation:var(--k) 11s infinite both}
.ai-screen .s1{--k:aiS1}.ai-screen .s2{--k:aiS2}.ai-screen .s3{--k:aiS3}.ai-screen .s3.d2{--k:aiS3b}.ai-screen .s3.d3{--k:aiS3c}.ai-screen .s4{--k:aiS4}.ai-screen .s5{--k:aiS5}
@keyframes aiS1{0%,20%{opacity:0;transform:scale(.92)}26%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aiS2{0%,32%{opacity:0;transform:translateY(8px)}38%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aiS3{0%,40%{opacity:0;transform:translateX(-8px)}45%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aiS3b{0%,44%{opacity:0;transform:translateX(-8px)}49%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aiS3c{0%,48%{opacity:0;transform:translateX(-8px)}53%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aiS4{0%,50%{opacity:0;transform:translateY(8px)}56%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aiS5{0%,62%{opacity:0;transform:translateY(8px)}68%,92%{opacity:1;transform:none}100%{opacity:0}}
.ai-working{position:absolute;top:10px;left:50%;z-index:2;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:rgba(20,18,28,.95);border:1px solid rgba(167,139,250,.5);color:#efe9ff;font-size:.56rem;font-weight:700;white-space:nowrap;opacity:0;animation:aiWork 11s infinite both}
.ai-working .w-b{display:none;color:#86efac}
.ai-working .w-a{animation:aiSwapA 11s infinite both}
.ai-working .w-b{animation:aiSwapB 11s infinite both}
.ai-spin{width:9px;height:9px;border-radius:50%;border:2px solid rgba(196,181,253,.3);border-top-color:#c4b5fd;animation:eaSpin .8s linear infinite}
@keyframes aiWork{0%,18%{opacity:0}22%,86%{opacity:1}92%,100%{opacity:0}}
@keyframes aiSwapA{0%,76%{display:inline}77%,100%{display:none}}
@keyframes aiSwapB{0%,76%{display:none}77%,100%{display:inline}}
@media (max-width:860px){
  .ai-intro-card{grid-template-columns:1fr}
  .ai-intro-copy{padding:30px 24px 16px}
  .ai-intro-stage{border-left:0;border-top:1px solid rgba(255,255,255,.06);padding:22px 16px 26px}
  .ai-term-body{min-height:200px}
  .ai-phone{width:150px;height:296px}
}
@media (max-width:520px){.ai-term{display:none}.ai-link{display:none}}
@media (prefers-reduced-motion:reduce){
  .ai-intro,.ai-intro-card{transition:none}
  .ai-line,.ai-screen>*,.ai-working,.ai-working .w-a{animation:none!important;opacity:1!important;transform:none!important}
  .ai-type{animation:none;max-height:none}
  .ai-working .w-b{display:none}.ai-link i,.ai-spin,.ai-intro-badge i{animation:none}
  .ai-line.l-prompt .ai-type::after{display:none}
}

.hd-banner{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:8px 20px;font-size:.85rem;font-weight:600;border-bottom:1px solid}
.hd-banner a{color:inherit;text-decoration:underline;white-space:nowrap}
.hd-banner.is-warning{background:rgba(252,211,77,.1);border-color:rgba(252,211,77,.3);color:#fde68a}
.hd-banner.is-danger{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.3);color:#fecaca}
.hd-banner.is-info{background:rgba(125,211,252,.08);border-color:rgba(125,211,252,.25);color:#bae6fd}

/* =====================================================================
   Layout v2: one wide, consistent page frame. The top bar and the page
   content share the same width and gutters, and pages use the space.
   ===================================================================== */
:root { --pn-wide: none; }
nav.top-nav[data-header="apps"] .hd-inner,
nav.top-nav[data-header="account"] .hd-inner,
nav.top-nav[data-header="onboarding"] .hd-inner,
nav.top-nav[data-header="admin"] .hd-inner { max-width: var(--pn-wide); }
nav.top-nav[data-header="billing"] .hd-inner, nav.top-nav[data-header="help"] .hd-inner, nav.top-nav[data-header="agents"] .hd-inner, nav.top-nav[data-header="team"] .hd-inner { max-width: var(--pn-wide); }
.ap-page, .acc-page, .ob-page, .au-page, .tm-page { max-width: var(--pn-wide); }
.hp-page { max-width: var(--pn-wide); padding-left: 24px !important; padding-right: 24px !important; margin-left: auto; margin-right: auto; width: 100%; }
/* Pages with a sidebar fill the space next to it. */
.rv-main, .ov-main { max-width: none; }

/* Account & security: two columns on wide screens */
@media (min-width: 1100px) {
  .acc-page:has(#profile) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-content: start; }
  .acc-page:has(#profile) > * { grid-column: auto; min-width: 0; }
  .acc-page:has(#profile) > div:first-child, .acc-page:has(#profile) > .acc-tabs, .acc-page:has(#profile) > #activity { grid-column: 1 / -1; }
  .acc-page:has(#profile) > #activity { order: 9; }
  .acc-page:has(#profile) > .acc-card { margin-bottom: 24px; }
}

/* ---------- Onboarding v2 ---------- */
.ob-page { padding-top: 40px !important; }
.ob-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 8px; }
.ob-head-main { min-width: 0; }
.ob-head h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 8px; }
.ob-head p { margin: 0; max-width: 640px; font-size: 1rem; }
.ob-progress { width: min(340px, 100%); padding: 14px 18px; border: 1px solid var(--pn-line, rgba(167,139,250,.16)); border-radius: 16px; background: rgba(139,92,246,.06); }
.ob-progress-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.ob-progress-num { font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1; }
.ob-progress-num small { font-size: .95rem; color: #8b8799; font-weight: 700; }
.ob-progress .pn-progress { max-width: none; margin: 0; height: 8px; }
.ob-layout { grid-template-columns: 320px minmax(0, 1fr); gap: 32px; margin-top: 32px; }
.ob-steps { gap: 0; }
.ob-steps li { position: relative; padding-bottom: 10px; }
.ob-steps li:not(:last-child)::after { content: ""; position: absolute; left: 29px; top: 52px; bottom: -2px; width: 2px; background: var(--pn-line, rgba(167,139,250,.16)); z-index: 0; }
.ob-step { position: relative; z-index: 1; padding: 14px 16px; border-radius: 14px; background: transparent; }
.ob-step.is-selected { background: rgba(139,92,246,.1); border-color: rgba(167,139,250,.4); }
.ob-step.is-done .ob-dot { background: #4ade80; }
.ob-step-text strong { font-size: .95rem; }
.ob-panel { padding: 36px; border-radius: 20px; min-height: 420px; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset; }
.ob-panel h2 { font-size: 1.4rem; margin-bottom: 8px; }
.ob-panel > p { max-width: 640px; }
/* The SDK card already sits inside the panel: drop its own frame. */
.ob-panel .sdk-setup { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ob-panel .sdk-setup::before { display: none; }
.ob-panel .sdk-setup-head h3 { font-size: 1.4rem; }
.ob-panel .ob-summary, .ob-panel .ob-platforms, .ob-panel #appForm { max-width: 720px; }
@media (max-width: 991.98px) {
  .ob-layout { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .ob-steps li::after { display: none; }
  .ob-panel { padding: 22px; }
  .ob-progress { width: 100%; }
}

/* ---------- Apps: adaptive layouts ---------- */
.ap-pill{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:700;padding:4px 11px;border-radius:999px;border:1px solid var(--brand-border-strong);color:#a8a3b8;width:fit-content}
.ap-pill i{width:7px;height:7px;border-radius:50%;background:#71717a}
.ap-pill.is-ok{color:#86efac;border-color:rgba(134,239,172,.35);background:rgba(134,239,172,.06)}.ap-pill.is-ok i{background:#4ade80}
.ap-pill.is-wait{color:#fcd34d;border-color:rgba(252,211,77,.4);background:rgba(252,211,77,.06)}.ap-pill.is-wait i{background:#fcd34d}
.ap-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ap-stat{padding:12px 14px;border:1px solid var(--pn-line,rgba(167,139,250,.16));border-radius:12px;background:rgba(15,10,25,.45);display:flex;flex-direction:column;gap:2px;min-width:0}
.ap-stat strong{font-size:1.5rem;font-weight:800;color:#fff;line-height:1.1}
.ap-stat span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#a8a3b8;font-weight:700}
.ap-stat small{font-size:.74rem;color:#86efac}
.ap-spot{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:20px;align-items:start}
.ap-spot-main{display:flex;flex-direction:column;gap:22px;padding:28px;border:1px solid rgba(167,139,250,.28);border-radius:20px;background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(236,72,153,.06) 60%,transparent),var(--brand-surface)}
.ap-spot-top{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.ap-spot-title{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:8px}
.ap-spot-title h2{margin:0;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;letter-spacing:-.02em;color:#fff;overflow:hidden;text-overflow:ellipsis}
.ap-spot-open{align-self:flex-start;white-space:nowrap}
.ap-spot .ap-stat strong{font-size:2rem}
.ap-quick{display:flex;flex-wrap:wrap;gap:8px}
.ap-quick a{padding:8px 14px;border-radius:10px;border:1px solid var(--brand-border-strong);color:#d4d0e0;font-weight:600;font-size:.86rem;text-decoration:none;background:rgba(255,255,255,.03)}
.ap-quick a:hover{border-color:rgba(167,139,250,.55);color:#fff;background:rgba(139,92,246,.12)}
.ap-spot-side{padding:22px;border:1px solid var(--bs-border-color);border-radius:20px;background:var(--brand-surface);display:flex;flex-direction:column;gap:14px}
.ap-side-head{display:flex;justify-content:space-between;align-items:baseline}
.ap-side-head h3{margin:0;font-size:1.05rem;font-weight:800;color:#fff}
.ap-side-head span{font-weight:800;color:#c4b5fd}
.ap-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ap-checks li{display:flex;align-items:center;gap:12px;color:#d4d0e0;font-size:.9rem}
.ap-checks li span{width:22px;height:22px;border-radius:50%;border:2px solid var(--brand-border-strong);display:grid;place-items:center;font-size:.7rem;font-weight:800;color:#052e16;flex:none}
.ap-checks li.is-done span{background:#4ade80;border-color:#4ade80}
.ap-checks li.is-done{color:#8b8799}
.ap-checks a{color:#e9e2ff;text-decoration:none;font-weight:600}.ap-checks a:hover{text-decoration:underline}
.ap-add{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:18px 22px;border:1px dashed var(--brand-border-strong);border-radius:16px;background:transparent;color:#c9c4d6;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.ap-add:hover{border-color:rgba(167,139,250,.55);background:rgba(139,92,246,.07);color:#fff}
.ap-add > span:first-child{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(139,92,246,.16);color:#c4b5fd;font-size:1.3rem;font-weight:700;flex:none}
.ap-add strong{font-size:.95rem}.ap-add small{color:#8b8799;font-size:.8rem;margin-left:auto}
.ap-rich{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}
.ap-rcard{display:flex;flex-direction:column;gap:16px;padding:24px;background:var(--brand-surface);border:1px solid var(--bs-border-color);border-radius:18px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s,background .15s}
.ap-rcard:hover{border-color:rgba(167,139,250,.5);background:var(--brand-surface-hover);transform:translateY(-2px);color:inherit}
.ap-rcard:focus-visible{outline:2px solid var(--brand-tint);outline-offset:2px}
.ap-rcard .ap-card-title h2{font-size:1.2rem}
.ap-rprog-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:.82rem;color:#a8a3b8}
.ap-rprog-top b{color:#c4b5fd}
.ap-rprog .pn-progress{height:6px;margin:0;max-width:none}
.ap-rich .ap-add{grid-column:auto;flex-direction:column;justify-content:center;text-align:center;min-height:200px}
.ap-rich .ap-add small{margin:0}
@media(max-width:991.98px){.ap-spot{grid-template-columns:1fr}.ap-spot-main{padding:20px}}
.ea-head{gap:8px}
.ea-how{margin-left:auto;background:none;border:0;color:#c4b5fd;font-weight:700;font-size:.8rem;padding:4px 8px;border-radius:8px;cursor:pointer;white-space:nowrap}
.ea-how:hover{color:#fff;background:rgba(139,92,246,.16)}
.ea-how:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}

/* Triggers page */
.tr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.tr-title{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;color:#fafafa;margin:0 0 6px}
.tr-sub{color:#a8a1b8;margin:0;max-width:640px;line-height:1.55;font-size:.95rem}
.tr-new{display:inline-flex;align-items:center;gap:8px;height:40px;border-radius:10px;font-weight:700}
.tr-tabs{display:flex;gap:4px;border-bottom:1px solid var(--bs-border-color);margin-bottom:18px}
.tr-tabs button{display:inline-flex;align-items:center;gap:8px;border:0;background:none;color:#a59db8;font-weight:700;font-size:.92rem;padding:11px 16px;margin-bottom:-1px;border-bottom:2px solid transparent}
.tr-tabs button:hover{color:#fff}
.tr-tabs button.on{color:#fff;border-bottom-color:#8b5cf6}
.tr-tabs button:focus-visible{outline:2px solid #a78bfa;outline-offset:-2px;border-radius:6px}
.tr-count{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:rgba(255,255,255,.1);color:#e4dff1;font-size:.72rem;font-weight:700;display:inline-grid;place-items:center}
.tr-count.is-live{background:rgba(74,222,128,.18);color:#86efac}
.tr-list{display:grid;gap:10px}
.tr-row{display:grid;grid-template-columns:minmax(200px,1.2fr) minmax(180px,1.3fr) minmax(120px,1fr) auto;gap:16px;align-items:center;padding:14px 18px;border-radius:14px;border:1px solid var(--bs-border-color);background:var(--brand-surface);transition:border-color .15s}
.tr-row:hover{border-color:rgba(167,139,250,.4)}
.tr-row.is-off{opacity:.72}
.tr-name{display:flex;align-items:center;gap:9px;font-weight:700;color:#fff;min-width:0}
.tr-name span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-dot{width:8px;height:8px;border-radius:50%;background:#52525b;flex:none}
.tr-dot.is-on{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.18)}
.tr-off-tag{font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.07);color:#a1a1aa}
.tr-keyline{display:flex;align-items:center;gap:6px;margin-top:4px}
.tr-keyline code{font-size:.78rem;color:#c4b5fd;background:rgba(139,92,246,.1);padding:2px 8px;border-radius:6px}
.tr-copy{border:0;background:none;color:#8d869c;padding:4px;border-radius:6px;line-height:0}
.tr-copy:hover{color:#fff;background:rgba(255,255,255,.08)}
.tr-copy:focus-visible,.tr-more:focus-visible,.tr-exp-link:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
.tr-label{display:none;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#8d869c;margin-bottom:3px}
.tr-paywall{display:flex;align-items:center;gap:8px;color:#e7e3f0;font-weight:600;font-size:.9rem}
.tr-paywall svg{color:#a78bfa;flex:none}
.tr-warn{color:#fbbf24;font-size:.88rem;font-weight:600}
.tr-exp-link{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(139,92,246,.35);background:rgba(139,92,246,.1);color:#ddd6fe;border-radius:999px;padding:4px 12px;font-size:.82rem;font-weight:700}
.tr-exp-link:hover{background:rgba(139,92,246,.18)}
.tr-pill-ab{font-size:.68rem;font-weight:800;padding:1px 7px;border-radius:99px;background:#7c3aed;color:#fff}
.tr-opts .tg-chips{gap:5px}
.tr-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.tr-edit{height:34px;padding:0 14px;border-radius:9px;border:1px solid rgba(139,92,246,.45);background:rgba(139,92,246,.18);color:#f3efff;font-weight:700;font-size:.84rem}
.tr-edit:hover{background:rgba(139,92,246,.3);color:#fff}
.tr-more{width:34px;height:34px;border-radius:9px;border:1px solid rgba(167,139,250,.22);background:rgba(255,255,255,.03);color:#d9d4e8;display:grid;place-items:center}
.tr-more:hover{background:rgba(255,255,255,.09);color:#fff}
.tr-menu{min-width:180px;padding:6px;border-radius:12px;background:#1a1724;border:1px solid rgba(167,139,250,.25);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.tr-menu .dropdown-item{border-radius:8px;padding:8px 12px;font-size:.86rem;color:#ece8f7}
.tr-menu .dropdown-item:hover{background:rgba(139,92,246,.16);color:#fff}
.tr-menu .dropdown-divider{border-color:rgba(255,255,255,.08);margin:4px 0}
.tr-menu .tr-menu-danger{color:#f87171}
.tr-sdkkeys{margin-top:22px;border:1px solid var(--bs-border-color);border-radius:14px;padding:14px 18px;background:rgba(139,92,246,.04)}
.tr-sdkkeys summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}
.tr-sdkkeys summary::-webkit-details-marker{display:none}
.tr-sdkkeys-t{font-weight:700;color:#fff}
.tr-sdkkeys-s{font-size:.8rem;color:#8d869c}
.tr-sdkkeys[open] summary{margin-bottom:12px}
.tr-expnote{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.07);margin-bottom:10px}
.tr-expnote.d-none{display:none!important}
.tr-expnote-ico{font-size:1.2rem}
.tr-expnote-text{flex:1 1 220px;display:flex;flex-direction:column;gap:2px;font-size:.84rem;color:#fde68a}
.tr-expnote-text strong{color:#fff}
@media (max-width:991.98px){.tr-row{grid-template-columns:1fr auto;gap:10px 14px}.tr-shows{grid-column:1/-1}.tr-opts{grid-column:1/-1}.tr-opts:empty{display:none}.tr-label{display:block}}

/* Experiments */
.ex-badge{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;font-size:.75rem;font-weight:800;color:#fff;flex:none}
.ex-badge.is-a{background:#7c3aed}.ex-badge.is-b{background:#db2777}
.ex-cards{display:grid;gap:14px}
.ex-card{padding:18px 20px;border-radius:16px;border:1px solid var(--bs-border-color);background:var(--brand-surface);transition:border-color .2s,box-shadow .2s}
.ex-card.is-flash{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.25)}
.ex-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ex-card-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.ex-card-title h3{font-size:1.05rem;font-weight:800;color:#fff;margin:0}
.ex-card-title code{font-size:.78rem;color:#c4b5fd;background:rgba(139,92,246,.1);padding:2px 8px;border-radius:6px}
.ex-status{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:99px;text-transform:uppercase;letter-spacing:.04em}
.ex-status i{width:6px;height:6px;border-radius:50%;background:currentColor}
.ex-status.is-live{background:rgba(74,222,128,.14);color:#86efac}.ex-status.is-live i{animation:aiPulse 1.8s infinite}
.ex-status.is-paused{background:rgba(255,255,255,.07);color:#a1a1aa}
.ex-card-actions{display:flex;gap:8px;flex-wrap:wrap}
.ex-split{display:flex;gap:3px;height:30px;border-radius:9px;overflow:hidden;margin-bottom:12px}
.ex-split i{display:grid;place-items:center;font-style:normal;font-size:.75rem;font-weight:800;color:#fff;min-width:44px}
.ex-split i.is-a{background:linear-gradient(90deg,#6d28d9,#8b5cf6)}.ex-split i.is-b{background:linear-gradient(90deg,#be185d,#ec4899)}
.ex-vars{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.ex-var{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);min-width:0}
.ex-var-name{flex:1;min-width:0;font-weight:600;color:#ece8f7;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-var-w{font-weight:800;color:#fff;font-size:.9rem}
.ex-results{border-top:1px solid rgba(255,255,255,.07);padding-top:14px}
.ex-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.ex-stat{display:flex;align-items:center;gap:12px}
.ex-stat>div{display:flex;flex-direction:column;line-height:1.2}
.ex-stat strong{color:#fff;font-size:1.05rem}
.ex-stat small{color:#8d869c;font-size:.72rem}
.ex-verdict{margin:0 0 4px;font-size:.9rem;font-weight:600}
.ex-verdict.is-good{color:#86efac}.ex-verdict.is-info{color:#bae6fd}.ex-verdict.is-muted{color:#c9c3d6}
.ex-eta{margin:0 0 6px;font-size:.8rem;color:#9b96ab}
.ex-more{font-size:.84rem;font-weight:700;color:#c4b5fd;text-decoration:none}
.ex-more:hover{color:#fff}
.ex-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 20px 48px;border-radius:18px;border:1px dashed rgba(167,139,250,.28);background:radial-gradient(60% 80% at 50% 0%,rgba(139,92,246,.1),transparent 70%),var(--brand-surface)}
.ex-empty-art{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.ex-empty-art .ex-badge{width:44px;height:44px;border-radius:12px;font-size:1.1rem}
.ex-empty-art i{width:60px;height:2px;background:repeating-linear-gradient(90deg,#8d869c 0 6px,transparent 6px 12px)}
.ex-empty h2{font-size:1.2rem;font-weight:800;color:#fff;margin:0 0 6px}
.ex-empty>p{max-width:480px;color:#a8a1b8;margin:0 0 18px;line-height:1.55}
.ex-how{list-style:none;padding:0;margin:0 0 22px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.ex-how li{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#cfc8de}
.ex-how b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(139,92,246,.2);color:#ddd6fe;font-size:.72rem}
.ex-variant{display:flex;align-items:flex-end;gap:12px;margin-bottom:12px}
.ex-variant .ex-badge{margin-bottom:9px}
.ex-split-readout{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:#fff;font-size:1.05rem}
.ex-split-readout span{display:inline-flex;align-items:center;gap:8px}
.ex-range{width:100%;accent-color:#8b5cf6}
.ex-split-bar{display:flex;gap:3px;height:10px;border-radius:6px;overflow:hidden;margin-top:8px}
.ex-split-bar i:first-child{background:#7c3aed}.ex-split-bar i:last-child{background:#ec4899}
.ex-tip{display:flex;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(125,211,252,.07);border:1px solid rgba(125,211,252,.22);color:#bae6fd;font-size:.84rem;line-height:1.5}
@media (max-width:640px){.ex-vars,.ex-stats{grid-template-columns:1fr}}

/* Experiments tab: Premium star and the animated A/B scene */
.tr-prem{display:inline-flex;align-items:center;gap:4px;font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:linear-gradient(120deg,#7c3aed,#c026d3);color:#fff}
.tr-prem b{font-size:.75rem;line-height:1}
.ex-scene{display:grid;grid-template-columns:auto minmax(120px,220px) auto;align-items:center;gap:18px;margin:0 auto 26px;padding:22px 26px;border-radius:20px;border:1px solid rgba(167,139,250,.28);background:radial-gradient(70% 120% at 0% 50%,rgba(139,92,246,.18),transparent 65%),rgba(15,10,25,.55);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.ex-node{display:flex;flex-direction:column;align-items:center;gap:8px}
.ex-node span{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;background:linear-gradient(145deg,#7c3aed,#c026d3);box-shadow:0 0 0 0 rgba(167,139,250,.6);animation:exNode 2.4s infinite}
.ex-node small{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;color:#c4b5fd}
@keyframes exNode{0%{box-shadow:0 0 0 0 rgba(167,139,250,.55)}70%{box-shadow:0 0 0 16px rgba(167,139,250,0)}100%{box-shadow:0 0 0 0 rgba(167,139,250,0)}}
.ex-lanes{display:grid;gap:34px}
.ex-lane{position:relative;height:6px;border-radius:4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 8px,transparent 8px 16px)}
.ex-lane i{position:absolute;top:-4px;left:0;width:14px;height:14px;border-radius:50%;opacity:0;animation:exFlow 2.4s linear infinite}
.ex-lane.is-a i{background:#8b5cf6;box-shadow:0 0 12px #8b5cf6}
.ex-lane.is-b i{background:#10b981;box-shadow:0 0 12px #10b981}
.ex-lane i:nth-child(2){animation-delay:-.6s}.ex-lane i:nth-child(3){animation-delay:-1.2s}.ex-lane i:nth-child(4){animation-delay:-1.8s}
@keyframes exFlow{0%{left:0;opacity:0;transform:scale(.5)}12%{opacity:1;transform:scale(1)}85%{opacity:1}100%{left:calc(100% - 14px);opacity:0;transform:scale(.6)}}
.ex-results-col{display:grid;gap:14px;min-width:210px}
.ex-mini{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.ex-mini.is-b{border-color:rgba(16,185,129,.4)}
.ex-bar{flex:1;height:8px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.ex-bar b{display:block;height:100%;width:0;border-radius:5px;animation:exGrow 9s ease-in-out infinite}
.ex-mini.is-a .ex-bar b{background:linear-gradient(90deg,#6d28d9,#8b5cf6);--w:62%}
.ex-mini.is-b .ex-bar b{background:linear-gradient(90deg,#047857,#10b981);--w:78%}
@keyframes exGrow{0%,30%{width:0}55%,92%{width:var(--w)}100%{width:0}}
.ex-mini em{font-style:normal;font-weight:800;font-size:.85rem;color:#fff;min-width:42px;text-align:right;opacity:0;animation:exFade 9s infinite}
@keyframes exFade{0%,50%{opacity:0}58%,92%{opacity:1}100%{opacity:0}}
.ex-crown{position:absolute;right:-10px;top:-14px;padding:3px 10px;border-radius:99px;background:linear-gradient(120deg,#f59e0b,#fbbf24);color:#1a1207;font-size:.68rem;font-weight:800;opacity:0;transform:scale(.5) rotate(-6deg);animation:exCrown 9s infinite;box-shadow:0 6px 18px rgba(245,158,11,.4)}
@keyframes exCrown{0%,66%{opacity:0;transform:scale(.5) rotate(-6deg)}72%{opacity:1;transform:scale(1.12) rotate(-4deg)}76%,92%{opacity:1;transform:scale(1) rotate(-4deg)}100%{opacity:0}}
@media (max-width:700px){.ex-scene{grid-template-columns:1fr;gap:14px;padding:18px}.ex-node{flex-direction:row;justify-content:center}.ex-node span{width:44px;height:44px;font-size:1.1rem}.ex-lanes{grid-template-columns:1fr 1fr;gap:20px}.ex-results-col{min-width:0}}
@media (prefers-reduced-motion:reduce){.ex-node span,.ex-lane i{animation:none}.ex-lane i{opacity:1;left:40%}.ex-bar b{animation:none;width:var(--w)}.ex-mini em,.ex-crown{animation:none;opacity:1;transform:none}}
.ex-scene{width:100%;max-width:680px}

.side-prem{margin-left:auto;font-size:.7rem;line-height:1;padding:3px 6px;border-radius:99px;background:linear-gradient(120deg,#7c3aed,#c026d3);color:#fff}

/* ---------- Trigger modal: stepper layout and audience rules ---------- */
.tm2-dialog { max-width: 880px; }
.tm2 { overflow: hidden; }
.tm2-form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.tm2-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 22px 26px 16px; border-bottom: 1px solid var(--bs-border-color); }
.tm2-title { margin: 0 0 2px; font-weight: 800; color: #fff; font-size: 1.15rem; }
.tm2-sub { margin: 0; color: #a1a1aa; font-size: .86rem; }
.tm2-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 0; flex: 1 1 auto; overflow: hidden; }
.tm2-nav { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-right: 1px solid var(--bs-border-color); background: rgba(0,0,0,.18); overflow-y: auto; }
.tm2-tab { display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid transparent; background: none; color: #a1a1aa; padding: 10px; border-radius: 12px; cursor: pointer; transition: background .15s, color .15s; }
.tm2-tab:hover { background: rgba(255,255,255,.04); color: #e4e4e7; }
.tm2-tab i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .75rem; font-weight: 800; background: rgba(255,255,255,.08); color: #d4d4d8; }
.tm2-tab span { min-width: 0; display: flex; flex-direction: column; }
.tm2-tab b { font-size: .88rem; color: inherit; font-weight: 700; }
.tm2-tab small { font-size: .74rem; color: #71717a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.tm2-tab.on { background: rgba(124,58,237,.16); border-color: rgba(167,139,250,.35); color: #fff; }
.tm2-tab.on i { background: var(--brand-violet-deep); color: #fff; }
.tm2-tab.on small { color: #c4b5fd; }
.tm2-tab:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.tm2-star { font-style: normal; color: #fbbf24; font-size: .8em; margin-left: 2px; }
.tm2-panes { padding: 22px 26px; overflow-y: auto; min-width: 0; }
.tm2-pane[hidden] { display: none; }
.tm2-h { font-weight: 800; color: #fff; font-size: 1.02rem; margin: 0 0 14px; }
.tm2-h-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.tm2-lead { color: #a1a1aa; font-size: .86rem; line-height: 1.55; margin: 0 0 16px; }
.tm2-switch { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--bs-border-color); border-radius: 14px; background: rgba(255,255,255,.02); }
.tm2-switch-t { color: #fff; font-weight: 700; }
.tm2-switch-d { color: #a1a1aa; font-size: .8rem; }
.tm2 .tg-opt.first { border-top: 0; padding-top: 0; }
.tm2-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 26px; border-top: 1px solid var(--bs-border-color); background: rgba(0,0,0,.18); }
.tm2-sum { margin-right: auto; min-width: 0; color: #a1a1aa; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm2-sum code { color: #c4b5fd; background: rgba(124,58,237,.14); padding: 2px 7px; border-radius: 6px; }
.tm2-sum b { color: #fff; }
.tm2-sum em { font-style: normal; color: #86efac; }

.au-rule { border: 1px solid var(--bs-border-color); border-radius: 16px; background: rgba(255,255,255,.025); margin-bottom: 14px; overflow: hidden; }
.au-rule.is-off { opacity: .6; }
.au-rule-head { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--bs-border-color); background: rgba(0,0,0,.2); }
.au-num { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .75rem; font-weight: 800; background: var(--brand-violet-deep); color: #fff; }
.au-name { flex: 1; min-width: 0; font-weight: 600; }
.au-icon { width: 32px; height: 32px; flex: none; border-radius: 9px; border: 1px solid var(--brand-border-strong); background: rgba(0,0,0,.25); color: #d4d4d8; cursor: pointer; line-height: 1; }
.au-icon:hover:not(:disabled) { color: #fff; border-color: #a78bfa; }
.au-icon:disabled { opacity: .35; cursor: not-allowed; }
.au-del:hover:not(:disabled) { border-color: #f87171; }
.au-block { padding: 14px 16px; }
.au-block + .au-block { border-top: 1px dashed var(--bs-border-color); }
.au-lbl { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; color: #a1a1aa; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.au-join { width: auto; max-width: 160px; font-size: .8rem; padding-top: 4px; padding-bottom: 4px; }
.au-conds { display: flex; flex-direction: column; gap: 8px; }
.au-cond { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.4fr) 32px; gap: 8px; align-items: center; }
.au-cond:has(.au-attr) { grid-template-columns: 130px 120px 130px minmax(0, 1fr) 32px; }
.au-cond .tg-input { min-width: 0; }
.au-link { margin-top: 10px; border: 0; background: none; color: #c4b5fd; font-weight: 700; font-size: .84rem; padding: 4px 0; cursor: pointer; }
.au-link:hover { color: #fff; }
.au-hold { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: #a1a1aa; font-size: .8rem; }
.au-hold label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: #d4d4d8; }
.au-hold input { width: 76px; }
.au-note { padding: 10px 12px; border-radius: 10px; background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.28); color: #fde68a; font-size: .84rem; }
.au-add { width: 100%; padding: 13px; border-radius: 14px; border: 1.5px dashed var(--brand-border-strong); background: none; color: #c4b5fd; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; }
.au-add:hover:not(:disabled) { border-color: #a78bfa; background: rgba(124,58,237,.08); }
.au-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 30px 18px; margin-bottom: 14px; border: 1px solid var(--bs-border-color); border-radius: 16px; background: radial-gradient(120% 120% at 50% 0%, rgba(124,58,237,.12), transparent 70%); }
.au-empty strong { color: #fff; }
.au-empty span { color: #a1a1aa; font-size: .85rem; max-width: 380px; }
.au-empty-ico { font-size: 1.7rem; color: #a78bfa; }
#triggerRulesSummary.is-locked { opacity: .5; pointer-events: none; user-select: none; }

@media (max-width: 767.98px) {
  .tm2-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .tm2-nav { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--bs-border-color); overflow-x: auto; padding: 10px; }
  .tm2-tab { flex: none; padding: 8px 10px; }
  .tm2-tab small { display: none; }
  .tm2-head, .tm2-panes, .tm2-foot { padding-left: 16px; padding-right: 16px; }
  .tm2-sum { display: none; }
  .au-cond, .au-cond:has(.au-attr) { grid-template-columns: 1fr 1fr 32px; }
  .au-cond > .au-icon { grid-column: 3; grid-row: 1; }
  .au-cond > .au-field, .au-cond > .au-op { grid-row: 1; }
  .au-cond > .au-attr { grid-column: 1 / -1; grid-row: 2; }
  .au-cond .au-value { grid-column: 1 / -1; }
  .au-rule-head { flex-wrap: wrap; }
  .au-name { flex: 1 0 calc(100% - 40px); }
}
@media (prefers-reduced-motion: reduce) { .tm2-tab, .au-add { transition: none; } }
.tm2-body { min-height: min(520px, 62vh); }
.tm2-pane [data-msw-teaser]:not([hidden]), .tm2-pane .msw-teaser { margin-bottom: 14px; }
.au-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 38px; padding: 4px 8px; border: 1px solid var(--brand-border-strong); border-radius: 8px; background: rgba(0,0,0,.3); }
.au-chips:focus-within { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .2); }
.au-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 9px; border-radius: 999px; background: rgba(124,58,237,.2); border: 1px solid rgba(167,139,250,.4); color: #ede9fe; font-size: .8rem; font-weight: 700; }
.au-chip button { border: 0; background: rgba(255,255,255,.1); color: #ddd6fe; width: 18px; height: 18px; border-radius: 50%; line-height: 1; cursor: pointer; padding: 0; }
.au-chip button:hover { background: rgba(248,113,113,.35); color: #fff; }
.au-chip-in { flex: 1; min-width: 130px; border: 0; background: none; color: #fafafa; outline: none; font-size: .9rem; padding: 4px 0; }
.tg-rules { margin-top: 6px; font-size: .8rem; }
.tg-rules summary { cursor: pointer; color: #c4b5fd; font-weight: 700; }
.tg-rules ol { margin: 6px 0 0; padding-left: 18px; color: #d4d4d8; }
.tg-rules li.is-off { opacity: .55; }

/* ---------- Integrations: overview rows and guides ---------- */
.in2-list { display: flex; flex-direction: column; gap: 14px; }
.in2-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 22px; border: 1px solid var(--bs-border-color); border-radius: 18px; background: var(--brand-surface); }
.in2-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(74,222,128,.25); }
.in2-ico.is-apple { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.in2-ico.is-rc { background: rgba(244,63,94,.12); color: #fb7185; border-color: rgba(251,113,133,.3); }
.in2-main { min-width: 0; }
.in2-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; color: #fff; }
.in2-what { margin: 0; color: #b4b4bd; font-size: .9rem; line-height: 1.5; }
.in2-sub { margin: 2px 0 0; color: #71717a; font-size: .78rem; }
.in2-sub:empty { display: none; }
.in2-main .rc-status { margin: 10px 0 0; }
.in2-note { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--bs-border-color); color: #a1a1aa; font-size: .8rem; }
.in2-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.in2-actions { display: flex; align-items: center; gap: 14px; }
.in2-guide { color: #c4b5fd; font-weight: 700; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.in2-guide:hover { color: #fff; text-decoration: underline; }
.in2-cta { min-width: 96px; font-weight: 700; }
.in2-help { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 16px 20px; border-radius: 16px; border: 1px dashed var(--brand-border-strong); background: radial-gradient(120% 140% at 0% 0%, rgba(124,58,237,.1), transparent 60%); }
.in2-help strong { display: block; color: #fff; }
.in2-help span { color: #a1a1aa; font-size: .85rem; }
.in2-modal-guide { display: block; margin-bottom: 16px; padding: 10px 14px; border-radius: 12px; background: rgba(124,58,237,.12); border: 1px solid rgba(167,139,250,.3); color: #ddd6fe; font-size: .84rem; font-weight: 600; text-decoration: none; }
.in2-modal-guide:hover { color: #fff; border-color: #a78bfa; }
.in2-reuse { margin-bottom: 18px; padding: 14px; border-radius: 12px; background: rgba(34,197,94,.07); border: 1px solid rgba(74,222,128,.25); }
.in2-reuse-title { color: #fff; font-weight: 700; font-size: .9rem; }
.in2-reuse-sub { color: #9ca3af; font-size: .78rem; margin-top: 2px; }
.in2-reuse-or { display: flex; align-items: center; gap: 10px; margin: 14px -14px -6px; padding: 0 14px; color: #6b7280; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.in2-reuse-or::before, .in2-reuse-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
@media (max-width: 767.98px) {
  .in2-row { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; gap: 14px; align-items: start; }
  .in2-ico { width: 44px; height: 44px; }
  .in2-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

.ig-wrap { max-width: 1180px; }
.ig-back { display: inline-block; margin-bottom: 10px; color: #a1a1aa; font-size: .85rem; text-decoration: none; }
.ig-back:hover { color: #fff; }
.ig-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 8px; }
.ig-layout.is-3 { grid-template-columns: 240px minmax(0, 1fr) 190px; }
.ig-toc { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 4px; }
.ig-toc-t { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #71717a; margin: 0 0 6px 10px; }
.ig-toc a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: #b4b4bd; text-decoration: none; font-weight: 600; font-size: .9rem; border: 1px solid transparent; }
.ig-toc a:hover { background: rgba(255,255,255,.04); color: #fff; }
.ig-toc a.on { background: rgba(124,58,237,.16); border-color: rgba(167,139,250,.35); color: #fff; }
.ig-toc .ig-ico { width: 28px; height: 28px; border-radius: 8px; }
.ig-toc .ig-ico svg { width: 15px; height: 15px; }
.ig-safe { margin-top: 14px; padding: 14px; border-radius: 14px; border: 1px solid var(--bs-border-color); background: rgba(255,255,255,.02); }
.ig-safe strong { color: #fff; font-size: .85rem; }
.ig-safe p { margin: 6px 0 0; color: #a1a1aa; font-size: .78rem; line-height: 1.55; }
.ig-content { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ig-sec { padding: 26px 28px; border-radius: 20px; border: 1px solid var(--bs-border-color); background: var(--brand-surface); scroll-margin-top: 16px; }
.ig-sec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.ig-sec-head > div { flex: 1; min-width: 0; }
.ig-sec-head h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ig-mine { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(124,58,237,.2); border: 1px solid rgba(167,139,250,.4); color: #ddd6fe; }
.ig-meta { display: flex; gap: 8px; color: #8b8b96; font-size: .8rem; margin-top: 2px; }
.ig-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.ig-ico-android { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(74,222,128,.25); }
.ig-ico-apple { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.ig-ico-bell { background: rgba(124,58,237,.14); color: #c4b5fd; border: 1px solid rgba(167,139,250,.3); }
.ig-ico-revenuecat { background: rgba(244,63,94,.12); color: #fb7185; border: 1px solid rgba(251,113,133,.3); }
.ig-lead { color: #c4c4cc; font-size: .95rem; line-height: 1.65; margin: 0 0 16px; max-width: 74ch; }
.ig-before { padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--bs-border-color); margin-bottom: 20px; }
.ig-before h3, .ig-h3 { margin: 0 0 10px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8b8b96; }
.ig-h3 { margin-top: 22px; }
.ig-before ul { margin: 0; padding-left: 18px; color: #d4d4d8; font-size: .88rem; line-height: 1.7; }
.ig-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; position: relative; }
.ig-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding-bottom: 20px; position: relative; }
.ig-steps li:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px; width: 2px; background: var(--bs-border-color); }
.ig-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(139,92,246,.2); border: 1px solid rgba(167,139,250,.45); color: #ede9fe; font-weight: 800; font-size: .85rem; position: relative; z-index: 1; }
.ig-steps strong { display: block; color: #fff; font-size: 1rem; margin: 5px 0 4px; }
.ig-steps p { margin: 0; color: #b4b4bd; font-size: .9rem; line-height: 1.7; max-width: 74ch; }
.ig-steps b, .ig-faq b { color: #f4f4f5; }
.ig-sec code { background: rgba(139,92,246,.16); color: #ddd6fe; padding: 1px 7px; border-radius: 6px; font-size: .84em; word-break: break-word; }
.ig-ok { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: 14px; background: rgba(34,197,94,.08); border: 1px solid rgba(74,222,128,.3); margin-top: 6px; }
.ig-ok > span { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(74,222,128,.2); color: #86efac; font-weight: 800; }
.ig-ok strong { color: #bbf7d0; font-size: .9rem; }
.ig-ok p { margin: 2px 0 0; color: #d4d4d8; font-size: .88rem; line-height: 1.6; }
.ig-faq { display: flex; flex-direction: column; gap: 8px; }
.ig-faq details { border: 1px solid var(--bs-border-color); border-radius: 12px; background: rgba(255,255,255,.02); }
.ig-faq summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: #e4e4e7; font-size: .9rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ig-faq summary::-webkit-details-marker { display: none; }
.ig-faq summary::after { content: "+"; color: #a78bfa; font-size: 1.1rem; line-height: 1; }
.ig-faq details[open] summary::after { content: "−"; }
.ig-faq details p { margin: 0; padding: 0 16px 14px; color: #b4b4bd; font-size: .88rem; line-height: 1.65; }
.ig-docs { margin: 16px 0 0; font-size: .85rem; }
.ig-docs a { color: #c4b5fd; }
@media (max-width: 991.98px) {
  .ig-layout { grid-template-columns: minmax(0, 1fr); }
  .ig-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .ig-toc-t, .ig-safe { display: none; }
  .ig-sec { padding: 18px 16px; }
  .ig-connect { width: 100%; }
}

.ig-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 4px; }
.ig-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: #b4b4bd; text-decoration: none; font-weight: 600; font-size: .9rem; border: 1px solid transparent; }
.ig-nav a:hover { background: rgba(255,255,255,.04); color: #fff; }
.ig-nav a.on { background: rgba(124,58,237,.16); border-color: rgba(167,139,250,.35); color: #fff; }
.ig-nav-t { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #71717a; margin: 12px 0 4px 10px; }
.ig-nav .ig-ico { width: 28px; height: 28px; border-radius: 8px; }
.ig-nav .ig-ico svg { width: 15px; height: 15px; }
.ig-toc { position: sticky; top: 16px; padding-left: 14px; border-left: 1px solid var(--bs-border-color); gap: 2px; }
.ig-toc a { padding: 5px 8px; border-radius: 8px; font-size: .84rem; font-weight: 600; }
.ig-toc a.on { background: none; border-color: transparent; color: #c4b5fd; }
.ig-cards { display: flex; flex-direction: column; gap: 14px; }
.ig-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--bs-border-color); background: var(--brand-surface); text-decoration: none; transition: border-color .15s, transform .15s; }
.ig-card:hover { border-color: #a78bfa; transform: translateY(-1px); }
.ig-card h2 { margin: 0; font-size: 1.1rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ig-card p { margin: 8px 0 0; color: #a1a1aa; font-size: .88rem; line-height: 1.55; }
.ig-go { color: #c4b5fd; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.ig-article { min-width: 0; max-width: 78ch; }
.ig-article h1 { margin: 0; font-size: 1.7rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ig-crumbs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: #71717a; font-size: .8rem; margin-bottom: 16px; }
.ig-crumbs a { color: #a1a1aa; text-decoration: none; }
.ig-crumbs a:hover { color: #fff; }
.ig-h2 { margin: 30px 0 14px; font-size: 1.15rem; font-weight: 800; color: #fff; scroll-margin-top: 16px; }
.ig-article .ig-before, .ig-article .ig-ok { scroll-margin-top: 16px; }
.ig-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(167,139,250,.35); background: radial-gradient(120% 140% at 0% 0%, rgba(124,58,237,.16), transparent 65%); }
.ig-cta strong { display: block; color: #fff; }
.ig-cta span { color: #a1a1aa; font-size: .86rem; }
.ig-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.ig-pager a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--bs-border-color); color: #fff; text-decoration: none; font-weight: 700; }
.ig-pager a:hover { border-color: #a78bfa; }
.ig-pager small { color: #8b8b96; font-weight: 600; }
.ig-pager .is-next { text-align: right; grid-column: 2; }
@media (max-width: 1199.98px) { .ig-layout.is-3 { grid-template-columns: 220px minmax(0, 1fr); } .ig-layout.is-3 .ig-toc { display: none; } }
@media (max-width: 991.98px) {
  .ig-layout, .ig-layout.is-3 { grid-template-columns: minmax(0, 1fr); }
  .ig-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .ig-nav-t, .ig-nav .ig-safe { display: none; }
  .ig-card { grid-template-columns: 46px minmax(0, 1fr); }
  .ig-go { grid-column: 2; }
}

/* ---------- App settings (Superwall-style grouped rows) ---------- */
.st-main { max-width: 1040px; }
.st-head { margin-bottom: 28px; }
.st-title { font-size: clamp(1.5rem, 3vw, 1.85rem); font-weight: 800; letter-spacing: -.02em; color: #fafafa; margin: 0 0 6px; }
.st-sub { margin: 0; color: #a1a1aa; font-size: .9rem; }
.st-sub a { color: #c4b5fd; }
.st-group { margin-bottom: 32px; }
.st-group-title { font-size: .95rem; font-weight: 700; color: #fafafa; margin: 0 0 12px; }
.st-card { background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 16px; overflow: hidden; }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: center; padding: 18px 22px; border-top: 1px solid var(--bs-border-color); }
.st-row:first-child { border-top: 0; }
.st-row.d-none { display: none !important; }
.st-row-text label, .st-label { display: block; font-weight: 600; color: #fafafa; font-size: .92rem; margin-bottom: 4px; }
.st-row-text p { margin: 0; color: #a1a1aa; font-size: .8rem; line-height: 1.5; }
.st-row-text .acc-tag { margin-top: 8px; }
.st-meta { display: block; margin-top: 6px; color: #71717a; font-size: .75rem; }
.st-row-control { min-width: 0; }
.st-input { width: 100%; height: 40px; padding: 0 12px; background: var(--brand-inset); border: 1px solid var(--brand-border-strong); border-radius: 10px; color: #fafafa; font-size: .9rem; }
.st-input:focus { outline: none; border-color: var(--brand-tint); box-shadow: 0 0 0 3px rgba(139, 92, 246, .18); }
.st-input[readonly] { color: #d4d4d8; }
select.st-input { appearance: auto; }
.st-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.st-keyrow { display: flex; gap: 8px; align-items: center; }
.st-keyrow .st-input { flex: 1; }
.st-keyrow .btn { flex: none; }
.st-savebar { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 14px; }
.st-savehint { color: #86efac; font-size: .85rem; }
.st-save { padding: 8px 20px; font-weight: 700; border-radius: 10px; }
.st-danger .st-card { border-color: rgba(248, 113, 113, .25); }
.st-danger .st-label { color: #fca5a5; }
@media (max-width: 767.98px) {
  .st-row { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .st-savebar { justify-content: stretch; }
  .st-save { width: 100%; }
  .st-keyrow { flex-wrap: wrap; }
}

/* ---------- Published versions dialog ---------- */
.ph-modal { background: var(--brand-surface); border: 1px solid var(--bs-border-color); border-radius: 20px; overflow: hidden; }
.ph-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--bs-border-color); }
.ph-head .modal-title { font-size: 1.05rem; font-weight: 800; color: #fafafa; margin: 0; }
.ph-explain { margin: 4px 0 0; color: #a1a1aa; font-size: .84rem; line-height: 1.5; max-width: 620px; }
.ph-body { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: min(78vh, 760px); }
.ph-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--bs-border-color); background: rgba(255, 255, 255, .015); }
.ph-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.ph-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: inherit; text-align: left; transition: background .12s, border-color .12s; }
.ph-item:hover { background: rgba(255, 255, 255, .04); }
.ph-item:focus-visible { outline: 2px solid rgba(167, 139, 250, .7); outline-offset: 1px; }
.ph-item.is-selected { background: rgba(139, 92, 246, .12); border-color: rgba(139, 92, 246, .45); }
.ph-ver { min-width: 44px; height: 28px; padding: 0 8px; border-radius: 8px; display: inline-grid; place-items: center; font-size: .76rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #ddd6fe; background: rgba(139, 92, 246, .14); border: 1px solid rgba(139, 92, 246, .3); }
.ph-item:not(.is-selected) .ph-ver { color: #a1a1aa; background: rgba(255, 255, 255, .04); border-color: var(--bs-border-color); }
.ph-meta { min-width: 0; display: flex; flex-direction: column; }
.ph-title { color: #fafafa; font-weight: 600; font-size: .88rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ph-sub { color: #71717a; font-size: .75rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-badge { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 99px; padding: 1px 8px; border: 1px solid; }
.ph-badge-live { color: #86efac; border-color: rgba(134, 239, 172, .35); background: rgba(34, 197, 94, .08); }
.ph-badge-off { color: #fbbf24; border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .06); }
.ph-note { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--bs-border-color); color: #a1a1aa; font-size: .76rem; line-height: 1.45; }
.ph-note:empty { display: none; }
.ph-quiet { padding: 14px; margin: 0; color: #a1a1aa; font-size: .84rem; }
.ph-link { color: #c4b5fd !important; font-weight: 600; text-decoration: none; font-size: .78rem; }
.ph-link:hover { color: #fff !important; }
.ph-detail { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.ph-detail[hidden] { display: none; }
.ph-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--bs-border-color); }
.ph-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.ph-head-actions:empty { display: none; }
.ph-icon-btn { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: transparent; color: #a1a1aa; }
.ph-icon-btn:hover { color: #fca5a5; background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .25); }
.ph-del-q { color: #fca5a5; font-size: .82rem; font-weight: 500; }
.ph-sm { padding: 5px 12px !important; min-width: 0 !important; font-size: .82rem; }
.ph-danger { background: #dc2626; border: 1px solid #dc2626; color: #fff; font-weight: 600; border-radius: 10px; }
.ph-danger:hover, .ph-danger:focus-visible { background: #b91c1c; border-color: #b91c1c; color: #fff; }
@media (max-width: 575.98px) { .ph-detail-head { flex-wrap: wrap; } .ph-del-q { flex-basis: 100%; } }
.ph-detail-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ph-detail-title .ph-sub { white-space: normal; }
.ph-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px;
  background: radial-gradient(circle at 50% 40%, rgba(139, 92, 246, .08), transparent 60%), #0b0b10; }
.ph-phone { position: relative; flex: none; width: calc(393px + 24px); height: calc(852px + 24px); padding: 12px; border-radius: 56px; background: #18181b;
  box-shadow: 0 0 0 1px #3f3f46, 0 30px 80px rgba(0, 0, 0, .55); transform-origin: center center; margin: calc((var(--ph-h, 876px) - 876px) / 2) 0; }
.ph-phone iframe { display: block; width: 393px; height: 852px; border: 0; border-radius: 44px; background: #fff; }
.ph-notch { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 120px; height: 34px; border-radius: 20px; background: #000; z-index: 2; pointer-events: none; }
.ph-loading { position: absolute; inset: 12px; border-radius: 44px; display: grid; place-items: center; background: rgba(9, 9, 11, .55); color: #e4e4e7; }
.ph-loading[hidden] { display: none; }
.ph-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--bs-border-color); background: var(--brand-surface); }
.ph-foot-note { color: #86efac; font-size: .84rem; font-weight: 500; }
.ph-check { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 280px; min-width: 0; cursor: pointer; margin: 0; }
.ph-check .form-check-input { margin-top: 3px; flex: none; }
.ph-check strong { display: block; color: #e4e4e7; font-size: .84rem; font-weight: 600; }
.ph-check small { display: block; color: #71717a; font-size: .75rem; line-height: 1.4; }
.ph-confirm { flex-basis: 100%; padding: 10px 12px; border-radius: 10px; color: #ede9fe; font-size: .85rem; background: rgba(139, 92, 246, .12); border: 1px solid rgba(139, 92, 246, .35); }
.ph-foot-actions { display: flex; gap: 8px; margin-left: auto; }
.ph-primary { background: #7c3aed; border: 1px solid #7c3aed; color: #fff; font-weight: 600; padding: 8px 18px; border-radius: 10px; min-width: 120px; }
.ph-primary:hover, .ph-primary:focus-visible { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.ph-ghost { background: transparent; border: 1px solid var(--brand-border-strong); color: #e4e4e7; padding: 8px 16px; border-radius: 10px; }
.ph-ghost:hover { background: rgba(255, 255, 255, .05); color: #fff; }
@media (max-width: 991.98px) {
  .ph-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; height: auto; flex: 1; overflow-y: auto; }
  .ph-side { min-width: 0; border-right: 0; border-bottom: 1px solid var(--bs-border-color); }
  .ph-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; }
  .ph-item { flex: 0 0 220px; }
  .ph-stage { height: 62vh; flex: none; }
}
@media (max-width: 575.98px) {
  .ph-head { padding: 16px; }
  .ph-foot { padding: 12px 16px; }
  .ph-foot-actions { width: 100%; }
  .ph-foot-actions .btn { flex: 1; }
}

/* ---------- Phone preview dialog (also the post-publish success screen) ---------- */
.ppv-modal { transition: opacity .24s ease; }
.ppv-modal .ppv-dialog { max-width: 600px; opacity: 0; transform: translateY(18px) scale(.965); transition: transform .2s ease-in, opacity .18s ease-in; }
.ppv-modal.show .ppv-dialog { opacity: 1; transform: none; transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .3s ease-out; }
.ppv-content { position: relative; overflow: hidden; color: #e4e4e7; background: radial-gradient(120% 70% at 50% -10%, rgba(var(--brand-violet-rgb), .22), transparent 60%), var(--brand-surface); border: 1px solid var(--brand-border-strong); border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .02) inset; }
.ppv-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; border: 1px solid transparent; background: transparent; color: #a1a1aa; transition: background .15s, color .15s; }
.ppv-close:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.ppv-close:focus-visible, .ppv-sec-btn:focus-visible, .ppv-next-a:focus-visible { outline: 0; box-shadow: var(--brand-focus); }
.ppv-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ppv-hero { display: flex; gap: 16px; align-items: center; padding: 26px 64px 6px 28px; }
.ppv-badge { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(var(--brand-violet-rgb), .16); border: 1px solid rgba(var(--brand-violet-rgb), .38); color: var(--brand-tint); }
.ppv-badge svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ppv-modal.is-published .ppv-badge { border-radius: 50%; background: rgba(34, 197, 94, .14); border-color: rgba(134, 239, 172, .4); color: #86efac; box-shadow: 0 0 0 0 rgba(134, 239, 172, .35); }
.ppv-modal.is-published .ppv-badge svg { width: 34px; height: 34px; stroke-width: 3; }
.ppv-check-ring { stroke-width: 2 !important; opacity: .45; stroke-dasharray: 145; stroke-dashoffset: 0; }
.ppv-check-tick { stroke-dasharray: 34; stroke-dashoffset: 0; }
.ppv-modal.show.is-published .ppv-check-ring { animation: ppvDraw145 .6s cubic-bezier(.65, 0, .35, 1) .12s both; }
.ppv-modal.show.is-published .ppv-check-tick { animation: ppvDraw34 .38s cubic-bezier(.65, 0, .35, 1) .55s both; }
.ppv-modal.show.is-published .ppv-badge { animation: ppvPulse 1.4s ease-out .7s 1; }
@keyframes ppvDraw145 { from { stroke-dashoffset: 145; } to { stroke-dashoffset: 0; } }
@keyframes ppvDraw34 { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
@keyframes ppvPulse { 0% { box-shadow: 0 0 0 0 rgba(134, 239, 172, .35); } 100% { box-shadow: 0 0 0 16px rgba(134, 239, 172, 0); } }
.ppv-title { margin: 0; font-size: 1.22rem; font-weight: 800; letter-spacing: -.01em; color: #fafafa; }
.ppv-lead { margin: 4px 0 0; color: #a1a1aa; font-size: .88rem; line-height: 1.5; }
.ppv-main { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px 28px 22px; }
.ppv-qrcard { position: relative; padding: 14px; border-radius: 22px; background: linear-gradient(160deg, rgba(var(--brand-violet-rgb), .5), rgba(var(--brand-pink-rgb), .35)); box-shadow: 0 18px 44px rgba(var(--brand-violet-rgb), .22); }
.ppv-qr { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 226px; padding: 12px 10px 8px; border-radius: 14px; background: #fff; color: #52525b; text-align: center; font-size: .84rem; }
.ppv-qr img { display: block; width: 176px; height: 176px; max-width: 100%; }
.ppv-qr[data-state="ready"] img { animation: ppvQrIn .5s cubic-bezier(.16, 1, .3, 1) both; }
.ppv-qr[data-state="empty"], .ppv-qr[data-state="error"] { background: rgba(255, 255, 255, .96); }
.ppv-qr[data-state="error"] { color: #b91c1c; }
.ppv-qr-note { max-width: 170px; line-height: 1.45; }
.ppv-qr-skel { width: 150px; height: 150px; border-radius: 12px; background: linear-gradient(100deg, #ececf1 30%, #f8f8fb 50%, #ececf1 70%) 0 0 / 300% 100%; animation: ppvShimmer 1.2s linear infinite; }
@keyframes ppvShimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes ppvQrIn { from { opacity: 0; transform: scale(.9); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.ppv-cap { color: #71717a; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ppv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ppv-steps li { display: flex; gap: 10px; align-items: center; color: #d4d4d8; font-size: .88rem; line-height: 1.35; }
.ppv-steps i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .72rem; font-weight: 800; color: #fff; background: var(--brand-violet-deep); }
.ppv-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; }
.ppv-actions .btn { border-radius: 11px; font-weight: 700; font-size: .86rem; padding: 8px 14px; }
.ppv-actions .btn[hidden] { display: none; }
.ppv-ghost { border: 1px solid var(--brand-border-strong) !important; color: #e4e4e7 !important; background: rgba(255, 255, 255, .02) !important; border-radius: 10px; font-weight: 600; }
.ppv-ghost:hover { background: rgba(255, 255, 255, .07) !important; color: #fff !important; }
.ppv-ghost.is-done { border-color: rgba(134, 239, 172, .5) !important; color: #86efac !important; }
.ppv-notice { margin: 12px 0 0; color: #a1a1aa; font-size: .78rem; line-height: 1.45; }
.ppv-secs { margin: 0 16px 16px; border: 1px solid var(--brand-border); border-radius: 16px; background: rgba(0, 0, 0, .18); overflow: hidden; }
.ppv-sec + .ppv-sec { border-top: 1px solid var(--brand-border); }
.ppv-sec-h { margin: 0; }
.ppv-sec-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 0; background: transparent; color: inherit; text-align: left; transition: background .15s; }
.ppv-sec-btn:hover { background: rgba(255, 255, 255, .03); }
.ppv-sec-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--brand-violet-rgb), .12); color: var(--brand-tint); }
.ppv-sec-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ppv-sec-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ppv-sec-t b { color: #fafafa; font-size: .9rem; font-weight: 700; }
.ppv-sec-t small { color: #8b8b95; font-size: .76rem; }
.ppv-chev { flex: none; width: 16px; height: 16px; fill: none; stroke: #a1a1aa; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
.ppv-sec.open .ppv-chev { transform: rotate(180deg); }
.ppv-sec-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.16, 1, .3, 1); }
.ppv-sec.open .ppv-sec-body { grid-template-rows: 1fr; }
.ppv-sec-in { min-height: 0; overflow: hidden; padding: 0 16px 0 60px; opacity: 0; transition: opacity .2s ease, padding .32s cubic-bezier(.16, 1, .3, 1); }
.ppv-sec.open .ppv-sec-in { opacity: 1; padding-bottom: 16px; transition-delay: .06s, 0s; }
.ppv-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ppv-list li { position: relative; padding-left: 16px; color: #c4c4cc; font-size: .84rem; line-height: 1.5; }
.ppv-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-violet); }
.ppv-list li.is-warn { color: #fde68a; }
.ppv-list li.is-warn::before { background: #f59e0b; }
.ppv-url { display: flex; gap: 8px; margin-bottom: 4px; }
.ppv-url[hidden] { display: none; }
.ppv-url-in { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--brand-border-strong); background: var(--brand-inset); color: #d4d4d8; font: 500 .78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ppv-fine { color: #8b8b95; font-size: .78rem; line-height: 1.5; margin: 8px 0 0; }
.ppv-links { margin-top: 12px; }
.ppv-h { color: #fafafa; font-weight: 700; font-size: .82rem; margin-bottom: 2px; }
.ppv-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; color: #d4d4d8; font-size: .8rem; border-bottom: 1px solid var(--brand-border); }
.ppv-row span { min-width: 0; overflow-wrap: anywhere; }
.ppv-next { display: grid; gap: 6px; }
.ppv-next-a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--brand-border); background: rgba(255, 255, 255, .02); color: inherit; text-decoration: none; transition: border-color .15s, background .15s, transform .15s; }
.ppv-next-a:hover { border-color: rgba(var(--brand-violet-rgb), .55); background: rgba(var(--brand-violet-rgb), .08); color: inherit; }
.ppv-next-a span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ppv-next-a b { color: #fafafa; font-size: .86rem; font-weight: 700; }
.ppv-next-a small { color: #8b8b95; font-size: .76rem; }
.ppv-next-a svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--brand-tint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.ppv-next-a:hover svg { transform: translateX(3px); }
/* Content settles in just after the dialog does. */
.ppv-modal.show .ppv-hero, .ppv-modal.show .ppv-main, .ppv-modal.show .ppv-secs { animation: ppvRise .55s cubic-bezier(.16, 1, .3, 1) both; }
.ppv-modal.show .ppv-main { animation-delay: .07s; }
.ppv-modal.show .ppv-secs { animation-delay: .14s; }
@keyframes ppvRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 575.98px) {
  .ppv-hero { padding: 22px 56px 4px 20px; }
  .ppv-main { grid-template-columns: 1fr; justify-items: center; padding: 16px 20px 18px; gap: 18px; }
  .ppv-qrcard { width: 228px; }
  .ppv-side { width: 100%; }
  .ppv-actions .btn { flex: 1; }
  .ppv-secs { margin: 0 10px 10px; }
  .ppv-sec-in { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ppv-modal, .ppv-modal .ppv-dialog, .ppv-modal.show .ppv-dialog, .ppv-sec-body, .ppv-sec-in, .ppv-chev, .ppv-next-a, .ppv-next-a svg { transition: none !important; }
  .ppv-modal *, .ppv-modal.show * { animation: none !important; }
  .ppv-modal .ppv-dialog { transform: none; }
}

/* ---------- Trigger wizard: paywall preview in a phone frame ---------- */
.tpv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 32px; align-items: start; }
.tpv { margin: 0; display: grid; justify-items: center; gap: 12px; }
.tpv-phone { width: 232px; padding: 10px; border-radius: 40px; background: linear-gradient(160deg, #2a2238, #120d1c); border: 1px solid var(--brand-border-strong); box-shadow: 0 24px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .03) inset; }
.tpv-screen { position: relative; width: 210px; height: 455px; border-radius: 31px; overflow: hidden; background: #0b0812; isolation: isolate; }
.tpv-screen::after { content: ""; position: absolute; top: 8px; left: 50%; width: 64px; height: 18px; margin-left: -32px; border-radius: 12px; background: #000; z-index: 3; }
/* 375 × 812 is the size the templates are designed for; 210 / 375 = .56. */
.tpv-frame { position: absolute; top: 0; left: 0; width: 375px; height: 812px; border: 0; transform: scale(.56); transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: #fff; }
.tpv-screen[data-state="ready"] .tpv-frame { opacity: 1; }
.tpv-skel, .tpv-msg { position: absolute; inset: 0; display: none; }
.tpv-screen[data-state="loading"] .tpv-skel { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 40px 18px 24px; }
.tpv-skel i, .tpv-skel b { display: block; border-radius: 8px; background: linear-gradient(100deg, #1f1830 30%, #2e2542 50%, #1f1830 70%) 0 0 / 300% 100%; animation: ppvShimmer 1.2s linear infinite; }
.tpv-skel i { height: 14px; }
.tpv-skel i:nth-child(1) { width: 70%; height: 22px; margin-bottom: auto; margin-top: 70px; }
.tpv-skel i:nth-child(2) { width: 90%; }
.tpv-skel i:nth-child(3) { width: 60%; }
.tpv-skel b { height: 42px; border-radius: 14px; margin-top: 8px; }
.tpv-screen[data-state="empty"] .tpv-msg-empty, .tpv-screen[data-state="error"] .tpv-msg-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.tpv-msg span { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: var(--brand-tint); background: rgba(var(--brand-violet-rgb), .14); border: 1px dashed rgba(var(--brand-violet-rgb), .45); }
.tpv-msg-error span { color: #fca5a5; background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .4); }
.tpv-msg p { margin: 0; color: #a1a1aa; font-size: .82rem; line-height: 1.45; }
.tpv-cap { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 22px; font-size: .76rem; }
.tpv-tag:empty { display: none; }
.tpv-tag { font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--brand-border-strong); color: #a1a1aa; }
.tpv-tag.is-live { color: #86efac; border-color: rgba(134, 239, 172, .35); }
.tpv-tag.is-draft { color: #fcd34d; border-color: rgba(252, 211, 77, .35); }
.tpv-open { color: var(--brand-tint); font-weight: 600; text-decoration: none; }
.tpv-open:hover { color: #fff; }
/* The wizard pane can be narrow on a wide screen (side nav, page sheet), so the layout follows the pane, not the viewport. */
#simplePaywallSection { container-type: inline-size; }
@container (max-width: 560px) {
  .tpv-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .tpv-frame { transition: none; }
  .tpv-skel i, .tpv-skel b { animation: none; }
}

/* ---------- App icon fallback (no store icon yet) ---------- */
.app-icon-fallback { display: grid; place-items: center; flex: none; border-radius: 12px; color: #c4b5fd; background: linear-gradient(135deg, rgba(139, 92, 246, .22), rgba(236, 72, 153, .14)); border: 1px solid rgba(139, 92, 246, .3); }

/* ---------- Shared form and tag primitives ---------- */
.form-select.ui-select, .ui-input {
  height: 36px; min-height: 36px; background-color: var(--brand-inset); border: 1px solid var(--brand-border-strong); border-radius: 10px;
  color: #fafafa; font-size: .85rem; box-shadow: none; color-scheme: dark;
}
.form-select.ui-select { appearance: none; padding: 0 34px 0 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; }
.form-select.ui-select:focus, .ui-input:focus { border-color: var(--brand-tint); box-shadow: 0 0 0 3px rgba(139, 92, 246, .18); outline: none; }
.ui-input { padding: 0 10px; }
.ui-tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; color: #d4d4d8; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; }
.ui-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--bs-border-color); border-radius: 12px; color: #a1a1aa; font-size: .84rem; }
.ui-note-link { color: #c4b5fd !important; font-weight: 600; text-decoration: none; }
.ui-note-link:hover { color: #fff !important; }

/* ---------- Account & security: one calm column ---------- */
.acc-page, .acc-page:has(#profile) { display: block; max-width: none; }
.acc-page .acc-card { padding: 24px; margin-bottom: 16px; }
.acc-page .acc-head { margin-bottom: 16px; }
.acc-page .acc-head h2 { font-size: 1rem; }
.acc-note { background: none; border: 0; padding: 0; margin: 12px 0 0; color: #71717a; font-size: .8rem; line-height: 1.5; }
.acc-note a { color: #c4b5fd; }
.acc-page .acc-card p { color: #a1a1aa; font-size: .88rem; line-height: 1.55; margin-bottom: 12px; }
/* Password form stays hidden until changes are available; the notice explains why */
#password:has(#passwordFieldset:disabled) #passwordForm { display: none; }
#passwordNotice:empty { display: none; }

/* ---------- Live debugger: neutral badges and a calm empty state ---------- */
.dbg-badge { background: rgba(255,255,255,.06) !important; color: #d4d4d8 !important; border: 1px solid rgba(255,255,255,.14); }
.dbg-empty-mark { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 0 8px rgba(139,92,246,.14); animation: dbgPulse 2s ease-in-out infinite; }
@keyframes dbgPulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(139,92,246,.12); } 50% { box-shadow: 0 0 0 12px rgba(139,92,246,.04); } }
@media (prefers-reduced-motion: reduce) { .dbg-empty-mark { animation: none; } }

/* ---------- Integrations: one icon tone, status always on the right ---------- */
.in2-ico, .in2-ico.is-rc { background: rgba(139,92,246,.12); color: #c4b5fd; border-color: rgba(139,92,246,.28); }
.in2-main .rc-status { margin: 0; }
/* Platform admin viewing a customer's account */
.hd-impersonation{position:sticky;top:0;z-index:1030;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:8px 20px;font-size:.84rem;color:#fde68a;background:linear-gradient(90deg,rgba(245,158,11,.22),rgba(236,72,153,.18));border-bottom:1px solid rgba(252,211,77,.4);backdrop-filter:blur(8px)}
.hd-impersonation strong{color:#fff7d6}
.hd-impersonation button{height:28px;padding:0 12px;border-radius:8px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.25);color:#fff;font-size:.8rem;font-weight:700;white-space:nowrap}
.hd-impersonation button:hover{background:rgba(0,0,0,.4)}

.pr-price-issues{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:#fde68a;font-weight:500;text-align:left}
.pr-price-issues strong{display:block;margin-bottom:4px;color:#fcd34d}
.pr-price-issues ul{margin:0;padding-left:16px}
.pr-price-issues li{margin:2px 0;word-break:break-word}
.pr-price-issues code{color:#fff;font-size:.95em}