/* ══════════════════════════════════════════════════════════════
   OPTIONONE CAPITAL MASTER PORTAL STYLESHEET
   Combines premium login styling with original scoped form designs.
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─── HTML & Body stretch for local and live full screen ───── */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh !important;
  background-color: #f0f2f5 !important;
  overflow-x: hidden !important;
}

/* ─── Global Reset & Variables ──────────────────────────────── */
#oo-app-root *,
#oo-app-root *::before,
#oo-app-root *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}
#oo-app-root {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #0a0a0a !important;
  -webkit-font-smoothing: antialiased !important;
  width: 100% !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;

  /* Color system scoped inside root */
  --red: #d42027 !important;
  --red-hover: #b5191f !important;
  --black: #0a0a0a !important;
  --white: #ffffff !important;
  --g-100: #f5f5f5 !important;
  --g-200: #e5e5e5 !important;
  --g-300: #d4d4d4 !important;
  --g-400: #a3a3a3 !important;
  --g-500: #737373 !important;
  --g-600: #525252 !important;
  --g-700: #404040 !important;
  --r-sm: 6px !important;
  --r-md: 10px !important;
  --r-lg: 14px !important;
  --r-xl: 20px !important;
  --shadow: 0 1px 4px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.08) !important;
}

/* ─── Premium Authentication Panel (Login & Signup) ─────────── */
#oo-app-root .auth-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  background: linear-gradient(145deg, #f8f9fc 0%, #eef0f5 100%) !important;
  padding: 32px 24px !important;
  position: relative !important;
  overflow: hidden !important;
  flex: 1 !important;
}

/* Light decorative mesh animated background circles */
#oo-app-root .auth-mesh-circle {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  z-index: 1 !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}
#oo-app-root .auth-mesh-circle.mesh-1 {
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(212,32,39,0.08) 0%, transparent 70%) !important;
  top: -15% !important;
  left: -10% !important;
  animation: oo-float-mesh-1 22s infinite alternate linear !important;
}
#oo-app-root .auth-mesh-circle.mesh-2 {
  width: 550px !important;
  height: 550px !important;
  background: radial-gradient(circle, rgba(100,120,255,0.06) 0%, transparent 70%) !important;
  bottom: -15% !important;
  right: -10% !important;
  animation: oo-float-mesh-2 28s infinite alternate linear !important;
}

@keyframes oo-float-mesh-1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(80px, 60px) scale(1.15); }
}
@keyframes oo-float-mesh-2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-100px, -70px) scale(0.9); }
}

#oo-app-root .auth-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 24px !important;
  max-width: 460px !important;
  width: 100% !important;
  padding: 48px 44px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04) !important;
  z-index: 10 !important;
  position: relative !important;
  text-align: center !important;
  transition: box-shadow 0.3s !important;
}
#oo-app-root .auth-card:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,0.1), 0 2px 8px rgba(212,32,39,0.05) !important;
}

#oo-app-root .auth-logo {
  font-family: 'Outfit', sans-serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
  color: #0a0a0a !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
#oo-app-root .auth-logo span {
  color: var(--red) !important;
  font-style: italic !important;
}
#oo-app-root .auth-logo-img {
  height: 120px !important;
  max-width: 320px !important;
  object-fit: contain !important;
  margin-bottom: 24px !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.12)) !important;
}

#oo-app-root .auth-subtitle {
  font-size: 14px !important;
  color: #6b7280 !important;
  line-height: 1.6 !important;
  margin-bottom: 28px !important;
}

/* Tabs switcher for Login / Signup */
#oo-app-root .auth-tabs {
  display: flex !important;
  border-bottom: 2px solid #f0f0f0 !important;
  margin-bottom: 28px !important;
  gap: 0 !important;
}
#oo-app-root .auth-tab {
  flex: 1 !important;
  background: none !important;
  border: none !important;
  color: #9ca3af !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: 'Outfit', sans-serif !important;
  padding: 12px 0 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: color 0.25s !important;
}
#oo-app-root .auth-tab:hover {
  color: #374151 !important;
}
#oo-app-root .auth-tab.active {
  color: #111827 !important;
}
#oo-app-root .auth-tab.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2.5px !important;
  background-color: var(--red) !important;
  border-radius: 99px !important;
}

