/* Dashboard stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 20px 0 24px;
}

.detail-meta .muted {
  margin: 0;
}

.action-bar .btn {
  font-size: 0.85rem;
  padding: 8px 14px;
}

/* Warnings & errors */
.warn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid #fecaca;
}

.item .row {
  margin-top: 12px;
  margin-bottom: 0;
}

.item .row .btn--danger {
  margin-left: auto;
}

/* Checkbox labels in forms */
#sub label,
.detail label {
  padding: 8px 0;
}

/* Export row */
.detail .row:last-child {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

@media (max-width: 640px) {

  .stats {
    grid-template-columns: 1fr 1fr;
  }


  .action-bar .btn {
    width: 100%;
  }
}

.view-tabs button.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.fact-form button,
.fact-form .row {
  grid-column: 1 / -1;
}

/* Site header */
.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.site-head h2 { margin: 0 0 2px; }
.site-head a { text-decoration: none; }
.site-head a:hover { text-decoration: underline; }
.site-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 0.85rem;
}
.site-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.app-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.notification-dialog__body { display: grid; gap: 14px; }
.notification-dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.notification-dialog__head h3 { margin: 0; }
.notification-dialog__summary { margin: 4px 0 0; font-size: .86rem; }
.field--compact { margin: 0; min-width: 150px; }
.field--compact > span { font-size: .78rem; }

/* Status hero */
.status-hero {
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-muted);
  margin-bottom: 18px;
  border-left: 4px solid var(--muted);
}
.status-hero--success { border-left-color: var(--success); background: var(--success-soft); }
.status-hero--warning { border-left-color: var(--warning); background: var(--warning-soft); }
.status-hero--info { border-left-color: var(--info); background: var(--info-soft); }
.status-hero--danger { border-left-color: var(--danger); background: var(--danger-soft); }
.status-hero__top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
}
.status-hero--success .status-dot { color: var(--success); }
.status-hero--warning .status-dot { color: var(--warning); }
.status-hero--info .status-dot { color: var(--info); }
.status-hero--danger .status-dot { color: var(--danger); }
.status-hero__sub { margin: 8px 0 0; font-size: 0.9rem; color: var(--text-secondary); }
.status-hero__hint { margin: 10px 0 0; font-size: 0.84rem; color: var(--muted); line-height: 1.5; }
.hero-bar {
  position: relative;
  height: 8px;
  margin-top: 12px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.1);
  overflow: hidden;
}
.hero-bar i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--primary);
  transition: width 0.4s ease;
}
.hero-bar--indet i {
  width: 40%;
  animation: heroIndet 1.2s ease-in-out infinite;
}
@keyframes heroIndet {
  0% { margin-left: -40%; }
  100% { margin-left: 100%; }
}
.hero-pct { display: inline-block; margin-top: 6px; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); }
.hero-spin {
  width: 14px; height: 14px; margin-left: auto;
  border: 2px solid rgba(15, 23, 42, 0.15);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: heroSpin 0.8s linear infinite;
}
@keyframes heroSpin { to { transform: rotate(360deg); } }

