/* ==========================================================
   RankBot AI — v2.0 "Sunset Premium" Design System
   Adapted from Claude Design mockup into a real WP-admin asset.
   All components are namespaced (.rb-* / .rankbot-v2) so they do
   NOT leak into the rest of wp-admin. Load only on RankBot pages.
   ========================================================== */

.rankbot-v2 {
  /* Sunset palette (premium accent) */
  --rb-sunset-1: #ff5f6d;   /* coral */
  --rb-sunset-2: #ff9966;   /* orange */
  --rb-sunset-3: #ffc371;   /* gold */
  --rb-sunset-4: #f06292;   /* pink */
  --rb-sunset-5: #7e57c2;   /* violet */
  --rb-sunset-6: #5e35b1;   /* indigo */
  --rb-grad: linear-gradient(135deg, #ff5f6d 0%, #ff9966 35%, #f06292 65%, #7e57c2 100%);
  --rb-grad-soft: linear-gradient(135deg, rgba(255,95,109,.10), rgba(126,87,194,.10));
  --rb-grad-glow: radial-gradient(circle at 30% 20%, rgba(255,95,109,.35), transparent 50%),
                  radial-gradient(circle at 80% 70%, rgba(126,87,194,.30), transparent 55%),
                  radial-gradient(circle at 50% 50%, rgba(255,153,102,.20), transparent 60%);

  /* Brand neutrals — slightly warm */
  --rb-fg: #14111f;
  --rb-fg-2: #2a2538;
  --rb-fg-muted: #6b6580;
  --rb-fg-subtle: #9a96ab;
  --rb-bg: #ffffff;
  --rb-bg-2: #faf8fb;
  --rb-bg-3: #f3f0f7;
  --rb-border: #ece9f1;
  --rb-border-strong: #d9d4e3;

  /* Status */
  --rb-success: #16a34a; --rb-success-bg: #dcfce7;
  --rb-warning: #d97706; --rb-warning-bg: #fef3c7;
  --rb-danger: #dc2626;  --rb-danger-bg: #fee2e2;
  --rb-info: #2563eb;    --rb-info-bg: #dbeafe;

  --rb-radius: 14px;
  --rb-radius-sm: 8px;
  --rb-radius-lg: 20px;
  --rb-shadow-sm: 0 1px 2px rgba(20,17,31,.06), 0 1px 1px rgba(20,17,31,.04);
  --rb-shadow: 0 4px 12px -2px rgba(20,17,31,.08), 0 2px 4px -1px rgba(20,17,31,.04);
  --rb-shadow-lg: 0 24px 48px -12px rgba(20,17,31,.18), 0 8px 16px -4px rgba(20,17,31,.08);
  --rb-shadow-glow: 0 12px 40px -8px rgba(240,98,146,.28), 0 4px 16px -2px rgba(126,87,194,.16);

  color: var(--rb-fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.rankbot-v2 *, .rankbot-v2 *::before, .rankbot-v2 *::after { box-sizing: border-box; }
.rankbot-v2 a { color: inherit; text-decoration: none; }

/* ===== Page wrapper ===== */
.rb-page { padding: 24px 28px 48px; max-width: 1500px; margin: 0 auto; }
.rb-page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.rb-page-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 12px; color: var(--rb-fg); }
.rb-page-title .rb-logo {
  width: 36px; height: 36px; border-radius: 10px; background: var(--rb-grad);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 8px 20px -6px rgba(240,98,146,.5); position: relative;
}
.rb-page-title .rb-logo::after { content: ""; position: absolute; inset: -2px; border-radius: 12px; background: var(--rb-grad); filter: blur(10px); opacity: .5; z-index: -1; }
.rb-page-sub { margin: 4px 0 0; color: var(--rb-fg-muted); font-size: 14px; }
.rb-section-label { text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--rb-fg-subtle); margin: 0 0 10px; }

/* ===== Grid helpers ===== */
.rb-grid { display: grid; gap: 18px; }
.rb-grid-2 { grid-template-columns: repeat(2, 1fr); }
.rb-grid-3 { grid-template-columns: repeat(3, 1fr); }
.rb-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .rb-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 782px) { .rb-grid-2, .rb-grid-3, .rb-grid-4 { grid-template-columns: 1fr; } }