/* Forms views logic */
#oo-app-root .auth-view {
  display: none !important;
}
#oo-app-root .auth-view.active {
  display: block !important;
}

#oo-app-root .auth-banner {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  margin-bottom: 24px !important;
  text-align: left !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
#oo-app-root .auth-banner-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
}

#oo-app-root .auth-fg {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 22px !important;
  text-align: left !important;
}
#oo-app-root .auth-fg label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #374151 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* High fidelity SVG Input wrapper */
#oo-app-root .auth-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
#oo-app-root .auth-input-icon {
  position: absolute !important;
  left: 14px !important;
  width: 18px !important;
  height: 18px !important;
  color: #9ca3af !important;
  pointer-events: none !important;
  transition: color 0.25s, transform 0.25s !important;
  z-index: 5 !important;
}
#oo-app-root input.auth-inp {
  width: 100% !important;
  background: #f9fafb !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 13px 14px 13px 44px !important;
  font-size: 14.5px !important;
  font-family: 'Inter', sans-serif !important;
  color: #111827 !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s !important;
  box-shadow: none !important;
}
#oo-app-root input.auth-inp::placeholder {
  color: #9ca3af !important;
}
#oo-app-root input.auth-inp:focus {
  border-color: #d42027 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(212, 32, 39, 0.1) !important;
}
#oo-app-root .auth-input-wrapper:focus-within .auth-input-icon {
  color: var(--red) !important;
  transform: scale(1.05) !important;
}

#oo-app-root .auth-forgot {
  text-align: right !important;
  margin-top: -8px !important;
  margin-bottom: 24px !important;
}
#oo-app-root .auth-forgot a {
  color: #6b7280 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}
#oo-app-root .auth-forgot a:hover {
  color: #d42027 !important;
}

#oo-app-root .auth-btn {
  width: 100% !important;
  background: linear-gradient(135deg, #d42027 0%, #b5191f 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
  cursor: pointer !important;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
  box-shadow: 0 4px 14px rgba(212, 32, 39, 0.3) !important;
}
#oo-app-root .auth-btn:hover {
  box-shadow: 0 6px 20px rgba(212, 32, 39, 0.4) !important;
  transform: translateY(-1px) !important;
}
#oo-app-root .auth-btn:active {
  transform: scale(0.99) !important;
}

/* ─── Registration: Authorization Consent Block ─────────────── */
#oo-app-root .auth-consent-block {
  background: #f8faff !important;
  border: 1.5px solid #e8edf5 !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  margin-bottom: 16px !important;
  text-align: left !important;
}
#oo-app-root .auth-consent-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #374151 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 12px !important;
}
#oo-app-root .auth-consent-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  cursor: pointer !important;
}
#oo-app-root .auth-consent-item:last-child {
  margin-bottom: 0 !important;
}
#oo-app-root .auth-consent-item input[type="checkbox"] {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  margin-top: 2px !important;
  accent-color: #d42027 !important;
  cursor: pointer !important;
  border-radius: 4px !important;
}
#oo-app-root .auth-consent-item span {
  font-size: 12.5px !important;
  color: #4b5563 !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}
#oo-app-root .auth-terms-note {
  font-size: 12px !important;
  color: #9ca3af !important;
  text-align: center !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}
#oo-app-root .auth-terms-note a {
  color: #d42027 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
#oo-app-root .auth-terms-note a:hover {
  text-decoration: underline !important;
}


/* ─── Premium Header top bar & Auto-save panel ───────────────── */
#oo-app-root .portal-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 14px 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
#oo-app-root .portal-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
#oo-app-root .portal-logo {
  font-family: 'Outfit', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  letter-spacing: -.02em !important;
}
#oo-app-root .portal-logo span {
  color: var(--red) !important;
  font-style: italic !important;
}
#oo-app-root .portal-logo-img {
  height: 52px !important;
  max-width: 200px !important;
  object-fit: contain !important;
  display: block !important;
  cursor: pointer !important;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.12)) !important;
}

