/* ==========================================================================
   THE PROJECT MBBS - STUDY SPACE DASHBOARD, FOCUS TIMER & STATS
   ========================================================================== */

/* Subscription cards */
.sub-cta-btn{font-size:14px!important;padding:15px 28px!important}
.sub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:26px}
.sub-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px 22px;display:flex;flex-direction:column;transition:.2s}
.sub-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.sub-card.featured{border-color:#f43f5e;box-shadow:0 10px 30px rgba(244,63,94,.14)}
.sub-badge{position:absolute;top:-11px;left:20px;background:linear-gradient(90deg,#f43f5e,#8b5cf6);color:#fff;font-size:9px;font-weight:800;letter-spacing:1px;padding:5px 11px;border-radius:999px}
.sub-badge.alt{background:linear-gradient(90deg,#06d6a0,#0ea5e9)}
.sub-card h3{font-size:15px;color:var(--ink);margin-bottom:10px}
.sub-price{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-1px}
.sub-price small{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0}
.sub-tag{font-size:11px;color:var(--muted);margin:8px 0 18px;line-height:1.7}
.sub-choose{margin-top:auto;width:100%;justify-content:center}
.sub-includes{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;margin-bottom:16px}
.sub-includes h3{font-size:16px;color:var(--ink);margin-bottom:14px}
.sub-includes ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none}
.sub-includes li{font-size:12px;color:var(--muted);padding-left:24px;position:relative;line-height:1.6}
.sub-includes li:before{content:"\2713";position:absolute;left:0;color:#f43f5e;font-weight:800}
.sub-note{font-size:11px;color:var(--muted);text-align:center}
@media(max-width:900px){.sub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.sub-grid{grid-template-columns:1fr}.sub-includes ul{grid-template-columns:1fr}}

/* Dashboard Welcome Hero, Stats, Teddy mascot & Durood overlay */
.welcome-hero{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:24px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:29px 31px;margin-bottom:25px;background:radial-gradient(ellipse at 82% 30%,var(--teal-soft),transparent 65%),var(--surface)}
.dash-mbbs{background:linear-gradient(90deg,#f43f5e,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.dash-brand-chip{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:var(--teal-soft);font-size:12px;font-weight:600;color:var(--ink)}
.dash-brand-dot{width:7px;height:7px;border-radius:50%;background:#10b981;flex:none}
.welcome-visual{display:flex;align-items:center;justify-content:center}
.welcome-visual .teddy-stage{position:relative;width:100%;max-width:190px;margin:0 auto}.teddy-bg{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:100%;height:86%;border-radius:50%;background:linear-gradient(135deg,#dff5e9,#fde8ec);border:2px dashed #bef0d9}.teddy-imgbox{position:relative;width:140px;margin:0 auto;z-index:1;transform-origin:50% 88%;animation:teddyPhotoFloat 5s ease-in-out infinite}.teddy-gif{width:100%;height:auto;display:block}

/* ===== Durood Shareef loading card ===== */
.durood-overlay{position:fixed;inset:0;z-index:99999;display:none;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding:24px;background:linear-gradient(135deg,#fdf2f7 0%,#f5f0ff 50%,#eef4ff 100%);opacity:0;pointer-events:none;transition:opacity .25s ease}
.durood-overlay.show{display:flex;opacity:1;pointer-events:auto}
.durood-card{background:#ffffff;border-radius:26px;box-shadow:0 24px 70px -18px rgba(190,60,120,.22),0 4px 18px rgba(190,60,120,.08);padding:52px 56px 44px;max-width:640px;width:min(640px,92vw);text-align:center;transform:translateY(16px) scale(.985);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.durood-overlay.show .durood-card{transform:translateY(0) scale(1)}
.durood-arabic{font-family:'Amiri Quran','Amiri',serif;font-size:clamp(30px,4.6vw,46px);line-height:2;margin:0 0 8px;min-height:2.4em;background:linear-gradient(120deg,var(--teal-2),var(--teal) 65%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@keyframes duroodFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.durood-fade{animation:duroodFade 1.1s ease-out both}
@keyframes caretBlink{50%{opacity:0}}
.durood-caret.done{display:none}


.durood-english{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(15px,2vw,18.5px);line-height:1.75;color:#4b5563;margin:14px auto 0;max-width:480px}
.durood-english .dq{color:#f472b6;font-style:normal}
.durood-divider{display:flex;align-items:center;justify-content:center;gap:12px;max-width:420px;margin:26px auto 0}
.durood-divider span{flex:1;height:1px;background:linear-gradient(90deg,transparent,#f9a8d4)}
.durood-divider span:last-child{background:linear-gradient(90deg,#f9a8d4,transparent)}
.durood-divider i{color:#f472b6;font-style:normal;font-size:13px}
.durood-ref{margin:14px 0 0;font-size:11.5px;font-weight:700;letter-spacing:3.2px;color:#9ca3af;text-transform:uppercase}
.durood-loader{width:min(420px,80vw);text-align:center}
.durood-track{height:5px;border-radius:99px;background:rgba(190,60,120,.14);overflow:hidden}
.durood-track i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#f9a8d4,#ec4899)}
.durood-overlay.show .durood-track i{animation:duroodLoad 3s cubic-bezier(.25,.1,.25,1) forwards}
@keyframes duroodLoad{from{width:0}to{width:100%}}
.durood-loading{margin:12px 0 0;font-size:10.5px;font-weight:800;letter-spacing:4px;color:#9ca3af;text-transform:uppercase}
.durood-dots i{font-style:normal;animation:dotBlink 1.2s infinite}
.durood-dots i:nth-child(2){animation-delay:.2s}
.durood-dots i:nth-child(3){animation-delay:.4s}
@keyframes dotBlink{0%,60%,100%{opacity:.25}30%{opacity:1}}
[data-theme="dark"] .durood-overlay{background:linear-gradient(135deg,#1a1020 0%,#141021 50%,#0e1424 100%)}
[data-theme="dark"] .durood-card{background:#151a2e;box-shadow:0 24px 70px -18px rgba(0,0,0,.6)}
[data-theme="dark"] .durood-arabic{color:#f3f4f6}
[data-theme="dark"] .durood-english{color:#cbd5e1}
.dash-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:2px 0 24px}
.stat-card{--sc:#f43f5e;--sc-soft:#ffe4ec;background:var(--surface);border:1px solid color-mix(in srgb,var(--sc) 26%,transparent);border-radius:14px;padding:18px 18px 16px;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-card.sc-teal{--sc:#14b8a6;--sc-soft:#d9f6f1}
.stat-card.sc-blue{--sc:#0ea5e9;--sc-soft:#e0f2fd}
.stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.stat-icon{width:36px;height:36px;border-radius:11px;background:var(--sc-soft);color:var(--sc);display:flex;align-items:center;justify-content:center}
.stat-icon svg{width:19px;height:19px}
.stat-ring{width:38px;height:38px;transform:rotate(-90deg)}
.stat-ring .trk{fill:none;stroke:var(--sc-soft);stroke-width:3.5}
.stat-ring .prg{fill:none;stroke:var(--sc);stroke-width:3.5;stroke-linecap:round}
.stat-value{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.stat-label{font-size:11.5px;color:var(--muted);margin-top:5px;font-weight:500}
.stat-bar{height:4px;border-radius:99px;background:var(--sc-soft);margin-top:14px;overflow:hidden}
.stat-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--sc) 35%,transparent),var(--sc))}
@media(max-width:900px){.dash-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.dash-stats{gap:10px}.stat-card{padding:14px}.stat-value{font-size:24px}}




.teddy-ground{position:relative;width:68%;height:9px;margin:3px auto 0;border-radius:50%;background:rgba(0,0,0,.10);animation:teddyShadowPulse 5s ease-in-out infinite}@keyframes teddyPhotoFloat{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-2px) rotate(1.4deg)}50%{transform:translateY(-4px) rotate(0deg)}75%{transform:translateY(-2px) rotate(-1.4deg)}}@keyframes teddyLidBlink{0%,91%,100%{transform:scaleY(0)}93.5%{transform:scaleY(1)}96%{transform:scaleY(0)}}@keyframes teddyShadowPulse{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.9);opacity:.6}}
@media(prefers-reduced-motion:reduce){.teddy-imgbox,.teddy-lid,.teddy-ground{animation:none!important}}
#view-dashboard .welcome-row h1{font-size:clamp(20px,2.2vw,24px);font-weight:800;letter-spacing:-.5px;line-height:1.15}
.welcome-hero h2{font-size:clamp(20px,2.5vw,28px);line-height:1.2;margin:0;word-break:break-word;overflow-wrap:anywhere}
.welcome-subtitle{font-size:17px;font-weight:700;margin:10px 0 0;color:var(--ink)}
.welcome-name{background:linear-gradient(90deg,#f43f5e,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;max-width:100%;vertical-align:bottom;word-break:break-word}
.welcome-highlight{background:linear-gradient(transparent 62%,rgba(190,240,217,.6) 62%);padding:0 2px;border-radius:2px}
.welcome-motivation{font-family:Georgia,'Times New Roman',serif;font-style:italic;transition:opacity .35s ease}
.welcome-motivation{font-size:14px;color:var(--muted);margin:12px 0 0;line-height:1.7;border-left:3px solid #f43f5e;padding-left:12px}
.welcome-actions{margin-top:18px}
@media(max-width:820px){.welcome-hero{grid-template-columns:minmax(0,1fr) 130px}.teddy-imgbox{width:110px}}
@media(max-width:560px){.welcome-hero{grid-template-columns:minmax(0,1fr) 100px !important;padding:16px 14px !important;gap:12px !important}.welcome-hero h2{font-size:18px !important}.welcome-subtitle{font-size:12.5px !important;margin:4px 0 0 !important}.welcome-visual{grid-row:auto !important}.welcome-motivation{font-size:11px !important;margin:8px 0 0 !important;line-height:1.4 !important;padding-left:8px !important}.welcome-actions{margin-top:12px !important}.welcome-actions .primary-btn{padding:8px 13px !important;font-size:11.5px !important}.teddy-imgbox{width:80px !important}.teddy-stage{max-width:95px !important}}

/* ==========================================================================
   DESKTOP: "Medix is Providing:" (Portal Grid)
   - 3 cards per row (using 6-column base grid so cards span 2 cols each)
   - If 1 card remains at the end (3n+1): spans full row (100% width)
   - If 2 cards remain at the end (3n+2): each spans 3 cols (50% width each),
     adjusting perfectly across the next full row
   ========================================================================== */
@media (min-width: 821px) {
  .dashboard-essentials .portal-grid,
  .portal-section .portal-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .dashboard-essentials .portal-grid > .portal-card,
  .portal-section .portal-grid > .portal-card {
    grid-column: span 2 !important;
  }

  /* Exactly 1 card left on the last row (3n + 1) -> spans all 6 columns */
  .dashboard-essentials .portal-grid > .portal-card:last-child:nth-child(3n+1),
  .portal-section .portal-grid > .portal-card:last-child:nth-child(3n+1) {
    grid-column: 1 / -1 !important;
  }

  /* Exactly 2 cards left on the last row (3n + 2) -> both split the row 50/50 (3 cols each) */
  .dashboard-essentials .portal-grid > .portal-card:nth-last-child(2):nth-child(3n+1),
  .portal-section .portal-grid > .portal-card:nth-last-child(2):nth-child(3n+1),
  .dashboard-essentials .portal-grid > .portal-card:last-child:nth-child(3n+2),
  .portal-section .portal-grid > .portal-card:last-child:nth-child(3n+2) {
    grid-column: span 3 !important;
  }
}

/* Dashboard Focus Timer & Quick Tools row */
@media (min-width: 821px) {
  .focus-rhythm-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
    gap: 20px !important;
    margin: 24px 0 !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  .focus-main {
    display: flex !important;
    flex-direction: column !important;
  }
  .focus-main .timer-h {
    height: 100% !important;
    margin: 0 !important;
  }
  .rhythm-side {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }
  .rhythm-side .rail-card {
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  .rhythm-side .tool-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 14px !important;
    flex: 1 !important;
  }
  .rhythm-side .tool-btn {
    padding: 12px 14px !important;
  }
}

/* ==========================================================================
   PROFESSIONAL COLOR DESIGN: "Medix is Providing:" Cards
   Distinct, sophisticated medical palette with interactive polish
   ========================================================================== */

/* 1. Study Library - Precision Medical Blue */
.portal-card.library,
.portal-card[data-view="library"] {
  --card-color: #0284c7;
  --card-soft: #f0f9ff;
}

/* 2. MCQ Bank - Clinical Indigo / Testing Precision */
.portal-card.mcqs,
.portal-card[data-view="mcqs"] {
  --card-color: #6366f1;
  --card-soft: #eef2ff;
}

/* 3. Past Papers - Health Emerald / Examination Records */
.portal-card.papers,
.portal-card[data-view="papers"] {
  --card-color: #059669;
  --card-soft: #ecfdf5;
}

/* 4. Books & Notes - Royal Purple / Medical Literature */
.portal-card.notes,
.portal-card[data-view="notes"] {
  --card-color: #8b5cf6;
  --card-soft: #f5f3ff;
}

/* 5. Flashcards - Active Recall Cyan */
.portal-card.flashcards,
.portal-card[data-view="flashcards"] {
  --card-color: #0ea5e9;
  --card-soft: #f0fdfa;
}

/* 6. Saved Questions - High-Yield Starred Amber */
.portal-card.saved,
.portal-card[data-view="bookmarks"] {
  --card-color: #d97706;
  --card-soft: #fffbeb;
}

/* 7. Leaderboard - Performance Crimson / Rank */
.portal-card.leaderboard,
.portal-card[data-view="leaderboard"] {
  --card-color: #e11d48;
  --card-soft: #fff1f2;
}

/* 8. Medical Tools - Stethoscope Teal / Diagnostic Calculators */
.portal-card.tools,
.portal-card[data-view="tools"] {
  --card-color: #0d9488;
  --card-soft: #f0fdfa;
}

/* 9. Subscription Plans - Luxury Bronze Gold / Pro Access */
.portal-card.subscription,
.portal-card[data-view="subscription"] {
  --card-color: #b45309;
  --card-soft: #fffbeb;
}

/* Base Card Architecture */
.dashboard-essentials .portal-card,
.portal-section .portal-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid color-mix(in srgb, var(--card-color, var(--teal)) 18%, var(--line, #e2e8f0)) !important;
  border-radius: 18px !important;
  padding: 22px 20px 20px !important;
  min-height: 165px !important;
  box-shadow: 0 4px 18px -4px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease,
              background 0.22s ease !important;
  box-sizing: border-box !important;
}

/* Top Accent Line - Refined gradient blend */
.dashboard-essentials .portal-card::before,
.portal-section .portal-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--card-color, var(--teal)) 0%, color-mix(in srgb, var(--card-color, var(--teal)) 35%, transparent) 75%, transparent 100%) !important;
  border-radius: 18px 18px 0 0 !important;
  opacity: 0.8 !important;
  transition: opacity 0.22s ease, height 0.22s ease !important;
}

/* Soft Ambient Radial Glow in Top-Right */
.dashboard-essentials .portal-card::after,
.portal-section .portal-card::after {
  content: "" !important;
  position: absolute !important;
  top: -30px !important;
  right: -30px !important;
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--card-color, var(--teal)) 12%, transparent) 0%, transparent 70%) !important;
  pointer-events: none !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
  opacity: 0.7 !important;
}

/* Card Hover Elevation & Light Wash */
.dashboard-essentials .portal-card:hover,
.portal-section .portal-card:hover {
  transform: translateY(-4px) !important;
  border-color: color-mix(in srgb, var(--card-color, var(--teal)) 50%, var(--line, #e2e8f0)) !important;
  box-shadow: 0 16px 32px -8px color-mix(in srgb, var(--card-color, var(--teal)) 22%, transparent), 0 4px 12px rgba(15, 23, 42, 0.04) !important;
  background: linear-gradient(135deg, var(--surface, #ffffff) 60%, color-mix(in srgb, var(--card-soft, #f0fdfa) 30%, var(--surface, #ffffff))) !important;
}
.dashboard-essentials .portal-card:hover::before,
.portal-section .portal-card:hover::before {
  opacity: 1 !important;
  height: 3.5px !important;
}
.dashboard-essentials .portal-card:hover::after,
.portal-section .portal-card:hover::after {
  transform: scale(1.3) !important;
  opacity: 1 !important;
}

/* Card Top Section */
.dashboard-essentials .portal-card-top,
.portal-section .portal-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 4px !important;
}

/* Icon Container */
.dashboard-essentials .portal-card .portal-icon,
.portal-section .portal-card .portal-icon {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  background: color-mix(in srgb, var(--card-color, var(--teal)) 10%, var(--surface, #ffffff)) !important;
  border: 1px solid color-mix(in srgb, var(--card-color, var(--teal)) 24%, transparent) !important;
  color: var(--card-color, var(--teal)) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--card-color, var(--teal)) 14%, transparent) !important;
  transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important;
}
.dashboard-essentials .portal-card .portal-icon svg,
.portal-section .portal-card .portal-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: var(--card-color, var(--teal)) !important;
  transition: stroke 0.22s ease !important;
}

/* Active Icon Hover Animation */
.dashboard-essentials .portal-card:hover .portal-icon,
.portal-section .portal-card:hover .portal-icon {
  transform: scale(1.05) !important;
  background: var(--card-color, var(--teal)) !important;
  color: #ffffff !important;
  border-color: var(--card-color, var(--teal)) !important;
  box-shadow: 0 6px 16px -2px color-mix(in srgb, var(--card-color, var(--teal)) 45%, transparent) !important;
}
.dashboard-essentials .portal-card:hover .portal-icon svg,
.portal-section .portal-card:hover .portal-icon svg {
  stroke: #ffffff !important;
}

/* Elegant Arrow Badge */
.dashboard-essentials .portal-card .portal-arrow,
.portal-section .portal-card .portal-arrow {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--surface-2, rgba(0,0,0,0.03)) !important;
  border: 1px solid var(--line, rgba(0,0,0,0.06)) !important;
  color: var(--muted, #64748b) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease !important;
}
.dashboard-essentials .portal-card:hover .portal-arrow,
.portal-section .portal-card:hover .portal-arrow {
  background: color-mix(in srgb, var(--card-color, var(--teal)) 12%, var(--surface, #ffffff)) !important;
  border-color: color-mix(in srgb, var(--card-color, var(--teal)) 30%, transparent) !important;
  color: var(--card-color, var(--teal)) !important;
  transform: translate(2px, -2px) !important;
}

/* Card Typography */
.dashboard-essentials .portal-card h3,
.portal-section .portal-card h3 {
  margin-top: 14px !important;
  margin-bottom: 5px !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  letter-spacing: -0.2px !important;
  color: var(--ink, #0f172a) !important;
  transition: color 0.2s ease !important;
}
.dashboard-essentials .portal-card:hover h3,
.portal-section .portal-card:hover h3 {
  color: var(--card-color, var(--teal)) !important;
}
.dashboard-essentials .portal-card p,
.portal-section .portal-card p {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--muted, #64748b) !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Dark Theme Palette */
.theme-dark .dashboard-essentials .portal-card,
.theme-dark .portal-section .portal-card {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}
.theme-dark .dashboard-essentials .portal-card .portal-icon,
.theme-dark .portal-section .portal-card .portal-icon {
  background: color-mix(in srgb, var(--card-color, var(--teal)) 20%, #0f172a) !important;
  border-color: color-mix(in srgb, var(--card-color, var(--teal)) 40%, transparent) !important;
}
.theme-dark .dashboard-essentials .portal-card .portal-arrow,
.theme-dark .portal-section .portal-card .portal-arrow {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}
.theme-dark .dashboard-essentials .portal-card h3,
.theme-dark .portal-section .portal-card h3 {
  color: #f8fafc !important;
}
.theme-dark .dashboard-essentials .portal-card p,
.theme-dark .portal-section .portal-card p {
  color: #94a3b8 !important;
}
.theme-dark .dashboard-essentials .portal-card:hover,
.theme-dark .portal-section .portal-card:hover {
  border-color: var(--card-color, var(--teal)) !important;
  background: #131d35 !important;
  box-shadow: 0 16px 36px -6px color-mix(in srgb, var(--card-color, var(--teal)) 30%, transparent), 0 4px 16px rgba(0,0,0,0.6) !important;
}