/* ── ReviewShield Frontend Styles ─────────────────────────────────────────── */

.rs-wrap { max-width: 900px; margin: 0 auto; padding: 32px 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Cards */
.rs-card { background: #111520; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.rs-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.rs-card-fake    { border-left: 3px solid #EF4444; }
.rs-card-negative{ border-left: 3px solid #F59E0B; }

/* Alerts */
.rs-alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.rs-alert-success { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25); color: #86EFAC; }
.rs-alert-warning { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25); color: #FDE68A; }
.rs-alert-error   { background: rgba(239,68,68,.08);  border: 1px solid rgba(239,68,68,.25);  color: #FCA5A5; }

/* Buttons */
.rs-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; text-decoration: none; transition: opacity .15s; }
.rs-btn:hover { opacity: .85; }
.rs-btn-primary { background: #4F7EF7; color: #fff; }
.rs-btn-outline { background: transparent; border: 1px solid rgba(255,255,255,.15); color: #EEF0F4; }
.rs-btn-danger  { background: rgba(239,68,68,.12); color: #FCA5A5; border: 1px solid rgba(239,68,68,.2); }
.rs-btn-ai      { background: rgba(139,92,246,.12); color: #C4B5FD; border: 1px solid rgba(139,92,246,.2); }
.rs-btn-sm      { padding: 6px 12px; font-size: 13px; }
.rs-btn-lg      { padding: 13px 28px; font-size: 16px; }
.rs-btn-full    { width: 100%; justify-content: center; }

/* KPI Grid */
.rs-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 20px 0; }
.rs-kpi { background: #111520; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 18px; text-align: center; }
.rs-kpi-value { display: block; font-size: 28px; font-weight: 700; color: #EEF0F4; }
.rs-kpi-label { display: block; font-size: 12px; color: #7C8494; margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }
.rs-kpi-warn .rs-kpi-value { color: #FCA5A5; }

/* Stars */
.rs-stars { color: #FBBF24; font-size: 15px; margin-right: 6px; }

/* Badges */
.rs-badge { display: inline-block; padding: 2px 9px; border-radius: 100px; font-size: 11px; font-weight: 600; }
.rs-badge-red   { background: rgba(239,68,68,.12);  color: #FCA5A5; }
.rs-badge-amber { background: rgba(245,158,11,.12); color: #FDE68A; }
.rs-badge-green { background: rgba(34,197,94,.12);  color: #86EFAC; }
.rs-badge-blue  { background: rgba(79,126,247,.12); color: #93B4FB; }

/* Review Cards */
.rs-review-card { background: #111520; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 18px; margin-bottom: 14px; }
.rs-review-top  { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.rs-reviewer    { font-size: 15px; color: #EEF0F4; }
.rs-date        { font-size: 12px; margin-left: 8px; }
.rs-badges      { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-review-body { color: #9CA3AF; font-size: 14px; line-height: 1.6; margin: 8px 0; }
.rs-review-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.rs-reply-box   { background: rgba(79,126,247,.06); border-left: 3px solid #4F7EF7; padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 10px 0; font-size: 13px; color: #93B4FB; }
.rs-reply-label { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 4px; }

/* Star Bars */
.rs-star-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.rs-star-row  { display: flex; align-items: center; gap: 10px; }
.rs-star-label{ width: 24px; font-size: 13px; color: #9CA3AF; text-align: right; }
.rs-bar-track { flex: 1; background: rgba(255,255,255,.06); border-radius: 4px; height: 8px; overflow: hidden; }
.rs-bar-fill  { height: 100%; border-radius: 4px; transition: width .4s; }
.rs-bar-5 { background: #22C55E; }
.rs-bar-4 { background: #84CC16; }
.rs-bar-3 { background: #FBBF24; }
.rs-bar-2 { background: #F97316; }
.rs-bar-1 { background: #EF4444; }
.rs-star-count{ width: 28px; font-size: 13px; color: #7C8494; }

/* Dashboard header */
.rs-dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 12px; }
.rs-dash-header h2 { color: #EEF0F4; font-size: 22px; font-weight: 700; margin: 0; }
.rs-plan-badge { padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; background: rgba(79,126,247,.12); color: #93B4FB; margin-left: 8px; }

/* Filters */
.rs-page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.rs-page-header h2 { color: #EEF0F4; font-size: 22px; font-weight: 700; margin: 0; }
.rs-filters select, .rs-filters input[type="checkbox"] { background: #111520; border: 1px solid rgba(255,255,255,.1); color: #EEF0F4; padding: 7px 12px; border-radius: 7px; font-size: 13px; }
.rs-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rs-filters label { color: #9CA3AF; font-size: 13px; display: flex; align-items: center; gap: 6px; }

/* Tone Manager */
.rs-tone-card { margin-bottom: 16px; }
.rs-tone-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.rs-tone-header h4 { color: #EEF0F4; font-size: 16px; margin: 0; }
.rs-tone-body label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #7C8494; margin-bottom: 6px; }
.rs-tone-body select, .rs-tone-body textarea {
  width: 100%; background: #0C0F16; border: 1px solid rgba(255,255,255,.08); color: #EEF0F4;
  padding: 10px 12px; border-radius: 8px; font-size: 14px; font-family: inherit;
}
.rs-tone-body textarea { resize: vertical; }

/* Toggle */
.rs-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.rs-toggle input { display: none; }
.rs-toggle-slider { width: 40px; height: 22px; background: rgba(255,255,255,.1); border-radius: 100px; position: relative; transition: background .2s; }
.rs-toggle-slider::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: left .2s; }
.rs-toggle input:checked ~ .rs-toggle-slider { background: #22C55E; }
.rs-toggle input:checked ~ .rs-toggle-slider::after { left: 21px; }
.rs-toggle-label { font-size: 13px; color: #9CA3AF; }

/* Modal */
.rs-modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.rs-modal-box { background: #111520; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 28px; width: 90%; max-width: 520px; }
.rs-modal-box h4 { color: #EEF0F4; font-size: 18px; margin-bottom: 16px; }
.rs-modal-box textarea, .rs-modal-box select {
  width: 100%; background: #0C0F16; border: 1px solid rgba(255,255,255,.1); color: #EEF0F4;
  padding: 10px; border-radius: 8px; font-size: 14px; font-family: inherit; margin-bottom: 16px;
}
.rs-modal-actions { display: flex; gap: 10px; }

/* Pricing */
.rs-pricing-wrap { max-width: 1100px; }
.rs-pricing-header { text-align: center; margin-bottom: 40px; }
.rs-pricing-header h2 { font-size: 32px; font-weight: 800; color: #EEF0F4; margin-bottom: 8px; }
.rs-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.rs-pricing-card { background: #111520; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 28px; position: relative; }
.rs-pricing-featured { border-color: #4F7EF7; box-shadow: 0 0 30px rgba(79,126,247,.12); }
.rs-popular-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #4F7EF7; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 14px; border-radius: 100px; white-space: nowrap; }
.rs-plan-name { font-size: 18px; font-weight: 700; color: #EEF0F4; margin-bottom: 12px; }
.rs-plan-price { font-size: 36px; font-weight: 800; color: #EEF0F4; margin-bottom: 24px; }
.rs-plan-price span { font-size: 15px; color: #7C8494; font-weight: 400; }
.rs-plan-features { list-style: none; padding: 0; margin: 0 0 28px; }
.rs-plan-features li { color: #9CA3AF; font-size: 14px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04); }

/* Connect page */
.rs-connect-page .rs-card { max-width: 520px; margin: 60px auto; }
.rs-text-center { text-align: center; }
.rs-connect-icon { font-size: 48px; margin-bottom: 16px; }
.rs-connected-badge { display: inline-block; background: rgba(34,197,94,.1); color: #86EFAC; border: 1px solid rgba(34,197,94,.2); padding: 4px 12px; border-radius: 100px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }

/* Pagination */
.rs-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 24px; }
.rs-page-btn { padding: 7px 13px; border-radius: 7px; border: 1px solid rgba(255,255,255,.1); color: #9CA3AF; text-decoration: none; font-size: 13px; }
.rs-page-btn.active { background: #4F7EF7; color: #fff; border-color: #4F7EF7; }

/* Utils */
.rs-muted { color: #7C8494; }
.rs-small { font-size: 12px; }
.rs-link  { color: #4F7EF7; text-decoration: none; font-size: 13px; }
.rs-link:hover { text-decoration: underline; }

/* ── Homepage ── */
.rs-home { color: #E2E8F0; }
.rs-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.rs-section { padding: 80px 0; }
.rs-section-alt { background: #0D1117; padding: 80px 0; }
.rs-section-sub { color: #7C8494; font-size: 17px; max-width: 600px; margin: 12px auto 0; }
.rs-cta-section { background: linear-gradient(135deg, #0f1a3d 0%, #07090D 100%); padding: 80px 0; }

/* Hero */
.rs-hero { padding: 100px 0 80px; text-align: center; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(79,126,247,.12) 0%, transparent 70%); }
.rs-hero-badge { display: inline-block; background: rgba(79,126,247,.12); color: #93B4FB; border: 1px solid rgba(79,126,247,.3); padding: 6px 16px; border-radius: 100px; font-size: 13px; font-weight: 500; margin-bottom: 24px; }
.rs-hero-title { font-size: clamp(32px, 5vw, 56px); font-weight: 700; line-height: 1.15; color: #F1F5F9; margin: 0 0 20px; }
.rs-accent { color: #4F7EF7; }
.rs-hero-sub { font-size: 18px; color: #94A3B8; max-width: 620px; margin: 0 auto 36px; line-height: 1.7; }
.rs-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.rs-hero-note { color: #64748B; font-size: 13px; margin-top: 16px; }
.rs-btn-lg { padding: 14px 32px; font-size: 16px; }

/* Problem cards */
.rs-problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 48px; }
.rs-problem-card { background: #0D1117; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 28px 24px; text-align: center; }
.rs-problem-icon { font-size: 36px; margin-bottom: 14px; }
.rs-problem-card h4 { color: #F1F5F9; font-size: 16px; margin: 0 0 10px; }
.rs-problem-card p { color: #7C8494; font-size: 14px; margin: 0; line-height: 1.6; }

/* Features */
.rs-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.rs-feature-card { background: #0D1117; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 28px 24px; transition: border-color .2s; }
.rs-feature-card:hover { border-color: rgba(79,126,247,.3); }
.rs-feature-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.rs-icon-blue   { background: rgba(79,126,247,.15); }
.rs-icon-green  { background: rgba(34,197,94,.12); }
.rs-icon-red    { background: rgba(248,113,113,.12); }
.rs-icon-amber  { background: rgba(251,191,36,.12); }
.rs-icon-purple { background: rgba(167,139,250,.12); }
.rs-feature-card h3 { color: #F1F5F9; font-size: 17px; margin: 0 0 10px; }
.rs-feature-card p  { color: #7C8494; font-size: 14px; margin: 0; line-height: 1.7; }

/* Steps */
.rs-steps { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 48px; flex-wrap: wrap; }
.rs-step { background: #0D1117; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 28px 24px; width: 220px; text-align: center; }
.rs-step-num { width: 40px; height: 40px; background: #4F7EF7; color: #fff; border-radius: 50%; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.rs-step h4 { color: #F1F5F9; font-size: 15px; margin: 0 0 8px; }
.rs-step p  { color: #7C8494; font-size: 13px; margin: 0; line-height: 1.6; }
.rs-step-arrow { font-size: 24px; color: #4F7EF7; font-weight: 300; }

/* Testimonials */
.rs-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 48px; }
.rs-testimonial { background: #0D1117; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 28px 24px; text-align: left; }
.rs-stars-display { color: #FCD34D; font-size: 18px; margin-bottom: 12px; }
.rs-testimonial p { color: #94A3B8; font-size: 14px; line-height: 1.7; margin: 0 0 14px; font-style: italic; }
.rs-testimonial strong { color: #64748B; font-size: 13px; }

/* Legal pages */
.rs-legal-page h1 { color: #F1F5F9; font-size: 32px; margin-bottom: 6px; }
.rs-legal-page h2 { color: #E2E8F0; font-size: 18px; margin: 28px 0 10px; }
.rs-legal-page p, .rs-legal-page li { color: #94A3B8; font-size: 15px; }
.rs-legal-page a { color: #4F7EF7; }
.rs-legal-page code { background: rgba(79,126,247,.1); color: #93B4FB; padding: 2px 6px; border-radius: 4px; font-size: 13px; }

/* Transparency grid */
.rs-transparency-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.rs-transparency-card { background: #07090D; border: 1px solid rgba(79,126,247,.2); border-radius: 12px; padding: 28px 24px; }
.rs-transparency-icon { font-size: 32px; margin-bottom: 12px; }
.rs-transparency-card h4 { color: #F1F5F9; font-size: 15px; margin: 0 0 10px; }
.rs-transparency-card p { color: #7C8494; font-size: 14px; margin: 0; line-height: 1.7; }
.rs-transparency-card strong { color: #93B4FB; font-weight: 500; }
.rs-transparency-card code { background: rgba(79,126,247,.1); color: #93B4FB; padding: 2px 6px; border-radius: 4px; font-size: 12px; }