/* Pulsing Auto-save Indicator */
#oo-app-root .autosave-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 99px !important;
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  transition: opacity 0.3s ease !important;
}
#oo-app-root .autosave-badge.saving .autosave-dot {
  background: #f59e0b !important;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7) !important;
  animation: oo-pulse-saving 1.2s infinite !important;
}
#oo-app-root .autosave-badge.saved .autosave-dot {
  background: #10b981 !important;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7) !important;
  animation: oo-pulse-saved 1.8s infinite !important;
}
#oo-app-root .autosave-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  transition: background-color 0.3s !important;
}

@keyframes oo-pulse-saved {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes oo-pulse-saving {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

#oo-app-root .portal-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
#oo-app-root .portal-user-welcome {
  color: #6b7280 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
#oo-app-root .portal-user-welcome strong {
  color: #111827 !important;
}
#oo-app-root .portal-logout-btn {
  background: transparent !important;
  color: #6b7280 !important;
  border: 1px solid #e5e7eb !important;
  padding: 6px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  font-family: 'Inter', sans-serif !important;
}
#oo-app-root .portal-logout-btn:hover {
  color: #111827 !important;
  border-color: #d1d5db !important;
  background: #f9fafb !important;
}


/* ─── Dashboard Draft Center ────────────────────────────────── */
#oo-app-root .dashboard-viewport {
  background: #f5f5f5 !important;
  min-height: calc(100vh - 65px) !important;
  padding: 48px 24px !important;
}
#oo-app-root .dashboard-container {
  max-width: 900px !important;
  margin: 0 auto !important;
}
#oo-app-root .dashboard-welcome {
  margin-bottom: 32px !important;
}
#oo-app-root .dashboard-welcome h1 {
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(24px, 4vw, 32px) !important;
  font-weight: 800 !important;
  color: #0a0a0a !important;
  letter-spacing: -.02em !important;
  margin-bottom: 6px !important;
}
#oo-app-root .dashboard-welcome p {
  color: #525252 !important;
  font-size: 15px !important;
}

#oo-app-root .drafts-panel {
  background: #fff !important;
  border: 1.5px solid #e5e5e5 !important;
  border-radius: 20px !important;
  padding: 32px !important;
  margin-bottom: 40px !important;
  box-shadow: var(--shadow) !important;
}
#oo-app-root .drafts-panel h2 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0a0a0a !important;
  margin-bottom: 20px !important;
}
#oo-app-root .draft-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
#oo-app-root .draft-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border: 1.5px solid #e5e5e5 !important;
  border-radius: 12px !important;
  padding: 18px 24px !important;
  background: #fdfdfd !important;
  transition: all 0.2s !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
#oo-app-root .draft-row:hover {
  border-color: #0a0a0a !important;
  background: #fff !important;
}
#oo-app-root .draft-info {
  text-align: left !important;
}
#oo-app-root .draft-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0a0a0a !important;
  margin-bottom: 4px !important;
}
#oo-app-root .draft-meta {
  font-size: 12px !important;
  color: #737373 !important;
}
#oo-app-root .draft-actions {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}
#oo-app-root .draft-status-pill {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  color: #047857 !important;
  padding: 4px 10px !important;
  border-radius: 99px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}
#oo-app-root .draft-status-pill.draft {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  color: #b45309 !important;
}

#oo-app-root .draft-btn {
  background: #0a0a0a !important;
  color: #white !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
  font-family: 'Inter', sans-serif !important;
}
#oo-app-root .draft-btn:hover {
  background: var(--red) !important;
}

#oo-app-root .dashboard-divider {
  display: flex !important;
  align-items: center !important;
  margin: 40px 0 !important;
}
#oo-app-root .dashboard-divider::before,
#oo-app-root .dashboard-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1.5px !important;
  background: #e5e5e5 !important;
}
#oo-app-root .dashboard-divider span {
  padding: 0 16px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #a3a3a3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}


/* ─── Chooser Hero ───────────────────────────────────────────── */
#oo-app-root .oo-apply-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #c0181f 100%) !important;
  padding: 56px 24px 48px !important;
  text-align: center !important;
}
#oo-app-root .oo-apply-hero h1 {
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(26px,5vw,42px) !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
  margin-bottom: 14px !important;
}
#oo-app-root .oo-apply-hero h1 i {
  color: #d42027 !important;
  font-style: italic !important;
}
#oo-app-root .oo-apply-hero p {
  color: #a3a3a3 !important;
  font-size: 15.5px !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  line-height: 1.6 !important;
}

