/* =============================================================================
 SEOForge Admin CSS — Forge Design System v2
 Organized: tokens → base → components → metabox → utilities
 ============================================================================= */


/* =============================================================================
 1. DESIGN TOKENS
 ============================================================================= */

:root {
    /* ── Shared tokens (same across all Forge plugins) ── */
    --bg-light:       #F8F9FC;
    --surface:        #FFFFFF;
    --border:         #E5E7EB;
    --text-primary:   #1A1A2E;
    --text-secondary: #4B5563;
    --text-muted:     #6B7280;
    --status-success: #10B981;
    --status-warning: #F59E0B;
    --status-error:   #EF4444;
    --status-success-light: #ECFDF5;
    --status-warning-light: #FFFBEB;
    --status-error-light:   #FEF2F2;
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   14px;
    --radius-xl:   16px;
    --radius-pill: 100px;
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.08);
    --shadow-card: 0 24px 64px rgba(0,0,0,0.08);
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-base:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.sf-admin {
  /* ── SEOForge accent palette (scoped — won't leak to other plugins) ── */
  --accent:          #FF6B35;
  --accent-hover:    #F05E28;
  --accent-active:   #E05520;
  --accent-light:    #FF8F66;
  --accent-muted:    #FED7AA;
  --accent-subtle:   #FFF7ED;
  --on-accent:       #FFFFFF;
  --shadow-btn:      0 4px 24px color-mix(in srgb, #FF6B35 35%, transparent);
  --shadow-accent:   0 8px 24px rgba(255, 107, 53, 0.30);
  /* Legacy aliases */
  --seoforge-primary:       #FF6B35;
  --seoforge-primary-hover: #F05E28;
  --seoforge-primary-light: #FFF7ED;
  --seoforge-green:         #10B981;
  --seoforge-yellow:        #F59E0B;
  --seoforge-red:           #EF4444;
  --seoforge-gray:          #6B7280;
  --seoforge-border:        #E5E7EB;
  --seoforge-bg:            #F8F9FC;
}


/* =============================================================================
 2. BASE — scoped to .sf-admin
 ============================================================================= */

.sf-admin .wrap {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.55;
}

.sf-admin .wrap p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 12px;
}

/* Muted helper text — Settings API description, form hints. Slightly smaller
 than body but generous line-height so stacked hints stay readable. */
.sf-admin .wrap .description,
.sf-admin .wrap p.description,
.sf-admin .form-table .description {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Page title */
.sf-admin .wrap > h1:first-child {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  padding-bottom: 14px;
  border-bottom: 2.5px solid var(--accent);
  margin: 0 0 24px;
}

.sf-admin .wrap > h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 32px 0 12px;
}
.sf-admin .wrap > h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 24px 0 10px;
}

/* Form-table rows — breathe a bit so labels + inputs aren't cramped. */
.sf-admin .wrap .form-table th {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  padding: 18px 10px 18px 0;
  color: var(--text-primary);
}
.sf-admin .wrap .form-table td {
  padding: 14px 10px;
  font-size: 14px;
  line-height: 1.55;
}

/* Standalone labels (outside form-table). */
.sf-admin .wrap label {
  font-size: 14px;
  line-height: 1.5;
}

.sf-admin .wrap a {
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s var(--ease-spring);
}

.sf-admin .wrap a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* WP notice override — keep notices visually consistent everywhere
 (same radius, 4px accent bar, proper spacing) and never stack on top of
 each other. `display:block` + vertical margin prevents the overlap we
 saw when admin_notices + our inline notices landed in the same slot. */
.sf-admin .wrap .notice,
.sf-admin .notice {
  display: block;
  position: static !important;  /* kill any Freemius-side absolute positioning */
  margin: 12px 0 !important;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border-left-width: 4px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.sf-admin .wrap .notice + .notice,
.sf-admin .notice + .notice {
  margin-top: 8px !important;  /* tight stack without visual overlap */
}
.sf-admin .wrap .notice p,
.sf-admin .notice p {
  margin: 0.4em 0;
}
/* hide the duplicate Freemius admin notice block that sometimes
 renders inside our pages. Freemius notices now surface on the License
 page only — centralized via our `inc/forge-connect` flow. */
.sf-admin .wrap .fs-notice[data-id]:not(.success):not(.error) {
  display: none;
}


/* =============================================================================
 3. FORM CONTROLS
 ============================================================================= */

/* ── Text inputs, URL, password, number, textarea ── */
.sf-admin .wrap input[type="text"],
.sf-admin .wrap input[type="url"],
.sf-admin .wrap input[type="email"],
.sf-admin .wrap input[type="password"],
.sf-admin .wrap input[type="number"],
.sf-admin .wrap input[type="search"],
.sf-admin .wrap textarea,
.sf-admin .form-table input[type="text"],
.sf-admin .form-table input[type="url"],
.sf-admin .form-table input[type="email"],
.sf-admin .form-table input[type="password"],
.sf-admin .form-table input[type="number"],
.sf-admin .form-table textarea {
  border-radius: var(--radius-md) !important;
  border: 1.5px solid var(--border) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: var(--text-primary) !important;
  background: var(--surface) !important;
  transition: border-color 0.25s var(--ease-spring),
              box-shadow   0.25s var(--ease-spring) !important;
  outline: none !important;
  box-shadow: none !important;
}

.sf-admin .wrap input[type="text"]:focus,
.sf-admin .wrap input[type="url"]:focus,
.sf-admin .wrap input[type="email"]:focus,
.sf-admin .wrap input[type="password"]:focus,
.sf-admin .wrap input[type="number"]:focus,
.sf-admin .wrap input[type="search"]:focus,
.sf-admin .wrap textarea:focus,
.sf-admin .form-table input:focus,
.sf-admin .form-table textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

/* ── Select ── */
.sf-admin .wrap select,
.sf-admin .form-table select {
  padding: 12px 38px 12px 16px !important;
  border-radius: var(--radius-md) !important;
  border: 1.5px solid var(--border) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: var(--text-primary) !important;
  background-color: var(--surface) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.25s var(--ease-spring),
              box-shadow   0.25s var(--ease-spring) !important;
  outline: none !important;
  cursor: pointer !important;
}

.sf-admin .wrap select:focus,
.sf-admin .form-table select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

/* ── Checkbox ── */
.sf-admin .wrap input[type="checkbox"],
.sf-admin .form-table input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 6px !important;
  background: var(--surface) !important;
  cursor: pointer !important;
  transition: border-color 0.2s var(--ease-spring),
              background   0.2s var(--ease-spring) !important;
  vertical-align: middle !important;
  position: relative !important;
  margin: 0 8px 0 0 !important;
  flex-shrink: 0 !important;
}

.sf-admin .wrap input[type="checkbox"]:hover,
.sf-admin .form-table input[type="checkbox"]:hover {
  border-color: var(--accent) !important;
}

