/* User Derma — Mobile-First Native App Styling */

:root {
  --primary-blue: #144f9f;
  --primary-cyan: #25a7e3;
  --accent-light: #e0f2fe;
  --medical-navy: #0f172a;
  --bg-slate: #f8fafc;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #0f172a; /* Dark sleek backdrop on desktop */
  color: #1e293b;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (max-width: 639px) {
  body {
    background-color: #f8fafc;
  }
}

/* Mobile App Shell (Acts as mobile screen container on desktop, full screen on phone) */
.mobile-app-shell {
  width: 100%;
  max-width: 440px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  background-color: #f8fafc;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

@media (min-width: 640px) {
  .mobile-app-shell {
    height: min(920px, calc(100vh - 2rem));
    max-height: calc(100vh - 2rem);
    margin: 1rem auto;
    border-radius: 40px;
    border: 8px solid #1e293b;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
}

.mobile-app-shell > header {
  flex-shrink: 0;
}

.mobile-app-shell > main {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Scanner Viewport */
.scanner-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 3.8;
  max-height: 440px;
  background: #000;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
}

#videoFeed, #capturedCanvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* Mirror for selfie camera */
}

/* Facial Alignment Oval */
.face-guide-oval {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(210px, 64%);
  height: min(290px, 72%);
  border: 2px dashed rgba(37, 167, 227, 0.85);
  border-radius: 50% 50% 45% 45%;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.52);
  transition: all 0.3s ease;
}

.face-guide-oval.ready {
  border-color: #25a7e3;
  border-style: solid;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.45), 0 0 24px rgba(37, 167, 227, 0.6);
}

.face-guide-oval.warning {
  border-color: #f59e0b;
  border-style: dashed;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55), 0 0 16px rgba(245, 158, 11, 0.4);
}

.face-guide-oval.error {
  border-color: #ef4444;
  border-style: solid;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.6), 0 0 20px rgba(239, 68, 68, 0.5);
}

@keyframes shakeViewport {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.shake-error {
  animation: shakeViewport 0.4s ease-in-out;
}

/* Scanning Laser & Holographic Beam Animations */
.scan-laser {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, rgba(37, 167, 227, 0.4) 15%, #25a7e3 50%, rgba(20, 79, 159, 0.8) 85%, transparent 100%);
  box-shadow: 0 0 20px 6px rgba(37, 167, 227, 0.95), 0 0 40px 12px rgba(20, 79, 159, 0.5);
  display: none;
  pointer-events: none;
  z-index: 25;
}

.scan-laser::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(180deg, rgba(37, 167, 227, 0.22) 0%, transparent 100%);
  pointer-events: none;
}

.scanning .scan-laser {
  display: block;
  animation: scanLaserMove 1.4s infinite ease-in-out alternate;
}

@keyframes scanLaserMove {
  0% { top: 6%; opacity: 0.35; }
  50% { opacity: 1; }
  100% { top: 94%; opacity: 0.35; }
}

/* Holographic Matrix Scanlines Overlay */
.scan-mesh-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(37, 167, 227, 0.12) 50%
  ), linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.03),
    rgba(0, 255, 0, 0.01),
    rgba(0, 0, 255, 0.03)
  );
  background-size: 100% 4px, 6px 100%;
  opacity: 0;
  z-index: 23;
  transition: opacity 0.4s ease;
}

.scanning .scan-mesh-overlay,
.scanner-viewport.preview-ready .scan-mesh-overlay {
  opacity: 1;
}

/* Holographic Radial Pulse for Captured Image */
.scanner-viewport.preview-ready #capturedCanvas {
  filter: contrast(1.06) brightness(1.02);
  transition: filter 0.3s ease;
}

.scanner-viewport.scanning #capturedCanvas {
  filter: contrast(1.1) brightness(1.05) saturate(1.15);
}

/* Biometric Radar Sweep Beam */
.radar-sweep-beam {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    rgba(37, 167, 227, 0.35) 0deg,
    rgba(37, 167, 227, 0.08) 40deg,
    transparent 80deg,
    transparent 360deg
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 24;
  display: none;
}

.scanning .radar-sweep-beam {
  display: block;
  animation: radarSweepSpin 2.2s linear infinite;
}

@keyframes radarSweepSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.scanner-viewport.preview-ready {
  box-shadow: 0 0 25px rgba(37, 167, 227, 0.45), 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(37, 167, 227, 0.7);
}

.scanner-viewport.scanning {
  box-shadow: 0 0 35px rgba(37, 167, 227, 0.8), 0 0 70px rgba(20, 79, 159, 0.5);
  border: 2px solid #38bdf8;
}

/* Biometric Facial Landmark Target Nodes */
.biometric-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 22;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.scanning .biometric-grid-overlay,
.scanner-viewport.preview-ready .biometric-grid-overlay {
  opacity: 1;
}