/* ─── Choose Grid ────────────────────────────────────────────── */
#oo-app-root .oo-choose-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) !important;
  gap: 24px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 48px 24px !important;
  align-items: stretch !important;
}
#oo-app-root .oo-choose-card {
  background: #fff !important;
  border: 2px solid #d42027 !important;
  border-radius: 20px !important;
  padding: 32px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: border-color .18s,box-shadow .18s,transform .18s !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-shadow: 0 4px 20px rgba(212, 32, 39, 0.15) !important;
  height: 100% !important;
}
#oo-app-root .oo-choose-card:hover {
  box-shadow: 0 8px 32px rgba(212, 32, 39, 0.25) !important;
  transform: translateY(-2px) !important;
}
#oo-app-root .oo-choose-card.featured {
  border: 2px solid #d42027 !important;
  background: #fff !important;
  box-shadow: 0 4px 20px rgba(212, 32, 39, 0.15) !important;
}
#oo-app-root .oo-choose-card .oo-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #f5f5f5 !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  margin-bottom: 18px !important;
}
#oo-app-root .oo-choose-card .oo-badge .oo-dot {
  width: 7px !important;
  height: 7px !important;
  background: #10b981 !important;
  border-radius: 50% !important;
  display: inline-block !important;
}
#oo-app-root .oo-choose-card h3 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  margin-bottom: 10px !important;
  color: #0a0a0a !important;
}
#oo-app-root .oo-choose-card > p {
  font-size: 14px !important;
  color: #525252 !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}
#oo-app-root .oo-choose-card .oo-meta {
  display: flex !important;
  gap: 20px !important;
  padding: 14px 0 !important;
  border-top: 1px solid #e5e5e5 !important;
  border-bottom: 1px solid #e5e5e5 !important;
  margin-bottom: 18px !important;
}
#oo-app-root .oo-choose-card .oo-meta b {
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
#oo-app-root .oo-choose-card .oo-meta small {
  font-size: 11px !important;
  color: #737373 !important;
}
#oo-app-root .oo-choose-card ul {
  list-style: none !important;
  margin-bottom: 24px !important;
  display: inline-block !important;
  text-align: left !important;
}
#oo-app-root .oo-choose-card ul li {
  font-size: 13.5px !important;
  color: #404040 !important;
  padding: 5px 0 5px 20px !important;
  position: relative !important;
}
#oo-app-root .oo-choose-card ul li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  color: #d42027 !important;
  font-weight: 700 !important;
}
#oo-app-root .oo-choose-card .oo-go {
  margin-top: auto !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  padding-top: 16px !important;
}
#oo-app-root .oo-choose-card .oo-go .oo-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border: 1.5px solid #d42027 !important;
  background: #d42027 !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: all .2s !important;
  box-shadow: 0 4px 10px rgba(212,32,39,0.2) !important;
}
#oo-app-root .oo-choose-card .oo-go .oo-btn:hover {
  background: #b5191f !important;
  border-color: #b5191f !important;
  box-shadow: 0 6px 14px rgba(212,32,39,0.3) !important;
  transform: translateY(-1px) !important;
}

/* ─── Shared Form Shell ──────────────────────────────────────── */
#oo-app-root .oo-section { display: none !important; }
#oo-app-root .oo-section.active { display: block !important; }

/* ─── Quick Form Shell ───────────────────────────────────────── */
#oo-app-root .oo-qform-shell {
  padding: 40px 20px 60px !important;
  background: #f5f5f5 !important;
  min-height: calc(100vh - 65px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}
#oo-app-root .oo-qform-card {
  max-width: 640px !important;
  margin: 0 auto !important;
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06),0 12px 40px rgba(0,0,0,.09) !important;
  overflow: hidden !important;
}
#oo-app-root .oo-qform-head {
  background: linear-gradient(135deg, #1a1a2e 0%, #c0181f 100%) !important;
  padding: 32px 36px 24px !important;
}
#oo-app-root .oo-qform-head h2 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.03em !important;
  margin-bottom: 6px !important;
}
#oo-app-root .oo-qform-head h2 i { color: #ffc9cb !important; font-style: italic !important; }
#oo-app-root .oo-qform-head p { color: rgba(255,255,255,0.75) !important; font-size: 14px !important; }