.sf-admin .wrap input[type="checkbox"]:checked,
.sf-admin .form-table input[type="checkbox"]:checked {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
}

.sf-admin .wrap input[type="checkbox"]::before,
.sf-admin .form-table input[type="checkbox"]::before {
  display: none !important;
}

.sf-admin .wrap input[type="checkbox"]:checked::after,
.sf-admin .form-table input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 5px !important;
  width: 6px !important;
  height: 10px !important;
  border: solid var(--on-accent) !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

/* ── Radio ── */
.sf-admin .wrap input[type="radio"],
.sf-admin .form-table input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 50% !important;
  background: var(--surface) !important;
  cursor: pointer !important;
  transition: border-color 0.2s var(--ease-spring) !important;
  vertical-align: middle !important;
  position: relative !important;
  margin: 0 8px 0 0 !important;
}

.sf-admin .wrap input[type="radio"]:hover,
.sf-admin .form-table input[type="radio"]:hover {
  border-color: var(--accent) !important;
}

.sf-admin .wrap input[type="radio"]:checked,
.sf-admin .form-table input[type="radio"]:checked {
  border-color: var(--accent) !important;
  background: var(--surface) !important;
}

.sf-admin .wrap input[type="radio"]:checked::after,
.sf-admin .form-table input[type="radio"]:checked::after {
  content: '' !important;
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
}

/* ── File input ── */
.sf-admin .wrap input[type="file"] {
  padding: 12px 16px !important;
  border: 2px dashed var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--bg-light) !important;
  cursor: pointer !important;
  font-size: 14px !important;
  color: var(--text-muted) !important;
  max-width: 420px !important;
  transition: border-color 0.2s var(--ease-spring),
              background   0.2s var(--ease-spring) !important;
}

.sf-admin .wrap input[type="file"]:hover {
  border-color: var(--accent) !important;
  background: var(--accent-subtle) !important;
}

.sf-admin .wrap input[type="file"]::file-selector-button {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin-right: 10px !important;
  transition: background 0.2s var(--ease-spring) !important;
}

.sf-admin .wrap input[type="file"]::file-selector-button:hover {
  background: var(--accent-hover) !important;
}

/* Form table overrides — duplicate selector left behind by legacy code;
 the base rule in section 2 now sets 14px/18px padding. Keeping here as a
 no-op so diffs against the older file stay small. */


/* =============================================================================
 4. BUTTONS
 ============================================================================= */

/* ── WordPress native .button-primary override ── */
.sf-admin .wrap .button-primary {
  position: relative !important;
  overflow: hidden !important;
  background: var(--accent) !important;
  background-image: none !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
  border-radius: var(--radius-lg) !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background 0.3s var(--ease-spring),
              transform  0.3s var(--ease-spring),
              box-shadow 0.3s var(--ease-spring) !important;
  cursor: pointer !important;
}

.sf-admin .wrap .button-primary::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    transparent
  ) !important;
  transition: left 0.5s var(--ease-spring) !important;
  pointer-events: none !important;
}

.sf-admin .wrap .button-primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-accent) !important;
}

.sf-admin .wrap .button-primary:hover::after {
  left: 160% !important;
}

.sf-admin .wrap .button-primary:active {
  background: var(--accent-active) !important;
  transform: translateY(0) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* disabled primary/secondary both look unclickable:
 * desaturated, faint border, no shimmer, no hover lift, not-allowed cursor. */
.sf-admin .wrap .button-primary:disabled,
.sf-admin .wrap .button-primary[disabled],
.sf-admin .wrap .button-primary[aria-disabled="true"] {
  background: #cbd5e1 !important;
  border-color: #cbd5e1 !important;
  color: #f8fafc !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.75 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.sf-admin .wrap .button-primary:disabled:hover,
.sf-admin .wrap .button-primary[disabled]:hover,
.sf-admin .wrap .button-primary[aria-disabled="true"]:hover {
  background: #cbd5e1 !important;
  border-color: #cbd5e1 !important;
  transform: none !important;
  box-shadow: none !important;
}
.sf-admin .wrap .button-primary:disabled::after,
.sf-admin .wrap .button-primary[disabled]::after,
.sf-admin .wrap .button-primary[aria-disabled="true"]::after,
.sf-admin .wrap .button-primary:disabled:hover::after,
.sf-admin .wrap .button-primary[disabled]:hover::after,
.sf-admin .wrap .button-primary[aria-disabled="true"]:hover::after {
  display: none !important;
}
.sf-admin .wrap .button:not(.button-primary):disabled,
.sf-admin .wrap .button:not(.button-primary)[disabled],
.sf-admin .wrap .button:not(.button-primary)[aria-disabled="true"] {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  opacity: 0.85 !important;
  transform: none !important;
}
.sf-admin .wrap .button:not(.button-primary):disabled:hover,
.sf-admin .wrap .button:not(.button-primary)[disabled]:hover,
.sf-admin .wrap .button:not(.button-primary)[aria-disabled="true"]:hover {
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Secondary / outlined ── */
.sf-admin .wrap .button:not(.button-primary) {
  position: relative !important;
  border-radius: var(--radius-lg) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-secondary) !important;
  background: var(--surface) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 22px !important;
  transition: border-color 0.25s var(--ease-spring),
              color       0.25s var(--ease-spring),
              transform   0.25s var(--ease-spring),
              box-shadow  0.25s var(--ease-spring) !important;
  cursor: pointer !important;
}

.sf-admin .wrap .button:not(.button-primary):hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-sm) !important;
}

.sf-admin .wrap .button:not(.button-primary):active {
  transform: translateY(0) !important;
}

/* ── Freemius pages: reset button overrides ── */
.sf-admin .fs-actions .button,
.sf-admin .fs-actions .button-primary,
.sf-admin #fs_connect .button,
.sf-admin #fs_connect .button-primary {
  padding: 0 12px !important;
  height: 36px !important;
  line-height: 34px !important;
  border-radius: 4px !important;
  overflow: visible !important;
  transform: none !important;
}
.sf-admin .fs-actions .button-primary::after,
.sf-admin #fs_connect .button-primary::after {
  display: none !important;
}

/* ── Forge primary button (standalone, not WP native) ── */
.forge-btn--primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.3s var(--ease-spring),
              transform  0.3s var(--ease-spring),
              box-shadow 0.3s var(--ease-spring);
  text-decoration: none;
}

.forge-btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    transparent
  );
  transition: left 0.5s var(--ease-spring);
  pointer-events: none;
}

.forge-btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
  color: var(--on-accent);
  text-decoration: none;
}

.forge-btn--primary:hover::after {
  left: 160%;
}