.hud-target-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hud-target-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #25a7e3;
  box-shadow: 0 0 10px #25a7e3, 0 0 18px #25a7e3;
  position: relative;
}

.hud-target-ring {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(37, 167, 227, 0.85);
  border-radius: 50%;
  animation: hudTargetPulse 1.6s infinite cubic-bezier(0.2, 0.8, 0.4, 1);
}

.hud-target-label {
  position: absolute;
  left: 14px;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #38bdf8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  background: rgba(15, 23, 42, 0.8);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

@keyframes hudTargetPulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Biometric HUD Corner Markers */
.hud-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #25a7e3;
  border-style: solid;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(37, 167, 227, 0.5);
}
.hud-top-left { top: 12px; left: 12px; border-width: 3px 0 0 3px; border-radius: 7px 0 0 0; }
.hud-top-right { top: 12px; right: 12px; border-width: 3px 3px 0 0; border-radius: 0 7px 0 0; }
.hud-bottom-left { bottom: 12px; left: 12px; border-width: 0 0 3px 3px; border-radius: 0 0 0 7px; }
.hud-bottom-right { bottom: 12px; right: 12px; border-width: 0 3px 3px 0; border-radius: 0 0 7px 0; }

/* Score Gauge Ring Animation */
.score-circle-svg {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.score-circle-bg {
  stroke: #0c2d5c;
}
.score-circle-bar {
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.5s ease;
  stroke-linecap: round;
}

/* Touch active scaling */
button:active, .tap-card:active {
  transform: scale(0.97);
}

/* Bottom Nav bar (Permanently fixed at bottom of shell) */
.mobile-bottom-nav {
  flex-shrink: 0;
  position: relative;
  z-index: 40;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  padding: 8px 16px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 12px));
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* Clean Custom Scrollbar */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

/* Print Specific Styles */
@media print {
  body {
    background: white !important;
    overflow: visible !important;
    height: auto !important;
  }
  .mobile-app-shell {
    max-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  .mobile-app-shell > main {
    overflow: visible !important;
    height: auto !important;
  }
  header, .mobile-bottom-nav, .no-print, button {
    display: none !important;
  }
  #reportView {
    display: block !important;
  }
  
  /* Print Typography (Enlarged +35% to +45% for A4 Print) */
  #printableReportCard,
  #printableReportCard * {
    color: #000000 !important;
  }
  #printableReportCard .bg-gradient-to-br,
  #printableReportCard .bg-gradient-to-br * {
    color: #ffffff !important;
  }
  #printableReportCard #reportSkinClassBadge,
  #printableReportCard #reportSkinClassBadge * {
    color: #a7f3d0 !important;
  }
  #printableReportCard #reportSkinClassDesc {
    color: #e0f2fe !important;
  }

  /* Completely hide interactive accordion in print */
  #printableReportCard details,
  #printableReportCard summary,
  #printableReportCard .accordion-inner {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #printableReportCard #reportSessionId { font-size: 13.5px !important; font-weight: 800 !important; }
  #printableReportCard #reportTimestamp { font-size: 12px !important; font-weight: 700 !important; }
  #printableReportCard .demo-label { font-size: 11px !important; font-weight: 900 !important; letter-spacing: 0.4px !important; }
  #printableReportCard .demo-val,
  #printableReportCard #reportDoctorName,
  #printableReportCard #reportDemographics,
  #printableReportCard #reportLocation,
  #printableReportCard #reportModelUsed { font-size: 13px !important; font-weight: 900 !important; }
  #printableReportCard #reportOverallScore { font-size: 46px !important; font-weight: 900 !important; }
  #printableReportCard .hero-score-subtext { font-size: 12px !important; font-weight: 800 !important; }
  #printableReportCard .hero-score-badge { font-size: 13px !important; font-weight: 900 !important; padding: 4px 14px !important; }
  #printableReportCard #reportSkinClassBadge { font-size: 15px !important; font-weight: 900 !important; padding: 6px 16px !important; }
  #printableReportCard #reportSkinClassDesc { font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.4 !important; }
  #printableReportCard #reportCategoryLegend span { font-size: 12px !important; font-weight: 900 !important; }
  #printableReportCard .param-section-title,
  #printableReportCard .regional-section-title { font-size: 14px !important; font-weight: 900 !important; }
  #printableReportCard .param-title { font-size: 13px !important; font-weight: 900 !important; }
  #printableReportCard .param-score-val,
  #printableReportCard #paramTextureVal,
  #printableReportCard #paramSebumVal,
  #printableReportCard #paramRednessVal,
  #printableReportCard #paramLinesVal { font-size: 13px !important; font-weight: 900 !important; }
  #printableReportCard .param-status-text,
  #printableReportCard #paramTextureStatus,
  #printableReportCard #paramSebumStatus,
  #printableReportCard #paramRednessStatus,
  #printableReportCard #paramLinesStatus { font-size: 12px !important; font-weight: 800 !important; }
  #printableReportCard .param-badge-tag,
  #printableReportCard #paramTextureBadge,
  #printableReportCard #paramSebumBadge,
  #printableReportCard #paramRednessBadge,
  #printableReportCard #paramLinesBadge { font-size: 11px !important; font-weight: 900 !important; padding: 2px 8px !important; }
  #printableReportCard .param-range-ref,
  #printableReportCard .param-range-ref span { font-size: 10px !important; font-weight: 800 !important; }
  #printableReportCard .regional-card-box { font-size: 12px !important; padding: 8px 12px !important; }
  #printableReportCard .regional-card-box strong { font-size: 12.5px !important; font-weight: 900 !important; }
  #printableReportCard #obsTzone,
  #printableReportCard #obsCheeks,
  #printableReportCard #obsForehead { font-size: 12px !important; font-weight: 700 !important; }
  #printableReportCard .report-footer-note { font-size: 11px !important; font-weight: 900 !important; padding-top: 10px !important; }
}