/* Quick Progress Indicator */
#oo-app-root .oo-qprog {
  padding: 24px 36px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  background: #fff !important;
  position: relative !important;
}
#oo-app-root .oo-prog-labels {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}
#oo-app-root .oo-prog-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #a3a3a3 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  transition: color .2s !important;
}
#oo-app-root .oo-prog-label.active { color: #0a0a0a !important; }
#oo-app-root .oo-prog-track-wrapper {
  position: relative !important;
  margin: 28px 0 !important;
}
#oo-app-root .oo-prog-track {
  height: 6px !important;
  background: #e5e7eb !important;
  border-radius: 99px !important;
  position: absolute !important;
  top: 50% !important;
  left: 16px !important;
  right: 16px !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
}
#oo-app-root .oo-prog-fill {
  height: 100% !important;
  background: #d42027 !important;
  border-radius: 99px !important;
  transition: width .3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 25%;
}
#oo-app-root .oo-prog-steps {
  display: flex !important;
  justify-content: space-between !important;
  position: relative !important;
  z-index: 2 !important;
}
#oo-app-root .oo-prog-step {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 3px solid #e5e7eb !important;
  color: #9ca3af !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#oo-app-root .oo-prog-step.active {
  border-color: #d42027 !important;
  color: #d42027 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 0 0 4px rgba(212,32,39,0.15) !important;
}
#oo-app-root .oo-prog-step.done {
  background: #d42027 !important;
  border-color: #d42027 !important;
  color: #fff !important;
}
#oo-app-root .oo-prog-pct {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #737373 !important;
  text-align: right !important;
}
#oo-app-root .oo-req-dynamic {
  color: #ef4444 !important;
  margin-left: 2px !important;
  display: none !important;
}
#oo-app-root .oo-req-dynamic.active {
  display: inline !important;
}

/* Quick Form Body & Fields */
#oo-app-root .oo-qbody { padding: 28px 36px !important; }
#oo-app-root .oo-step-q { display: none !important; }
#oo-app-root .oo-step-q.active { display: block !important; }
#oo-app-root .oo-step-q h3 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  margin-bottom: 4px !important;
  color: #0a0a0a !important;
}
#oo-app-root .oo-step-q > p {
  font-size: 13.5px !important;
  color: #737373 !important;
  margin-bottom: 22px !important;
}
#oo-app-root .oo-mfr {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}
#oo-app-root .oo-mfg {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}
#oo-app-root .oo-mfg label, #oo-app-root .oo-mfr .oo-mfg label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #404040 !important;
  display: block !important;
  margin-bottom: 0 !important;
}
#oo-app-root input.oo-inp,
#oo-app-root select.oo-sel,
#oo-app-root textarea.oo-ta {
  width: 100% !important;
  border: 1.5px solid #d4d4d4 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  color: #0a0a0a !important;
  background: #white !important;
  background-color: #fff !important;
  outline: none !important;
  transition: border-color .15s !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  box-shadow: none !important;
}
#oo-app-root input.oo-inp:focus,
#oo-app-root select.oo-sel:focus,
#oo-app-root textarea.oo-ta:focus {
  border-color: #0a0a0a !important;
}
#oo-app-root textarea.oo-ta {
  resize: vertical !important;
  min-height: 88px !important;
}
#oo-app-root .oo-consent-box {
  background: #f5f5f5 !important;
  border-radius: 10px !important;
  padding: 16px !important;
  font-size: 13px !important;
  color: #525252 !important;
  line-height: 1.6 !important;
  margin-bottom: 18px !important;
}
#oo-app-root .oo-consent-check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  cursor: pointer !important;
}
#oo-app-root .oo-consent-check input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  accent-color: #d42027 !important;
  cursor: pointer !important;
}
#oo-app-root .oo-consent-check span {
  font-size: 13.5px !important;
  color: #404040 !important;
  line-height: 1.5 !important;
}