.forge-btn--primary:active {
  background: var(--accent-active);
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* ── Forge secondary button ── */
.forge-btn--secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 22px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-spring),
              color       0.25s var(--ease-spring),
              transform   0.25s var(--ease-spring),
              box-shadow  0.25s var(--ease-spring);
  text-decoration: none;
}

.forge-btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}


/* =============================================================================
 5. CARDS
 ============================================================================= */

.forge-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  transition: transform  0.4s var(--ease-spring),
              box-shadow 0.4s var(--ease-spring);
}

.forge-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.forge-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.forge-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.forge-card__subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 4px 0 0;
}


/* =============================================================================
 6. TABS
 ============================================================================= */

.forge-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px;
  width: fit-content;
  margin-bottom: 24px;
}

.forge-tabs__tab {
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  transition: background 0.25s var(--ease-spring),
              color     0.25s var(--ease-spring),
              box-shadow 0.25s var(--ease-spring);
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.forge-tabs__tab:hover {
  color: var(--accent);
  text-decoration: none;
}

.forge-tabs__tab--active {
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* Nav-tab compatibility */
.sf-admin .nav-tab-wrapper {
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}

.sf-admin .nav-tab {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  color: var(--text-secondary) !important;
  transition: color 0.2s var(--ease-spring) !important;
}

.sf-admin .nav-tab:hover {
  color: var(--accent) !important;
}

.sf-admin .nav-tab-active {
  border-color: var(--border) var(--border) var(--surface) !important;
  background: var(--surface) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}


/* =============================================================================
 7. BADGES
 ============================================================================= */

.forge-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.forge-badge--accent {
  background: var(--accent-subtle);
  color: var(--accent-active);
}

.forge-badge--success {
  background: #ECFDF5;
  color: #065F46;
}

.forge-badge--warning {
  background: #FFFBEB;
  color: #92400E;
}

.forge-badge--error {
  background: #FEF2F2;
  color: #991B1B;
}

.forge-badge--neutral {
  background: var(--bg-light);
  color: var(--text-muted);
}


/* =============================================================================
 8. ALERTS
 ============================================================================= */

.forge-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border-left: 4px solid;
  font-size: 14px;
  line-height: 1.5;
  margin: 12px 0;
}

.forge-alert__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.forge-alert__body {
  flex: 1;
}

.forge-alert__title {
  font-weight: 600;
  margin: 0 0 2px;
}

.forge-alert--info {
  background: #EFF6FF;
  border-color: var(--status-info);
  color: #1E40AF;
}

.forge-alert--success {
  background: #ECFDF5;
  border-color: var(--status-success);
  color: #065F46;
}

.forge-alert--warning {
  background: #FFFBEB;
  border-color: var(--status-warning);
  color: #92400E;
}

.forge-alert--error {
  background: #FEF2F2;
  border-color: var(--status-error);
  color: #991B1B;
}


/* =============================================================================
 9. PROGRESS
 ============================================================================= */

.forge-progress {
  width: 100%;
  height: 8px;
  background: var(--bg-light);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.forge-progress__bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
  transition: width 0.6s var(--ease-spring);
  min-width: 4px;
}

.forge-progress--thin {
  height: 4px;
}

.forge-progress--thick {
  height: 12px;
}

.forge-progress__bar--success {
  background: linear-gradient(90deg, var(--status-success), #34D399);
}

.forge-progress__bar--warning {
  background: linear-gradient(90deg, var(--status-warning), #FCD34D);
}

.forge-progress__bar--error {
  background: linear-gradient(90deg, var(--status-error), #F87171);
}


/* =============================================================================
 10. TABLE
 ============================================================================= */

.sf-admin .wrap table:not(.form-table) {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-sm) !important;
  width: 100% !important;
}

.sf-admin .wrap table:not(.form-table) thead th {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-muted) !important;
  background: var(--bg-light) !important;
  border-bottom: 1.5px solid var(--border) !important;
  padding: 14px 18px !important;
  text-align: left !important;
}

.sf-admin .wrap table:not(.form-table) tbody td {
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--bg-light) !important;
  vertical-align: middle !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--text-primary) !important;
}

.sf-admin .wrap table:not(.form-table) tbody tr:last-child td {
  border-bottom: none !important;
}

.sf-admin .wrap table:not(.form-table) tbody tr {
  transition: background 0.2s var(--ease-spring) !important;
}

.sf-admin .wrap table:not(.form-table) tbody tr:hover {
  background: var(--accent-subtle) !important;
}

.sf-admin .wrap table:not(.form-table) tbody td a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}

.sf-admin .wrap table:not(.form-table) tbody td a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Form table reset */
.sf-admin .wrap table.form-table {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.sf-admin .wrap table.form-table td,
.sf-admin .wrap table.form-table th {
  border-bottom: 1px solid var(--bg-light) !important;
}


/* =============================================================================
 11. SEOFORGE PANEL
 ============================================================================= */

.seoforge-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  margin-bottom: 20px;
  transition: transform  0.4s var(--ease-spring),
              box-shadow 0.4s var(--ease-spring);
}

.seoforge-panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.seoforge-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.seoforge-panel__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.seoforge-panel__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.seoforge-panel__subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 2px 0 0;
}


/* =============================================================================
 12. SEOFORGE SCORE RING
 ============================================================================= */

.seoforge-score-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

.seoforge-score-ring__svg {
  width: 80px;
  height: 80px;
  transform: rotate(-90deg);
}

.seoforge-score-ring__track {
  fill: none;
  stroke: var(--bg-light);
  stroke-width: 6;
}

.seoforge-score-ring__fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s var(--ease-spring);
}

.seoforge-score-ring__fill--good {
  stroke: var(--status-success);
}

.seoforge-score-ring__fill--ok {
  stroke: var(--status-warning);
}

.seoforge-score-ring__fill--bad {
  stroke: var(--status-error);
}

.seoforge-score-ring__label {
  position: absolute;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

/* Legacy .seoforge-score-circle kept working */
.seoforge-score-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 5px solid var(--accent-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  background: var(--accent-subtle);
}

.seoforge-score-circle span {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-active);
}

.seoforge-score-circle--good  { border-color: var(--status-success); background: #ECFDF5; }
.seoforge-score-circle--good span  { color: var(--status-success); }

.seoforge-score-circle--ok    { border-color: var(--status-warning); background: #FFFBEB; }
.seoforge-score-circle--ok span    { color: var(--status-warning); }

.seoforge-score-circle--bad   { border-color: var(--status-error);   background: #FEF2F2; }
.seoforge-score-circle--bad span   { color: var(--status-error); }


/* =============================================================================
 13. SEOFORGE CHECKLIST
 ============================================================================= */

.seoforge-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seoforge-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-light);
  font-size: 14px;
  transition: background 0.2s var(--ease-spring);
}

.seoforge-checklist__item:hover {
  background: var(--accent-subtle);
}

.seoforge-checklist__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin-top: 1px;
}

