/* ================================================================
   SurviveOffline — Emergency-Tech Design System
   Theme  : Calm crisis dashboard / modern field atlas
   Base   : Radzen Dark Free (dark.css)
   Fonts  : Georgia (display) · Segoe UI (body)
   Palette: Deep slate · signal amber · rescue red · technical blue
   ================================================================ */

/* ---- 1. CSS Custom Properties: Emergency-tech palette ---- */
:root {
  --so-bg:             #0b1324;
  --so-surface:        #111b30;
  --so-surface-raised: #16233a;
  --so-border:         #2b3d58;
  --so-border-accent:  #405578;

  --rz-primary:         #f59e0b;
  --rz-primary-50:      #fffbeb;
  --rz-primary-100:     #fef3c7;
  --rz-primary-200:     #fde68a;
  --rz-primary-300:     #fcd34d;
  --rz-primary-400:     #fbbf24;
  --rz-primary-500:     #f59e0b;
  --rz-primary-600:     #d97706;
  --rz-primary-700:     #b45309;
  --rz-primary-800:     #92400e;
  --rz-primary-900:     #78350f;
  --rz-primary-lighter: rgba(245, 158, 11, 0.12);
  --rz-primary-light:   #fcd34d;
  --rz-primary-dark:    #d97706;
  --rz-primary-darker:  #b45309;

  --rz-base-background-color: #10192d;
  --rz-body-background-color: #0b1324;

  --so-danger:       #fb7185;
  --so-danger-glow:  rgba(251, 113, 133, 0.24);
  --so-danger-dim:   rgba(251, 113, 133, 0.11);
  --so-warning:      #f59e0b;
  --so-warning-dim:  rgba(245, 158, 11, 0.12);
  --so-info:         #38bdf8;
  --so-info-dim:     rgba(56, 189, 248, 0.12);
  --so-amber:        #f59e0b;

  --so-text-base:    #e5edf7;
  --so-text-muted:   #a7b6cb;
  --so-text-dim:     #74839b;

  --rz-body-font-family: 'Segoe UI', 'Inter', 'Source Sans Pro', sans-serif;
  --so-font-display: 'Georgia', 'Times New Roman', serif;

  /* === Motion & radius === */
  --so-transition:     180ms ease;
  --so-radius-sm:      3px;
  --so-radius:         6px;
  --so-radius-lg:      10px;
}

/* ---- 2. Global body & page background ---- */
body {
  font-family: var(--rz-body-font-family);
  background-color: var(--so-bg);
  color: var(--so-text-base);
}

/* ---- 3. Display font for headings ---- */
h1, h2, h3, h4,
.so-page-hero-title,
.so-section-title,
.so-display {
  font-family: var(--so-font-display);
  letter-spacing: 0.02em;
}

/* ---- 4. Radzen layout overrides ---- */
.rz-header {
  background: linear-gradient(
    135deg,
    #0c1528 0%,
    #101d34 60%,
    #0c1528 100%
  ) !important;
  border-bottom: 1px solid var(--so-border-accent) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
}

.rz-sidebar {
  background: #0c1528 !important;
  border-right: 1px solid var(--so-border) !important;
  overflow-y: auto;
}

.rz-card {
  background: var(--so-surface) !important;
  border: 1px solid var(--so-border) !important;
  border-radius: var(--so-radius) !important;
}

/* Active nav item: left-border highlight */
.rz-navigation-item.rz-state-active > a,
.rz-panel-menu-item-wrapper.rz-state-active {
  background: var(--rz-primary-lighter) !important;
  border-left: 3px solid var(--rz-primary) !important;
  color: var(--rz-primary) !important;
}
.rz-text-caption {
  color: var(--so-text-muted) !important;
}

.rz-text-body2 {
  color: var(--so-text-base) !important;
}

.rz-label,
.rz-dropdown-label,
.rz-dropdown-trigger,
.rz-dropdown-trigger-icon {
  color: var(--so-text-base) !important;
}

.rz-button.rz-primary,
.rz-button.rz-secondary {
  color: #111827 !important;
}

.rz-button.rz-primary .rz-button-text,
.rz-button.rz-primary .rzi,
.rz-button.rz-secondary .rz-button-text,
.rz-button.rz-secondary .rzi {
  color: #111827 !important;
}
.rz-panel-menu-item-wrapper:hover {
  background: rgba(245, 158, 11, 0.06) !important;
}

/* ---- 5. App content area ---- */
.so-content {
  padding: 1.5rem;
  max-width: 1100px;
  width: 100%;
}
@media (max-width: 767px) {
  .so-content { padding: 1rem 0.875rem; }
}

