/**
 * Smart Pregnancy Calculator — admin UI (Polaris-inspired).
 */
:root{
  --spc-ink:#1a1c1e; --spc-muted:#6b7177; --spc-line:#e3e5e8; --spc-line2:#eef0f2;
  --spc-bg:#ffffff; --spc-card:#ffffff;
  --spc-pink:#ec4899; --spc-pink-d:#db2777; --spc-blue:#3b82f6; --spc-blue-d:#2563eb;
  --spc-green:#16a34a; --spc-red:#dc2626; --spc-amber:#d97706;
  --spc-shadow:0 1px 0 rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.06);
}

/* Reset the WP admin chrome inside our pages. */
#wpcontent{ background:var(--spc-bg); }
.spc-wrap{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--spc-ink); max-width:1040px; margin:0 24px; padding:8px 0 60px;
}
.spc-wrap *{ box-sizing:border-box; }
.spc-wrap a{ color:var(--spc-blue-d); }

/* Theme / admin isolation — keep our controls from inheriting outside styles. */
.spc-wrap button, .spc-wrap input, .spc-wrap select, .spc-wrap textarea{
  font-family:inherit; letter-spacing:normal; text-shadow:none; text-transform:none;
  margin:0; min-height:0; max-height:none; float:none; box-shadow:none;
}
.spc-wrap button{ -webkit-appearance:none; appearance:none; background-image:none; width:auto; height:auto; line-height:1.2; }
.spc-wrap svg{ vertical-align:middle; }
.spc-wrap img{ border:0; box-shadow:none; }
/* Buttons are <a> as well as <button>: force their colours regardless of link styling. */
.spc-wrap a.spc-btn, .spc-wrap button.spc-btn{ text-decoration:none; }
.spc-wrap a.spc-btn-primary, .spc-wrap a.spc-btn-primary:hover, .spc-wrap a.spc-btn-primary:focus,
.spc-wrap button.spc-btn-primary, .spc-wrap button.spc-btn-primary:hover{ color:#fff; background-image:none; }
.spc-wrap a.spc-btn-primary:hover, .spc-wrap button.spc-btn-primary:hover{ background:var(--spc-pink-d); }
.spc-wrap a.spc-btn-ghost, .spc-wrap a.spc-btn-ghost:hover, .spc-wrap a.spc-btn-ghost:focus{ color:var(--spc-ink); background:#fff; }
.spc-wrap a.spc-btn-danger{ color:var(--spc-red); background:#fff; }

/* Topbar */
.spc-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0 14px; border-bottom:1px solid var(--spc-line); margin-bottom:18px;
}
.spc-brand{ display:flex; align-items:center; gap:12px; }
.spc-logo{
  width:44px; height:44px; flex:none; border-radius:12px; overflow:hidden;
  background:#fff; box-shadow:0 5px 14px rgba(236,72,153,.28);
}
.spc-logo img{ width:100%; height:100%; display:block; object-fit:contain; }
.spc-brand-name{ font-weight:700; font-size:15px; }
.spc-brand-sub{ font-size:12px; color:var(--spc-muted); }

.spc-badge{ font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; }
.spc-badge.is-pro{ background:#dcfce7; color:#166534; }
.spc-badge.is-trial{ background:#fef3c7; color:#92400e; }
.spc-badge.is-free{ background:#eef0f2; color:#475569; }

/* Banner */
.spc-bar{
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  padding:13px 16px; border-radius:12px; margin-bottom:18px; font-size:13.5px;
  border:1px solid var(--spc-line);
}
.spc-bar.is-trial{ background:#fffbeb; border-color:#fde68a; color:#78350f; }
.spc-bar.is-free{ background:#eff6ff; border-color:#bfdbfe; color:#1e3a5f; }
.spc-bar-btn{
  flex:none; background:var(--spc-ink); color:#fff !important; text-decoration:none;
  padding:8px 16px; border-radius:9px; font-weight:600; font-size:13px; white-space:nowrap;
}

.spc-page-head{ margin-bottom:18px; }
.spc-page-head h1{ font-size:24px; font-weight:800; margin:0 0 4px; padding:0; letter-spacing:-.01em; }
.spc-page-head p{ color:var(--spc-muted); margin:0; font-size:14px; }

/* Cards */
.spc-card{
  background:var(--spc-card); border:1px solid var(--spc-line); border-radius:14px;
  padding:20px 22px; margin-bottom:18px; box-shadow:var(--spc-shadow);
  margin-top:8px;
}
.spc-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.spc-card-head h2{ font-size:16px; font-weight:700; margin:0; padding:0; flex:1; }
.spc-card-hint{ font-size:12px; color:var(--spc-muted); }
.spc-card-actions{ display:flex; gap:8px; align-items:center; }
.spc-muted{ color:var(--spc-muted); font-size:14px; }

/* Grid */
.spc-grid{ display:grid; gap:18px; }
.spc-grid-2{ grid-template-columns:1fr 1fr; }
.spc-grid-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:900px){ .spc-grid-2,.spc-grid-3{ grid-template-columns:1fr; } }

/* Stats */
.spc-stat{
  background:var(--spc-card); border:1px solid var(--spc-line); border-radius:14px;
  padding:20px; box-shadow:var(--spc-shadow);
}
.spc-stat-num{ font-size:30px; font-weight:800; line-height:1; letter-spacing:-.02em; }
.spc-stat-label{ color:var(--spc-muted); font-size:13px; margin-top:6px; }

/* Buttons */
.spc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:9px; cursor:pointer;
  border:1px solid transparent; text-decoration:none; line-height:1.2; transition:.12s;
}
.spc-btn-primary{ background:var(--spc-pink); color:#fff; }
.spc-btn-primary:hover{ background:var(--spc-pink-d); color:#fff; }
.spc-btn-ghost{ background:#fff; color:var(--spc-ink); border-color:var(--spc-line); }
.spc-btn-ghost:hover{ border-color:#c4c8cc; }
.spc-btn-danger{ background:#fff; color:var(--spc-red); border-color:#f3c5c5; }
.spc-btn-danger:hover{ background:#fef2f2; }
.spc-link{ background:none; border:none; color:var(--spc-blue-d); cursor:pointer; font-size:13.5px; padding:0; }
.spc-link-danger{ background:none; border:none; color:var(--spc-red); cursor:pointer; font-size:13px; padding:0; }

/* Shortcode */
.spc-shortcode{ display:flex; align-items:center; gap:10px; }
.spc-shortcode code{
  background:#0f172a; color:#fff; padding:11px 16px; border-radius:9px; font-size:15px; flex:1;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Lists */
.spc-steps-list{ margin:0; padding-left:20px; line-height:1.9; font-size:14px; }
.spc-tick{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.spc-tick li{ position:relative; padding-left:26px; font-size:14px; }
.spc-tick li::before{
  content:"✓"; position:absolute; left:0; top:0; width:18px; height:18px; font-size:11px;
  background:var(--spc-green); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center;
}

/* Pro tag */
.spc-pro-tag{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  background:linear-gradient(135deg,#ec4899,#be185d); color:#fff;
  padding:2px 7px; border-radius:5px; vertical-align:middle; margin-left:4px;
}

/* Tabs */
.spc-tabs{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:18px; background:#fff;
  border:1px solid var(--spc-line); border-radius:12px; padding:5px; box-shadow:var(--spc-shadow); }
.spc-tab{
  border:none; background:none; padding:9px 16px; border-radius:8px; cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--spc-muted);
}
.spc-tab:hover{ color:var(--spc-ink); }
.spc-tab.is-active{ background:var(--spc-ink); color:#fff; }
.spc-panel{ display:none; }
.spc-panel.is-active{ display:block; }

/* Fields */
.spc-field{ margin-bottom:16px; }
.spc-field > label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
/* High specificity (.spc-wrap + appearance reset) so WordPress core's
   input[type=text] / select / textarea rules (specificity 0,1,1) can't
   override our padding, border, radius and height. */
.spc-wrap .spc-input{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  display:block; box-sizing:border-box; width:100%; max-width:520px;
  min-height:40px; height:auto; margin:0; padding:9px 12px;
  font-size:14px; line-height:1.4; color:var(--spc-ink); font-family:inherit;
  border:1px solid #c9cdd2; border-radius:9px;
  background-color:#fff; background-image:none; outline:none; box-shadow:none;
}
.spc-wrap textarea.spc-input{ max-width:640px; min-height:auto; line-height:1.55; resize:vertical; }
.spc-wrap select.spc-input{
  max-width:340px; cursor:pointer; padding-right:38px; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7177' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px 16px;
}
.spc-wrap select.spc-input::-ms-expand{ display:none; }
.spc-wrap .spc-input:focus{ border-color:var(--spc-blue); box-shadow:0 0 0 3px rgba(59,130,246,.18); }
.spc-wrap .spc-input:disabled{ background-color:#f6f7f8; color:var(--spc-muted); cursor:not-allowed; }
.spc-wrap .spc-input::placeholder{ color:var(--spc-muted); opacity:.7; }
.spc-hint{ font-size:12px; color:var(--spc-muted); margin:6px 0 0; }
.spc-field.is-locked{ opacity:.6; }
.spc-wrap input[type=range]{ width:260px; accent-color:var(--spc-pink); }

/* Color fields */
.spc-color-row{ display:flex; gap:8px; align-items:center; }
.spc-wrap .spc-color-row input[type=color]{
  -webkit-appearance:none; appearance:none;
  width:44px; height:40px; min-height:40px; padding:0; margin:0;
  border:1px solid #c9cdd2; border-radius:9px; background:#fff; cursor:pointer;
}
.spc-wrap .spc-color-row input[type=color]::-webkit-color-swatch-wrapper{ padding:3px; }
.spc-wrap .spc-color-row input[type=color]::-webkit-color-swatch{ border:none; border-radius:5px; }
.spc-wrap .spc-color-row input[type=color]::-moz-color-swatch{ border:none; border-radius:5px; }
.spc-wrap .spc-color-text{ max-width:140px; }

/* Media */
.spc-media-row{ display:flex; gap:8px; max-width:520px; }
.spc-logo-preview{ max-height:60px; margin-top:12px; display:block; border:1px solid var(--spc-line); border-radius:8px; padding:6px; background:#fff; }

/* Toggles */
.spc-toggle-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--spc-line2); }
.spc-toggle-row:last-child{ border-bottom:none; }
.spc-toggle-row.is-locked{ opacity:.65; }
.spc-toggle-label{ font-size:14px; }
.spc-switch{ position:relative; display:inline-block; width:42px; height:24px; flex:none; }
.spc-switch input{ opacity:0; width:0; height:0; }
.spc-slider{ position:absolute; inset:0; background:#cbd5e1; border-radius:999px; transition:.2s; cursor:pointer; }
.spc-slider::before{ content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.spc-switch input:checked + .spc-slider{ background:var(--spc-pink); }
.spc-switch input:checked + .spc-slider::before{ transform:translateX(18px); }
.spc-switch input:disabled + .spc-slider{ cursor:not-allowed; }

/* Save bar */
.spc-save-bar{ position:sticky; bottom:0; background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  padding:14px 0; margin-top:8px; border-top:1px solid var(--spc-line); }

/* Tables */
.spc-table-wrap{ overflow-x:auto; }
.spc-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.spc-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--spc-muted);
  padding:10px 12px; border-bottom:1px solid var(--spc-line); }
.spc-table td{ padding:11px 12px; border-bottom:1px solid var(--spc-line2); }
.spc-table tr:last-child td{ border-bottom:none; }
.spc-empty{ color:var(--spc-muted); padding:24px 0; text-align:center; }

/* License */
.spc-plan-pill{ display:inline-block; padding:6px 14px; border-radius:999px; font-weight:700; font-size:13px; margin:0 0 12px; }
.spc-plan-pill.is-pro{ background:#dcfce7; color:#166534; }
.spc-plan-pill.is-trial{ background:#fef3c7; color:#92400e; }
.spc-plan-pill.is-free{ background:#eef0f2; color:#475569; }
.spc-meta-table{ width:100%; border-collapse:collapse; }
.spc-meta-table th{ text-align:left; color:var(--spc-muted); font-weight:600; padding:7px 0; width:140px; font-size:13px; }
.spc-meta-table td{ padding:7px 0; font-size:13px; }
.spc-reassure{ margin-top:18px; background:#f8fafc; border:1px solid var(--spc-line); border-radius:12px; padding:16px 18px; }
.spc-reassure h3{ margin:0 0 8px; font-size:14px; }
.spc-keybox{ margin-top:16px; border-top:1px solid var(--spc-line); padding-top:16px; }
.spc-keybox h3{ font-size:14px; margin:0 0 6px; }
.spc-key-row{ display:flex; gap:8px; max-width:520px; margin-top:8px; }
.spc-key-msg{ font-size:13px; min-height:18px; margin:10px 0 0; }
.spc-key-msg.is-ok{ color:var(--spc-green); }
.spc-key-msg.is-err{ color:var(--spc-red); }
.spc-plan-actions{ margin:12px 0; }