.flexilay-admin-root { max-width: 1280px; }
.flexilay-header { display:flex; align-items:center; justify-content:space-between; margin: 8px 0 16px; }
.flexilay-title { font-size: 20px; font-weight: 700; }
.flexilay-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.flexilay-pre { background:#0b1220; color:#e5e7eb; padding:12px; border-radius:10px; overflow:auto; font-size:12px; }
.flexilay-tile-label { font-size: 12px; color:#64748b; text-transform: uppercase; letter-spacing: .04em; }
.flexilay-tile-value { font-size: 26px; font-weight: 800; margin-top: 6px; }


.flexilay-hero { padding: 6px 0; }
.flexilay-hero-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.flexilay-hero-title { font-size:14px; font-weight:700; }
.flexilay-hero-pills { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.flexilay-pill { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.flexilay-pill-ok { background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; }
.flexilay-pill-bad { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.flexilay-grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.flexilay-h3 { margin: 0 0 8px; font-size: 14px; font-weight: 800; }
.flexilay-p { margin: 0 0 10px; font-size: 13px; color:#0f172a; }
.flexilay-ul { margin: 0 0 10px 18px; font-size: 13px; color:#0f172a; }
.flexilay-small { font-size: 12px; color:#64748b; margin: 0; }
.flexilay-video { padding: 10px 0; }
.flexilay-video-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.flexilay-divider { height:1px; background:#e2e8f0; margin: 12px 0; }


.flexilay-brand { display:flex; justify-content:flex-start; margin: 6px 0 14px; }
.flexilay-brand-logo { max-width: 420px; width: 100%; height: auto; }


.flexilay-grid-3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.flexilay-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.flexilay-steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:10px; margin-top:10px; }
.flexilay-step-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:10px; display:flex; gap:10px; align-items:flex-start; }
.flexilay-step-card.is-ok { border-color:#a7f3d0; background:#ecfdf5; }
.flexilay-step-num { width:26px; height:26px; border-radius:999px; background:#e2e8f0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; color:#0f172a; }
.flexilay-step-main { flex:1; }
.flexilay-step-title { font-size:13px; font-weight:800; }
.flexilay-step-desc { font-size:12px; color:#64748b; margin-top:2px; }
.flexilay-step-check { font-weight:900; color:#047857; }
.flexilay-legal-list { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.flexilay-legal-item { padding:10px; border:1px solid #e2e8f0; border-radius:12px; background:#fff; }
.flexilay-legal-title { font-size:13px; font-weight:800; margin-bottom:6px; }
.flexilay-check { display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.flexilay-check input { width:16px; height:16px; }

.flexilay-warning { border:1px solid #fecaca; background:#fef2f2; color:#7f1d1d; border-radius:12px; padding:10px; }
.flexilay-warning-title { font-weight:800; font-size:12px; margin-bottom:4px; }
.flexilay-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; color:#0f172a; }
.flexilay-num { width: 80px; border:1px solid #e2e8f0; border-radius:10px; padding:6px 8px; font-size:12px; }

.flexilay-admin-root { margin-right: 16px; }


/* Layout polish */
.flexilay-admin-root { max-width: 1180px; margin: 0 auto; padding: 0 14px 22px; }
.flexilay-header { margin-bottom: 12px; }
.flexilay-title { font-size: 22px; }
.components-card { border-radius: 14px; }
.components-card__body { padding: 18px; }
.flexilay-grid { gap: 16px; }

/* Stepper polish */
.flexilay-steps { margin-top: 12px; }
.flexilay-step-card { padding: 12px 12px; min-height: 70px; }
.flexilay-step-num { width: 28px; height: 28px; font-size: 12px; }
.flexilay-step-title { font-size: 13px; }
.flexilay-step-desc { font-size: 12px; }

/* Onboarding three columns: equal heights + spacing */
.flexilay-grid-3 { align-items: stretch; }
.flexilay-grid-3 .components-card { height: 100%; }
.flexilay-legal-item { background: #f8fafc; }
.flexilay-legal-item .flexilay-row { margin-top: 10px; }

/* Buttons alignment */
.flexilay-row { gap: 10px; }
.flexilay-row .components-button { margin: 0; }

/* Reduce huge empty page feel */
body.wp-admin { background: #f3f4f6; }

/* Layout polish v1.2.0.7 overrides */
.wrap { max-width: none; }
.flexilay-admin-root { max-width: 1120px; margin: 0 auto; padding: 0 8px; }
.flexilay-grid { gap: 18px; }
.components-card__body { padding: 20px; }
.flexilay-hero .components-card__body { padding: 18px; }

/* v1.2.0.8 hard padding override */
.wrap { margin: 0 !important; max-width: none !important; }
.wrap .flexilay-admin-root { max-width: 1120px; margin: 0 auto; padding: 0 !important; }
body.wp-admin { background: #f3f4f6; }

/* v1.2.1.0 layout refinement */
#flexilay-admin-app { box-sizing:border-box; }
#flexilay-admin-app .flexilay-admin-shell { max-width: 1040px; margin: 0 auto; width: 100%; }
.flexilay-admin-root { max-width: none; margin: 0; padding: 0; }
.components-card__body { padding: 20px; }
.flexilay-grid { gap: 18px; }
.flexilay-header { margin-bottom: 16px; }
.flexilay-title { font-size: 22px; }
body.wp-admin { background: #f3f4f6; }

/* v1.2.1.1 layout final */
#flexilay-admin-app{ box-sizing:border-box; padding:24px 28px 36px !important; }
@media (max-width: 1200px){ #flexilay-admin-app{ padding:20px 20px 30px !important; } }
@media (max-width: 782px){ #flexilay-admin-app{ padding:16px 14px 26px !important; } }
#flexilay-admin-app .flexilay-admin-shell{ max-width: 980px; margin: 0 auto; width: 100%; }
.flexilay-grid{ gap: 20px; }
.components-card__body{ padding: 22px; }
.flexilay-step-card{ padding: 14px; }
.flexilay-title{ font-size: 24px; }

/* v1.2.1.2 onboarding grid + width refinement */
#flexilay-admin-app .flexilay-admin-shell{ max-width: 1120px !important; }
@media (min-width: 1220px){ .flexilay-grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 880px) and (max-width: 1219px){ .flexilay-grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 879px){ .flexilay-grid-3{ grid-template-columns: 1fr !important; } }
.components-card__body{ padding: 22px !important; }
.flexilay-grid{ gap: 20px !important; }

/* v1.2.1.3 vertical spacing */
#flexilay-admin-app{ padding-top: 28px !important; padding-bottom: 44px !important; }
.flexilay-header{ margin-top: 6px; margin-bottom: 18px; }
.flexilay-brand{ margin: 10px 0 18px; }
.flexilay-admin-root{ padding-bottom: 24px; }
.flexilay-hero{ margin-top: 10px; }
.flexilay-grid{ margin-top: 14px; }

/* v1.2.1.4 brand tile */
.flexilay-brand-tile .components-card__body{ padding: 18px !important; }
.flexilay-brand-tile{ margin: 8px 0 14px; }
.flexilay-brand{ margin: 0; justify-content: center; }
.flexilay-brand-logo{ max-width: 520px; }

/* v1.2.1.5 settings spacing fix */
.flexilay-grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px !important;
  margin-top: 18px;
}

@media (max-width: 900px){
  .flexilay-grid-2{
    grid-template-columns: 1fr;
  }
}

.flexilay-grid-2 .components-card{
  margin: 0 !important;
}

.flexilay-grid-2 .components-card__body{
  padding: 24px !important;
}

/* v1.2.1.6 settings spacing harden */
.flexilay-grid-2{ display:grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 24px !important; margin-top: 18px !important; }
@media (max-width: 900px){ .flexilay-grid-2{ grid-template-columns: 1fr !important; } }
.flexilay-grid-2 > .components-card{ margin: 0 !important; }
.flexilay-grid-2 > .components-card .components-card__body{ padding: 24px !important; }

/* v1.2.1.7 settings vertical spacing */
.flexilay-settings-stack > .components-card { margin: 0 !important; }
.flexilay-settings-stack > .components-card + .components-card { margin-top: 18px !important; }

/* v1.2.2.0 plans UI */
.flexilay-grid-4{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:24px; }
@media(max-width: 1100px){ .flexilay-grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(max-width: 640px){ .flexilay-grid-4{ grid-template-columns: 1fr; } }
.flexilay-input{ min-width: 280px; max-width: 420px; width: 100%; border:1px solid #e2e8f0; border-radius:10px; padding:8px 10px; font-size:13px; }
.flexilay-select{ border:1px solid #e2e8f0; border-radius:10px; padding:8px 10px; font-size:13px; }
.flexilay-badge{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:800; border:1px solid #e2e8f0; background:#f8fafc; color:#0f172a; }
.flexilay-badge.is-ok{ background:#ecfdf5; border-color:#a7f3d0; color:#047857; }
.flexilay-badge.is-warn{ background:#fffbeb; border-color:#fde68a; color:#92400e; }
.flexilay-badge.is-bad{ background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.flexilay-badge.is-muted{ background:#f1f5f9; border-color:#e2e8f0; color:#334155; }
.flexilay-badge.is-demo{ background:#eef2ff; border-color:#c7d2fe; color:#3730a3; }

/* v1.2.2.2 enforce summary tile spacing */
.flexilay-grid-4{ gap:24px !important; }

/* v1.2.2.3 fix summary tile gap (override .flexilay-grid gap) */
.flexilay-grid.flexilay-grid-4{ gap: 24px !important; }

/* v1.2.2.4 responsive tiles */
.flexilay-grid-4{ gap:24px !important; }
@media (max-width: 1100px){ .flexilay-grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 640px){ .flexilay-grid-4{ grid-template-columns: 1fr !important; } }
.flexilay-grid-4 .flexilay-tile .components-card__body{ padding: 26px !important; }
.flexilay-grid-4 .flexilay-tile-value{ margin-top: 10px; }


/* v1.2.2.6 plans tiles - correct card selector */
.flexilay-grid.flexilay-grid-4{ gap:24px !important; }
.flexilay-grid-4{ gap:24px !important; }
.flexilay-tile.components-card{ background:#ffffff !important; border:1px solid #d1d5db !important; box-shadow:0 1px 2px rgba(0,0,0,.04); border-radius:12px; }
.flexilay-tile .components-card__body{ padding:26px !important; }
.flexilay-tile-label{ color:#64748b !important; }
.flexilay-tile-value{ margin-top:10px !important; }
@media (max-width: 1100px){ .flexilay-grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 640px){ .flexilay-grid-4{ grid-template-columns: 1fr !important; } }

/* v1.2.2.7 plans vertical spacing between sections */
.flexilay-plans-summary{ margin-bottom: 18px; }
.flexilay-plans-filters{ margin-top: 10px; margin-bottom: 18px; }
.flexilay-plans-table{ margin-top: 0; }

.flexilay-settings-section + .flexilay-settings-section{ margin-top:18px !important; }


/* =========================
   FlexiLay Brand Refresh
   v1.2.4.0
   ========================= */

:root{
  --flexilay-primary: #2563eb;
  --flexilay-secondary: #22c1c3;
  --flexilay-ink: #0f172a;
  --flexilay-muted: #64748b;
  --flexilay-border: #e2e8f0;
  --flexilay-card: #ffffff;
  --flexilay-bg: #f3f4f6;
}

body.wp-admin{
  background: var(--flexilay-bg);
}

/* Header */
.flexilay-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--flexilay-primary), var(--flexilay-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Cards */
.components-card,
.flexilay-tile.components-card{
  background: var(--flexilay-card) !important;
  border: 1px solid var(--flexilay-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06) !important;
}
.components-card__body{
  padding: 22px !important;
}

/* Accent bar */
.flexilay-hero.components-card::before,
.flexilay-brand-tile.components-card::before,
.flexilay-tile.components-card::before{
  content: "";
  display: block;
  height: 4px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  background: linear-gradient(90deg, var(--flexilay-primary), var(--flexilay-secondary));
}

/* Inputs */
.flexilay-input,
.flexilay-select,
.flexilay-num{
  border: 1px solid var(--flexilay-border) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  background: #fff !important;
}
.flexilay-input:focus,
.flexilay-select:focus,
.flexilay-num:focus{
  outline: none !important;
  border-color: rgba(37, 99, 235, .55) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12) !important;
}

/* Buttons */
.components-button.is-primary,
.components-button.is-primary:focus{
  background: linear-gradient(90deg, var(--flexilay-primary), var(--flexilay-secondary)) !important;
  border: 0 !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.15) !important;
}
.components-button.is-primary:hover{
  filter: brightness(1.03);
}
.components-button.is-secondary{
  border-radius: 12px !important;
}

/* Badges */
.flexilay-badge{ border-radius: 999px !important; border: 1px solid var(--flexilay-border) !important; font-weight: 800 !important; }
.flexilay-badge.is-ok{ background:#ecfdf5 !important; border-color:#a7f3d0 !important; color:#047857 !important; }
.flexilay-badge.is-warn{ background:#fffbeb !important; border-color:#fde68a !important; color:#92400e !important; }
.flexilay-badge.is-bad{ background:#fef2f2 !important; border-color:#fecaca !important; color:#b91c1c !important; }
.flexilay-badge.is-demo{ background:#eef2ff !important; border-color:#c7d2fe !important; color:#3730a3 !important; }

/* Modal */
.components-modal__frame{ border-radius: 18px !important; box-shadow: 0 24px 80px rgba(15,23,42,.25) !important; }
.components-modal__header{ border-bottom: 1px solid var(--flexilay-border) !important; }
.components-modal__header-heading{ font-weight: 900 !important; }

/* Tables */
.widefat{ border-color: var(--flexilay-border) !important; border-radius: 14px; overflow: hidden; }
.widefat thead th{ color: var(--flexilay-muted); font-weight: 800; }
.widefat td, .widefat th{ border-bottom-color: var(--flexilay-border) !important; }

/* Notices */
.components-notice{ border-radius: 14px !important; }

/* v1.2.4.1 heading fix */
.flexilay-title{ line-height: 1.2 !important; padding-bottom: 2px !important; }
.components-modal__header-heading{ line-height: 1.2 !important; padding-bottom: 2px !important; }
h1, h2, h3{ line-height: 1.25; }