/* ===== Cards & primitives ===== */
.rb-card { background: #fff; border: 1px solid var(--rb-border); border-radius: var(--rb-radius); box-shadow: var(--rb-shadow-sm); position: relative; overflow: hidden; }
.rb-card-pad { padding: 20px; }
.rb-card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--rb-border); }
.rb-card-header h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--rb-fg); display: flex; align-items: center; gap: 8px; }
.rb-card-header h3 .dashicons { color: var(--rb-sunset-5); }

/* ===== Buttons ===== */
.rb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; background: #fff; border: 1px solid var(--rb-border-strong); color: var(--rb-fg); transition: all .15s; cursor: pointer; text-decoration: none; }
.rb-btn:hover { background: var(--rb-bg-2); border-color: var(--rb-fg-subtle); transform: translateY(-1px); color: var(--rb-fg); }
.rb-btn:active { transform: translateY(0); }
.rb-btn .dashicons { width: 16px; height: 16px; font-size: 16px; }
.rb-btn-primary { background-color: #f06292; background-image: var(--rb-grad); color: #fff; border-color: transparent; box-shadow: 0 8px 24px -8px rgba(240,98,146,.5), inset 0 1px 0 rgba(255,255,255,.25); position: relative; overflow: hidden; }
.rb-btn-primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transform: translateX(-100%); transition: transform .6s; }
/* Re-assert the gradient on hover: `.rb-btn:hover` (same specificity, earlier source) would
   otherwise win the `background` property and wash the button out to near-white. */
.rb-btn-primary:hover { background-color: #f06292; background-image: var(--rb-grad); transform: translateY(-2px); color: #fff; border-color: transparent; box-shadow: 0 16px 32px -8px rgba(240,98,146,.55), inset 0 1px 0 rgba(255,255,255,.25); }
.rb-btn-primary:hover::before { transform: translateX(100%); }
.rb-btn-ghost { background: transparent; border-color: transparent; color: var(--rb-fg-muted); }
/* Sunset tint on hover so ghost buttons never blend into a white/near-white background. */
.rb-btn-ghost:hover { color: var(--rb-sunset-5); background-color: #fff; background-image: linear-gradient(135deg, rgba(255,95,109,.10), rgba(126,87,194,.10)); border-color: rgba(126,87,194,.25); }
.rb-btn-danger { background: #fff; color: var(--rb-danger); border-color: #fecaca; }
.rb-btn-danger:hover { background: var(--rb-danger-bg); color: var(--rb-danger); }
.rb-btn-sm { padding: 6px 10px; font-size: 12px; }
.rb-btn[disabled], .rb-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ===== Badges / chips / dots ===== */
.rb-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 11px; font-weight: 600; border-radius: 99px; background: var(--rb-bg-3); color: var(--rb-fg-muted); }
.rb-badge-success { background: var(--rb-success-bg); color: var(--rb-success); }
.rb-badge-warning { background: var(--rb-warning-bg); color: var(--rb-warning); }
.rb-badge-danger { background: var(--rb-danger-bg); color: var(--rb-danger); }
.rb-badge-info { background: var(--rb-info-bg); color: var(--rb-info); }
.rb-badge-grad { background: var(--rb-grad); color: #fff; box-shadow: 0 2px 8px -2px rgba(240,98,146,.5); }
.rb-glow-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: linear-gradient(135deg, rgba(255,95,109,.10), rgba(126,87,194,.10)); border: 1px solid rgba(126,87,194,.25); color: var(--rb-sunset-5); font-weight: 600; font-size: 12px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.rb-glow-chip:hover { border-color: rgba(126,87,194,.45); transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(126,87,194,.35); }
.rb-glow-chip .dashicons { font-size: 14px; width: 14px; height: 14px; }
.rb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.rb-dot-pulse { position: relative; }
.rb-dot-pulse::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: inherit; opacity: .4; animation: rb-pulse-ring 2s ease-out infinite; }
@keyframes rb-pulse-ring { 0% { transform: scale(.8); opacity: .55; } 100% { transform: scale(2.5); opacity: 0; } }

/* ===== Toggle ===== */
.rb-toggle { width: 38px; height: 22px; border-radius: 99px; background: var(--rb-border-strong); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; display: inline-block; }
.rb-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s; }
.rb-toggle.on { background: var(--rb-grad); }
.rb-toggle.on::after { left: 18px; }

/* ===== Inputs ===== */
.rb-input, .rb-textarea, .rb-select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rb-border-strong); background: #fff; font: inherit; color: var(--rb-fg); transition: border-color .15s, box-shadow .15s; }
.rb-input:focus, .rb-textarea:focus, .rb-select:focus { outline: none; border-color: var(--rb-sunset-5); box-shadow: 0 0 0 3px rgba(126,87,194,.18); }
.field-with-ai { position: relative; }
.field-with-ai .ai-fab { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 8px; background: var(--rb-grad); display: inline-flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; box-shadow: 0 4px 12px -2px rgba(240,98,146,.4); transition: transform .15s; }
.field-with-ai .ai-fab:hover { transform: translateY(-50%) scale(1.1); }
.field-with-ai .rb-input { padding-right: 44px; }

