/* ============================================
   Spiky.ai Seed Round Data Room - Styles
   ============================================ */

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

/* ---------- CSS Variables ---------- */
:root {
  --primary: #D4652E;
  --primary-light: #E8713A;
  --primary-dark: #B5501E;
  --accent: #D4652E;
  --accent-light: #E8713A;
  --sidebar-bg: #0f0f1a;
  --sidebar-hover: rgba(255,255,255,0.04);
  --sidebar-active: rgba(212,101,46,0.12);
  --content-bg: #f8f9fc;
  --card-bg: #ffffff;
  --text-primary: #1a1a2e;
  --text-secondary: #6b7280;
  --text-light: #9ca3af;
  --text-white: #f1f1f6;
  --border: #e5e7eb;
  --border-light: #f3f4f6;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --gradient: linear-gradient(135deg, #D4652E 0%, #D4652E 100%);
  --gradient-dark: linear-gradient(135deg, #B5501E 0%, #B5501E 100%);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --transition: all 0.2s ease;
  --sidebar-width: 280px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', 'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--content-bg);
  color: var(--text-primary);
  line-height: 1.6;
  overflow: hidden;
  height: 100vh;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ---------- Content Protection ---------- */
@media print {
  body, html {
    display: none !important;
    visibility: hidden !important;
  }
}

.viewer-content {
  position: relative;
}

.view-only-badge {
  opacity: 0.6;
  cursor: default !important;
  pointer-events: none;
  font-size: 0.75rem;
}

.btn-viewonly {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-secondary, #6b7280);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-weight: 600;
  cursor: default;
}

/* ---------- Auth Gate / Login ---------- */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f0f1a;
  overflow: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Animated gradient mesh background */
.auth-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(212,101,46,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(232,113,58,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 60% 80%, rgba(181,80,30,0.3) 0%, transparent 60%),
    radial-gradient(ellipse 70% 40% at 10% 90%, rgba(212,101,46,0.2) 0%, transparent 50%);
  animation: meshShift 12s ease-in-out infinite alternate;
}

@keyframes meshShift {
  0% { transform: scale(1) translate(0, 0); }
  33% { transform: scale(1.05) translate(-2%, 1%); }
  66% { transform: scale(0.98) translate(1%, -1%); }
  100% { transform: scale(1.02) translate(-1%, 2%); }
}

/* Floating geometric shapes (Spiky diamond motif) */
.auth-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122 103' fill='none' opacity='0.04'%3E%3Cpath d='M60.7434 103H60.7318C60.3397 103 59.9477 102.949 59.5617 102.852C59.1813 102.749 58.813 102.606 58.4791 102.411L2.27309 71.0274C1.09713 70.37 0.283903 69.2326 0.0615823 67.9235C-0.160738 66.62 0.225397 65.2826 1.11468 64.2881L57.2857 1.56061C57.912 0.93179 58.3329 0.64025 58.7837 0.434455C59.462 0.160062 59.8424 0.068598 60.24 0.0285826C60.404 0.011433 60.5679 0 60.7318 0C60.9073 0 61.0829 0.011433 61.2523 0.0285826C61.5979 0.068598 61.9252 0.142913 62.2414 0.251526C62.3875 0.302975 62.5276 0.36014 62.6683 0.423022C63.1246 0.63453 63.546 0.926075 63.9204 1.28622L120.343 64.282C121.232 65.2765 121.624 66.6144 121.396 67.918C121.174 69.221 120.36 70.3645 119.184 71.0218L63.0371 102.371C62.6506 102.589 62.2762 102.743 61.8725 102.845C61.4921 102.943 61.1061 102.988 60.7257 102.988L60.7434 103Z' fill='white'/%3E%3C/svg%3E");
  background-size: 80px 67px;
  background-repeat: repeat;
  animation: patternDrift 30s linear infinite;
  pointer-events: none;
}

@keyframes patternDrift {
  0% { background-position: 0 0; }
  100% { background-position: 80px 134px; }
}