/* Quick Nav Buttons */
#oo-app-root .oo-qnav {
  padding: 0 36px 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
#oo-app-root .oo-btn-back {
  background: transparent !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #737373 !important;
  cursor: pointer !important;
  padding: 10px 0 !important;
  font-family: 'Inter',sans-serif !important;
}
#oo-app-root .oo-btn-back:hover { color: #0a0a0a !important; }
#oo-app-root .oo-btn-next {
  background: #0a0a0a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: 'Inter',sans-serif !important;
  transition: background .15s !important;
}
#oo-app-root .oo-btn-next:hover { background: #d42027 !important; }
#oo-app-root .oo-btn-next:disabled {
  background: #a3a3a3 !important;
  cursor: not-allowed !important;
}

/* Success panels */
#oo-app-root .oo-qsuccess {
  display: none !important;
  padding: 48px 36px !important;
  text-align: center !important;
}
#oo-app-root .oo-qsuccess.active { display: block !important; }
#oo-app-root .oo-success-icon {
  width: 64px !important;
  height: 64px !important;
  background: #10b981 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 18px !important;
}
#oo-app-root .oo-success-icon svg {
  width: 30px !important;
  height: 30px !important;
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
#oo-app-root .oo-qsuccess h3 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  margin-bottom: 8px !important;
  color: #0a0a0a !important;
}
#oo-app-root .oo-qsuccess p {
  font-size: 14.5px !important;
  color: #737373 !important;
  max-width: 380px !important;
  margin: 0 auto !important;
  line-height: 1.6 !important;
}

/* Dashboard Return buttons */
#oo-app-root .oo-success-back-btn {
  background: #0a0a0a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: 'Inter',sans-serif !important;
  margin-top: 24px !important;
  transition: background-color 0.15s !important;
}
#oo-app-root .oo-success-back-btn:hover {
  background-color: var(--red) !important;
}

/* Banner Error Messages */
#oo-app-root .oo-err {
  display: none !important;
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: #991b1b !important;
  margin: 0 36px 16px !important;
}
#oo-app-root .oo-err.active { display: block !important; }

/* Submitting spinner */
#oo-app-root .oo-btn-next.loading::after {
  content: '' !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid rgba(255,255,255,.4) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: oo-spin .6s linear infinite !important;
  margin-left: 10px !important;
  vertical-align: middle !important;
}
@keyframes oo-spin { to { transform: rotate(360deg); } }


/* ─── Full Application Shell ─────────────────────────────────── */
#oo-app-root .oo-full-shell {
  display: flex !important;
  flex: 1 !important;
  min-height: calc(100vh - 65px) !important;
  width: 100% !important;
  background: #fff !important;
}
#oo-app-root .oo-full-side {
  width: 260px !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
  padding: 32px 0 32px !important;
  display: flex !important;
  flex-direction: column !important;
}
#oo-app-root .oo-full-side-head {
  padding: 0 24px 24px !important;
  border-bottom: 1px solid #e5e7eb !important;
  margin-bottom: 16px !important;
}
#oo-app-root .oo-full-side-eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #d42027 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
#oo-app-root .oo-full-side-head h2 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: -.02em !important;
}
#oo-app-root .oo-full-back-btn {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-family: 'Inter',sans-serif !important;
  margin-bottom: 12px !important;
  transition: color .15s !important;
  text-align: left !important;
}
#oo-app-root .oo-full-back-btn:hover { color: #111827 !important; }
#oo-app-root .oo-full-back-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
#oo-app-root .oo-full-side-list {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0 12px !important;
}
#oo-app-root .oo-full-side-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: left !important;
  font-family: 'Inter',sans-serif !important;
  transition: background .12s, color .12s !important;
  margin-bottom: 2px !important;
}
#oo-app-root .oo-full-side-item:hover { color: #111827 !important; background: #f3f4f6 !important; }
#oo-app-root .oo-full-side-item.active {
  background: #fef2f2 !important;
  color: #d42027 !important;
  font-weight: 600 !important;
}
#oo-app-root .oo-full-side-item .oo-smk {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1.5px solid #d1d5db !important;
  flex-shrink: 0 !important;
}
#oo-app-root .oo-full-side-item.active .oo-smk {
  background: #d42027 !important;
  border-color: #d42027 !important;
}
#oo-app-root .oo-full-side-foot {
  padding: 20px 24px 0 !important;
  font-size: 11.5px !important;
  color: #9ca3af !important;
  line-height: 1.5 !important;
  border-top: 1px solid #e5e7eb !important;
  margin-top: 16px !important;
}