/* ===== Stat pop (gradient hero stat / plan card) ===== */
.rb-stat-pop { background: var(--rb-grad); color: #fff; border-radius: var(--rb-radius); padding: 22px; position: relative; overflow: hidden; box-shadow: var(--rb-shadow-glow); }
.rb-stat-pop::before { content: ""; position: absolute; inset: 0; background: var(--rb-grad-glow); opacity: .55; pointer-events: none; }
.rb-stat-pop > * { position: relative; }
.rb-stat-tile { background: #fff; border: 1px solid var(--rb-border); border-radius: var(--rb-radius); padding: 18px 20px; box-shadow: var(--rb-shadow-sm); }
.rb-stat-tile .rb-stat-num { font-size: 28px; font-weight: 800; color: var(--rb-fg); line-height: 1.1; }
.rb-stat-tile .rb-stat-cap { font-size: 12px; color: var(--rb-fg-muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.rb-stat-tile .rb-stat-ico { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--rb-grad-soft); color: var(--rb-sunset-5); margin-bottom: 12px; }

/* ===== Particles overlay ===== */
.rb-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rb-particles::before, .rb-particles::after { content: ""; position: absolute; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1.5px); background-size: 22px 22px; animation: rb-drift 30s linear infinite; opacity: .4; }
.rb-particles::after { background-size: 38px 38px; animation-duration: 50s; animation-direction: reverse; }
@keyframes rb-drift { from { transform: translate(0,0); } to { transform: translate(-22px,-22px); } }

/* ===== Score donut ===== */
.rb-score-donut { position: relative; width: 120px; height: 120px; display: inline-flex; align-items: center; justify-content: center; }
.rb-score-donut svg { transform: rotate(-90deg); }
.rb-score-donut .rb-score-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; font-weight: 800; }
.rb-score-donut .rb-score-num { font-size: 30px; line-height: 1; background: var(--rb-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rb-score-donut .rb-score-label { font-size: 11px; color: var(--rb-fg-muted); font-weight: 600; margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }

/* ===== Activity feed ===== */
.rb-activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--rb-border); }
.rb-activity-item:last-child { border-bottom: none; }
.rb-activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; background: var(--rb-fg-subtle); }
.rb-activity-dot.ok { background: var(--rb-success); }
.rb-activity-dot.fail { background: var(--rb-danger); }
.rb-activity-dot.pending { background: var(--rb-warning); }
.rb-activity-content { flex: 1; min-width: 0; }
.rb-activity-title { font-size: 13px; font-weight: 600; color: var(--rb-fg); }
.rb-activity-meta { display: flex; gap: 10px; font-size: 11px; color: var(--rb-fg-muted); margin-top: 2px; }
.rb-activity-cost { color: var(--rb-sunset-5); font-weight: 600; }