/* ========================================================
   SCREEN REPORT CARD: HIGH-CONTRAST PURE BLACK TEXT
   (Clean compact mobile fonts on screen, zero grey)
   ======================================================== */
#printableReportCard {
  color: #000000 !important;
}

#printableReportCard .text-slate-900,
#printableReportCard .text-slate-800,
#printableReportCard .text-slate-700,
#printableReportCard .text-slate-600,
#printableReportCard .text-slate-500,
#printableReportCard .text-slate-400,
#printableReportCard .text-gray-900,
#printableReportCard .text-gray-800,
#printableReportCard .text-gray-700,
#printableReportCard .text-gray-600,
#printableReportCard .text-gray-500,
#printableReportCard .text-gray-400 {
  color: #000000 !important;
}

#printableReportCard strong,
#printableReportCard b {
  color: #000000 !important;
  font-weight: 800 !important;
}

#printableReportCard #reportSessionId,
#printableReportCard #reportTimestamp,
#printableReportCard #reportDoctorName,
#printableReportCard #reportDemographics,
#printableReportCard #reportLocation,
#printableReportCard #reportModelUsed,
#printableReportCard #paramTextureVal,
#printableReportCard #paramTextureStatus,
#printableReportCard #paramSebumVal,
#printableReportCard #paramSebumStatus,
#printableReportCard #paramRednessVal,
#printableReportCard #paramRednessStatus,
#printableReportCard #paramLinesVal,
#printableReportCard #paramLinesStatus,
#printableReportCard #obsTzone,
#printableReportCard #obsCheeks,
#printableReportCard #obsForehead {
  color: #000000 !important;
}

/* ========================================================
   4-TIER CLINICAL RATING PALETTE (MATCHING REFERENCE IMAGE)
   - Very good: Soft Mint Green (#d1f2d9) / Dark Green (#0e623b)
   - Good: Soft Cream Yellow (#fef3c7) / Warm Olive (#713f12)
   - Average: Soft Peach (#fed7aa) / Deep Amber (#7c2d12)
   - Below average: Soft Pink (#fce7f3) / Maroon (#881337)
   ======================================================== */
.tier-very-good,
#printableReportCard .tier-very-good {
  background-color: #d1f2d9 !important;
  color: #0e623b !important;
  border-color: #a3e6b8 !important;
}
.tier-good,
#printableReportCard .tier-good {
  background-color: #fef3c7 !important;
  color: #713f12 !important;
  border-color: #fde68a !important;
}
.tier-average,
#printableReportCard .tier-average {
  background-color: #fed7aa !important;
  color: #7c2d12 !important;
  border-color: #fdba74 !important;
}
.tier-below-average,
#printableReportCard .tier-below-average {
  background-color: #fce7f3 !important;
  color: #881337 !important;
  border-color: #fbcfe8 !important;
}

/* ========================================================
   PDF EXPORT MODE ONLY: +35% to +45% ENLARGED TYPOGRAPHY
   (Applied dynamically only while generating PDF download)
   ======================================================== */
#printableReportCard.pdf-export-mode,
#printableReportCard.pdf-export-mode * {
  color: #000000 !important;
  box-sizing: border-box !important;
}

/* Maintain proper contrast for the hero gauge container in PDF export */
#printableReportCard.pdf-export-mode .bg-gradient-to-br,
#printableReportCard.pdf-export-mode .bg-gradient-to-br * {
  color: #ffffff !important;
}
#printableReportCard.pdf-export-mode #reportSkinClassBadge,
#printableReportCard.pdf-export-mode #reportSkinClassBadge * {
  color: #a7f3d0 !important;
}
#printableReportCard.pdf-export-mode #reportSkinClassDesc {
  color: #e0f2fe !important;
}