/* ---- 6. Brand logo (header) ---- */
.so-brand-icon {
  font-size: 1.375rem;
  line-height: 1;
  user-select: none;
  filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.4));
}
.so-brand-name {
  font-family: var(--so-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #f8fafc;
  margin: 0;
  line-height: 1;
}

/* ---- 7. Page Hero ---- */
.so-page-hero {
  padding: 1.75rem 2rem;
  background: var(--so-surface);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 14px,
    rgba(56, 189, 248, 0.022) 14px,
    rgba(56, 189, 248, 0.022) 15px
  );
  border-left: 4px solid var(--rz-primary);
  border-radius: var(--so-radius);
  border: 1px solid var(--so-border);
  border-left: 4px solid var(--rz-primary);
  position: relative;
  overflow: hidden;
}
.so-page-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, transparent, rgba(56, 189, 248, 0.18), transparent);
}

.so-page-hero.danger  { border-left-color: var(--so-danger); }
.so-page-hero.warning { border-left-color: var(--so-warning); }
.so-page-hero.info    { border-left-color: var(--so-info); }

/* SOS hero: pulsing emergency beacon */
@keyframes so-sos-pulse {
  0%, 100% { box-shadow: 0 0 0 0   var(--so-danger-glow), inset 0 0 0 0 transparent; }
  50%       { box-shadow: 0 0 20px 6px var(--so-danger-glow), inset 0 0 40px rgba(239,68,68,0.06); }
}
.so-page-hero.danger {
  animation: so-sos-pulse 2.5s ease-in-out infinite;
}
/* Faint watermark icon on danger hero */
.so-page-hero.danger::before {
  content: '⚠';
  position: absolute;
  font-size: 11rem;
  right: 0.5rem;
  top: -1.5rem;
  opacity: 0.04;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Centre-aligned variant (SOS hero) */
.so-page-hero.so-hero-center { text-align: center; }
.so-page-hero.so-hero-center .so-page-hero-title {
  font-size: 2.5rem;
  letter-spacing: 0.12em;
}
.so-page-hero.danger.so-hero-center .so-page-hero-title {
  color: var(--so-danger);
  text-shadow: 0 0 20px var(--so-danger-glow);
}

.so-page-hero-title {
  font-family: var(--so-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--so-text-base);
  margin: 0 0 0.35rem;
  line-height: 1.25;
}
.so-page-hero-subtitle {
  font-size: 0.9375rem;
  color: var(--so-text-base);
  margin: 0;
  letter-spacing: 0.01em;
  opacity: 0.9;
}

/* ---- 8. Stat cards ---- */
.so-stat-icon  { font-size: 1.5rem; display: block; text-align: center; line-height: 1; margin-bottom: 0.25rem; }
.so-stat-value { font-family: var(--so-font-display); font-size: 2rem; display: block; text-align: center; font-weight: 700; color: var(--rz-primary); line-height: 1; margin: 0.25rem 0; letter-spacing: 0.03em; }
.so-stat-label { font-size: 0.6875rem; display: block; text-align: center; color: var(--so-text-muted); text-transform: uppercase; letter-spacing: 0.1em; }

/* ---- 9. Feature cards (clickable) — tactical style ---- */
.so-feature-card {
  cursor: pointer;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform var(--so-transition),
              border-color var(--so-transition),
              box-shadow var(--so-transition),
              background-color var(--so-transition);
}
/* Tactical corner marks */
.so-feature-card::before,
.so-feature-card::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--rz-primary);
  border-style: solid;
  opacity: 0;
  transition: opacity var(--so-transition);
  z-index: 1;
}
.so-feature-card::before { top: 7px; left: 7px;    border-width: 2px 0 0 2px; border-radius: 1px 0 0 0; }
.so-feature-card::after  { bottom: 7px; right: 7px; border-width: 0 2px 2px 0; border-radius: 0 0 1px 1px; }

.so-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 0 1px var(--rz-primary) !important;
  background: var(--so-surface-raised) !important;
}
.so-feature-card:hover::before,
.so-feature-card:hover::after { opacity: 1; }
.so-feature-card:active { transform: translateY(0); }

/* ---- 10. Result cards (search / list items) ---- */
.so-result-card {
  border-left: 3px solid transparent !important;
  transition: border-left-color var(--so-transition), background-color var(--so-transition);
}
.so-result-card:hover {
  border-left-color: var(--rz-primary) !important;
  background-color: var(--rz-primary-lighter) !important;
}

/* ---- 11. Info banners ---- */
.so-info-banner {
  padding: 0.875rem 1.125rem;
  border-left: 4px solid var(--rz-primary);
  background: var(--rz-primary-lighter);
  border-radius: 0 var(--so-radius) var(--so-radius) 0;
  font-size: 0.9rem;
  color: var(--so-text-base);
}
.so-info-banner.warning { border-left-color: var(--so-warning); background: var(--so-warning-dim); }
.so-info-banner.danger  { border-left-color: var(--so-danger);  background: var(--so-danger-dim); }
.so-info-banner.info    { border-left-color: var(--so-info);    background: var(--so-info-dim); }
.so-info-banner.so-mt   { margin-top: 0.5rem; }
.so-step-header         { font-family: var(--so-font-display); font-weight: 600; letter-spacing: 0.03em; margin-bottom: 0.25rem; }
.so-step-header.so-mt   { margin-top: 0.5rem; }