/* ===== Progress ===== */
.rb-progress { position: relative; height: 10px; border-radius: 99px; background: var(--rb-bg-3); overflow: hidden; }
.rb-progress > span { position: absolute; inset: 0 auto 0 0; background: var(--rb-grad); border-radius: inherit; transition: width .4s ease; box-shadow: 0 0 14px rgba(240,98,146,.5); }
.rb-progress > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: rb-shimmer 1.6s infinite; }
@keyframes rb-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ===== AI typing reveal ===== */
.rb-ai-reveal { display: inline; }
.rb-ai-cursor { display: inline-block; width: 8px; height: 1em; margin-left: 2px; background: var(--rb-grad); vertical-align: text-bottom; animation: rb-blink .9s step-end infinite; border-radius: 2px; }
@keyframes rb-blink { 50% { opacity: 0; } }

/* ===== Streaming terminal panel ===== */
.rb-stream-panel { background: #0f0a1c; color: #e8e3f5; font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.55; border-radius: 12px; padding: 16px 18px; position: relative; overflow: hidden; }
.rb-stream-panel::before { content: ""; position: absolute; inset: 0; background: var(--rb-grad-glow); opacity: .25; pointer-events: none; }
.rb-stream-panel .ln { display: block; position: relative; }
.rb-stream-panel .key { color: #ffc371; }
.rb-stream-panel .val { color: #ff9966; }
.rb-stream-panel .muted { color: #8b85a8; }
.rb-stream-panel .ok { color: #86efac; }

/* ===== Table ===== */
.rb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rb-table th, .rb-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--rb-border); }
.rb-table thead th { background: var(--rb-bg-2); font-weight: 700; color: var(--rb-fg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.rb-table tbody tr { transition: background .12s; }
.rb-table tbody tr:hover { background: var(--rb-bg-2); }

/* ===== Tabs ===== */
.rb-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rb-border); margin-bottom: 16px; flex-wrap: wrap; }
.rb-tabs button { padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--rb-fg-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; background: none; border-top: none; border-left: none; border-right: none; cursor: pointer; }
.rb-tabs button.active { color: var(--rb-fg); border-bottom-color: var(--rb-sunset-1); }
.rb-tabs button:hover { color: var(--rb-fg); }

/* ===== Bulk row ===== */
.rb-bulk-row { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--rb-border); transition: background .12s; }
.rb-bulk-row:hover { background: var(--rb-bg-2); }
.rb-bulk-row .rb-bulk-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; }
.rb-bulk-row.processing { background: linear-gradient(90deg, rgba(255,95,109,.05), rgba(126,87,194,.05)); }
.rb-bulk-row.processing .rb-bulk-status { color: var(--rb-sunset-5); }
.rb-bulk-row.done .rb-bulk-status { color: var(--rb-success); }
.rb-bulk-row.queued .rb-bulk-status { color: var(--rb-fg-subtle); }

/* ===== Hero glow (onboarding) ===== */
.hero-glow { position: relative; padding: 56px 40px; text-align: center; border-radius: 24px; overflow: hidden; background: radial-gradient(circle at 30% 20%, rgba(255,95,109,.18), transparent 50%), radial-gradient(circle at 80% 70%, rgba(126,87,194,.18), transparent 55%), radial-gradient(circle at 50% 50%, rgba(255,153,102,.10), transparent 60%), #fff; border: 1px solid var(--rb-border); box-shadow: var(--rb-shadow); }
.hero-glow .hero-orb { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 20px; background: var(--rb-grad); position: relative; box-shadow: 0 24px 48px -12px rgba(240,98,146,.45); animation: rb-orb-float 4s ease-in-out infinite; }
.hero-glow .hero-orb::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; background: var(--rb-grad); filter: blur(28px); opacity: .45; z-index: -1; }
@keyframes rb-orb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ===== Toasts =====
   The live toast system (rankbot-toasts.js) renders to <body> with its own complete
   styles in rankbot-admin.css (#rb-toast-container / .rb-toast-*). We intentionally do
   NOT restyle .rb-toast here to avoid conflicting with that system; the sunset accent is
   applied directly in rankbot-admin.css (.rb-toast-info) and the JS info icon. */

/* ===== Modal ===== */
.rb-modal-backdrop { position: fixed; inset: 0; background: rgba(20,17,31,.55); backdrop-filter: blur(8px); z-index: 160000; display: flex; align-items: center; justify-content: center; animation: rb-fade .2s ease; padding: 20px; }
@keyframes rb-fade { from { opacity: 0; } to { opacity: 1; } }
.rb-modal { background: #fff; border-radius: 18px; width: min(720px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--rb-shadow-lg); overflow: hidden; animation: rb-modal-in .35s cubic-bezier(.2,.9,.3,1) both; position: relative; }
@keyframes rb-modal-in { from { transform: translateY(20px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.rb-modal-head { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rb-border); background: linear-gradient(to bottom, #fff, var(--rb-bg-2)); }
.rb-modal-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--rb-fg); display: flex; align-items: center; gap: 10px; }
.rb-modal-body { padding: 22px; overflow: auto; flex: 1; }
.rb-modal-foot { padding: 14px 22px; border-top: 1px solid var(--rb-border); display: flex; gap: 10px; justify-content: flex-end; background: var(--rb-bg-2); }

/* ===== Entrance animations ===== */
@keyframes rb-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.rb-anim { animation: rb-fade-up .5s ease both; }
.rb-anim-1 { animation-delay: .04s; } .rb-anim-2 { animation-delay: .08s; } .rb-anim-3 { animation-delay: .12s; }
.rb-anim-4 { animation-delay: .16s; } .rb-anim-5 { animation-delay: .20s; } .rb-anim-6 { animation-delay: .24s; } .rb-anim-7 { animation-delay: .28s; }
@media (prefers-reduced-motion: reduce) { .rankbot-v2 * { animation: none !important; transition: none !important; } }

/* ===== Editor / Woo toolbar harmonization (sunset) =====
   The product/post "quick access" toolbar keeps its layout; we only
   re-skin its accent from indigo to the sunset gradient. */
.rankbot-v2 .rankbot-action-btn.primary {
  background: var(--rb-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 24px -8px rgba(240,98,146,.5), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.rankbot-v2 .rankbot-action-btn.primary:hover { transform: translateY(-2px); }
.rankbot-v2 .rankbot-toolbar-title {
  background: var(--rb-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}
.rankbot-v2 .rankbot-badge-cost { background: rgba(255,255,255,.22); color: #fff; }
.rankbot-v2 .rankbot-action-btn:not(.primary):hover { border-color: var(--rb-sunset-5); color: var(--rb-sunset-5); }

/* ===== Legacy component harmonization (Settings / History / etc.) =====
   These pages keep their existing markup; we re-skin the old classes under the
   .rankbot-v2 wrapper so they match the sunset design without a markup rewrite. */

/* Cards */
.rankbot-v2 .rankbot-card { border: 1px solid var(--rb-border); border-radius: var(--rb-radius); box-shadow: var(--rb-shadow-sm); }
.rankbot-v2 .rankbot-card:hover { box-shadow: var(--rb-shadow); }
.rankbot-v2 .rankbot-card-header { border-bottom: 1px solid var(--rb-border); background: linear-gradient(to bottom, #fff, var(--rb-bg-2)); }
.rankbot-v2 .rankbot-card-title { color: var(--rb-fg); font-weight: 700; }
.rankbot-v2 .rankbot-card-title .dashicons { color: var(--rb-sunset-5); }

/* Labels & descriptions */
.rankbot-v2 .form-label { color: var(--rb-fg); font-weight: 600; }
.rankbot-v2 .form-description { color: var(--rb-fg-muted); }

/* Selects & text inputs */
.rankbot-v2 .rankbot-select,
.rankbot-v2 input[type="text"]:not(.rb-input),
.rankbot-v2 input[type="url"],
.rankbot-v2 input[type="email"],
.rankbot-v2 input[type="number"],
.rankbot-v2 textarea:not(.rb-textarea) {
  border-radius: 10px; border: 1px solid var(--rb-border-strong);
}
.rankbot-v2 .rankbot-select:focus,
.rankbot-v2 input[type="text"]:not(.rb-input):focus,
.rankbot-v2 input[type="url"]:focus,
.rankbot-v2 input[type="email"]:focus,
.rankbot-v2 input[type="number"]:focus,
.rankbot-v2 textarea:not(.rb-textarea):focus {
  border-color: var(--rb-sunset-5); outline: none; box-shadow: 0 0 0 3px rgba(126,87,194,.18);
}

/* Checkbox → sunset toggle switch (no extra markup; uses stacked backgrounds) */
.rankbot-v2 .rankbot-toggle-input {
  -webkit-appearance: none; appearance: none;
  width: 40px; height: 22px; border-radius: 99px; cursor: pointer;
  transform: none !important; margin: 2px 10px 0 0 !important;
  vertical-align: middle; flex-shrink: 0; position: relative;
  background:
    radial-gradient(circle 8px at 11px 11px, #fff 96%, transparent 100%),
    linear-gradient(var(--rb-border-strong), var(--rb-border-strong));
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 2px rgba(20,17,31,.12);
  transition: background .15s ease;
}
.rankbot-v2 .rankbot-toggle-input:checked {
  background:
    radial-gradient(circle 8px at 29px 11px, #fff 96%, transparent 100%),
    var(--rb-grad);
  background-repeat: no-repeat;
}
.rankbot-v2 .rankbot-toggle-input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,87,194,.25); }

/* Balance badge + top-up button (were blue) */
.rankbot-v2 .rankbot-balance-badge {
  background: linear-gradient(135deg, rgba(255,95,109,.10), rgba(126,87,194,.10));
  color: var(--rb-sunset-5); border: 1px solid rgba(126,87,194,.25);
}
.rankbot-v2 .rankbot-balance-badge .dashicons { color: var(--rb-sunset-5); }
.rankbot-v2 .rankbot-topup-btn { background: var(--rb-grad); color: #fff; box-shadow: 0 2px 8px -2px rgba(240,98,146,.5); }
.rankbot-v2 .rankbot-topup-btn:hover { filter: brightness(1.05); color: #fff; }

/* WP core buttons inside our pages */
.rankbot-v2 .button-primary,
.rankbot-v2 .wp-core-ui .button-primary {
  background: var(--rb-grad) !important; border-color: transparent !important;
  color: #fff !important; text-shadow: none !important;
  box-shadow: 0 6px 18px -6px rgba(240,98,146,.5) !important; border-radius: 8px !important;
}
.rankbot-v2 .button-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.rankbot-v2 .button:not(.button-primary) { border-radius: 8px; border-color: var(--rb-border-strong); color: var(--rb-fg); }
.rankbot-v2 .button:not(.button-primary):hover { border-color: var(--rb-sunset-5); color: var(--rb-sunset-5); }

/* Save bar */
.rankbot-v2 .rankbot-save-bar { border: 1px solid var(--rb-border); border-radius: var(--rb-radius); box-shadow: var(--rb-shadow-sm); }

/* Subtitle / section headings */
.rankbot-v2 .rankbot-subtitle { color: var(--rb-fg-muted); }

/* History stat cards (inline-styled gray boxes) — warm them up a touch */
.rankbot-v2 .rankbot-stat-value { color: var(--rb-sunset-5) !important; }
.rankbot-v2 .rankbot-recent-title { color: var(--rb-sunset-5) !important; }

/* History table */
.rankbot-v2 .rankbot-history-table { border: 1px solid var(--rb-border); border-radius: var(--rb-radius); overflow: hidden; }
.rankbot-v2 .rankbot-history-table thead th {
  background: var(--rb-bg-2); color: var(--rb-fg-muted);
  text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 700;
  border-bottom: 1px solid var(--rb-border);
}
.rankbot-v2 .rankbot-history-table tbody tr:hover { background: var(--rb-bg-2); }
.rankbot-v2 .rankbot-history-table tbody td { border-bottom: 1px solid var(--rb-border); }