.seoforge-checklist__item--pass .seoforge-checklist__icon {
  background: #ECFDF5;
  color: var(--status-success);
}

.seoforge-checklist__item--fail .seoforge-checklist__icon {
  background: #FEF2F2;
  color: var(--status-error);
}

.seoforge-checklist__item--warn .seoforge-checklist__icon {
  background: #FFFBEB;
  color: var(--status-warning);
}

.seoforge-checklist__text {
  flex: 1;
  color: var(--text-primary);
  line-height: 1.5;
}

.seoforge-checklist__item--fail .seoforge-checklist__text {
  color: var(--text-secondary);
}


/* =============================================================================
 14. SEOFORGE STAT CARD
 ============================================================================= */

.seoforge-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  transition: transform  0.4s var(--ease-spring),
              box-shadow 0.4s var(--ease-spring);
}

.seoforge-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.seoforge-stat-card__label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.seoforge-stat-card__value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin: 0 0 6px;
}

.seoforge-stat-card__value--accent {
  color: var(--accent);
}

.seoforge-stat-card__value--success {
  color: var(--status-success);
}

.seoforge-stat-card__delta {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.seoforge-stat-card__delta--up {
  color: var(--status-success);
}

.seoforge-stat-card__delta--down {
  color: var(--status-error);
}


/* =============================================================================
 15. METABOX STYLES
 ============================================================================= */

/* Ensure accent tokens are available on post edit pages (body may lack .sf-admin) */
#seoforge_seo_box,
.seoforge-metabox {
  --accent:          #FF6B35;
  --accent-hover:    #F05E28;
  --accent-active:   #E05520;
  --accent-light:    #FF8F66;
  --accent-muted:    #FED7AA;
  --accent-subtle:   #FFF7ED;
  --on-accent:       #FFFFFF;
}
.seoforge-metabox {
  padding: 4px 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Char counter */
.seoforge-char-count {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.seoforge-char-count--warn {
  color: var(--status-warning);
}

.seoforge-char-count--error {
  color: var(--status-error);
}

/* =============================================================================
 Length meter — progress bar under Title & Description.
 Tracks % of ideal length; fill colour shifts red → yellow → green, and
 back to red on overshoot so authors don't sleep-walk past the Google
 truncation point. JS updates width + data-state on input.
 ============================================================================= */
.sf-length-meter {
  margin-top: 6px;
}
.sf-length-meter__track {
  width: 100%;
  height: 6px;
  background: #F1F5F9;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.sf-length-meter__fill {
  height: 100%;
  width: 0;
  background: var(--status-error, #DC2626);
  border-radius: var(--radius-pill);
  transition: width 0.25s ease, background-color 0.25s ease;
}
.sf-length-meter[data-state="short"]  .sf-length-meter__fill { background: #DC2626; } /* red */
.sf-length-meter[data-state="ok"]     .sf-length-meter__fill { background: #D97706; } /* yellow */
.sf-length-meter[data-state="ideal"]  .sf-length-meter__fill { background: #059669; } /* green */
.sf-length-meter[data-state="long"]   .sf-length-meter__fill { background: #DC2626; } /* red — overshoot */
.sf-length-meter__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  gap: 8px;
}
.sf-length-meter__hint {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}
.sf-length-meter[data-state="short"]  .sf-length-meter__hint { color: #B91C1C; }
.sf-length-meter[data-state="ok"]     .sf-length-meter__hint { color: #B45309; }
.sf-length-meter[data-state="ideal"]  .sf-length-meter__hint { color: #047857; }
.sf-length-meter[data-state="long"]   .sf-length-meter__hint { color: #B91C1C; }

/* SERP preview */
.seoforge-serp-preview {
  margin: 14px 0;
  padding: 16px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: Arial, sans-serif;
}

.seoforge-serp-title {
  color: #1a0dab;
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.seoforge-serp-title:hover {
  text-decoration: underline;
}

.seoforge-serp-url {
  color: #006621;
  font-size: 14px;
  margin-bottom: 4px;
}

.seoforge-serp-desc {
  color: #545454;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Issues list */
.seoforge-issues {
  margin: 12px 0;
}

.seoforge-issues ul {
  margin: 6px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.seoforge-issue {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  border-left: 3px solid;
  line-height: 1.5;
}

.seoforge-issue--error {
  border-color: var(--status-error);
  background: #FEF2F2;
  color: #991B1B;
}

.seoforge-issue--warning {
  border-color: var(--status-warning);
  background: #FFFBEB;
  color: #92400E;
}

.seoforge-issue--info {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent-active);
}


/* =============================================================================
 16. UTILITY CLASSES
 ============================================================================= */

/* Text */
.sf-text-primary   { color: var(--text-primary); }
.sf-text-secondary { color: var(--text-secondary); }
.sf-text-muted     { color: var(--text-muted); }
.sf-text-accent    { color: var(--accent); }
.sf-text-success   { color: var(--status-success); }
.sf-text-warning   { color: var(--status-warning); }
.sf-text-error     { color: var(--status-error); }

/* Font weights */
.sf-fw-500 { font-weight: 500; }
.sf-fw-600 { font-weight: 600; }
.sf-fw-700 { font-weight: 700; }

/* Spacing helpers */
.sf-mt-0  { margin-top: 0; }
.sf-mb-0  { margin-bottom: 0; }
.sf-mt-8  { margin-top: 8px; }
.sf-mb-8  { margin-bottom: 8px; }
.sf-mt-16 { margin-top: 16px; }
.sf-mb-16 { margin-bottom: 16px; }
.sf-mt-24 { margin-top: 24px; }
.sf-mb-24 { margin-bottom: 24px; }

/* Divider */
.sf-divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 20px 0;
}

/* Flex helpers */
.sf-flex         { display: flex; }
.sf-flex-center  { display: flex; align-items: center; }
.sf-flex-between { display: flex; align-items: center; justify-content: space-between; }
.sf-gap-8        { gap: 8px; }
.sf-gap-12       { gap: 12px; }
.sf-gap-16       { gap: 16px; }

/* Dashboard grid */
.sf-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.sf-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .sf-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
  .sf-grid-3,
  .sf-grid-2 { grid-template-columns: 1fr; }
}

/* Surface helpers */
.sf-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
}

.sf-surface--muted {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}

/* WP/3rd-party notices: full width, normal WP styling */
.sf-admin .wrap > .notice:not(.forge-upgrade-notice),
.sf-admin .wrap > .error:not(.forge-upgrade-notice),
.sf-admin .wrap > .updated:not(.forge-upgrade-notice),
.sf-admin .wrap > div[class*="wpml-"] {
    max-width: none !important;
    margin: 5px 0 10px !important;
}

/* Forge upgrade notice: match plugin content width */
.sf-admin .forge-upgrade-notice {
    max-width: inherit !important;
    box-sizing: border-box !important;
}

/* Make .wrap a flex column so we can reorder children */
.sf-admin .wrap {
    display: flex !important;
    flex-direction: column !important;
}

/* Hidden h1 for WP notice insertion point */
.sf-admin .wrap > .wp-heading-inline { order: -10; }

/* WP/3rd-party notices: order 1 (first) */
.sf-admin .wrap > .notice:not(.forge-upgrade-notice),
.sf-admin .wrap > .error:not(.forge-upgrade-notice),
.sf-admin .wrap > .updated:not(.forge-upgrade-notice),
.sf-admin .wrap > div[class*="wpml-"],
.sf-admin .wrap > div[id*="wpml-"],
.sf-admin .wrap > div[id*="setting-error"] {
    order: 1 !important;
}

/* Forge upgrade notice: order 2 (after WP notices, before content) */
.sf-admin .wrap > .forge-upgrade-notice {
    order: 2 !important;
}

/* All other content: order 3 */
.sf-admin .wrap > *:not(.notice):not(.error):not(.updated):not(.forge-upgrade-notice):not(.wp-heading-inline):not(div[class*="wpml-"]):not(div[id*="wpml-"]):not(div[id*="setting-error"]) {
    order: 3 !important;
}

/* =============================================================================
 Branded admin header (shared pattern across all 4 Forge plugins)
 - Background gradient driven by --accent / --accent-active CSS vars
 - Logo is a real SVG from /assets/logo.svg, on white pill so brand mark stays
 readable on any accent color
 ============================================================================= */
/* Guard against horizontal scroll on our admin pages. */
.lf-admin.wrap, .sf-admin.wrap, .ff-admin.wrap, .fdf-admin.wrap,
.lf-admin .wrap, .sf-admin .wrap, .ff-admin .wrap, .fdf-admin .wrap { overflow-x: hidden; max-width: 100%; box-sizing: border-box; }
.lf-admin table, .sf-admin table, .ff-admin table, .fdf-admin table { max-width: 100%; }

.sf-brand-header { display: none; }
.sf-admin .sf-brand-header,
.lf-admin .sf-brand-header,
.ff-admin .sf-brand-header,
.fdf-admin .sf-brand-header {
    display: block;
    background: linear-gradient(135deg, var(--accent, #FF6B35) 0%, var(--accent-active, #E05520) 100%);
    /* follow-up: match content width instead of spanning edge-to-edge.
 WP .wrap uses margin-left:2px / margin-right:20px, we mirror that so
 the header lines up with the H1 and cards below it. */
    margin: 10px 20px 18px 0;
    padding: 14px 24px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    position: relative;
    overflow: hidden;
}
.sf-admin .sf-brand-header::after,
.lf-admin .sf-brand-header::after,
.ff-admin .sf-brand-header::after,
.fdf-admin .sf-brand-header::after {
    content: '';
    position: absolute;
    top: -30%;
    right: 0;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
    pointer-events: none;
}
.sf-brand-header__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1400px;
    position: relative;
    z-index: 1;
}
.sf-brand-header__logo {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    background: #fff;
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    object-fit: contain;
    display: block;
}
.sf-brand-header__text { flex: 1; color: #fff; min-width: 0; }
.sf-brand-header__title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.2;
}
.sf-brand-header__tagline {
    font-size: 14px;
    opacity: 0.88;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-brand-header__version {
    font-size: 14px;
    color: #fff;
    background: rgba(255,255,255,0.20);
    padding: 3px 10px;
    border-radius: 100px;
    font-weight: 600;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
/* Accent H1 inside plugin pages */
.sf-admin .wrap > h1:first-of-type,
.sf-admin .wrap > h1.wp-heading-inline {
    color: #1A1A2E;
    border-left: 4px solid var(--accent, #FF6B35);
    padding: 4px 0 4px 12px;
}
/* Hide header on Freemius opt-in/checkout screens */
.fs-full-size-wrapper ~ .sf-brand-header,
.fs-full-size-wrapper .sf-brand-header { display: none; }

/* =============================================================================
 follow-up: design-system checkboxes
 Applied to every checkbox inside our admin scopes. Uses --accent so each
 plugin gets its own brand color.
 ============================================================================= */
.sf-admin input[type="checkbox"]:not(.sf-raw):not([role]),
.lf-admin input[type="checkbox"]:not(.sf-raw):not([role]),
.ff-admin input[type="checkbox"]:not(.sf-raw):not([role]),
.fdf-admin input[type="checkbox"]:not(.sf-raw):not([role]) {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin: 0;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    vertical-align: middle;
}
.sf-admin input[type="checkbox"]:not(.sf-raw):not([role]):hover,
.lf-admin input[type="checkbox"]:not(.sf-raw):not([role]):hover,
.ff-admin input[type="checkbox"]:not(.sf-raw):not([role]):hover,
.fdf-admin input[type="checkbox"]:not(.sf-raw):not([role]):hover {
    border-color: var(--accent);
}
.sf-admin input[type="checkbox"]:not(.sf-raw):not([role]):focus-visible,
.lf-admin input[type="checkbox"]:not(.sf-raw):not([role]):focus-visible,
.ff-admin input[type="checkbox"]:not(.sf-raw):not([role]):focus-visible,
.fdf-admin input[type="checkbox"]:not(.sf-raw):not([role]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.sf-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked,
.lf-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked,
.ff-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked,
.fdf-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked {
    background: var(--accent);
    border-color: var(--accent);
}
.sf-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked::after,
.lf-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked::after,
.ff-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked::after,
.fdf-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.sf-admin input[type="checkbox"]:not(.sf-raw):not([role]):disabled,
.lf-admin input[type="checkbox"]:not(.sf-raw):not([role]):disabled,
.ff-admin input[type="checkbox"]:not(.sf-raw):not([role]):disabled,
.fdf-admin input[type="checkbox"]:not(.sf-raw):not([role]):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Radios — same style, circular */
.sf-admin input[type="radio"]:not(.sf-raw),
.lf-admin input[type="radio"]:not(.sf-raw),
.ff-admin input[type="radio"]:not(.sf-raw),
.fdf-admin input[type="radio"]:not(.sf-raw) {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    vertical-align: middle;
    margin: 0;
}
.sf-admin input[type="radio"]:not(.sf-raw):hover,
.lf-admin input[type="radio"]:not(.sf-raw):hover,
.ff-admin input[type="radio"]:not(.sf-raw):hover,
.fdf-admin input[type="radio"]:not(.sf-raw):hover {
    border-color: var(--accent);
}
.sf-admin input[type="radio"]:not(.sf-raw):checked,
.lf-admin input[type="radio"]:not(.sf-raw):checked,
.ff-admin input[type="radio"]:not(.sf-raw):checked,
.fdf-admin input[type="radio"]:not(.sf-raw):checked {
    border-color: var(--accent);
}
.sf-admin input[type="radio"]:not(.sf-raw):checked::after,
.lf-admin input[type="radio"]:not(.sf-raw):checked::after,
.ff-admin input[type="radio"]:not(.sf-raw):checked::after,
.fdf-admin input[type="radio"]:not(.sf-raw):checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.sf-admin input[type="radio"]:not(.sf-raw):focus-visible,
.lf-admin input[type="radio"]:not(.sf-raw):focus-visible,
.ff-admin input[type="radio"]:not(.sf-raw):focus-visible,
.fdf-admin input[type="radio"]:not(.sf-raw):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Audit issue group count + bulk-fix button */
.sf-audit-issue-count {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.sf-audit-bulk-fix {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid #FF6B35;
  background: #FF6B35;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.sf-audit-bulk-fix:hover:not(:disabled) {
  background: #ea580c;
  border-color: #ea580c;
}
.sf-audit-bulk-fix:disabled {
  opacity: 0.7;
  cursor: wait;
}
.sf-audit-issue-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* =============================================================================
 sfModal: styled alert/confirm replacement for native dialogs
 ============================================================================= */

.sf-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 160000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: sfModalFadeIn 0.15s ease-out both;
}
.sf-modal-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.08);
    max-width: 460px;
    width: 100%;
    padding: 28px 28px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: sfModalPopIn 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sf-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: #fff;
}
.sf-modal-icon .dashicons {
    font-size: 30px;
    width: 30px;
    height: 30px;
    line-height: 30px;
}
.sf-modal-card--warning .sf-modal-icon { background: linear-gradient(135deg, #f97316, #FF6B35); }
.sf-modal-card--danger  .sf-modal-icon { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.sf-modal-card--info    .sf-modal-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.sf-modal-card--success .sf-modal-icon { background: linear-gradient(135deg, #10b981, #047857); }
.sf-modal-body {
    margin-bottom: 20px;
    width: 100%;
}
.sf-modal-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}
.sf-modal-message {
    margin: 0;
    font-size: 14px;
    color: #334155;
    line-height: 1.55;
    white-space: normal;
    word-wrap: break-word;
}
.sf-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}
.sf-modal-btn {
    appearance: none;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    min-width: 104px;
    line-height: 1.2;
}
.sf-modal-btn:hover { transform: translateY(-1px); }
.sf-modal-btn:focus { outline: 2px solid rgba(255, 107, 53, 0.35); outline-offset: 2px; }
.sf-modal-btn--ghost {
    background: #f1f5f9;
    color: #334155;
}
.sf-modal-btn--ghost:hover { background: #e2e8f0; }
.sf-modal-btn--primary.sf-modal-btn--warning { background: #FF6B35; color: #fff; box-shadow: 0 6px 14px rgba(255, 107, 53, 0.25); }
.sf-modal-btn--primary.sf-modal-btn--warning:hover { background: #ea580c; }
.sf-modal-btn--primary.sf-modal-btn--danger { background: #dc2626; color: #fff; box-shadow: 0 6px 14px rgba(220, 38, 38, 0.25); }
.sf-modal-btn--primary.sf-modal-btn--danger:hover { background: #b91c1c; }
.sf-modal-btn--primary.sf-modal-btn--info { background: #2563eb; color: #fff; box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22); }
.sf-modal-btn--primary.sf-modal-btn--info:hover { background: #1d4ed8; }
.sf-modal-btn--primary.sf-modal-btn--success { background: #10b981; color: #fff; box-shadow: 0 6px 14px rgba(16, 185, 129, 0.22); }
.sf-modal-btn--primary.sf-modal-btn--success:hover { background: #047857; }

/* AI upsell (paywall) modal + locked AI entry points. */
.sf-modal-card--pro .sf-modal-icon { background: linear-gradient(135deg, #FF6B35, #E05520); }
.sf-modal-card--paywall { position: relative; }
a.sf-modal-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.sf-modal-btn--primary.sf-modal-btn--pro { background: #FF6B35; color: #fff; box-shadow: 0 6px 14px rgba(255, 107, 53, 0.25); }
.sf-modal-btn--primary.sf-modal-btn--pro:hover { background: #ea580c; color: #fff; }
.sf-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.sf-modal-close:hover { background: #f1f5f9; color: #475569; }
.sf-modal-close .dashicons { font-size: 20px; width: 20px; height: 20px; line-height: 20px; }

/* Locked AI buttons shown to Free users (FOMO). Carry no REST wiring —
 a [data-sf-paywall] click opens the upsell modal above. */
.sf-ai-locked {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    color: #b45309;
    border: 1px solid #fcd9a8;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.3;
    transition: background .12s ease, border-color .12s ease;
}
.sf-ai-locked:hover { background: #fff7ed; border-color: #fbbf24; }
.sf-ai-locked__pro {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #fff4e5;
    color: #b45309;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.sf-ai-locked__pro .dashicons { font-size: 12px; width: 12px; height: 12px; line-height: 12px; }
.sf-ai-locked--block { display: flex; width: 100%; justify-content: center; padding: 10px; font-size: 14px; margin: 8px 0; border-radius: 8px; }
.sf-ai-locked--action { padding: 6px 12px; border-radius: 6px; }

@keyframes sfModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes sfModalPopIn {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (max-width: 480px) {
    .sf-modal-card { padding: 22px 18px 18px; border-radius: 14px; }
    .sf-modal-btn  { min-width: 0; flex: 1; }
}

/* =============================================================================
 Brief history + brief render styles
 ============================================================================= */

.sf-brief-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.sf-brief-card h3 {
    margin: 0 0 10px;
    font-size: 15px;
}
.sf-brief-title {
    padding: 6px 10px;
    background: #f8fafc;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 14px;
}
.sf-brief-h2 {
    font-size: 14px;
    padding: 3px 0;
    font-weight: 600;
}
.sf-brief-h3 {
    font-size: 14px;
    padding: 3px 0;
    padding-left: 16px;
    color: #64748b;
}
.sf-brief-target {
    margin-top: 8px;
    font-size: 14px;
    color: #FF6B35;
    font-weight: 600;
}
.sf-brief-q {
    font-size: 14px;
    padding: 4px 0;
    border-bottom: 1px solid #f1f5f9;
}
.sf-brief-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sf-brief-chip {
    padding: 4px 10px;
    background: #FFF7ED;
    color: #FF6B35;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}
.sf-brief-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.sf-brief-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
.sf-brief-cap {
    font-size: 14px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
}
@media (max-width: 720px) {
    .sf-brief-grid, .sf-brief-meta-row { grid-template-columns: 1fr; }
}

/* History table */
.sf-brief-history-table {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.sf-brief-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px auto;
    gap: 12px;
    padding: 10px 14px;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
}
.sf-brief-history-row:last-child {
    border-bottom: 0;
}
.sf-brief-history-row:hover {
    background: #fff7ed;
}
.sf-brief-history-kw {
    font-weight: 600;
    font-size: 14px;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-brief-history-date {
    font-size: 13px;
    color: #64748b;
    white-space: nowrap;
}
.sf-brief-history-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
@media (max-width: 600px) {
    .sf-brief-history-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .sf-brief-history-actions { justify-content: flex-start; margin-top: 4px; }
}

/* =============================================================================
 Right-side drawer for AI preview / moderation
 ============================================================================= */

.sf-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 140000;
    opacity: 0;
    /* When closed the overlay stays in the DOM at opacity:0 covering the whole
 viewport — without pointer-events:none it silently swallows every click
 on the page (e.g. after closing the ToC drawer without a reload). */
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.sf-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.sf-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(560px, 46vw);
    max-width: 100vw;
    background: #fff;
    z-index: 140001;
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
}
.sf-drawer.is-open { transform: translateX(0); }

.sf-drawer-head {
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.sf-drawer-head-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}
.sf-drawer-head-sub {
    font-size: 13px;
    color: #64748b;
    margin-top: 2px;
}
.sf-drawer-head-meta { flex: 1; min-width: 0; }
.sf-drawer-close {
    background: #f1f5f9;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sf-drawer-close:hover { background: #e2e8f0; color: #0f172a; }

.sf-drawer-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.sf-drawer-section { margin-bottom: 18px; }
.sf-drawer-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sf-drawer-current {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    color: #334155;
    white-space: pre-wrap;
    min-height: 48px;
    line-height: 1.5;
}
.sf-drawer-current.is-empty { color: #94a3b8; font-style: italic; }

.sf-drawer-suggestion {
    width: 100%;
    min-height: 110px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.12s;
}
.sf-drawer-suggestion:focus {
    outline: none;
    border-color: #FF6B35;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}
.sf-drawer-counter {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
    text-align: right;
}
.sf-drawer-counter.is-over { color: #dc2626; font-weight: 600; }

.sf-drawer-loading {
    padding: 40px 0;
    text-align: center;
    color: #64748b;
}
.sf-drawer-skeleton {
    height: 14px;
    background: linear-gradient(90deg, #f1f5f9, #e2e8f0, #f1f5f9);
    background-size: 200% 100%;
    border-radius: 4px;
    margin-bottom: 8px;
    animation: sf-skeleton 1.1s linear infinite;
}
.sf-drawer-skeleton--short { width: 70%; }
@keyframes sf-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* R3 (2026-04-28) F3: live Issues list spinner. The spinner element is
 * created on-demand in admin.js and animates via this keyframe. Kept
 * compact (10×10) so it fits inside the Issues <summary> next to the
 * count badge without reflow. */
@keyframes sf-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sf-drawer-foot {
    padding: 14px 20px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}
.sf-drawer-regen {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sf-drawer-regen:hover { background: #f1f5f9; color: #0f172a; }
.sf-drawer-cancel {
    background: transparent;
    border: 0;
    color: #64748b;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
}
.sf-drawer-cancel:hover { color: #0f172a; }
.sf-drawer-apply {
    background: linear-gradient(135deg, #FF6B35, #E05520);
    color: #fff;
    border: 0;
    padding: 9px 22px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
}
.sf-drawer-apply:hover { background: linear-gradient(135deg, #E05520, #c2440d); }
.sf-drawer-apply:disabled,
.sf-drawer-regen:disabled { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 640px) {
    .sf-drawer { width: 100vw; }
}

/* Bulk-review mode — one accordion row per page in the drawer */
.sf-drawer-bulk-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 12px;
    background: #fff;
}
.sf-drawer-bulk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.sf-drawer-bulk-toggle {
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 0;
    flex: 1;
    text-align: left;
}
.sf-drawer-bulk-toggle .dashicons {
    transition: transform 0.15s;
    font-size: 16px;
    width: 16px;
    height: 16px;
}
.sf-drawer-bulk-toggle.is-open .dashicons {
    transform: rotate(90deg);
}
.sf-drawer-bulk-status {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.sf-drawer-bulk-body {
    padding: 12px 14px;
}
.sf-drawer-bulk-body .sf-drawer-section:last-child {
    margin-bottom: 0;
}

/* ─── Forge button polish (no hover underline + dashicon vertical-center) ───
 * Applied 2026-04-29 to all 4 Forge plugins. Three goals:
 * 1. Buttons never underline on hover — they're buttons, not links.
 * 2. Dashicon + text inside a button share the same baseline (the WP
 * dashicons font has a 1-line-height that's slightly above the
 * button's text baseline by default).
 * 3. Inline-style "danger" buttons (red text + red border) keep their
 * colors regardless of cascade — see the !important inline styles
 * on Disconnect Google / Clear buttons. */
.sf-admin.wrap .button,
.sf-admin.wrap .button:hover,
.sf-admin.wrap .button:focus,
.sf-admin.wrap .button-primary,
.sf-admin.wrap .button-primary:hover,
.sf-admin.wrap .button-primary:focus,
.sf-admin.wrap a.button,
.sf-admin.wrap a.button-primary {
  text-decoration: none !important;
}
.sf-admin.wrap .button,
.sf-admin.wrap .button-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  vertical-align: middle;
}
.sf-admin.wrap .button .dashicons,
.sf-admin.wrap .button-primary .dashicons {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
}
/* End Forge button polish */

/* ─── Forge admin-notice positioning fix ───
 * Freemius and WP-core notices ("Yee-haw! Your plan was successfully
 * upgraded.", license callouts, etc.) sometimes get caught inside
 * flex H1 wrappers, ending up rendered to the right of the page
 * title rather than as a proper banner. Force them block-level, full
 * width, with normal margin — same behaviour as on stock WP screens.
 */
.sf-admin.wrap .notice,
.sf-admin.wrap .fs-notice,
.sf-admin.wrap .updated,
.sf-admin.wrap .update-nag,
.sf-admin.wrap .error {
  display: block !important;
  position: relative !important;
  float: none !important;
  width: auto !important;
  clear: both !important;
  margin: 12px 0 !important;
  padding: 12px 16px !important;
  box-sizing: border-box;
}
.sf-admin.wrap > h1 {
  /* Notices are sometimes injected as siblings of the H1 by JS — keep
 the H1 block-level so they don't get pulled into a flex row. */
  display: block !important;
}
/* End Forge admin-notice positioning fix */

/* Settings shared controls. These rules are deliberately in the enqueued
 admin asset, not only in the inline fallback at the end of the page. */
.sf-admin .sf-tip-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  cursor: help;
  outline: none;
}
.sf-admin .sf-tip-anchor .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.sf-admin .sf-tip-anchor::after {
  content: attr(data-sf-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  max-width: 360px;
  min-width: 240px;
  width: max-content;
  padding: 10px 12px;
  border-radius: 8px;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 100;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
  white-space: normal;
}
.sf-admin .sf-tip-anchor::before {
  content: '';
  position: absolute;
  left: 14px;
  top: calc(100% + 2px);
  border: 6px solid transparent;
  border-bottom-color: #1e293b;
  z-index: 101;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.sf-admin .sf-tip-anchor:hover::after,
.sf-admin .sf-tip-anchor:focus::after,
.sf-admin .sf-tip-anchor:focus-visible::after,
.sf-admin .sf-tip-anchor:hover::before,
.sf-admin .sf-tip-anchor:focus::before,
.sf-admin .sf-tip-anchor:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}
.sf-admin .sf-robots-lock {
  color: #FF6B35;
}
.sf-admin .sf-robots-warn {
  color: #b45309;
}
.sf-admin .sf-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.sf-admin .sf-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.sf-admin .sf-card-head .dashicons {
  color: #FF6B35;
  font-size: 18px;
  width: 18px;
  height: 18px;
}
.sf-admin .sf-card-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.sf-admin .sf-card-body {
  padding: 20px;
}
.sf-admin .sf-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sf-admin .sf-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.sf-admin .sf-select,
.sf-admin .sf-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sf-admin .sf-select:focus,
.sf-admin .sf-input:focus {
  border-color: #FF6B35;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,107,53,0.1);
}
.sf-admin .sf-toggles {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sf-admin .sf-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
}
.sf-admin .sf-toggle:last-child {
  border-bottom: none;
}
.sf-admin .sf-toggle input {
  margin-top: 3px;
  accent-color: #FF6B35;
}
.sf-admin .sf-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sf-admin .sf-toggle-text strong {
  font-size: 14px;
  color: #1e293b;
}
.sf-admin .sf-toggle-text span {
  font-size: 14px;
  color: #94a3b8;
}
.sf-admin .sf-save-btn {
  background: #FF6B35;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,107,53,0.2);
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.sf-admin .sf-save-btn:hover {
  background: #F05E28;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255,107,53,0.3);
}
.sf-admin .sf-tpl-field-wrap {
  position: relative;
}
.sf-admin .sf-var-trigger {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  padding: 0;
}
.sf-admin .sf-var-trigger:hover {
  background: #FFF7ED;
  color: #FF6B35;
}
.sf-admin .sf-var-trigger .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
}
.sf-admin .sf-var-popover {
  position: absolute;
  z-index: 150000;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.16);
  padding: 6px;
  min-width: 240px;
  max-width: 320px;
  max-height: 280px;
  overflow-y: auto;
  display: none;
}
.sf-admin .sf-var-popover-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
}
.sf-admin .sf-var-popover-row:hover {
  background: #FFF7ED;
}
.sf-admin .sf-var-popover-row code {
  font-family: "SF Mono","Menlo",monospace;
  font-size: 13px;
  font-weight: 600;
  color: #FF6B35;
  background: transparent;
  padding: 0;
}
.sf-admin .sf-var-popover-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.3;
}
.sf-admin .sf-var-popover-empty {
  padding: 12px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}
.sf-admin .sf-tpl-block .sf-input {
  font-size: 14px;
}
.sf-admin .sf-tpl-block textarea.sf-input {
  min-height: 40px;
}

/* Settings page layout. Keep this in the main admin asset so production pages
 do not depend on the inline fallback printed after the form markup. */
.sf-admin .sf-settings-wrap {
  max-width: 1200px;
}
.sf-admin .sf-settings-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.sf-admin .sf-settings-nav {
  position: sticky;
  top: 42px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.sf-admin .sf-settings-nav__select {
  display: none;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
}
.sf-admin .sf-settings-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf-admin .sf-settings-nav__item,
.sf-admin .sf-settings-nav__item:hover,
.sf-admin .sf-settings-nav__item:focus,
.sf-admin .sf-settings-nav__item:active {
  text-decoration: none !important;
}
.sf-admin .sf-settings-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.12s;
}
.sf-admin .sf-settings-nav__item:hover {
  background: #f8fafc;
  color: #1e293b;
}
.sf-admin .sf-settings-nav__item .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: #94a3b8;
  transition: color 0.12s;
  flex-shrink: 0;
}
.sf-admin .sf-settings-nav__item:hover .dashicons {
  color: #FF6B35;
}
.sf-admin .sf-settings-nav__item.is-active {
  background: linear-gradient(135deg,#FFF7ED,#FFEDD5);
  color: #E05520;
  border-color: #FED7AA;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #FF6B35;
}
.sf-admin .sf-settings-nav__item.is-active .dashicons {
  color: #E05520;
}
.sf-admin .sf-settings-nav__item:focus-visible {
  outline: 2px solid #FF6B35;
  outline-offset: 2px;
}
.sf-admin .sf-settings-nav__label {
  flex: 1;
}
.sf-admin .sf-settings-content {
  min-width: 0;
}
.sf-admin .sf-settings-panel-head {
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid #e2e8f0;
  display: none;
}
.sf-admin .sf-settings-panel-head.is-active {
  display: block;
}
.sf-admin .sf-settings-panel-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
}
.sf-admin .sf-settings-panel-head p {
  margin: 0;
  font-size: 14px;
  color: #64748b;
}
.sf-admin .sf-settings-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sf-admin .sf-settings-cards .sf-card[data-sf-tab] {
  display: none;
}
.sf-admin .sf-settings-cards .sf-card[data-sf-tab].is-active {
  display: block;
  animation: sfFade 0.18s ease-out;
}
@keyframes sfFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.sf-admin .sf-settings-actions {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.sf-admin .sf-settings-nav__item.is-dirty:not(.is-active)::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF6B35;
  margin-left: auto;
  flex-shrink: 0;
}
.sf-admin .sf-settings-nav__item.is-dirty.is-active::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E05520;
  margin-left: auto;
  flex-shrink: 0;
  animation: sfPulse 1.4s ease-in-out infinite;
}
@keyframes sfPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
@media (max-width: 960px) {
  .sf-admin .sf-settings-layout {
    grid-template-columns: 1fr;
  }
  .sf-admin .sf-settings-nav {
    position: static;
  }
  .sf-admin .sf-settings-nav__list {
    display: none;
  }
  .sf-admin .sf-settings-nav__select {
    display: block;
  }
}
@media (max-width: 782px) {
  .sf-admin .sf-grid3 {
    grid-template-columns: 1fr;
  }
  .sf-admin .sf-tpl-block > div {
    grid-template-columns: 1fr !important;
  }
}