/* ---- 12. Empty & loading states ---- */
.so-empty-state    { text-align: center; padding: 3rem 1.5rem; }
.so-empty-icon     { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; opacity: 0.4; }
.so-empty-title    { font-family: var(--so-font-display); font-size: 1rem; font-weight: 500; color: var(--so-text-base); margin: 0 0 0.25rem; letter-spacing: 0.05em; }
.so-empty-subtitle { font-size: 0.8125rem; color: var(--so-text-base); margin: 0; }

/* ---- 13. Section header ---- */
.so-section-title {
  font-family: var(--so-font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rz-primary-300);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--so-border);
  /* small tick on left */
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.so-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.85em;
  background: var(--rz-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ---- 14. Sidebar nav section labels ---- */
.so-nav-section {
  display: block;
  font-family: var(--so-font-display);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #f59e0b;
  opacity: 0.92;
  padding: 1rem 1rem 0.25rem;
  pointer-events: none;
  user-select: none;
}

.so-sidebar-nav {
  padding-bottom: 0.75rem;
}

/* ---- 15. Sidebar footer ---- */
.so-sidebar-footer {
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--so-border);
  color: var(--so-text-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  font-family: var(--so-font-display);
  text-transform: uppercase;
}

/* ---- 16. Article body (markdown renderer) ---- */
.article-body {
  line-height: 1.8;
  color: var(--so-text-base);
  font-size: 1rem;
}
.article-body h1, .article-body h2,
.article-body h3, .article-body h4 {
  font-family: var(--so-font-display);
  color: var(--so-text-base);
  margin: 1.75rem 0 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
}
.article-body h1 { font-size: 1.625rem; border-bottom: 1px solid var(--so-border); padding-bottom: 0.375rem; }
.article-body h2 { font-size: 1.25rem; }
.article-body h3 { font-size: 1.0625rem; }
.article-body p  { margin: 0 0 1rem; }
.article-body ul, .article-body ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.article-body li { margin-bottom: 0.375rem; }

.article-body code {
  background: var(--so-surface-raised);
  border: 1px solid var(--so-border-accent);
  padding: 0.125rem 0.375rem;
  border-radius: var(--so-radius-sm);
  font-size: 0.875em;
  color: var(--rz-primary-300);
}
.article-body pre {
  background: var(--so-surface-raised);
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius);
  padding: 1rem;
  overflow-x: auto;
  margin: 0 0 1rem;
}
.article-body pre code { background: none; border: none; padding: 0; }
.article-body blockquote {
  border-left: 4px solid var(--rz-primary);
  background: var(--rz-primary-lighter);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 0 var(--so-radius-sm) var(--so-radius-sm) 0;
  color: var(--so-text-muted);
  font-style: italic;
}
.article-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9375rem; }
.article-body th    { background: var(--so-surface-raised); color: var(--so-text-base); padding: 0.625rem 0.875rem; text-align: left; font-weight: 600; border-bottom: 2px solid var(--rz-primary); font-family: var(--so-font-display); letter-spacing: 0.05em; }
.article-body td    { padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--so-border); color: var(--so-text-muted); }
.article-body tr:hover td { background: var(--so-surface-raised); }

/* ---- 17. Achievement locked state ---- */
.so-achievement-locked { opacity: 0.38; filter: grayscale(0.5); }

/* ---- 18. Checklist expanded section ---- */
.so-checklist-items-expanded {
  padding-top: 0.5rem;
  border-top: 1px solid var(--so-border);
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* ---- 19. Checklist item states ---- */
.so-checklist-done    { color: var(--rz-primary); font-weight: 600; }
.so-checklist-pending { color: var(--so-text-muted); }
.so-checklist-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.375rem 0;
}

/* ---- 20. Stat card (consistent padding) ---- */
.so-stat-card { padding: 1.25rem; }

/* ---- 21. Skeleton / loading states ---- */
@keyframes so-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.so-skeleton {
  background: linear-gradient(
    90deg,
    var(--so-surface)        25%,
    var(--so-surface-raised) 50%,
    var(--so-surface)        75%
  );
  background-size: 1200px 100%;
  animation: so-shimmer 1.6s infinite linear;
  border-radius: var(--so-radius-sm);
}
.so-skeleton-text  { height: 1em;    margin-bottom: 0.5rem; }
.so-skeleton-title { height: 1.375em; width: 60%; margin-bottom: 0.75rem; }
.so-skeleton-badge { height: 1.25em; width: 5rem; border-radius: 9999px; }
.so-skeleton-card  {
  padding: 1.25rem;
  border-radius: var(--so-radius);
  background: var(--so-surface);
  border: 1px solid var(--so-border);
}
.so-loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  gap: 0.75rem;
  color: var(--so-text-muted);
  font-size: 0.875rem;
}
.so-loading-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--so-border);
  border-top-color: var(--rz-primary);
  border-radius: 50%;
  animation: so-spin 0.7s linear infinite;
}
@keyframes so-spin { to { transform: rotate(360deg); } }