/* Full Main Content Area */
#oo-app-root .oo-full-main {
  flex: 1 !important;
  padding: 40px 48px !important;
  overflow-y: auto !important;
  background: #f9f9f9 !important;
}
#oo-app-root .oo-full-topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 32px !important;
}
#oo-app-root .oo-started {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #737373 !important;
}
#oo-app-root .oo-started .oo-circ {
  width: 8px !important;
  height: 8px !important;
  background: #10b981 !important;
  border-radius: 50% !important;
}
#oo-app-root .oo-progress-dots {
  display: flex !important;
  gap: 5px !important;
}
#oo-app-root .oo-pdot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #e5e5e5 !important;
}
#oo-app-root .oo-pdot.on { background: #d42027 !important; }

/* Full App Form Section & Fields */
#oo-app-root .oo-app-sec { display: none !important; }
#oo-app-root .oo-app-sec.active { display: block !important; }
#oo-app-root .oo-app-sec-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  margin-bottom: 6px !important;
  color: #0a0a0a !important;
  line-height: 1.15 !important;
}
#oo-app-root .oo-pips {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 32px !important;
}
#oo-app-root .oo-pip {
  width: 28px !important;
  height: 3px !important;
  background: #d42027 !important;
  border-radius: 99px !important;
}
#oo-app-root .oo-pip.muted { background: #e5e5e5 !important; }

#oo-app-root .oo-app-q {
  margin-bottom: 22px !important;
}
#oo-app-root .oo-app-q-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #404040 !important;
  margin-bottom: 8px !important;
}
#oo-app-root .oo-req { color: #d42027 !important; }
#oo-app-root .oo-app-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
#oo-app-root .oo-app-row.cols-3 { grid-template-columns: 1fr 1fr 1fr !important; }
#oo-app-root .oo-app-row.cols-4 { grid-template-columns: repeat(4,1fr) !important; }
#oo-app-root .oo-app-choice {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
#oo-app-root .oo-app-choice.cols-3 { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; }
#oo-app-root .oo-app-choice.cols-4 { display: grid !important; grid-template-columns: repeat(4,1fr) !important; }
#oo-app-root .oo-app-opt {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border: 1.5px solid #e5e5e5 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #404040 !important;
  cursor: pointer !important;
  font-family: 'Inter',sans-serif !important;
  transition: border-color .12s,background .12s !important;
  text-align: left !important;
  flex: 1 !important;
  min-width: 120px !important;
}
#oo-app-root .oo-app-opt:hover { border-color: #0a0a0a !important; }
#oo-app-root .oo-app-opt.checked {
  border-color: #d42027 !important;
  background: #fff5f5 !important;
  color: #0a0a0a !important;
  font-weight: 600 !important;
}
#oo-app-root .oo-mk {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1.5px solid #d4d4d4 !important;
  flex-shrink: 0 !important;
}
#oo-app-root .oo-app-opt.checked .oo-mk {
  background: #d42027 !important;
  border-color: #d42027 !important;
}
#oo-app-root .oo-app-help {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  background: #f5f5f5 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 12.5px !important;
  color: #525252 !important;
  line-height: 1.55 !important;
  margin-top: 10px !important;
}
#oo-app-root .oo-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #e5e5e5 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #525252 !important;
  flex-shrink: 0 !important;
}
#oo-app-root .oo-consent-box-full {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  font-size: 13.5px !important;
  color: #525252 !important;
  line-height: 1.65 !important;
  margin-bottom: 20px !important;
}
#oo-app-root .oo-consent-box-full p { margin-bottom: 10px !important; font-size: 14px !important; }
#oo-app-root .oo-consent-box-full p:last-child { margin-bottom: 0 !important; }
#oo-app-root .oo-app-input-icon {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
#oo-app-root .oo-app-input-icon .oo-ic {
  position: absolute !important;
  left: 12px !important;
  background: none !important;
  font-size: 13px !important;
  color: #737373 !important;
  font-style: normal !important;
}
#oo-app-root .oo-app-input-icon input.oo-inp { padding-left: 28px !important; }

