/* ============================================
   MOTIVE FLIP — DESIGN SYSTEM VARIABLES
   "Where Learning Speaks Through You"
   ============================================ */

/* --- PHOSPHOR ICONS (global, replaces emoji) — https://phosphoricons.com --- */
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css');
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css');
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css');
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/duotone/style.css');

/* --- RTL (Arabic) overrides — scoped under [dir="rtl"], inert on English pages --- */
@import url('rtl-overrides.css');

/* --- READEX PRO (self-hosted static faces, Latin + Arabic) --- */
@font-face { font-family:'Readex Pro'; font-style:normal; font-weight:200; font-display:swap; src:url('fonts/ReadexPro-ExtraLight.ttf') format('truetype'); }
@font-face { font-family:'Readex Pro'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/ReadexPro-Light.ttf') format('truetype'); }
@font-face { font-family:'Readex Pro'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/ReadexPro-Regular.ttf') format('truetype'); }
@font-face { font-family:'Readex Pro'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ReadexPro-Medium.ttf') format('truetype'); }
@font-face { font-family:'Readex Pro'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ReadexPro-SemiBold.ttf') format('truetype'); }
/* Bold face also serves 700–900 (extrabold/black) requests */
@font-face { font-family:'Readex Pro'; font-style:normal; font-weight:700 900; font-display:swap; src:url('fonts/ReadexPro-Bold.ttf') format('truetype'); }

/* ============================================
   GLOBAL & ANIMATIONS
   ============================================ */
:root {
  --font-primary: 'Readex Pro', sans-serif;
  --font-mono: 'Readex Pro', 'Courier New', monospace;

  /* --- BRAND PALETTE (Hybrid — MotiveFlip logo colors on the UI 2.0 system) --- */
  --brand-red: #C0403C;         /* rose */
  --brand-red-hover: #A5342F;
  --brand-red-light: rgba(244, 63, 94, 0.12);
  --brand-purple: #6E5A78;      /* violet */
  --brand-purple-hover: #574763;
  --brand-purple-light: rgba(139, 92, 246, 0.12);
  --brand-gold: #CFA84A;        /* amber */
  --brand-gold-hover: #B08A34;
  --brand-gold-light: rgba(245, 158, 11, 0.14);
  --brand-blue: #4A6E8E;        /* indigo */
  --brand-blue-hover: #3A5876;
  --brand-blue-light: rgba(99, 102, 241, 0.12);
  --brand-green: #47846B;       /* emerald */
  --brand-green-hover: #3A6E58;
  --brand-green-light: rgba(16, 185, 129, 0.12);
  --brand-cyan: #3E8E86;
  --brand-cyan-hover: #327068;

  /* Primary accent = signature electric indigo */
  --brand-accent: #4A6E8E;
  --brand-accent-hover: #3A5876;
  --brand-accent-light: rgba(99, 102, 241, 0.12);

  --reward-gold: #CFA84A;
  --reward-silver: #94A3B8;
  --reward-bronze: #B08A34;
  --reward-xp: #3E8E86;

  --color-success: #47846B;
  --color-success-light: rgba(16, 185, 129, 0.14);
  --color-warning: #CFA84A;
  --color-warning-light: rgba(245, 158, 11, 0.16);
  --color-danger: #C0403C;
  --color-danger-light: rgba(244, 63, 94, 0.12);
  --color-info: #3E8E86;
  --color-info-light: rgba(6, 182, 212, 0.12);

  --shadow-sm: 0 1px 3px rgba(30,27,75,0.08), 0 1px 2px rgba(30,27,75,0.06);
  --shadow-md: 0 4px 12px rgba(30,27,75,0.09), 0 2px 4px rgba(30,27,75,0.06);
  --shadow-lg: 0 12px 28px rgba(30,27,75,0.12), 0 4px 8px rgba(30,27,75,0.07);
  --shadow-xl: 0 24px 48px rgba(30,27,75,0.16), 0 10px 16px rgba(30,27,75,0.08);
  --shadow-float: 0 30px 60px rgba(49,46,129,0.22);
  --shadow-glow: 0 0 24px rgba(99, 102, 241, 0.45);

  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- ANIMATION KEYFRAMES --- */
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.90); } to { opacity: 1; transform: scale(1); } }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
@keyframes float-slow { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-15px) rotate(2deg); } 100% { transform: translateY(0px) rotate(0deg); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.45); } 70% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); } 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } }

/* --- ANIMATION UTILITIES --- */
.anim-slide-up { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.anim-slide-in-right { animation: slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.anim-fade-in { animation: fadeIn 0.6s ease-out forwards; opacity: 0; }
.anim-scale-in { animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.anim-float { animation: float 3s ease-in-out infinite; }
.anim-float-slow { animation: float-slow 6s ease-in-out infinite; }
.anim-pulse-glow { animation: pulse-glow 2s infinite; }

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }

/* Interactive Hovers */
.hover-lift { transition: transform var(--transition-base), box-shadow var(--transition-base); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hover-glow:hover { box-shadow: var(--shadow-glow); border-color: var(--brand-accent); }
.hover-scale { transition: transform var(--transition-fast); }
.hover-scale:hover { transform: scale(1.05); }

/* Custom Tooltip via CSS */
[data-tooltip] { position: relative; cursor: pointer; }
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-5px);
  padding: 6px 10px; background: #2A2233; color: white; font-size: 11px; font-weight: 600;
  border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s; z-index: 100;
}
[data-tooltip]::after {
  content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(5px);
  border-width: 5px; border-style: solid; border-color: #2A2233 transparent transparent transparent;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 100;
}
[data-tooltip]:hover::before { opacity: 1; transform: translateX(-50%) translateY(-10px); }
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0px); }


/* ============================================
   STUDENT PORTAL THEME
   ============================================ */