/* Floating orbs */
.auth-container::before {
  content: '';
  position: fixed;
  top: 10%;
  right: 8%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(212,101,46,0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: floatOrb1 8s ease-in-out infinite;
  pointer-events: none;
}

.auth-container::after {
  content: '';
  position: fixed;
  bottom: 5%;
  left: 5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(232,113,58,0.1) 0%, transparent 70%);
  border-radius: 50%;
  animation: floatOrb2 10s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatOrb1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 20px) scale(1.1); }
}

@keyframes floatOrb2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(25px, -30px) scale(0.9); }
}

.auth-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.auth-container {
  width: 100%;
  max-width: 440px;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.auth-brand {
  text-align: center;
  margin-bottom: 40px;
}

.auth-brand .logo-img {
  height: 44px;
  width: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 2px 8px rgba(212,101,46,0.3));
}

.auth-brand .tagline {
  color: rgba(255,255,255,0.45);
  font-size: 0.8125rem;
  margin-top: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(40px) saturate(1.2);
  -webkit-backdrop-filter: blur(40px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 44px 40px;
  box-shadow:
    0 25px 60px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 1px 0 rgba(255,255,255,0.08) inset;
  position: relative;
  overflow: hidden;
}

/* Subtle glow at top of card */
.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,101,46,0.5), transparent);
}

.auth-card h2 {
  color: var(--text-white);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.auth-card p {
  color: rgba(255,255,255,0.45);
  font-size: 0.875rem;
  margin-bottom: 32px;
  line-height: 1.6;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: rgba(255,255,255,0.6);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 8px;
}

.form-group input {
  width: 100%;
  padding: 13px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--text-white);
  font-size: 0.9375rem;
  font-family: inherit;
  transition: all 0.25s ease;
  outline: none;
}

.form-group input::placeholder {
  color: rgba(255,255,255,0.25);
}

.form-group input:focus {
  border-color: rgba(212,101,46,0.6);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 3px rgba(212,101,46,0.15), 0 0 20px rgba(212,101,46,0.1);
}

.btn-primary {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #D4652E 0%, #E8713A 50%, #D4652E 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212,101,46,0.4), 0 0 40px rgba(212,101,46,0.15);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.auth-footer {
  text-align: center;
  margin-top: 28px;
  color: rgba(255,255,255,0.3);
  font-size: 0.75rem;
}

.auth-footer svg {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  margin-right: 4px;
  fill: rgba(255,255,255,0.3);
}

/* Floating decorative diamonds */
.auth-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.deco-diamond {
  position: absolute;
  color: rgba(212,101,46,0.06);
}

.deco-1 {
  width: 180px;
  top: 5%;
  right: 8%;
  animation: decoFloat1 15s ease-in-out infinite;
  color: rgba(212,101,46,0.07);
}

.deco-2 {
  width: 100px;
  top: 60%;
  left: 5%;
  animation: decoFloat2 18s ease-in-out infinite;
  color: rgba(232,113,58,0.05);
}

.deco-3 {
  width: 60px;
  bottom: 15%;
  right: 15%;
  animation: decoFloat3 12s ease-in-out infinite;
  color: rgba(212,101,46,0.08);
}

.deco-4 {
  width: 140px;
  top: 25%;
  left: 12%;
  animation: decoFloat4 20s ease-in-out infinite;
  color: rgba(181,80,30,0.04);
}

.deco-5 {
  width: 50px;
  bottom: 30%;
  left: 30%;
  animation: decoFloat5 14s ease-in-out infinite;
  color: rgba(232,113,58,0.06);
}

@keyframes decoFloat1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-15px, 20px) rotate(5deg); }
  50% { transform: translate(10px, -10px) rotate(-3deg); }
  75% { transform: translate(-5px, 15px) rotate(2deg); }
}

@keyframes decoFloat2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(20px, -15px) rotate(-8deg); }
  66% { transform: translate(-10px, 10px) rotate(5deg); }
}

@keyframes decoFloat3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(-20px, -15px) rotate(10deg) scale(1.1); }
}

@keyframes decoFloat4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(10px, 15px) rotate(-4deg); }
  50% { transform: translate(-15px, -5px) rotate(6deg); }
  75% { transform: translate(5px, -10px) rotate(-2deg); }
}