/* ---- 22. Error state ---- */
.so-error-state   { text-align: center; padding: 3rem 1.5rem; }
.so-error-icon    { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; }
.so-error-title   { font-family: var(--so-font-display); font-size: 1rem; font-weight: 600; color: var(--so-danger); margin: 0 0 0.25rem; letter-spacing: 0.05em; }
.so-error-message { font-size: 0.8125rem; color: var(--so-text-muted); margin: 0 0 1rem; }

/* ---- 23. Keyboard focus ring (WCAG 2.2 AA) ---- */
:focus-visible {
  outline: 2px solid var(--rz-primary);
  outline-offset: 2px;
  border-radius: var(--so-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- 24. Mobile sidebar & layout ---- */
@media (max-width: 767px) {
  .rz-sidebar { transform: translateX(-100%); transition: transform 0.25s ease; }
  .rz-sidebar.rz-sidebar-expanded { transform: translateX(0); }
  .so-nav-section { padding: 0.75rem 0.875rem 0.2rem; }
  .so-stat-value { font-size: 1.5rem; }
}

/* ---- 25. Print ---- */
@media print {
  .rz-header, .rz-sidebar { display: none !important; }
  .rz-body { padding: 0 !important; }
  .so-content { max-width: 100% !important; padding: 0 !important; }
}

/* ---- 26. Auth + admin additions ---- */
.so-header-chip-success {
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(74, 222, 128, 0.12);
}

.so-stat-card-compact {
  padding: 1rem;
}

.so-ops-card {
  height: 100%;
}

.so-list-item-title {
  margin: 0;
  font-weight: 700;
  color: var(--so-text-base);
}

.so-list-item-copy {
  margin: 0;
  color: var(--so-text-muted);
}

.so-paragraph-tight {
  margin: 0 0 0.5rem;
}

.so-primary-text {
  color: var(--rz-primary);
}

.so-inline-badge-stack {
  min-width: 0;
}

.so-inline-badge-stack .rz-text-body1 {
  overflow-wrap: anywhere;
}

.so-action-grid-button {
  width: 100%;
}

.so-alert-copy {
  color: var(--so-text-base);
  line-height: 1.55;
}

.so-flex-fill {
  flex: 1;
}

.so-achievement-icon {
  font-size: 2.25rem;
  line-height: 1;
  min-width: 2.5rem;
  text-align: center;
}

.so-category-card-stack {
  padding: 1.25rem 1rem;
  text-align: center;
}

.so-category-card-icon {
  margin-bottom: 0;
}

.so-article-hero-action {
  margin-top: 1rem;
}

.so-checklist-progress {
  height: 6px;
}

.so-checklist-detail-items {
  padding-top: 0.5rem;
}

.so-checklist-item-icon {
  font-size: 1rem;
}

.so-heart-icon {
  font-size: 1.25rem;
  color: var(--so-danger);
  line-height: 1;
}

.so-card-actions-wrap {
  align-items: center;
}

.so-centered-card-stack {
  padding: 1.5rem;
  text-align: center;
}

.so-centered-card-title {
  margin: 0;
  font-weight: 600;
}

.so-centered-card-copy {
  color: var(--so-text-muted);
  max-width: 480px;
}

.so-avatar-card {
  text-align: center;
  padding: 2rem;
}

.so-avatar-icon {
  font-size: 4rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.75rem;
}

.so-danger-stat {
  color: var(--so-danger);
}

.so-tabs-panel-stack {
  padding: 1rem;
}

.so-camera-frame {
  width: 200px;
  height: 200px;
  border: 3px dashed var(--rz-base-600);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.so-icon-hero-mobile {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.5rem;
}

.so-chip-row {
  flex-wrap: wrap;
}

.so-empty-state-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.so-empty-icon-lg {
  font-size: 3.5rem;
}

.so-empty-title-lg {
  font-size: 1.375rem;
}

.so-inline-link-button {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

.so-onboarding-shell {
  min-height: 80vh;
  justify-content: center;
  align-items: center;
}

.so-onboarding-card {
  max-width: 640px;
  width: 100%;
}

.so-onboarding-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rz-base-600);
}

.so-onboarding-dot-active {
  background: var(--rz-primary);
}

.so-onboarding-step {
  text-align: center;
  padding: 1rem;
}

.so-onboarding-hero-icon {
  font-size: 5rem;
}

.so-onboarding-step-icon {
  font-size: 4rem;
}

.so-onboarding-headline {
  font-weight: 700;
  color: var(--rz-primary);
}

.so-onboarding-feature-list {
  max-width: 400px;
}

.so-onboarding-button-stack {
  width: 100%;
  max-width: 300px;
}

.so-login-shell {
  max-width: 980px;
}

.so-auth-state {
  max-width: 720px;
}

.so-auth-state-button {
  width: fit-content;
}

.so-auth-redirect-card {
  max-width: 520px;
}

.so-login-form {
  display: grid;
  gap: 0.75rem;
}

.so-form-label {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--so-text-muted);
}

.so-form-input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border-radius: var(--so-radius);
  border: 1px solid var(--so-border);
  background: var(--so-surface-raised);
  color: var(--so-text-base);
}