/* COMPLETELY HIDE INTERACTIVE ACCORDION IN PDF EXPORT
   Fixes html2canvas height calculation bug and prevents text collision */
#printableReportCard.pdf-export-mode details,
#printableReportCard.pdf-export-mode summary,
#printableReportCard.pdf-export-mode .accordion-inner {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* PDF Header Typography */
#printableReportCard.pdf-export-mode #reportSessionId {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}
#printableReportCard.pdf-export-mode #reportTimestamp {
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* PDF Demographics Strip */
#printableReportCard.pdf-export-mode .report-demo-strip {
  padding: 10px 12px !important;
  gap: 8px !important;
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}
#printableReportCard.pdf-export-mode .demo-label {
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 2px !important;
}
#printableReportCard.pdf-export-mode .demo-val,
#printableReportCard.pdf-export-mode #reportDoctorName,
#printableReportCard.pdf-export-mode #reportDemographics,
#printableReportCard.pdf-export-mode #reportLocation,
#printableReportCard.pdf-export-mode #reportModelUsed {
  font-size: 13px !important;
  font-weight: 900 !important;
}

/* PDF Moisture Hero Gauge */
#printableReportCard.pdf-export-mode #reportOverallScore {
  font-size: 46px !important;
  font-weight: 900 !important;
}
#printableReportCard.pdf-export-mode .hero-score-subtext {
  font-size: 12px !important;
  font-weight: 800 !important;
}
#printableReportCard.pdf-export-mode .hero-score-badge {
  font-size: 13px !important;
  font-weight: 900 !important;
  padding: 4px 14px !important;
}
#printableReportCard.pdf-export-mode #reportSkinClassBadge {
  font-size: 15px !important;
  font-weight: 900 !important;
  padding: 6px 16px !important;
}
#printableReportCard.pdf-export-mode #reportSkinClassDesc {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
#printableReportCard.pdf-export-mode #reportCategoryLegend span {
  font-size: 12px !important;
  font-weight: 900 !important;
}

/* PDF Section Titles */
#printableReportCard.pdf-export-mode .param-section-title,
#printableReportCard.pdf-export-mode .regional-section-title {
  font-size: 14px !important;
  font-weight: 900 !important;
}

/* PDF Parameter Cards */
#printableReportCard.pdf-export-mode .param-card {
  padding: 10px 12px !important;
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}
#printableReportCard.pdf-export-mode .param-title {
  font-size: 13px !important;
  font-weight: 900 !important;
}
#printableReportCard.pdf-export-mode .param-score-val,
#printableReportCard.pdf-export-mode #paramTextureVal,
#printableReportCard.pdf-export-mode #paramSebumVal,
#printableReportCard.pdf-export-mode #paramRednessVal,
#printableReportCard.pdf-export-mode #paramLinesVal {
  font-size: 13px !important;
  font-weight: 900 !important;
}
#printableReportCard.pdf-export-mode .param-status-text,
#printableReportCard.pdf-export-mode #paramTextureStatus,
#printableReportCard.pdf-export-mode #paramSebumStatus,
#printableReportCard.pdf-export-mode #paramRednessStatus,
#printableReportCard.pdf-export-mode #paramLinesStatus {
  font-size: 12px !important;
  font-weight: 800 !important;
}
#printableReportCard.pdf-export-mode .param-badge-tag,
#printableReportCard.pdf-export-mode #paramTextureBadge,
#printableReportCard.pdf-export-mode #paramSebumBadge,
#printableReportCard.pdf-export-mode #paramRednessBadge,
#printableReportCard.pdf-export-mode #paramLinesBadge {
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 2px 8px !important;
}
#printableReportCard.pdf-export-mode .param-range-ref {
  font-size: 10px !important;
  font-weight: 800 !important;
  border-top: 1px solid #cbd5e1 !important;
}
#printableReportCard.pdf-export-mode .param-range-ref span {
  font-size: 10px !important;
  font-weight: 800 !important;
}

/* PDF Regional Breakdown Boxes */
#printableReportCard.pdf-export-mode .regional-card-box {
  font-size: 12px !important;
  padding: 8px 12px !important;
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  line-height: 1.4 !important;
}
#printableReportCard.pdf-export-mode .regional-card-box strong {
  font-size: 12.5px !important;
  font-weight: 900 !important;
}
#printableReportCard.pdf-export-mode #obsTzone,
#printableReportCard.pdf-export-mode #obsCheeks,
#printableReportCard.pdf-export-mode #obsForehead {
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* PDF Footer Note */
#printableReportCard.pdf-export-mode .report-footer-note {
  font-size: 11px !important;
  font-weight: 900 !important;
  padding-top: 10px !important;
  border-top: 1px solid #cbd5e1 !important;
}