@keyframes decoFloat5 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(15px, 10px) rotate(-12deg) scale(0.9); }
}

/* ---------- Main Layout ---------- */
.app-layout {
  display: flex;
  height: 100vh;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.app-layout.visible {
  opacity: 1;
}

/* ---------- Header ---------- */
.app-header {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: 64px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border-bottom: 1px solid rgba(229,231,235,0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-left .breadcrumb {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.header-left .breadcrumb strong {
  color: var(--text-primary);
  font-weight: 600;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--text-secondary);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.8125rem;
  font-weight: 600;
}

.user-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
}

.btn-logout {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
}

.btn-logout:hover {
  background: var(--content-bg);
  color: var(--danger);
  border-color: var(--danger);
}

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: linear-gradient(180deg, #0f0f1a 0%, #121220 50%, #0d0d18 100%);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: transform 0.3s ease;
  border-right: 1px solid rgba(255,255,255,0.04);
}

/* Subtle gradient accent along the right edge */
.sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(212,101,46,0.2) 30%, rgba(212,101,46,0.3) 50%, rgba(212,101,46,0.2) 70%, transparent 100%);
  pointer-events: none;
}

.sidebar-header {
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
}

/* Warm glow behind logo */
.sidebar-header::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 24px;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(212,101,46,0.12) 0%, transparent 70%);
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.sidebar-logo-img {
  height: 28px;
  width: auto;
  display: block;
  position: relative;
  z-index: 1;
}

.sidebar-subtitle {
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 6px;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

.nav-section-label {
  padding: 16px 24px 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  color: rgba(255,255,255,0.6);
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.nav-item:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.04);
}

.nav-item.active {
  color: white;
  background: linear-gradient(90deg, rgba(212,101,46,0.15) 0%, rgba(212,101,46,0.05) 100%);
  font-weight: 500;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: linear-gradient(180deg, #E8713A, #D4652E);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(212,101,46,0.4);
}

.nav-item .icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-item.active .icon {
  opacity: 1;
}

.nav-item .badge {
  margin-left: auto;
  font-size: 0.6875rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(212,101,46,0.2);
  color: var(--primary-light);
  font-weight: 500;
}

.sidebar-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
}

.sidebar-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,101,46,0.15), transparent);
}

.sidebar-footer .confidential {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.25);
}

.sidebar-footer .confidential svg {
  width: 14px;
  height: 14px;
  fill: rgba(212,101,46,0.4);
}

/* ---------- Content Area ---------- */
.content-area {
  flex: 1;
  margin-left: var(--sidebar-width);
  margin-top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 32px;
  background: linear-gradient(180deg, #f6f7fb 0%, #f8f9fc 40%, #fafbfd 100%);
}

/* ---------- Welcome / Overview Section ---------- */
.welcome-section {
  margin-bottom: 32px;
}

.welcome-section h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.welcome-section p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  max-width: 600px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.stat-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.stat-card .stat-label {
  font-size: 0.75rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 4px;
  letter-spacing: -0.02em;
}

.stat-card .stat-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ---------- Document Section ---------- */
.doc-section {
  display: none;
}

.doc-section.active {
  display: block;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.section-header h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.section-header .section-desc {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-top: 4px;
}

/* ---------- Document Cards ---------- */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.doc-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.doc-card:hover {
  border-color: rgba(212,101,46,0.3);
  box-shadow: 0 8px 24px rgba(212,101,46,0.08), 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-3px);
}

.doc-card:active {
  transform: translateY(-1px);
}

.doc-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.doc-icon.pdf {
  background: #fef2f2;
  color: #dc2626;
}

.doc-icon.xlsx {
  background: #f0fdf4;
  color: #16a34a;
}

.doc-icon.docx {
  background: #eff6ff;
  color: #2563eb;
}

.doc-icon.html {
  background: #faf5ff;
  color: #7c3aed;
}

.doc-icon.video {
  background: #FDF6F0;
  color: #D4652E;
}

.doc-info {
  flex: 1;
  min-width: 0;
}

.doc-info .doc-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.4;
}