.so-home-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}

/* ---- 26. Accessibility — reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- 27. Utility helpers ---- */
.so-danger       { color: var(--so-danger) !important; }
.so-text-center  { text-align: center; }
.so-w-full       { width: 100%; }
.so-m0           { margin: 0; }
.so-bold         { font-weight: 700; }
.so-semibold     { font-weight: 600; }
.so-text-danger  { color: var(--so-danger); }
.so-text-primary { color: var(--rz-primary); }
.so-text-muted   { color: var(--so-text-muted); }

.rz-button.so-primary-link-button,
.rz-button.so-primary-link-button .rz-button-text,
.rz-button.so-primary-link-button .rz-button-icon-left,
.rz-button.so-primary-link-button .rzi {
  color: #ffffff !important;
}

.rz-button.so-primary-link-button {
  background: #0f3d24 !important;
  border-color: #86efac !important;
}

.rz-badge.rz-badge-info {
  background: #1e3a8a !important;
  color: #ffffff !important;
  border: 1px solid #93c5fd !important;
}

.rz-badge.rz-badge-light {
  background: #243424 !important;
  color: #ffffff !important;
  border: 1px solid #86efac !important;
}

.rz-badge.rz-badge-warning {
  background: #78350f !important;
  color: #ffffff !important;
  border: 1px solid #fbbf24 !important;
}

.rz-badge.rz-badge-success {
  background: #14532d !important;
  color: #ffffff !important;
  border: 1px solid #86efac !important;
}

/* ---- 28. Feature card inner content ---- */
.so-feature-card-inner {
  text-align: center;
  padding: 1.5rem 1rem;
}
/* Category card inner */
.so-cat-card-inner {
  text-align: center;
  padding: 1rem 0.75rem;
}
/* Icon display helpers */
.so-icon-xl   { font-size: 2.25rem; line-height: 1; display: inline-block; margin-bottom: 0.5rem; filter: drop-shadow(0 0 6px rgba(74,222,128,0.3)); }
.so-icon-lg   { font-size: 2rem;    line-height: 1; display: inline-block; margin-bottom: 0.375rem; }
.so-icon-hero { font-size: 3.5rem;  line-height: 1; display: block; margin-bottom: 0.5rem; filter: drop-shadow(0 0 10px rgba(74,222,128,0.35)); }
.so-icon-4xl  { font-size: 4rem;    line-height: 1; display: block; margin-bottom: 0.5rem; }

/* SOS danger icon: emergency glow */
.so-page-hero.danger .so-icon-xl,
.so-page-hero.danger .so-icon-hero {
  filter: drop-shadow(0 0 10px var(--so-danger-glow));
}

/* ---- 29. Survival readiness banner (IndexPage) ---- */
.so-readiness-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 3px;
  padding: 0.2rem 0.6rem;
  font-family: var(--so-font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rz-primary);
  margin-bottom: 0.6rem;
}
.so-readiness-tag::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--rz-primary);
  border-radius: 50%;
  animation: so-blink 1.8s ease-in-out infinite;
}
@keyframes so-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ---- 30. Feature list (key capabilities on IndexPage) ---- */
.so-feat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.so-feat-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--so-border);
}
.so-feat-list-item:last-child { border-bottom: none; }
.so-feat-list-icon {
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1.4;
}

.so-sos-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.so-sos-section {
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius);
  background: var(--so-surface);
}

.so-sos-section-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 1rem 1.125rem;
  font-family: var(--so-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--so-text-base);
  list-style: none;
}

.so-sos-section-summary::-webkit-details-marker {
  display: none;
}

.so-sos-section-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.so-sos-section-content {
  padding: 0 1.125rem 1.125rem;
}

.so-steps {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
  color: var(--so-text-base);
}

.so-steps li {
  margin-bottom: 0.5rem;
}

.so-sos-paragraph {
  margin: 0 0 0.875rem;
  color: var(--so-text-base);
}

/* ---- 31. Shell redesign: field atlas chrome ---- */
html {
  background:
    radial-gradient(circle at top left, rgba(217, 119, 6, 0.10), transparent 28%),
    radial-gradient(circle at top right, rgba(74, 222, 128, 0.10), transparent 34%),
    #081108;
}

body {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(6, 15, 6, 0.94), rgba(6, 15, 6, 0.98)),
    repeating-linear-gradient(
      0deg,
      rgba(183, 209, 183, 0.025) 0,
      rgba(183, 209, 183, 0.025) 1px,
      transparent 1px,
      transparent 26px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(183, 209, 183, 0.025) 0,
      rgba(183, 209, 183, 0.025) 1px,
      transparent 1px,
      transparent 26px
    );
}

.rz-layout {
  min-height: 100vh;
  background: transparent !important;
}

.so-shell-header {
  backdrop-filter: blur(16px);
}