.portal-student {
  --portal-bg: #F5F6FE;
  --portal-bg-secondary: #ECEDFB;
  --portal-surface: #FFFFFF;
  --portal-surface-secondary: #F7F8FE;
  --portal-sidebar-bg: #191633;
  --portal-sidebar-active: #4A6E8E;
  --portal-sidebar-hover: rgba(74,110,142,0.18);
  --portal-sidebar-text: rgba(255,255,255,0.72);
  --portal-sidebar-text-active: #FFFFFF;
  --portal-nav-bg: rgba(255,255,255,0.85);
  --portal-nav-border: rgba(30,27,75,0.06);

  --portal-text-primary: #1E1B4B;
  --portal-text-secondary: #5B5676;
  --portal-text-muted: #9995B0;
  --portal-text-inverse: #FFFFFF;

  --portal-card-bg: #FFFFFF;
  --portal-card-border: rgba(30,27,75,0.07);
  --portal-card-radius: 18px;
  --portal-card-padding: 24px;
  --portal-card-shadow: var(--shadow-sm);
  --portal-card-hover-shadow: var(--shadow-lg);

  --input-bg: #F5F6FE;
  --input-border: #E2E3F5;
  --input-border-focus: #4A6E8E;
  --input-radius: 12px;
  --input-padding: 12px 16px;

  --btn-primary-bg: #4A6E8E;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #3A5876;
  --btn-secondary-bg: #EEF0FE;
  --btn-secondary-text: #3A5876;
  --btn-secondary-hover: #E2E5FD;
  --btn-radius: 12px;

  --space-sidebar: 260px;
  --space-topbar: 68px;

  --progress-height: 8px;
  --progress-radius: 999px;
  --progress-bg: #ECEDFB;
  --progress-fill: linear-gradient(90deg, #4A6E8E, #3E8E86);
}

/* ============================================
   TEACHER PORTAL THEME
   ============================================ */
.portal-teacher {
  --portal-bg: #F0F6F8;
  --portal-bg-secondary: #E3EEF2;
  --portal-surface: #FFFFFF;
  --portal-surface-secondary: #F4F9FB;
  --portal-sidebar-bg: #0E2A34;
  --portal-sidebar-active: #3E8E86;
  --portal-sidebar-hover: rgba(62,142,134,0.18);
  --portal-sidebar-text: rgba(255,255,255,0.72);
  --portal-sidebar-text-active: #FFFFFF;
  --portal-nav-bg: rgba(255,255,255,0.85);
  --portal-nav-border: rgba(14,42,52,0.08);

  --portal-text-primary: #0F2A34;
  --portal-text-secondary: #566A72;
  --portal-text-muted: #8C9BA2;
  --portal-text-inverse: #FFFFFF;

  --portal-card-bg: #FFFFFF;
  --portal-card-border: rgba(14,42,52,0.08);
  --portal-card-radius: 14px;
  --portal-card-padding: 24px;
  --portal-card-shadow: var(--shadow-sm);
  --portal-card-hover-shadow: var(--shadow-md);

  --input-bg: #F4F9FB;
  --input-border: #D5E3E8;
  --input-border-focus: #3E8E86;
  --input-radius: 10px;
  --input-padding: 11px 14px;

  --btn-primary-bg: #327068;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #285A54;
  --btn-secondary-bg: #E2F2F6;
  --btn-secondary-text: #285A54;
  --btn-secondary-hover: #D0EAF0;
  --btn-radius: 10px;

  --space-sidebar: 240px;
  --space-topbar: 64px;

  --progress-height: 6px;
  --progress-radius: 999px;
  --progress-bg: #E2F2F6;
  --progress-fill: linear-gradient(90deg, #3E8E86, #4E9C8A);

  --table-header-bg: #F4F9FB;
  --table-row-hover: rgba(62,142,134,0.05);
  --table-border: #D5E3E8;
}

/* ============================================
   ADMIN PORTAL THEME
   ============================================ */
.portal-admin {
  --portal-bg: #F5F3FE;
  --portal-bg-secondary: #EBE7FB;
  --portal-surface: #FFFFFF;
  --portal-surface-secondary: #F8F6FE;
  --portal-sidebar-bg: #201A38;
  --portal-sidebar-active: #6E5A78;
  --portal-sidebar-hover: rgba(110,90,120,0.20);
  --portal-sidebar-text: rgba(255,255,255,0.68);
  --portal-sidebar-text-active: #FFFFFF;
  --portal-nav-bg: rgba(255,255,255,0.85);
  --portal-nav-border: rgba(32,26,56,0.08);

  --portal-text-primary: #241B47;
  --portal-text-secondary: #63597E;
  --portal-text-muted: #9990B0;
  --portal-text-inverse: #FFFFFF;

  --portal-card-bg: #FFFFFF;
  --portal-card-border: rgba(32,26,56,0.08);
  --portal-card-radius: 14px;
  --portal-card-padding: 24px;
  --portal-card-shadow: var(--shadow-sm);
  --portal-card-hover-shadow: var(--shadow-md);

  --input-bg: #F8F6FE;
  --input-border: #E6E0F6;
  --input-border-focus: #6E5A78;
  --input-radius: 10px;
  --input-padding: 11px 14px;

  --btn-primary-bg: #6E5A78;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #574763;
  --btn-secondary-bg: #F0EBFE;
  --btn-secondary-text: #574763;
  --btn-secondary-hover: #E6DEFC;
  --btn-radius: 10px;

  --space-sidebar: 250px;
  --space-topbar: 64px;

  --progress-height: 6px;
  --progress-radius: 999px;
  --progress-bg: #F0EBFE;
  --progress-fill: linear-gradient(90deg, #6E5A78, #9B6BA6);

  --table-header-bg: #F8F6FE;
  --table-row-hover: rgba(110,90,120,0.05);
  --table-border: #E6E0F6;

  --stat-1-bg: linear-gradient(135deg, #4A6E8E, #6E5A78);
  --stat-2-bg: linear-gradient(135deg, #3E8E86, #3B82F6);
  --stat-3-bg: linear-gradient(135deg, #47846B, #3E8E86);
  --stat-4-bg: linear-gradient(135deg, #C0403C, #CFA84A);
  --stat-5-bg: linear-gradient(135deg, #6E5A78, #9B6BA6);
}

/* ============================================
   PARENT PORTAL THEME
   ============================================ */
.portal-parent {
  --portal-bg: #F0F8F5;
  --portal-bg-secondary: #E3F2EC;
  --portal-surface: #FFFFFF;
  --portal-surface-secondary: #F4FAF7;
  --portal-sidebar-bg: #0D3327;
  --portal-sidebar-active: #2E7D5C;
  --portal-sidebar-hover: rgba(46,125,92,0.20);
  --portal-sidebar-text: rgba(255,255,255,0.72);
  --portal-sidebar-text-active: #FFFFFF;
  --portal-nav-bg: rgba(255,255,255,0.90);
  --portal-nav-border: rgba(13,51,39,0.08);

  --portal-text-primary: #0D2E20;
  --portal-text-secondary: #3A6352;
  --portal-text-muted: #85A899;
  --portal-text-inverse: #FFFFFF;

  --portal-card-bg: #FFFFFF;
  --portal-card-border: rgba(13,51,39,0.08);
  --portal-card-radius: 14px;
  --portal-card-padding: 24px;
  --portal-card-shadow: var(--shadow-sm);
  --portal-card-hover-shadow: var(--shadow-md);

  --input-bg: #F4FAF7;
  --input-border: #C8E6DA;
  --input-border-focus: #2E7D5C;
  --input-radius: 10px;
  --input-padding: 11px 14px;

  --btn-primary-bg: #2E7D5C;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #1F5A40;
  --btn-secondary-bg: #E3F2EC;
  --btn-secondary-text: #1F5A40;
  --btn-secondary-hover: #C8E6DA;
  --btn-radius: 10px;

  --space-sidebar: 250px;
  --space-topbar: 64px;

  --progress-height: 6px;
  --progress-radius: 999px;
  --progress-bg: #E3F2EC;
  --progress-fill: linear-gradient(90deg, #2E7D5C, #4FB37E);

  --table-header-bg: #F4FAF7;
  --table-row-hover: rgba(46,125,92,0.05);
  --table-border: #C8E6DA;

  --stat-1-bg: linear-gradient(135deg, #2E7D5C, #3E9E7C);
  --stat-2-bg: linear-gradient(135deg, #3E8E86, #2E7D5C);
  --stat-3-bg: linear-gradient(135deg, #CFA84A, #E8C05A);
  --stat-4-bg: linear-gradient(135deg, #C0403C, #D05A56);
  --stat-5-bg: linear-gradient(135deg, #47846B, #2E7D5C);
}

/* ============================================
   FUTURISTIC UI LAYER (v2) — opt-in / additive
   MotiveFlip logo palette (Hybrid) · glassmorphism · glow · gradients · Phosphor icons.
   Nothing here changes existing pages until these classes/vars are used.
   ============================================ */
:root {
  /* Electric cool accents */
  --f-indigo: #4A6E8E;
  --f-violet: #6E5A78;
  --f-fuchsia: #9B6BA6;
  --f-cyan: #3E8E86;
  --f-teal: #4E9C8A;
  --f-emerald: #47846B;
  --f-amber: #CFA84A;
  --f-rose: #C0403C;
  --f-ink: #0F172A;
  --f-ink-2: #1E293B;
  --f-mist: #F8FAFC;

  /* Signature gradients */
  --grad-primary: linear-gradient(135deg, #4A6E8E 0%, #6E5A78 50%, #3E8E86 100%);
  --grad-aurora:  linear-gradient(135deg, #6E5A78 0%, #3E8E86 100%);
  --grad-sunrise: linear-gradient(135deg, #CFA84A 0%, #C0403C 100%);
  --grad-mint:    linear-gradient(135deg, #47846B 0%, #3E8E86 100%);
  --grad-night:   linear-gradient(135deg, #0F172A 0%, #1E1B4B 55%, #312E81 100%);

  /* Colored glows */
  --glow-indigo:  0 10px 34px rgba(74,110,142,0.38);
  --glow-cyan:    0 10px 34px rgba(62,142,134,0.36);
  --glow-emerald: 0 10px 34px rgba(71,132,107,0.34);
  --glow-rose:    0 10px 34px rgba(192,64,60,0.34);

  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
}

/* Glass surfaces */
.glass {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.65);
}
.glass-dark {
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
}

/* Gradient helpers */
.grad-primary { background: var(--grad-primary); }
.grad-aurora  { background: var(--grad-aurora); }
.grad-night   { background: var(--grad-night); }
.grad-text {
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 1.5px gradient outline via masked pseudo-element */
.grad-border { position: relative; border-radius: var(--radius-xl); }
.grad-border::before {
  content: ''; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit;
  background: var(--grad-primary);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* Glow utilities */
.glow-indigo  { box-shadow: var(--glow-indigo); }
.glow-cyan    { box-shadow: var(--glow-cyan); }
.glow-emerald { box-shadow: var(--glow-emerald); }
.glow-rose    { box-shadow: var(--glow-rose); }

/* Futuristic primary button */
.btn-future {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad-primary); color: #fff; font-weight: 700;
  border: none; border-radius: 14px; padding: 12px 24px; cursor: pointer;
  box-shadow: var(--glow-indigo);
  transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
}
.btn-future:hover { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(74,110,142,0.55); filter: brightness(1.05); }
.btn-ghost-future {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(74,110,142,0.08); color: var(--f-indigo); font-weight: 700;
  border: 1px solid rgba(74,110,142,0.25); border-radius: 14px; padding: 11px 22px; cursor: pointer;
  transition: all var(--transition-base);
}
.btn-ghost-future:hover { background: rgba(74,110,142,0.14); transform: translateY(-1px); }

/* Icon chip (gradient tile behind a Phosphor glyph) */
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px; font-size: 24px; color: #fff;
  background: var(--grad-primary); box-shadow: var(--glow-indigo);
}
.icon-chip.mint  { background: var(--grad-mint);  box-shadow: var(--glow-emerald); }
.icon-chip.sun   { background: var(--grad-sunrise); box-shadow: var(--glow-rose); }
.icon-chip.aurora{ background: var(--grad-aurora); box-shadow: var(--glow-cyan); }

/* Phosphor alignment */
.ph, .ph-bold, .ph-fill, .ph-duotone { line-height: 1; vertical-align: -0.125em; }

/* Animated aurora background */
@keyframes auroraShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.aurora-bg {
  background: linear-gradient(120deg, #4A6E8E, #6E5A78, #3E8E86, #47846B);
  background-size: 300% 300%; animation: auroraShift 14s ease infinite;
}
@keyframes glowPulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(74,110,142,0.45);} 60%{ box-shadow: 0 0 0 16px rgba(74,110,142,0);} }
.anim-glow-pulse { animation: glowPulse 2.4s infinite; }

/* Language Toggle (EN/AR flag switch) — injected by shared/components.js LangToggle */
.lang-toggle { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px; gap: 2px; }
.lang-toggle__seg { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; text-decoration: none; transition: all var(--transition-fast, 0.15s ease); }
.lang-toggle__flag { border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }

/* Sidebar variant — sits on a dark sidebar background */
.lang-toggle--sidebar { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.lang-toggle--sidebar .lang-toggle__seg { flex: 1; color: rgba(255,255,255,0.55); }
.lang-toggle--sidebar .lang-toggle__seg.is-active { background: rgba(255,255,255,0.16); color: #fff; }
.lang-toggle--sidebar .lang-toggle__seg:not(.is-active):hover { color: #fff; background: rgba(255,255,255,0.08); }

/* Inline variant — sits in a light header/toolbar */
.lang-toggle--inline { background: rgba(31,41,55,0.06); border: 1px solid rgba(31,41,55,0.08); }
.lang-toggle--inline .lang-toggle__seg { color: rgba(31,41,55,0.6); }
.lang-toggle--inline .lang-toggle__seg.is-active { background: rgba(31,41,55,0.12); color: #1f2937; }
.lang-toggle--inline .lang-toggle__seg:not(.is-active):hover { color: #1f2937; background: rgba(31,41,55,0.08); }