.doc-info .doc-meta {
  font-size: 0.75rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 12px;
}

.doc-info .doc-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ---------- Document Viewer ---------- */
.doc-viewer {
  display: none;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  height: calc(100vh - 180px);
  min-height: 500px;
}

.doc-viewer.active {
  display: flex;
  flex-direction: column;
}

.viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fafbfe 0%, #ffffff 100%);
}

.viewer-toolbar .viewer-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.viewer-toolbar .viewer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-icon {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-icon:hover {
  background: var(--content-bg);
  color: var(--primary);
  border-color: var(--primary-light);
}

.viewer-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.viewer-content iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Download view for non-embeddable files */
.download-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 48px;
  text-align: center;
}

.download-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 24px;
}

.download-view h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.download-view p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 24px;
  max-width: 400px;
}

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  background: var(--gradient);
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
}

.btn-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212,101,46,0.4);
}

/* ---------- HTML Content Viewer ---------- */
.html-viewer {
  padding: 0;
  height: 100%;
}

.html-viewer iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ---------- Admin Analytics Panel ---------- */
.admin-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}

.admin-panel.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-content {
  width: 90%;
  max-width: 1000px;
  max-height: 85vh;
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #0f0f1a 0%, #1a1525 50%, #201828 100%);
  position: relative;
  overflow: hidden;
}

.admin-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,101,46,0.4), transparent);
}

.admin-header h2 {
  color: white;
  font-size: 1.125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-header .admin-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-admin {
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.1);
  color: white;
  font-size: 0.8125rem;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-admin:hover {
  background: rgba(255,255,255,0.2);
}

.btn-close-admin {
  padding: 6px 10px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: 1.125rem;
  cursor: pointer;
  transition: var(--transition);
}

.btn-close-admin:hover {
  background: rgba(255,255,255,0.2);
}

.admin-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
}

.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  background: var(--content-bg);
  border-radius: var(--radius);
  padding: 4px;
}

.admin-tab {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.admin-tab.active {
  background: white;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.admin-tab-content {
  display: none;
}

.admin-tab-content.active {
  display: block;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  background: var(--content-bg);
  position: sticky;
  top: 0;
}

.admin-table td {
  padding: 12px 16px;
  font-size: 0.8125rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
}

.admin-table tr:hover td {
  background: var(--content-bg);
}

.admin-table .email-cell {
  color: var(--accent);
  font-weight: 500;
}

.admin-table .time-cell {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.admin-table .duration-cell {
  font-weight: 600;
  color: var(--primary);
}

.admin-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-light);
  font-size: 0.875rem;
}

/* ---------- NDA / Confidential Banner ---------- */
.confidential-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  margin-bottom: 24px;
  font-size: 0.8125rem;
  color: #92400e;
}

.confidential-banner svg {
  width: 16px;
  height: 16px;
  fill: #d97706;
  flex-shrink: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .doc-grid {
    grid-template-columns: 1fr;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 5px 0 20px rgba(0,0,0,0.3);
  }

  .app-header {
    left: 0;
  }

  .content-area {
    margin-left: 0;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 150;
  }

  .mobile-overlay.active {
    display: block;
  }

  .stats-row {
    grid-template-columns: 1fr;
  }

  .doc-viewer {
    height: calc(100vh - 200px);
    min-height: 400px;
  }

  .admin-content {
    width: 95%;
    max-height: 90vh;
  }

  .user-name {
    display: none;
  }
}

/* ---------- Animations ---------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

.slide-in {
  animation: slideIn 0.3s ease forwards;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pulse {
  animation: pulse 2s infinite;
}

/* ---------- Scrollbar ---------- */
.content-area::-webkit-scrollbar {
  width: 6px;
}

.content-area::-webkit-scrollbar-track {
  background: transparent;
}

.content-area::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.content-area::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ---------- Utility ---------- */
.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

/* ---------- Overview Hero ---------- */
.overview-hero {
  background: linear-gradient(135deg, #0f0f1a 0%, #1a1020 30%, #251520 60%, #1a1020 100%);
  border-radius: 20px;
  padding: 52px 44px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212,101,46,0.15);
}