.so-header-shell {
  min-height: 72px;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.so-brand-lockup {
  min-width: 0;
}

.so-brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(74, 222, 128, 0.32);
  border-radius: 0.8rem;
  background:
    radial-gradient(circle at 30% 30%, rgba(251, 191, 36, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(20, 44, 20, 0.95), rgba(10, 24, 10, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 10px 26px rgba(0, 0, 0, 0.32);
}

.so-brand-mark .rzi {
  font-size: 1.25rem;
  color: #f6d38a !important;
}

.so-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.so-brand-name {
  display: block;
}

.so-brand-subtitle {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--so-text-dim);
}

.so-header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.so-header-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(74, 222, 128, 0.18);
  background: rgba(13, 29, 13, 0.75);
  color: var(--so-text-base);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.so-header-chip-muted {
  border-color: rgba(217, 119, 6, 0.22);
  color: #f6d38a;
}

.so-lang-switcher {
  padding: 0.18rem;
  border-radius: 999px;
  background: rgba(9, 20, 9, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.rz-button.so-lang-button {
  min-width: 2.1rem;
  border-radius: 999px !important;
}

.so-shell-sidebar {
  background: transparent !important;
}

.so-sidebar-frame {
  height: 100%;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(9, 22, 9, 0.98), rgba(8, 19, 8, 0.98)),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 16px,
      rgba(251, 191, 36, 0.025) 16px,
      rgba(251, 191, 36, 0.025) 17px
    );
}

.so-sidebar-intro {
  margin: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(74, 222, 128, 0.14);
  background: linear-gradient(180deg, rgba(18, 34, 18, 0.92), rgba(11, 21, 11, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.so-sidebar-kicker {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: #f6d38a;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.so-sidebar-title {
  margin: 0;
  font-family: var(--so-font-display);
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--so-text-base);
}

.so-sidebar-copy {
  margin: 0.55rem 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--so-text-muted);
}

.so-sidebar-spacer {
  flex: 1;
}

.so-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.so-sidebar-footer-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f6d38a;
  flex-shrink: 0;
}

.rz-body {
  background: transparent !important;
}

.so-content {
  max-width: 1240px;
  padding: 2rem 1.5rem 2.5rem;
}

/* ---- 32. Home page redesign ---- */
.so-home-shell {
  gap: 1.75rem;
}

.so-home-hero {
  position: relative;
}

.so-home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
  gap: 1rem;
  align-items: stretch;
}

.so-home-hero-copy,
.so-home-mission-card,
.so-home-capabilities-card {
  position: relative;
  overflow: hidden;
}

.so-home-hero-copy {
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 24%),
    linear-gradient(180deg, rgba(21, 33, 57, 0.98), rgba(14, 23, 41, 0.98));
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.so-home-hero-copy::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px dashed rgba(246, 211, 138, 0.14);
  border-radius: 1rem;
  pointer-events: none;
}

.so-home-kicker {
  margin: 0.3rem 0 0.7rem;
  color: var(--so-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.so-home-title {
  margin: 0;
  max-width: 11ch;
  font-family: var(--so-font-display);
  font-size: clamp(2.2rem, 3.5vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--so-text-base);
}

.so-home-subtitle {
  max-width: 52ch;
  margin: 1rem 0 0;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--so-text-muted);
}

.so-home-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.so-home-signal-card {
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 20, 36, 0.72);
}

.so-home-signal-label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--so-text-dim);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.so-home-signal-value {
  display: block;
  color: #f4f7ef;
  font-size: 0.98rem;
  line-height: 1.3;
}

.so-home-mission-card {
  padding: 1.5rem;
  border-radius: 1.35rem !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 24%),
    linear-gradient(180deg, rgba(18, 30, 52, 0.98), rgba(12, 21, 38, 0.98)) !important;
}

.so-home-mission-kicker {
  display: inline-block;
  margin-bottom: 0.55rem;
  color: var(--so-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.so-home-mission-title,
.so-home-section-title {
  margin: 0;
  font-family: var(--so-font-display);
  letter-spacing: 0.01em;
  color: var(--so-text-base);
}

.so-home-mission-title {
  font-size: 1.35rem;
  line-height: 1.15;
}

.so-home-mission-copy,
.so-home-section-copy {
  margin: 0.75rem 0 0;
  color: var(--so-text-muted);
  line-height: 1.65;
}

.so-home-mission-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.so-home-mission-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.so-home-mission-item:first-child {
  padding-top: 0;
  border-top: none;
}

.so-home-mission-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: rgba(246, 211, 138, 0.10);
  font-size: 1.05rem;
}

.so-home-mission-item strong,
.so-home-mission-item p {
  display: block;
}

.so-home-mission-item strong {
  color: var(--so-text-base);
  margin-bottom: 0.25rem;
}

.so-home-mission-item p {
  margin: 0;
  color: var(--so-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.so-home-section {
  display: grid;
  gap: 1rem;
}

.so-home-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
  gap: 1rem;
  align-items: end;
}

.so-home-section-head-tight {
  margin-bottom: 1rem;
}

.so-home-section-title {
  margin-top: 0.4rem;
  font-size: 1.32rem;
  line-height: 1.15;
}

.so-feature-card {
  border-radius: 1.15rem !important;
  background:
    linear-gradient(180deg, rgba(19, 31, 52, 0.98), rgba(12, 21, 37, 0.98)) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.so-feature-card-danger {
  border-color: rgba(255, 143, 143, 0.18) !important;
  background:
    radial-gradient(circle at top right, rgba(239, 68, 68, 0.10), transparent 26%),
    linear-gradient(180deg, rgba(30, 16, 16, 0.98), rgba(18, 11, 11, 0.98)) !important;
}

.so-feature-card-danger:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 143, 143, 0.56) !important;
}

.so-feature-card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.5rem 1.2rem 1.15rem;
}