/* Full Form Footer Navigation */
#oo-app-root .oo-app-foot {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 24px 0 0 !important;
  margin-top: 20px !important;
  border-top: 1px solid #e5e5e5 !important;
}
#oo-app-root .oo-btn-text {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #737373 !important;
  cursor: pointer !important;
  font-family: 'Inter',sans-serif !important;
}
#oo-app-root .oo-btn-text:hover { color: #0a0a0a !important; }
#oo-app-root .oo-btn-text svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
#oo-app-root .oo-btn-primary {
  background: #d42027 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 26px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: 'Inter',sans-serif !important;
  transition: opacity .15s !important;
}
#oo-app-root .oo-btn-primary:hover { opacity: .88 !important; }
#oo-app-root .oo-btn-submit-full {
  width: 100% !important;
  background: #d42027 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 18px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: 'Inter',sans-serif !important;
  transition: opacity .15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
#oo-app-root .oo-btn-submit-full:hover { opacity: .88 !important; }

/* Full Success Overlay */
#oo-app-root .oo-full-success {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.6) !important;
  z-index: 99999 !important;
  align-items: center !important;
  justify-content: center !important;
}
#oo-app-root .oo-full-success.active { display: flex !important; }
#oo-app-root .oo-full-success-inner {
  background: #fff !important;
  max-width: 500px !important;
  width: 90% !important;
  border-radius: 20px !important;
  padding: 52px 40px !important;
  text-align: center !important;
  box-shadow: 0 40px 100px rgba(0,0,0,.3) !important;
}
#oo-app-root .oo-full-success-inner h2 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  margin: 16px 0 10px !important;
  color: #0a0a0a !important;
}
#oo-app-root .oo-full-success-inner p {
  font-size: 15px !important;
  color: #737373 !important;
  line-height: 1.6 !important;
  max-width: 360px !important;
  margin: 0 auto !important;
}
#oo-app-root .oo-full-success-check {
  width: 72px !important;
  height: 72px !important;
  background: #10b981 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}
#oo-app-root .oo-full-success-check svg {
  width: 32px !important;
  height: 32px !important;
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* ─── Field-level validation errors ─────────────────────────── */
#oo-app-root .oo-field-err {
  color: #ef4444 !important;
  font-size: 12px !important;
  margin-top: 4px !important;
  font-weight: 500 !important;
  display: block !important;
}
#oo-app-root input.oo-inp[style*="ef4444"] {
  box-shadow: 0 0 0 2px rgba(239,68,68,.15) !important;
}

/* ─── Responsive Media Queries ──────────────────────────────── */
@media (max-width: 700px) {
  #oo-app-root .oo-mfr { grid-template-columns: 1fr !important; }
  #oo-app-root .oo-qbody { padding: 20px 20px !important; }
  #oo-app-root .oo-qnav { padding: 0 20px 20px !important; }
  #oo-app-root .oo-qform-head { padding: 24px 20px 18px !important; }
  #oo-app-root .oo-qprog { padding: 16px 20px !important; }
  #oo-app-root .oo-full-shell { flex-direction: column !important; }
  #oo-app-root .oo-full-side { width: 100% !important; }
  #oo-app-root .oo-full-side-list { display: flex !important; flex-wrap: wrap !important; flex-direction: row !important; }
  #oo-app-root .oo-full-side-item { flex: none !important; width: auto !important; }
  #oo-app-root .oo-full-main { padding: 24px 20px !important; }
  #oo-app-root .oo-app-row { grid-template-columns: 1fr !important; }
  #oo-app-root .oo-app-choice.cols-3,
  #oo-app-root .oo-app-choice.cols-4 { grid-template-columns: 1fr 1fr !important; }
  #oo-app-root .oo-app-row.cols-3 { grid-template-columns: 1fr !important; }
  #oo-app-root .portal-header { flex-direction: column !important; gap: 14px !important; text-align: center !important; }
  #oo-app-root .portal-header-right { flex-direction: column !important; gap: 10px !important; }
}