/* Gradient mesh glow */
.overview-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 80% at 75% 20%, rgba(212,101,46,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 20% 70%, rgba(181,80,30,0.2) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(232,113,58,0.08) 0%, transparent 60%);
  animation: heroGlow 8s ease-in-out infinite alternate;
}

@keyframes heroGlow {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.85; }
}

/* Spiky diamond pattern overlay */
.overview-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122 103' fill='none' opacity='0.03'%3E%3Cpath d='M60.7434 103H60.7318C60.3397 103 59.9477 102.949 59.5617 102.852C59.1813 102.749 58.813 102.606 58.4791 102.411L2.27309 71.0274C1.09713 70.37 0.283903 69.2326 0.0615823 67.9235C-0.160738 66.62 0.225397 65.2826 1.11468 64.2881L57.2857 1.56061C57.912 0.93179 58.3329 0.64025 58.7837 0.434455C59.462 0.160062 59.8424 0.068598 60.24 0.0285826C60.404 0.011433 60.5679 0 60.7318 0C60.9073 0 61.0829 0.011433 61.2523 0.0285826C61.5979 0.068598 61.9252 0.142913 62.2414 0.251526C62.3875 0.302975 62.5276 0.36014 62.6683 0.423022C63.1246 0.63453 63.546 0.926075 63.9204 1.28622L120.343 64.282C121.232 65.2765 121.624 66.6144 121.396 67.918C121.174 69.221 120.36 70.3645 119.184 71.0218L63.0371 102.371C62.6506 102.589 62.2762 102.743 61.8725 102.845C61.4921 102.943 61.1061 102.988 60.7257 102.988L60.7434 103Z' fill='white'/%3E%3C/svg%3E");
  background-size: 60px 50px;
  background-repeat: repeat;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(212,101,46,0.15);
  border: 1px solid rgba(212,101,46,0.3);
  color: #E8A87C;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 18px;
  backdrop-filter: blur(8px);
}

.overview-hero h1 {
  font-size: 2.125rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.hero-subtitle {
  color: rgba(255,255,255,0.5);
  font-size: 0.9375rem;
  max-width: 550px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.hero-actions {
  display: flex;
  gap: 12px;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: linear-gradient(135deg, #D4652E 0%, #E8713A 100%);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: left 0.5s ease;
}

.btn-cta:hover::before {
  left: 100%;
}

.btn-cta svg {
  width: 18px;
  height: 18px;
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212,101,46,0.4), 0 0 40px rgba(212,101,46,0.15);
}

/* ---------- Overview Metrics Row ---------- */
.overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.metric-card-v2 {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.metric-card-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.metric-card-v2:hover {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(212,101,46,0.1);
  transform: translateY(-3px);
}

.metric-card-v2:hover::before {
  opacity: 1;
}

.mc-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mc-icon svg {
  width: 22px;
  height: 22px;
}

.mc-value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.mc-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 2px;
}

/* ---------- CTA Strip ---------- */
.overview-cta-strip {
  margin-bottom: 32px;
}

.cta-strip-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}

.cta-strip-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.cta-strip-text strong {
  color: var(--text-primary);
}

.btn-cta-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--gradient);
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-cta-sm svg {
  width: 14px;
  height: 14px;
}

.btn-cta-sm:hover {
  background: var(--gradient-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212,101,46,0.3);
}

/* ---------- MRR Dashboard Styles ---------- */
.mrr-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.mrr-metric {
  background: linear-gradient(135deg, #F5F3FF 0%, #EFF6FF 100%);
  border: 1px solid #E0E7FF;
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
}

.mrr-metric-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #D4652E;
  letter-spacing: -0.02em;
}

.mrr-metric-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 4px;
}

.mrr-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 2px solid var(--border);
}

.mrr-tab {
  padding: 10px 20px;
  border: none;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition);
  font-family: inherit;
}

.mrr-tab:hover {
  color: var(--text-primary);
}