.so-feature-meta {
  display: inline-flex;
  align-self: center;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--so-text-muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.so-feature-meta-danger {
  border-color: rgba(255, 143, 143, 0.16);
  background: rgba(239, 68, 68, 0.10);
  color: #ffb5b5;
}

.so-feature-card-footer {
  margin-top: auto;
  padding-top: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: var(--rz-primary-200);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.so-feature-card-footer-danger {
  color: #ffb5b5;
}

.so-category-card .so-cat-card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.15rem 0.9rem;
}

.so-category-detail {
  color: var(--so-text-dim);
  font-size: 0.82rem;
  line-height: 1.45;
}

.so-home-capabilities-card {
  padding: 1.5rem 1.5rem 0.4rem;
  border-radius: 1.35rem !important;
  border-color: rgba(74, 222, 128, 0.12) !important;
}

.so-feat-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
}

/* ---- 33. Responsive refinements ---- */
@media (max-width: 980px) {
  .so-header-shell,
  .so-home-hero-grid,
  .so-home-section-head {
    grid-template-columns: 1fr;
  }

  .so-header-shell {
    padding: 0.9rem 1rem;
    align-items: flex-start;
    flex-direction: column;
  }

  .so-header-tools {
    width: 100%;
    justify-content: flex-start;
  }

  .so-home-title {
    max-width: none;
  }

  .so-feat-list-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .so-content {
    padding: 1.25rem 0.9rem 2rem;
  }

  .so-sidebar-intro {
    margin: 0.75rem;
    padding: 0.9rem;
  }

  .so-home-hero-copy,
  .so-home-mission-card,
  .so-home-capabilities-card {
    padding: 1.15rem;
  }

  .so-home-signal-grid {
    grid-template-columns: 1fr;
  }

  .so-home-section-title,
  .so-home-mission-title {
    font-size: 1.25rem;
  }
}

/* ---- 34. Mockup-driven page components ---- */
.so-readiness-tag {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.28);
  color: #fcd34d;
}

.so-readiness-tag::before {
  background: var(--rz-primary);
}

.so-page-kicker {
  margin: 0 0 0.7rem;
  color: var(--so-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.so-page-kicker-danger {
  color: #fda4af;
}

.so-page-hero-search,
.so-page-hero-article,
.so-page-hero-settings {
  border-radius: 1.4rem;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(18, 30, 52, 0.98), rgba(11, 19, 36, 0.98));
}

.so-page-hero-article,
.so-page-hero-settings {
  padding-top: 1.4rem;
}

.so-page-hero-search .so-page-hero-title,
.so-page-hero-article .so-page-hero-title,
.so-page-hero-settings .so-page-hero-title,
.so-sos-hero-panel .so-page-hero-title {
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
}

.so-search-layout,
.so-article-layout,
.so-settings-grid {
  display: grid;
  gap: 1rem;
}

.so-search-layout {
  grid-template-columns: minmax(250px, 0.9fr) minmax(0, 2.1fr);
  align-items: start;
}

.so-search-filter-card,
.so-search-results-pane,
.so-article-content-card,
.so-article-meta-card,
.so-article-note-card,
.so-settings-card {
  border-radius: 1.25rem !important;
}

.so-search-filter-card {
  padding: 1.25rem;
  position: sticky;
  top: 1rem;
}

.so-input {
  margin-top: 0.45rem;
}

.so-search-submit {
  margin-top: 0.15rem;
  width: 100%;
}

.so-search-quick-tags {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.so-search-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.so-search-tag-chip {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0e182a;
  color: var(--so-text-base);
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--so-transition), border-color var(--so-transition), transform var(--so-transition);
}

.so-search-tag-chip:hover {
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.08);
  transform: translateY(-1px);
}

.so-search-results-pane {
  display: grid;
  gap: 1rem;
}

.so-search-results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.so-search-results-title {
  margin: 0.4rem 0 0;
  font-family: var(--so-font-display);
  font-size: 1.45rem;
  color: var(--so-text-base);
}

.so-search-count-pill {
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: rgba(14, 24, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--so-text-muted);
  font-size: 0.88rem;
  white-space: nowrap;
}

.so-result-card-rich {
  padding: 1.15rem 1.2rem;
  border-left: none !important;
  border-radius: 1.2rem !important;
}

.so-result-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.so-result-card-title {
  margin: 0;
  font-family: var(--so-font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--so-text-base);
}