/* Grouped site navigation */
.site-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
}
.nav-btn {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.nav-btn:hover { background: var(--surface); color: var(--primary-dark); }
.nav-btn.is-active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--primary-dark);
  box-shadow: var(--shadow-sm);
}
.card .code { margin: 8px 0 12px; }
.hub-tabs button.active {
  color: var(--primary-dark);
  border-color: #bfdbfe;
  background: var(--primary-soft);
}
.work-section {
  padding: 18px 0;
  border-top: 1px solid var(--border);
}
.work-section:last-child { padding-bottom: 0; }
.source-row strong,
.source-row a,
.source-row .muted {
  display: block;
}
.source-row [data-source-view].is-active {
  border-color: var(--border-strong);
  background: #fff;
}
.conversation-pager .btn[disabled] { opacity: 0.45; cursor: default; }
.fix-advanced .field{margin-top:8px}
.theme-actions .btn { min-height: 42px; }
@keyframes preview-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-3px); opacity: 1; }
}
.logo-card__actions .btn {
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 12px;
}
.logo-shape-tabs button.active {
  background: #fff;
  color: var(--primary-dark);
  box-shadow: var(--shadow-sm);
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
}
dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: rgba(15,23,42,.48); }
.dialog-body { padding: 20px; }
.plugin-setup-dialog { width:min(680px,calc(100vw - 32px)); }
.plugin-setup-value { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center; }
.plugin-setup-value input { width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.plugin-setup-steps { padding:14px 16px;border-radius:12px;background:var(--surface-soft,#f5f7fb); }
.plugin-setup-steps ol { margin:8px 0 0;padding-left:20px; }
.plugin-project-warning{margin:0 0 18px;padding:16px 18px;border:1px solid #9fd9c7;border-radius:14px;background:#effbf7;color:#164f42}.plugin-project-warning p{margin:6px 0 0;color:#397064}
.plugin-sync-status{display:flex;gap:12px;align-items:flex-start;margin:0 0 18px;padding:16px 18px;border:1px solid;border-radius:14px}.plugin-sync-status__icon{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;color:#fff;font-weight:800}.plugin-sync-status b{display:block;margin:2px 0 4px}.plugin-sync-status p{margin:0}.plugin-sync-status small{display:block;margin-top:7px;opacity:.8}.plugin-sync-status--success{border-color:#9fd9c7;background:#effbf7;color:#16604c}.plugin-sync-status--success .plugin-sync-status__icon{background:#0b9872}.plugin-sync-status--warning{border-color:#f0cf8c;background:#fff8e8;color:#85510b}.plugin-sync-status--warning .plugin-sync-status__icon{background:#d58a18}.plugin-sync-status--danger{border-color:#efb5b8;background:#fff0f1;color:#9f2f36}.plugin-sync-status--danger .plugin-sync-status__icon{background:#c83e46}
.plugin-data-grid{display:grid;grid-template-columns:1fr;gap:16px}.plugin-data-grid__wide{grid-column:1/-1}
.plugin-site-info{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.plugin-site-info>div,.plugin-site-info>button.plugin-site-info__btn{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--line,#dce3ee);border-radius:12px;background:var(--surface,#fff);text-align:left;font:inherit;color:inherit;width:100%}
.plugin-site-info>button.plugin-site-info__btn{position:relative;padding-right:36px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.plugin-site-info>button.plugin-site-info__btn:hover,.plugin-site-info>button.plugin-site-info__btn:focus-visible{border-color:var(--accent,#3b6fd9);background:#f5f8ff;box-shadow:0 0 0 3px rgba(59,111,217,.12);outline:none}
.plugin-site-info__affordance{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:rgba(59,111,217,.1);color:var(--accent,#3b6fd9);font-size:12px;font-weight:700;line-height:1;pointer-events:none}
.plugin-site-info>button.plugin-site-info__btn:hover .plugin-site-info__affordance,.plugin-site-info>button.plugin-site-info__btn:focus-visible .plugin-site-info__affordance{background:rgba(59,111,217,.18)}
.plugin-site-info b{font-size:1.25rem;line-height:1.2;color:var(--text,#152033)}
.plugin-site-info span{color:var(--muted,#60708a);font-size:13px}
.plugin-site-info small{color:var(--muted,#60708a);font-size:12px;opacity:.9}
.plugin-site-info--events{grid-template-columns:repeat(4,minmax(0,1fr))}
.plugin-events-dialog{width:min(640px,calc(100vw - 32px));max-height:min(80vh,720px);overflow:hidden}
.plugin-events-dialog .dialog-body{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:14px;max-height:min(80vh,720px);overflow:hidden;box-sizing:border-box}
.plugin-events-tabs{margin:0}
.plugin-events-list{display:grid;gap:8px;min-height:0;max-height:min(58vh,520px);overflow:auto;padding-right:2px}
.plugin-events-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:12px 14px;border:1px solid var(--line,#dce3ee);border-radius:12px;background:var(--surface,#fff)}
.plugin-events-item__main{display:flex;flex-direction:column;gap:4px;min-width:0}
.plugin-events-item__main b{font-size:.95rem;color:var(--text,#152033)}
.plugin-events-item__main span,.plugin-events-item__main small{color:var(--muted,#60708a);font-size:13px;word-break:break-word}
.plugin-events-item__url{font-size:12px;color:var(--accent,#3b6fd9);text-decoration:none;word-break:break-all}
.plugin-events-item__url:hover{text-decoration:underline}
.plugin-events-item__meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;color:var(--muted,#60708a);font-size:12px;white-space:nowrap}
@media (max-width:600px){
.plugin-events-item{grid-template-columns:1fr}
.plugin-events-item__meta{align-items:flex-start}
.plugin-events-dialog .dialog-body{max-height:calc(100dvh - 32px);overflow:hidden}
.plugin-events-list{max-height:none}
}
@media (max-width:600px){
.plugin-setup-value{grid-template-columns:1fr}
.plugin-setup-dialog .row{align-items:stretch}
.plugin-setup-dialog .row>*{width:100%}
}
@media (max-width:960px){
.plugin-site-info,.plugin-site-info--events{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
.plugin-data-grid,.plugin-sync-list{grid-template-columns:1fr}
.plugin-data-grid__wide{grid-column:auto}
.plugin-site-info,.plugin-site-info--events{grid-template-columns:1fr}
}
.period-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
}
.period-tabs button { padding: 6px 10px; background: transparent; color: var(--muted); }
.period-tabs button.active { background: #fff; color: var(--primary-dark); box-shadow: var(--shadow-sm); }

@media (max-width: 720px) {

  .site-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .site-nav .nav-btn { min-width: 0; padding-inline: 6px; font-size: .78rem; }


  .fact-form button,
  .fact-form .row {
    grid-column: auto;
  }
}
/* Stage 2: real widget preview, branding editor, and resilient responsive layouts. */
.widget-preview-shell{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;border:1px solid var(--line,#dfe4ec);border-radius:14px;background:#eef2f7;padding:16px 12px 14px;overflow:auto}
.mobile-sites-toggle{display:none}
.sidebar-backdrop,.sidebar-backdrop[hidden]{display:none}
@media(max-width:900px){

  .mobile-sites-toggle{display:inline-flex}

  .sidebar{
    position:fixed!important;z-index:1001;inset:0 auto 0 0;width:min(340px,88vw);max-height:100dvh;
    overflow:auto;border-radius:0;transform:translateX(-105%);transition:transform .2s ease;
  }

  .project-drawer-open .sidebar{transform:translateX(0)}

  .project-drawer-open .sidebar-backdrop{position:fixed;z-index:1000;inset:0;display:block;width:100%;height:100%;border:0;background:rgba(15,23,42,.48)}

  body.project-drawer-open{overflow:hidden}
}
@media(max-width:640px){

  .app-header{align-items:flex-start}

  .app-header__actions{flex-wrap:wrap;justify-content:flex-end}

  .view-heading,.row{flex-wrap:wrap}

  dialog{max-width:calc(100vw - 24px)}

  .dialog-body{max-height:calc(100dvh - 32px);overflow:auto}

  table{display:block;max-width:100%;overflow-x:auto}

  .btn,button,input,select{min-height:44px}
}

/* Production UI refresh — stronger hierarchy, calmer surfaces, clearer actions. */
:root {
  --bg: #f3f5f9;
  --bg-accent: #e8edff;
  --surface: #ffffff;
  --surface-muted: #f7f8fb;
  --surface-raised: #ffffff;
  --border: #e1e6ee;
  --border-strong: #cbd3df;
  --text: #152238;
  --text-secondary: #4c5c72;
  --muted: #758196;
  --primary: #315ff4;
  --primary-dark: #2448c8;
  --primary-soft: #edf2ff;
  --success: #0a8c62;
  --success-soft: #eaf8f2;
  --warning: #b6690f;
  --warning-soft: #fff7e8;
  --danger: #c23b3b;
  --danger-soft: #fff0f0;
  --info: #3970d8;
  --info-soft: #edf4ff;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(21,34,56,.04), 0 4px 12px rgba(21,34,56,.05);
  --shadow: 0 12px 32px rgba(21,34,56,.08);
  --shadow-lg: 0 24px 60px rgba(21,34,56,.16);
  --transition: .2s cubic-bezier(.2,.7,.2,1);
}

body {
  font-size: 15px;
  color: var(--text);
  background:
    radial-gradient(circle at 90% -10%, rgba(49,95,244,.08), transparent 34rem),
    var(--bg);
}

.shell {
  max-width: 1440px;
  padding: 20px 24px 56px;
}

h1, h2, h3, h4 { letter-spacing: -.025em; }
h2 { font-size: clamp(1.55rem, 2vw, 2rem); line-height: 1.15; }
h3 { font-size: 1.15rem; line-height: 1.25; }

.panel {
  border-color: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.app-header {
  min-height: 62px;
  margin-bottom: 16px;
  padding: 8px 4px 18px;
  border: 0;
  border-bottom: 1px solid rgba(203,211,223,.75);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-header__brand { gap: 12px; }
.app-header h1 { margin: 0; font-size: 1.08rem; letter-spacing: -.02em; }
.user-line { color: var(--muted); font-size: .78rem; }
.app-logo {
  width: 42px;
  height: 42px;
  margin: 0;
  border-radius: 13px;
  background: linear-gradient(145deg, #416efa, #214bd8);
  box-shadow: 0 8px 20px rgba(49,95,244,.28);
  font-size: 1rem;
}
.app-header__actions { align-items: center; }
.app-header__actions .btn { min-height: 40px; border-color: transparent; background: transparent; }
.app-header__actions .btn:hover { border-color: var(--border); background: rgba(255,255,255,.78); }

.grid {
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 18px;
}

.sidebar {
  top: 16px;
  padding: 18px;
  overflow: visible;
}
.sidebar__heading { margin-bottom: 14px; }
.sidebar__heading .section-title { margin: 0 0 2px; color: var(--text); font-size: .78rem; letter-spacing: .08em; }
.sidebar__heading p { margin: 0; color: var(--muted); font-size: .8rem; }
#addSiteBtn { min-height: 44px; margin-bottom: 14px; }

.site-list { gap: 7px; }
.sidebar-overview,
.site-card {
  width: 100%;
  text-align: left;
  color: var(--text);
}
.sidebar-overview {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin-bottom: 3px;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid transparent;
  font-weight: 650;
}
.sidebar-overview:hover { background: var(--surface-muted); border-color: var(--border); }
.sidebar-overview.is-active { color: var(--primary-dark); border-color: #c9d5ff; background: var(--primary-soft); }
.sidebar-overview__icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  color: var(--primary);
  background: var(--primary-soft);
}
.site-card {
  position: relative;
  display: block;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  z-index: 0;
}
.site-card:hover {
  border-color: var(--border);
  background: var(--surface-muted);
  box-shadow: none;
  transform: none;
}
.site-card.is-active {
  border-color: #b8c8ff;
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}
.site-card.is-menu-open {
  z-index: 5;
  border-color: var(--border);
  background: var(--surface-muted);
}
.site-card__main {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0 34px 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.site-card__meta {
  display: grid;
  gap: 3px;
  min-width: 0;
  justify-items: start;
}
.site-card strong { margin: 0; display: block; overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.site-card small { display: block; overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.site-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.site-card__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.site-card__menu {
  position: absolute;
  top: 6px;
  right: 6px;
}
.site-card__more {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  line-height: 0;
}
.site-card__more:hover,
.site-card.is-menu-open .site-card__more {
  color: #1e293b;
  border-color: var(--border);
  background: #fff;
}
.site-card__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 168px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}
.site-card__dropdown[hidden] { display: none !important; }
.site-card__dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: .84rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.site-card__dropdown-item svg { flex: 0 0 auto; color: #64748b; }
.site-card__dropdown-item:hover { background: var(--surface-muted); }
.site-card__dropdown-item--danger { color: #b7333a; }
.site-card__dropdown-item--danger svg { color: #b7333a; }
.site-card__dropdown-item--danger:hover { background: #fff6f6; }
.site-avatar,
.project-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: #2547ae;
  background: linear-gradient(145deg, #eef2ff, #dfe7ff);
  font-weight: 750;
}
.site-list { overflow: visible; }
.sidebar-loading { display: grid; gap: 10px; padding: 10px 2px; }
.sidebar-loading span { height: 50px; border-radius: 12px; background: linear-gradient(90deg,#f0f2f6 20%,#fafbfc 42%,#f0f2f6 64%); background-size: 240% 100%; animation: skeletonPulse 1.35s infinite linear; }

.detail {
  min-height: calc(100vh - 118px);
  padding: clamp(24px, 3vw, 36px);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.detail.detail--widget-builder,
.detail:has(.widget-settings-layout) {
  overflow: visible;
}

.btn {
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 650;
}
.btn--primary { background: linear-gradient(180deg, #3a68fa, #2b57e8); box-shadow: 0 5px 14px rgba(49,95,244,.24); }
.btn--primary:hover { background: linear-gradient(180deg, #315ff4, #244bd4); box-shadow: 0 7px 18px rgba(49,95,244,.3); transform: translateY(-1px); }
.btn--ghost { border-color: var(--border); color: var(--text-secondary); }
.btn--ghost:hover { border-color: var(--border-strong); background: #f7f9fc; }
.btn--danger { color: #b32f36; border-color: #efc5c8; background: #fff6f6; }
.btn--danger:hover { border-color: #e6a8ad; background: #ffeded; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

.badge {
  gap: 6px;
  padding: 4px 9px;
  border: 0;
  font-size: .7rem;
  letter-spacing: 0;
  text-transform: none;
}
.badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--success { color: #087953; background: #e6f7f0; }
.badge--warning { color: #9d5a0b; background: #fff3da; }
.badge--danger { color: #b7333a; background: #ffebec; }
.badge--info { color: #2e5fbe; background: #eaf1ff; }
.badge--muted { color: #64748b; background: #eef1f5; }

.dashboard-head,
.overview-heading,
.section-heading,
.widget-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.dashboard-head p,
.overview-heading p,
.section-heading p,
.widget-heading p { margin: 0; color: var(--muted); }
.dashboard-banner__icon,
.status-hero__icon {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  font-weight: 800;
}
.stats .stat--action {
  width: 100%;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.stats .stat--action:hover,
.stats .stat--action:focus-visible {
  border-color: #e3a4aa;
  box-shadow: var(--shadow-sm);
  outline: none;
}

.stats.stats--primary {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  margin: 0 0 28px;
}
.stats .stat {
  min-height: 126px;
  padding: 18px;
  border-radius: 15px;
  background: var(--surface);
}
.stats .stat::before { display: none; }
.stats .stat:hover { box-shadow: var(--shadow-sm); transform: none; }
.stats .stat__label { display: block; min-height: 2.4em; color: var(--text-secondary); font-size: .78rem; font-weight: 650; }
.stats .stat b { margin: 7px 0 3px; font-size: 1.8rem; letter-spacing: -.04em; }
.stats .stat small { color: var(--muted); font-size: .72rem; }
.stats .stat--attention { border-color: #efc9cc; background: #fff9f9; }
.stats .stat--attention b { color: var(--danger); }
.stats .stat--link:hover,
.stats .stat--link:focus-visible {
  border-color: #b8ccf7;
  background: #f8faff;
}
.stats .stat--link small { color: var(--primary); }
.section-heading { margin-bottom: 13px; }
.section-heading h3 { margin: 0 0 3px; }
.section-heading p { font-size: .82rem; }
.delete-site-dialog strong { color: var(--text); }
.delete-site-progress {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid #efc5c8;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff6f6, #fff);
}
.delete-site-progress[hidden] { display: none !important; }
.delete-site-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.delete-site-progress__head b {
  font-size: .84rem;
  color: var(--text);
}
.delete-site-progress__head span {
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 700;
  color: var(--danger);
  font-variant-numeric: tabular-nums;
}
.delete-site-progress__bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(194, 59, 59, .12);
}
.delete-site-progress__bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e35d5d, #c23b3b);
  transition: width .28s ease;
}
.delete-site-progress > .muted {
  margin: 0;
  font-size: .74rem;
  line-height: 1.4;
}

.empty-panel {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px;
  border: 1px dashed var(--border-strong);
  border-radius: 15px;
  background: var(--surface-muted);
}
.empty-panel > span {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: var(--primary);
  background: var(--primary-soft);
  font-weight: 750;
}
.empty-panel > div { flex: 1; }
.empty-panel h4 { margin: 0 0 3px; }
.empty-panel p { margin: 0; color: var(--muted); font-size: .82rem; }
.empty-panel--error { border-color: #efc9cc; background: var(--danger-soft); }
.empty-panel--error > span { color: #fff; background: var(--danger); }
.account-details .stack { max-width: 440px; }

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: .78rem;
}
.breadcrumbs button { padding: 0; color: var(--primary); background: transparent; }
.breadcrumbs button:hover { text-decoration: underline; }
.site-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px 20px;
  margin-bottom: 20px;
}
.site-head__main { display: flex; min-width: 0; align-items: center; gap: 13px; }
.site-head__main > div { min-width: 0; }
.project-avatar--large { width: 46px; height: 46px; border-radius: 14px; font-size: 1.05rem; }
.site-head h2 { margin: 0 0 4px; font-size: 1.6rem; }
.site-head a { display: block; overflow: hidden; color: var(--muted); font-size: .82rem; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.site-head__actions { align-items: center; }
.site-head__meta {
  grid-column: 1 / -1;
  gap: 9px 16px;
  padding-left: 59px;
  color: var(--muted);
  font-size: .76rem;
}
.site-head__meta > span:not(.badge) { position: relative; }
.site-head__meta > span:not(.badge)::before { content: ""; position: absolute; left: -9px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #b7c0cd; }

.status-hero {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: 16px;
}
.status-hero__body { flex: 1; min-width: 0; }
.status-hero__top { font-size: 1rem; }
.status-hero__sub { margin-top: 3px; color: var(--text-secondary); }
.status-hero__hint { margin-top: 6px; }
.status-hero--success { border-color: #bfe3d5; background: var(--success-soft); }
.status-hero--success .status-hero__icon { color: #fff; background: var(--success); }
.status-hero--warning { border-color: #edd4a3; background: var(--warning-soft); }
.status-hero--warning .status-hero__icon { color: #fff; background: var(--warning); }
.status-hero--info { border-color: #cbdafd; background: var(--info-soft); }
.status-hero--info .status-hero__icon { color: #fff; background: var(--info); }
.status-hero--danger { border-color: #edc3c6; background: var(--danger-soft); }
.status-hero--danger .status-hero__icon { color: #fff; background: var(--danger); }
.status-hero--action {
  width: 100%;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.status-hero--action:hover,
.status-hero--action:focus-visible {
  box-shadow: var(--shadow-sm);
  outline: none;
}
.status-hero__go {
  flex: 0 0 auto;
  align-self: center;
  color: var(--text-secondary);
  font-size: .82rem;
  font-weight: 650;
  white-space: nowrap;
}
.status-hero--action:hover .status-hero__go,
.status-hero--action:focus-visible .status-hero__go {
  color: var(--danger);
}
.hero-bar { height: 6px; background: rgba(21,34,56,.1); }
.hero-pct { margin-top: 5px; }

.site-nav {
  display: flex;
  gap: 4px;
  margin: 0 -4px 22px;
  padding: 4px;
  overflow-x: auto;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  scrollbar-width: thin;
}
.nav-btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 10px 10px 0 0;
  font-size: .8rem;
  white-space: nowrap;
}
.nav-btn:hover { color: var(--text); background: var(--surface-muted); }
.nav-btn.is-active {
  border-color: transparent;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 4px 12px rgba(49,95,244,.2);
}
.nav-btn.is-active .nav-count { color: var(--primary); background: #fff; }
#sub { margin: 0; padding: 0; border: 0; }

.overview-heading { margin-bottom: 16px; }
.overview-heading h3 { margin: 0 0 4px; font-size: 1.28rem; }
.overview-heading p { font-size: .8rem; }
.overview-kpis {
  display: grid;
  grid-template-columns: 1.35fr repeat(3,minmax(0,1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.overview-kpi {
  min-width: 0;
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #fff;
}
.overview-kpi > span,
.overview-kpi small { display: block; color: var(--muted); font-size: .73rem; }
.overview-kpi b { display: block; margin: 10px 0 3px; overflow-wrap: anywhere; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.04em; }
.incomplete-pages-panel .section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.incomplete-pages-panel .section-heading h3 { margin: 0 0 4px; font-size: 1rem; }
.incomplete-pages-panel .section-heading p { margin: 0; color: var(--muted); font-size: .9rem; }
.launch-setup-panel .section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.launch-setup-panel .section-heading h3 { margin: 0 0 4px; font-size: 1rem; }
.launch-setup-panel .section-heading p { margin: 0; color: var(--muted); font-size: .9rem; }
.installation-details__body .code { grid-column: 1/-1; }

.view-loading { min-height: 320px; padding: 12px 0; }
.view-loading__label { display: block; margin-bottom: 18px; color: var(--muted); font-size: .78rem; }
.skeleton { border-radius: 10px; background: linear-gradient(90deg,#eef1f5 20%,#f8f9fb 42%,#eef1f5 64%); background-size: 240% 100%; animation: skeletonPulse 1.35s infinite linear; }
.skeleton--title { width: 38%; height: 26px; margin-bottom: 12px; }
.skeleton--wide { width: 72%; height: 14px; margin-bottom: 28px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.skeleton--card { height: 126px; }
@keyframes skeletonPulse { to { background-position: -140% 0; } }
.hub-tabs button.active { border-color: var(--border); background: #fff; box-shadow: var(--shadow-sm); }
.field > span,
.field-label { color: var(--text-secondary); font-size: .76rem; font-weight: 650; }
.field > span small { color: var(--muted); font-weight: 450; }
input, textarea, select { min-height: 44px; border-color: var(--border-strong); border-radius: 10px; background: #fff; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(49,95,244,.12); }
.switch-row { justify-content: space-between; gap: 18px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted); }
.switch-row > span { display: grid; gap: 2px; }
.switch-row b { color: var(--text); font-size: .84rem; }
.switch-row small { color: var(--muted); font-size: .72rem; }
.switch-row input { width: 38px !important; height: 22px; min-height: 0; accent-color: var(--primary); }
.site-design-lab__heading .btn { flex: 0 0 auto; min-height: 46px; padding-inline: 18px; border-radius: 14px; box-shadow: 0 10px 22px rgba(49,95,244,.22); }
.site-design-error .btn { grid-column: 2; grid-row: 1/3; }
@keyframes designSpin { to { transform: rotate(360deg); } }
.theme-presets button.is-active,
.theme-presets .theme-card.is-active {
  border-color: var(--primary);
  background: linear-gradient(180deg, #f5f8ff 0%, #fff 100%);
  box-shadow: 0 0 0 3px rgba(49,95,244,.12), 0 14px 28px rgba(49,95,244,.1);
}

.empty-state { display: grid; min-height: 340px; place-items: center; align-content: center; text-align: center; }
.empty-state__icon { display: grid; width: 54px; height: 54px; margin-bottom: 12px; place-items: center; border-radius: 17px; color: #fff; background: var(--primary); box-shadow: 0 12px 26px rgba(49,95,244,.24); font-weight: 800; }
.empty-state h2 { font-size: 1.3rem; }

dialog { border-radius: 18px; }
dialog::backdrop { background: rgba(21,34,56,.54); backdrop-filter: blur(3px); }

.scan-confirm__list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 10px;
  color: var(--text-secondary);
  line-height: 1.45;
  font-size: .92rem;
}
.scan-confirm__list strong { color: var(--text); font-weight: 650; }
.scan-confirm__stats {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #d7e3fb;
  border-radius: 12px;
  background: #f4f8ff;
  color: #1e3a6e;
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.35;
}

.integration-lock-banner {
  display: none;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #cbdafd;
  border-radius: 12px;
  background: linear-gradient(180deg, #eef3ff, #f7f9ff);
  color: var(--text-secondary);
  font-size: .9rem;
  line-height: 1.45;
}
.detail--integration-locked .integration-lock-banner { display: block; }
.integration-lock-banner b { color: var(--text); }

.detail--integration-locked {
  position: relative;
}
.detail--integration-locked .site-head,
.detail--integration-locked .site-nav .nav-btn:not([data-view="knowledge"]),
.detail--integration-locked .site-head__actions {
  opacity: .42;
  filter: grayscale(.15);
  pointer-events: none;
  user-select: none;
}
.detail--integration-locked .breadcrumbs {
  opacity: 1;
  pointer-events: auto;
}
.detail--integration-locked .site-nav .nav-btn[data-view="knowledge"] {
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 1px #cbdafd;
}
.detail--integration-locked #statusHero,
.detail--integration-locked #sub {
  position: relative;
  z-index: 2;
  opacity: 1;
  filter: none;
  pointer-events: auto;
}
.detail--integration-locked #sub .source-toolbar .btn,
.detail--integration-locked #sub [data-source-toggle],
.detail--integration-locked #sub [data-source-refresh],
.detail--integration-locked #sub #sourceFilter,
.detail--integration-locked #sub .hub-tabs button:not([data-knowledge-tab="sources"]),
.detail--integration-locked #sub .faq-form,
.detail--integration-locked #sub #ownerFactForm,
.detail--integration-locked #sub [data-fverify],
.detail--integration-locked #sub [data-fdel],
.detail--integration-locked #sub [data-del],
.detail--integration-locked #sub [data-save],
.detail--integration-locked #sub #advancedExcludeForm,
.detail--integration-locked #sub [data-advanced-exclude],
.detail--integration-locked #sub .overview-heading .row,
.detail--integration-locked #sub .task-list button,
.detail--integration-locked #sub #ovScan,
.detail--integration-locked #sub #ovRetryIndex,
.detail--integration-locked #sub #ovVerify {
  opacity: .4;
  pointer-events: none;
  filter: grayscale(.2);
}

.scan-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 10px;
  padding: 0;
  list-style: none;
}
.scan-steps__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid #d7deea;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 600;
}
.scan-steps__item::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c5cedb;
}
.scan-steps__item--done {
  color: #17684a;
  border-color: #bfe3d5;
  background: #f2fbf6;
}
.scan-steps__item--done::before { background: var(--success); }
.scan-steps__item--active {
  color: #1d4ed8;
  border-color: #bfd0ff;
  background: #eef3ff;
}
.scan-steps__item--active::before {
  background: var(--info);
  box-shadow: 0 0 0 3px rgba(37,99,235,.16);
}
.scan-steps__item--failed {
  color: #9f1239;
  border-color: #edc3c6;
  background: #fff5f6;
}
.scan-steps__item--failed::before { background: var(--danger); }
.status-hero__meta {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .78rem;
}
.status-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.status-hero--compact .status-hero__sub { max-width: 52rem; }
.status-hero--compact .status-hero__meta {
  margin-top: 8px;
  padding: 6px 10px;
  width: fit-content;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #334155;
  font-weight: 650;
}
.status-hero--compact .status-hero__hint { margin-top: 8px; }
#toast {
  border-radius: 12px;
  background: #17233a;
  inset: auto 20px 20px auto;
  margin: 0;
  border: 0;
}

@media (max-width: 1180px) {

  .grid { grid-template-columns: 250px minmax(0,1fr); }

  .overview-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {

  .shell { padding-inline: 16px; }

  .grid { grid-template-columns: 1fr; }

  .sidebar { padding: 18px; border-radius: 0; }

  .app-header { flex-direction: row; align-items: center; }

  .stats.stats--primary { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 680px) {

  .shell { padding: 10px 8px 28px; }

  .app-header { margin-inline: 6px; padding: 5px 2px 12px; }

  .app-header__brand > div { display: none; }

  .app-header__actions { margin-left: auto; gap: 3px; }

  .app-header__actions .btn { min-height: 38px; padding: 8px 10px; font-size: .76rem; }

  .detail { min-height: calc(100vh - 86px); padding: 18px 14px; border-radius: 16px; }

  .dashboard-head,
  .overview-heading,
  .widget-heading { align-items: stretch; flex-direction: column; }

  .dashboard-head .btn { width: 100%; }

  .stats.stats--primary { gap: 8px; }

  .stats .stat { min-height: 110px; padding: 14px; }

  .stats .stat b { font-size: 1.55rem; }

  .site-head { grid-template-columns: 1fr; }

  .site-head__actions { width: 100%; margin: 0; }

  .site-head__actions .btn { flex: 1; }

  .site-head__meta { grid-column: auto; padding-left: 0; }

  .site-nav { display: flex; margin-inline: -2px; }

  .site-nav .nav-btn { min-width: max-content; padding-inline: 11px; font-size: .76rem; }

  .overview-kpis { gap: 8px; }

  .overview-kpi { min-height: 104px; padding: 13px; }

  .overview-kpi b { font-size: 1.25rem; }

  .installation-details__body .code { grid-column: auto; }

  .widget-publish .btn { flex: 1; }

  .site-design-lab__heading .btn { width: 100%; }

  .skeleton-grid { grid-template-columns: 1fr; }

  .skeleton--card { height: 84px; }
}

/* Guided setup wizard */
body.app--onboarding,
body.app--widget-setup {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(37,99,235,.14), transparent 58%),
    radial-gradient(700px 360px at 95% 8%, rgba(14,165,233,.10), transparent 55%),
    #f1f5f9;
}
body.app--onboarding .sidebar,
body.app--onboarding #mobileSitesToggle,
body.app--onboarding .sidebar-backdrop,
body.app--widget-setup .sidebar,
body.app--widget-setup #mobileSitesToggle,
body.app--widget-setup .sidebar-backdrop {
  display: none !important;
}
body.app--onboarding .grid,
body.app--widget-setup .grid {
  grid-template-columns: 1fr;
}
body.app--onboarding .detail,
body.app--widget-setup .detail {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  padding: 28px 28px 36px;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 50px -28px rgba(15,23,42,.35);
  backdrop-filter: blur(8px);
}
body.app--widget-setup .detail {
  max-width: 1120px;
}
.setup-wizard {
  display: grid;
  gap: 20px;
}
.setup-wizard__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.setup-back {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
}
.setup-back:hover { color: var(--primary-dark); }
.setup-step__back {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin: 0 0 4px;
  width: fit-content;
  text-align: left;
}
.setup-step__back:hover { color: var(--primary-dark); }
.setup-wizard__project {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}
.setup-wizard__project h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}
.setup-wizard__project a {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.setup-wizard__intro {
  display: grid;
  gap: 4px;
}
.setup-wizard__intro .eyebrow {
  color: var(--primary-dark);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.setup-wizard__intro p {
  margin: 0;
  color: var(--text-secondary);
  font-size: .92rem;
}
.setup-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.setup-progress__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  color: var(--muted);
  transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.setup-progress__item span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}
.setup-progress__item b {
  font-size: .84rem;
  font-weight: 650;
  color: inherit;
}
.setup-progress__item.is-current {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #eff6ff, #fff);
  color: var(--primary-dark);
  box-shadow: 0 10px 24px -18px rgba(37,99,235,.7);
}
.setup-progress__item.is-current span {
  background: var(--primary);
  color: #fff;
}
.setup-progress__item.is-done {
  border-color: #a7f3d0;
  background: linear-gradient(180deg, #ecfdf5, #fff);
  color: #047857;
  cursor: pointer;
}
.setup-progress__item.is-done:hover {
  color: #065f46;
}
.setup-progress__item.is-done span {
  background: var(--success);
  color: #fff;
}
.setup-step {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(248,250,252,.9), #fff 42%);
  animation: setupStepIn .28s ease;
}
@keyframes setupStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.setup-step__head h3 {
  margin: 8px 0 8px;
  font-size: 1.5rem;
  letter-spacing: -.03em;
  line-height: 1.2;
}
.setup-step__head p {
  margin: 0;
  max-width: 52ch;
  color: var(--text-secondary);
  font-size: .92rem;
  line-height: 1.55;
}
.setup-step__eyebrow {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: .72rem;
  font-weight: 700;
}
.setup-field select {
  min-height: 46px;
}
.setup-step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 2px;
}
.setup-step__actions + .setup-result:empty {
  display: none;
}
.setup-step__actions .btn--primary {
  margin-left: auto;
  min-height: 44px;
  padding-inline: 18px;
}
.setup-step__actions--wp .btn--primary {
  margin-left: 0;
}
.setup-step__actions--wp #checkInstallation {
  margin-left: auto;
  min-height: 44px;
}
.setup-steps-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.setup-steps-list li {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: 12px;
  align-items: start;
  color: var(--text-secondary);
  line-height: 1.5;
  font-size: .9rem;
}
.setup-steps-list li span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: .75rem;
  font-weight: 700;
}
.setup-code {
  overflow: hidden;
  border: 1px solid #1e293b;
  border-radius: 16px;
  background: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.setup-code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148,163,184,.22);
  background: rgba(15,23,42,.88);
}
.setup-code__bar span {
  color: #94a3b8;
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.setup-code__bar .btn {
  color: #e2e8f0;
  border-color: rgba(148,163,184,.35);
  background: rgba(30,41,59,.8);
}
.setup-code__bar .btn:hover {
  background: rgba(51,65,85,.95);
}
.setup-code .code {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e2e8f0;
  font-size: .82rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.setup-callout {
  padding: 14px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: linear-gradient(180deg, #eff6ff, #f8fbff);
}
.setup-callout b { display: block; margin-bottom: 4px; }
.setup-callout p { margin: 0 0 10px; color: var(--muted); font-size: .84rem; }
.setup-siteid__row {
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.setup-siteid__value {
  display: inline-block;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: .82rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}
.setup-manual-fallback {
  margin: 4px 0 0;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  background: var(--surface-muted, #f8fafc);
  overflow: hidden;
}
.setup-manual-fallback > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-size: .86rem;
  font-weight: 650;
  color: var(--text-secondary);
}
.setup-manual-fallback > summary::-webkit-details-marker { display: none; }
.setup-manual-fallback[open] > summary {
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.setup-manual-fallback .setup-code {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.setup-manual-fallback__hint,
.setup-manual-fallback .btn {
  margin: 10px 14px 14px;
}
.setup-manual-fallback__hint {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
}
.setup-result:empty { display: none; }
.setup-result {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-muted);
}
.setup-error { margin: 0; color: #b91c1c; font-size: .88rem; }
.setup-success { margin: 0; color: #047857; font-size: .88rem; line-height: 1.45; }
.setup-extras {
  margin-top: 2px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
.setup-extras > summary {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  user-select: none;
}
.setup-extras > summary::-webkit-details-marker { display: none; }
.setup-extras__icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #f1f5f9;
  color: var(--muted);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.setup-extras[open] .setup-extras__icon {
  background: var(--primary-soft);
  color: var(--primary-dark);
  transform: rotate(90deg);
}
.setup-extras__title {
  color: var(--text);
  font-size: .92rem;
  font-weight: 700;
}
.setup-extras__hint {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
  justify-self: end;
}
.setup-extras__body {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, #f8fafc, #fff);
}
.setup-extras__card {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.setup-extras__card-head {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 12px;
  align-items: start;
}
.setup-extras__card-head > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: .85rem;
  font-weight: 700;
}
.setup-extras__card-head b {
  display: block;
  margin: 0 0 2px;
  color: var(--text);
  font-size: .9rem;
}
.setup-extras__card-head p {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
}
.setup-extras__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}
.setup-extras__row .field {
  min-width: 160px;
  flex: 1;
}
.setup-extras__code {
  margin: 0;
  font-size: .78rem;
  line-height: 1.55;
}
.setup-share-ok {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  background: var(--success-soft);
  border: 1px solid #a7f3d0;
}
.setup-share-ok b {
  color: #047857;
  font-size: .84rem;
}
.setup-share-ok a {
  overflow-wrap: anywhere;
  color: var(--primary-dark);
  font-size: .8rem;
}
.setup-share-ok small {
  color: #059669;
  font-size: .74rem;
}
@keyframes setupPulse {
  0% { box-shadow: 0 0 0 0 rgba(2,132,199,.35); }
  70% { box-shadow: 0 0 0 10px rgba(2,132,199,0); }
  100% { box-shadow: 0 0 0 0 rgba(2,132,199,0); }
}
.setup-load-error {
  margin-top: 8px;
}
#sub label.setup-enable,
.detail label.setup-enable,
.setup-enable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 18px 20px !important;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: linear-gradient(180deg, #eff6ff, #fff);
  cursor: pointer;
  box-sizing: border-box;
}
.setup-field {
  gap: 8px;
  display: grid !important;
  align-items: stretch !important;
}
.setup-field > span {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-secondary);
}
#sub .setup-field input,
#sub .setup-field select,
#sub .setup-field textarea,
.detail .setup-field input,
.detail .setup-field select,
.detail .setup-field textarea,
.setup-field input,
.setup-field select,
.setup-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px !important;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  line-height: 1.45;
  box-sizing: border-box;
}
#sub .setup-field textarea,
.detail .setup-field textarea,
.setup-field textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.55;
}
.setup-step__actions--finish .btn--primary {
  min-height: 46px;
  padding-inline: 20px;
  font-weight: 700;
}
.setup-pages {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.setup-pages > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-size: .9rem;
  font-weight: 650;
}
.setup-pages > summary::-webkit-details-marker { display: none; }
.setup-pages > summary::before {
  content: "▸";
  color: var(--muted);
  font-size: .75rem;
}
.setup-pages[open] > summary::before { content: "▾"; }
.setup-pages > summary b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: .78rem;
}
.setup-pages__list {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  margin: 0;
  padding: 0 14px 12px 36px;
  color: var(--text-secondary);
  font-size: .82rem;
  line-height: 1.4;
}
.setup-pages__list li span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.setup-pages__item {
  position: relative;
}
.setup-pages__item[data-title]:hover::before {
  content: attr(data-title);
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 2;
  max-width: min(420px, 90vw);
  padding: 6px 10px;
  border-radius: 8px;
  background: #1f2937;
  color: #fff;
  font-size: .75rem;
  line-height: 1.35;
  white-space: normal;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
  pointer-events: none;
}
.setup-pages__item[data-title]:hover::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 100%;
  border: 5px solid transparent;
  border-top-color: #1f2937;
}
.setup-pages__more {
  color: var(--muted);
  font-style: italic;
  list-style: none;
  margin-left: -18px;
}
.setup-pages__hint {
  margin: 0;
  padding: 0 14px 14px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}
.setup-pages--empty {
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--muted);
  font-size: .84rem;
}
.installation-check-loading{display:flex;align-items:center;gap:13px;margin-top:12px;padding:14px 16px;border:1px solid #d9e3f5;border-radius:14px;background:linear-gradient(135deg,#f8faff,#f3f7ff);color:var(--text)}
.installation-check-loading__spinner{flex:0 0 28px;width:28px;height:28px;border:3px solid #d6e1fb;border-top-color:var(--primary);border-radius:50%;animation:installationCheckSpin .8s linear infinite}
.installation-check-loading b{display:block;font-size:.9rem}.installation-check-loading p{margin:3px 0 0;color:var(--muted);font-size:.78rem;line-height:1.4}
@keyframes installationCheckSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
.installation-check-loading__spinner{animation-duration:1.8s}
}
@media (max-width: 720px) {

  body.app--onboarding .detail,
  body.app--widget-setup .detail { padding: 18px 16px 24px; border-radius: 18px; }

  .setup-progress { grid-template-columns: 1fr; }

  .setup-step { padding: 18px; }

  .setup-step__actions .btn--primary { width: 100%; margin-left: 0; }

  .setup-wizard__project { width: 100%; }

  .setup-extras > summary {
    grid-template-columns: auto 1fr;
  }

  .setup-extras__hint {
    grid-column: 2;
    justify-self: start;
  }

  .setup-step__actions--finish .btn--primary { width: 100%; }

  .setup-extras__row .btn { width: 100%; }
}