.mrr-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.mrr-tab-content {
  display: none;
  padding-top: 24px;
}

.mrr-tab-content.active {
  display: block;
}

.mrr-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.mrr-table {
  width: 100%;
  border-collapse: collapse;
}

.mrr-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #D4652E;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #F5F3FF 0%, #EFF6FF 100%);
  border-bottom: 1px solid #E0E7FF;
  white-space: nowrap;
}

.mrr-table td {
  padding: 10px 16px;
  font-size: 0.8125rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

.mrr-table tbody tr:hover td {
  background: #FAFBFF;
}

.mrr-row-current td {
  background: #FEF3C7 !important;
  font-weight: 600;
}

.mrr-row-projected td {
  color: var(--text-secondary);
  font-style: italic;
}

.mrr-note {
  font-size: 0.75rem;
  color: var(--text-light);
  margin-top: 12px;
  padding: 10px 16px;
  background: var(--content-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}

.mrr-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.mrr-summary-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}

.mrr-summary-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
}

.mrr-summary-label {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 2px;
}

/* Customer segment tags */
.segment-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 600;
}

.segment-tag.enterprise {
  background: #EDE9FE;
  color: #B5501E;
}

.segment-tag.midmarket {
  background: #DBEAFE;
  color: #1D4ED8;
}

.segment-tag.smb {
  background: #D1FAE5;
  color: #047857;
}

.status-active {
  color: #059669;
  font-weight: 600;
  font-size: 0.75rem;
}

.status-expanding {
  color: #D97706;
  font-weight: 600;
  font-size: 0.75rem;
}

.customer-name {
  font-weight: 500;
  color: var(--text-primary);
}

/* MRR Bar Chart */
.mrr-chart-container {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.mrr-chart-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.mrr-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 200px;
  padding-bottom: 24px;
}

.mrr-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.mrr-bar-value {
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.mrr-bar {
  width: 100%;
  max-width: 40px;
  background: var(--gradient);
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
}

.mrr-bar.projected {
  background: linear-gradient(135deg, rgba(212,101,46,0.3), rgba(212,101,46,0.3));
  border: 1px dashed var(--primary-light);
}

.mrr-bar-label {
  font-size: 0.625rem;
  color: var(--text-light);
  font-weight: 500;
}

/* ---------- Admin Login Styles ---------- */
.admin-login-container {
  text-align: center;
  padding: 48px 32px;
  max-width: 400px;
  margin: 0 auto;
}

.admin-login-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #F5F3FF, #EFF6FF);
  border: 1px solid #E0E7FF;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--primary);
}

.admin-login-icon svg {
  width: 28px;
  height: 28px;
}

.admin-login-container h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.admin-login-container p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.admin-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-family: inherit;
  outline: none;
  transition: var(--transition);
  margin-bottom: 16px;
}

.admin-input:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(212,101,46,0.12);
}

.btn-admin-login {
  width: 100%;
  padding: 12px 24px;
  background: var(--gradient);
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
}

.btn-admin-login:hover {
  background: var(--gradient-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212,101,46,0.3);
}

.admin-login-error {
  color: var(--danger);
  font-size: 0.8125rem;
  margin-top: 12px;
  font-weight: 500;
}

/* Admin Overview Grid */
.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.admin-stat-card {
  background: linear-gradient(135deg, #F5F3FF 0%, #EFF6FF 100%);
  border: 1px solid #E0E7FF;
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
}

.admin-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #D4652E;
}

.admin-stat-label {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- Responsive overrides for new components ---------- */
@media (max-width: 1024px) {
  .overview-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .mrr-metrics-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .mrr-summary-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .overview-hero {
    padding: 32px 24px;
  }

  .overview-hero h1 {
    font-size: 1.5rem;
  }

  .overview-metrics {
    grid-template-columns: 1fr;
  }

  .cta-strip-content {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .mrr-metrics-row {
    grid-template-columns: 1fr 1fr;
  }

  .mrr-summary-row {
    grid-template-columns: 1fr 1fr;
  }

  .admin-overview-grid {
    grid-template-columns: 1fr 1fr;
  }
}