.so-result-card-summary {
  margin: 0.55rem 0 0;
  color: var(--so-text-muted);
  line-height: 1.6;
}

.so-result-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.so-result-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.so-empty-state-card {
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 1.25rem;
  background: rgba(10, 20, 36, 0.6);
}

.so-empty-state-large {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.so-empty-action {
  margin-top: 1.25rem;
}

.so-article-back-button {
  margin-bottom: 0.95rem;
}

.so-article-hero-meta {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.so-article-layout {
  grid-template-columns: minmax(0, 2fr) minmax(250px, 0.8fr);
  align-items: start;
}

.so-article-content-card {
  padding: 1.4rem 1.6rem;
}

.so-article-sidebar {
  display: grid;
  gap: 1rem;
}

.so-article-meta-card,
.so-article-note-card {
  padding: 1.15rem 1.2rem;
}

.so-article-meta-list {
  display: grid;
  gap: 0.9rem;
}

.so-article-meta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--so-text-muted);
}

.so-article-meta-item:first-child {
  padding-top: 0.2rem;
  border-top: none;
}

.so-article-meta-item strong {
  color: var(--so-text-base);
}

.so-article-note-card {
  background:
    radial-gradient(circle at top right, rgba(251, 113, 133, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(27, 24, 34, 0.98), rgba(18, 16, 23, 0.98)) !important;
  border-color: rgba(82, 52, 71, 0.9) !important;
}

.so-article-note-text {
  margin: 0;
  color: #f8d0d6;
  line-height: 1.65;
}

.so-sos-hero-panel {
  text-align: left;
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at top right, rgba(251, 113, 133, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(36, 22, 29, 0.98), rgba(21, 14, 19, 0.98));
}

.so-sos-hero-panel .so-page-hero-subtitle {
  max-width: 42rem;
  color: #fecdd3;
}

.so-sos-warning-strip {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.2rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(251, 113, 133, 0.25);
  background: rgba(48, 27, 35, 0.92);
  color: #fff1f2;
  font-weight: 600;
}

.so-sos-warning-icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(251, 113, 133, 0.18);
}

.so-sos-section {
  border-radius: 1.2rem;
  overflow: hidden;
}

.so-sos-section-summary {
  gap: 0.9rem;
}

.so-sos-section-index {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.9rem;
  background: rgba(251, 113, 133, 0.12);
  color: #fecdd3;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
}

.so-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.so-settings-card {
  padding: 1.3rem 1.35rem;
}

.so-settings-card-wide {
  padding: 1.3rem 1.35rem;
}

.so-settings-card-title {
  margin: 0.35rem 0 0;
  font-family: var(--so-font-display);
  font-size: 1.55rem;
  color: var(--so-text-base);
}

.so-settings-card-copy {
  margin: 0.7rem 0 1rem;
  color: var(--so-text-muted);
  line-height: 1.65;
}

.so-theme-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: #0e182a;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.so-theme-option {
  padding: 0.6rem 1rem;
  border-radius: 999px;
  color: var(--so-text-muted);
  font-size: 0.92rem;
}

.so-theme-option-active {
  background: var(--rz-primary);
  color: #111827;
  font-weight: 700;
}

.so-settings-switch-list {
  display: grid;
  gap: 0.85rem;
}

.so-settings-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.05rem;
  border-radius: 1rem;
  background: #0e182a;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.so-settings-switch-label {
  margin: 0;
  color: var(--so-text-base);
  font-weight: 600;
}

.so-settings-switch-copy {
  margin: 0.25rem 0 0;
  color: var(--so-text-muted);
  font-size: 0.92rem;
}

.so-visual-slot {
  margin-top: 1rem;
  min-height: 180px;
  border-radius: 1.2rem;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 28%),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0.03) 10px,
      transparent 10px,
      transparent 20px
    ),
    rgba(10, 20, 36, 0.72);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}

.so-visual-slot-tall {
  min-height: 260px;
}

.so-visual-slot-compact {
  min-height: 132px;
}

.so-visual-slot-danger {
  border-color: rgba(251, 113, 133, 0.18);
  background:
    radial-gradient(circle at top left, rgba(251, 113, 133, 0.08), transparent 28%),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0.03) 10px,
      transparent 10px,
      transparent 20px
    ),
    rgba(31, 20, 29, 0.72);
}

.so-visual-slot-title {
  margin: 0;
  color: var(--so-text-base);
  font-family: var(--so-font-display);
  font-size: 1rem;
}

.so-visual-slot-copy {
  margin: 0.4rem 0 0;
  color: var(--so-text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .so-search-layout,
  .so-article-layout,
  .so-settings-grid {
    grid-template-columns: 1fr;
  }

  .so-search-filter-card {
    position: static;
  }
}

@media (max-width: 767px) {
  .so-search-results-head,
  .so-result-card-head,
  .so-result-card-footer,
  .so-settings-switch-row {
    flex-direction: column;
    align-items: stretch;
  }

  .so-search-count-pill {
    white-space: normal;
  }
}