:root{
    --midnight: #1d2233;
    --mfi-bg: #1d2233;
    --mfi-surface: #ffffff;
    --mfi-surface-2: #f7f7fb;
    --mfi-text: #111827;
    --mfi-muted: #6b7280;
    --mfi-border: #e5e7eb;
    --mfi-shadow: 0 10px 26px rgba(17,24,39,.08);
    --mfi-shadow-sm: 0 6px 14px rgba(17,24,39,.06);
    --mfi-radius: 18px;
    --mfi-gold: #E9B877;

    --mfi-primary: #E9B877;
    --mfi-primary-2: #c9964e;
    --mfi-danger: #ef4444;
    --mfi-success: #16a34a;
    --mfi-warning: #f59e0b;

    --mfi-ring: 0 0 0 .2rem rgba(233,184,119,.18);
  }

  body{
    font-family: "Poppins", sans-serif !important;
    background: var(--mfi-bg);
  }

  /* Dashboard wrapper */
  .dashboard-wrap{
    padding: 18px 0 40px;
    min-height: calc(100vh - 70px);
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(233, 184, 119, 0.08), transparent 65%), var(--midnight);
  }
    a.nav-link.dropdown-toggle.mfi-user {
        text-transform: capitalize;
        font-size: 16px;
        font-weight: 500;
    }
  /* Header text */
  .dash-title{
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
  }
  .dash-sub{
    color: rgba(255,255,255,.65);
    font-size: 12px;
    margin-top: 4px;
  }

  /* Cards */
  .card{
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: var(--mfi-radius) !important;
    box-shadow: var(--mfi-shadow-sm) !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(6px);
  }
  .card .card-body{ padding: 18px !important; }

  /* KPI mini cards */
  .kpi{
    border-radius: 16px;
    border: 1px solid rgba(17,24,39,.08);
    background: linear-gradient(180deg, #fff, #fafafa);
    box-shadow: var(--mfi-shadow-sm);
  }
  .kpi .label{
    color: var(--mfi-muted);
    font-size: 12px;
    font-weight: 500;
  }
  .kpi .value{
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 28px;
    color: var(--mfi-text);
    line-height: 1.1;
  }
  .kpi .mini{
    color: var(--mfi-muted);
    font-size: 12px;
  }

  /* Muted text */
  .text-muted{ color: var(--mfi-muted) !important; }

  /* Buttons */
  .btn{
    border-radius: 12px !important;
    font-weight: 600 !important;
    padding: .55rem .85rem !important;
    transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  }
  .btn:active{ transform: translateY(1px); }

  .btn-primary{
    border: 0 !important;
    color: #0A0F1E !important;
    background: linear-gradient(135deg, var(--mfi-primary), var(--mfi-primary-2)) !important;
    box-shadow: 0 10px 18px rgba(233,184,119,.18);
  }
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active{
    opacity: 1;
    color: #0A0F1E !important;
    background: linear-gradient(135deg, var(--mfi-primary), var(--mfi-primary-2)) !important;
  }

  .btn-outline-primary{
    color: #0A0F1E !important;
    border-color: rgba(233,184,119,.45) !important;
    background: #fff !important;
  }
  .btn-outline-primary:hover,
  .btn-outline-primary:focus,
  .btn-outline-primary:active{
    color: #0A0F1E !important;
    background: #E9B877 !important;
    border-color: #c9964e !important;
  }

  .btn-outline-secondary{
    border-color: rgba(17,24,39,.14) !important;
    color: #111827 !important;
    background: #fff !important;
  }
  .btn-outline-secondary:hover{
    background: rgba(17,24,39,.04) !important;
  }

  .btn-outline-danger{
    border-color: rgba(239,68,68,.35) !important;
    color: var(--mfi-danger) !important;
    background: #fff !important;
  }
  .btn-outline-danger:hover{
    background: rgba(239,68,68,.06) !important;
  }

  /* Focus ring */
  .btn:focus, .form-control:focus, .form-select:focus{
    box-shadow: var(--mfi-ring) !important;
    border-color: rgba(233,184,119,.45) !important;
  }

  /* Badges */
  .badge{
    border-radius: 999px !important;
    font-weight: 700 !important;
    padding: .35rem .55rem !important;
    letter-spacing: .01em;
  }
  .text-bg-success{ background: rgba(22,163,74,.12) !important; color: #166534 !important; }
  .text-bg-warning{ background: rgba(245,158,11,.14) !important; color: #92400e !important; }
  .text-bg-secondary{ background: rgba(107,114,128,.14) !important; color: #374151 !important; }

  /* Tables */
  .table{
    margin-bottom: 0 !important;
  }
  .table thead th{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(17,24,39,.60);
    border-bottom: 1px solid rgba(17,24,39,.10) !important;
  }
  .table td, .table th{
    border-color: rgba(17,24,39,.08) !important;
    padding: .75rem .6rem !important;
    vertical-align: middle;
  }
  .table tbody tr:hover{
    background: rgba(233,184,119,.06);
  }

  /* Small nice separators */
  hr{
    border-top: 1px solid rgba(17,24,39,.08) !important;
  }

  /* Alert info box in subscription */
  .alert-light{
    background: rgba(17,24,39,.03) !important;
    border-color: rgba(17,24,39,.08) !important;
  }

  /* Book cover thumb */
  .book-thumb{
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(17,24,39,.10);
    background: #fff;
  }

  /* Pagination modern */
  .pagination .page-link{
    border-radius: 10px !important;
    border-color: rgba(17,24,39,.10) !important;
    color: #111827 !important;
  }
  .pagination .page-item.active .page-link{
    background: linear-gradient(135deg, var(--mfi-primary), var(--mfi-primary-2)) !important;
    border-color: transparent !important;
    color: #0A0F1E !important;
  }

  .page-bg{
    background: transparent;
    padding: 12px 0 40px;
    min-height: calc(100vh - 140px);
  }

  /* White surfaces: dark readable text (body is on midnight) */
  .card, .card-body, .panel, .cardx, .cardx-body, .gateway-card,
  .hero, .hero-card, .feature-card, .workbook-body, .modal-content,
  .alert, .table, .form-control, .form-select,
  .list-group-item, .toast, .offcanvas {
    color: #111827;
  }
  .card .text-muted, .panel .text-muted, .modal-content .text-muted,
  .feature-card .text-muted, .hero .muted, .cardx .muted {
    color: #6b7280 !important;
  }
  .form-label, label, .form-check-label {
    color: inherit;
  }

  /* Buttons stay visible on hover/focus/active across the portal */
  .btn,
  .btn:hover,
  .btn:focus,
  .btn:active,
  .btn:focus-visible,
  a.btn:hover,
  button.btn:hover {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .btn-primary,
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active,
  .btn-warning,
  .btn-warning:hover,
  .btn-warning:focus,
  .btn-warning:active {
    color: #0A0F1E !important;
    background: linear-gradient(135deg, #E9B877, #c9964e) !important;
    background-image: linear-gradient(135deg, #E9B877, #c9964e) !important;
    border-color: #c9964e !important;
  }

  .btn-outline-primary,
  .btn-outline-primary:hover,
  .btn-outline-primary:focus,
  .btn-outline-primary:active {
    color: #0A0F1E !important;
    border-color: #c9964e !important;
  }
  .btn-outline-primary {
    background: #fff !important;
  }
  .btn-outline-primary:hover,
  .btn-outline-primary:focus,
  .btn-outline-primary:active {
    background: #E9B877 !important;
  }

  .btn-outline-secondary,
  .btn-outline-secondary:hover,
  .btn-outline-secondary:focus,
  .btn-outline-secondary:active {
    color: #111827 !important;
    border-color: #d1d5db !important;
  }
  .btn-outline-secondary { background: #fff !important; }
  .btn-outline-secondary:hover,
  .btn-outline-secondary:focus,
  .btn-outline-secondary:active {
    background: #f3f4f6 !important;
  }

  .btn-outline-danger,
  .btn-outline-danger:hover,
  .btn-outline-danger:focus,
  .btn-outline-danger:active {
    color: #b91c1c !important;
    border-color: #fecaca !important;
  }
  .btn-outline-danger { background: #fff !important; }
  .btn-outline-danger:hover,
  .btn-outline-danger:focus,
  .btn-outline-danger:active {
    background: #fee2e2 !important;
  }

  .btn-success,
  .btn-success:hover,
  .btn-success:focus,
  .btn-success:active {
    color: #fff !important;
    background: #16a34a !important;
    border-color: #15803d !important;
  }

  .btn-danger,
  .btn-danger:hover,
  .btn-danger:focus,
  .btn-danger:active {
    color: #fff !important;
    background: #dc2626 !important;
    border-color: #b91c1c !important;
  }

  .btn-light,
  .btn-light:hover,
  .btn-light:focus,
  .btn-light:active {
    color: #111827 !important;
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
  }

  .btn-dark,
  .btn-dark:hover,
  .btn-dark:focus,
  .btn-dark:active {
    color: #fff !important;
    background: #111827 !important;
    border-color: #111827 !important;
  }

  .btn-link,
  .btn-link:hover {
    color: #c9964e !important;
    background: transparent !important;
  }

  /* Custom gold / outline buttons used as links */
  .btn-gold, .btn-gold:hover, .btn-gold:focus,
  .btn-modern, .btn-modern:hover, .btn-modern:focus,
  .btn-premium, .btn-premium:hover, .btn-premium:focus,
  .mfi-publish, .mfi-publish:hover, .mfi-publish:focus,
  .btn-gradient, .btn-gradient:hover, .btn-gradient:focus,
  .btn-solid, .btn-solid:hover, .btn-solid:focus,
  .btn-solid-simple, .btn-solid-simple:hover, .btn-solid-simple:focus,
  .btn-new-topic, .btn-new-topic:hover {
    color: #0A0F1E !important;
    background: linear-gradient(135deg, #E9B877, #c9964e) !important;
    background-image: linear-gradient(135deg, #E9B877, #c9964e) !important;
    border-color: #c9964e !important;
    text-decoration: none !important;
  }

  .btn-outline-simple, .btn-outline-simple:hover,
  .btn-outline, .btn-outline:hover,
  .btn-ghost, .btn-ghost:hover,
  .btn-outline-modern, .btn-outline-modern:hover,
  .btn-free, .btn-free:hover {
    color: #111827 !important;
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    text-decoration: none !important;
  }
  .btn-outline-simple:hover, .btn-outline:hover,
  .btn-ghost:hover, .btn-outline-modern:hover, .btn-free:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
  }

  header.app-page-header .btn-outline-secondary {
    background: #fff !important;
    color: #111827 !important;
  }
  header.app-page-header .btn-outline-secondary:hover {
    background: #E9B877 !important;
    color: #0A0F1E !important;
  }

  .btn-outline-light {
    color: #fff !important;
    background: transparent !important;
    border-color: rgba(255,255,255,.55) !important;
  }
  .btn-outline-light:hover,
  .btn-outline-light:focus,
  .btn-outline-light:active {
    color: #0A0F1E !important;
    background: #E9B877 !important;
    border-color: #E9B877 !important;
  }

  .btn-secondary,
  .btn-secondary:hover,
  .btn-secondary:focus,
  .btn-secondary:active {
    color: #fff !important;
    background: #374151 !important;
    border-color: #1f2937 !important;
  }

  .btn-outline-dark,
  .btn-outline-dark:hover,
  .btn-outline-dark:focus,
  .btn-outline-dark:active {
    color: #111827 !important;
    border-color: #111827 !important;
  }
  .btn-outline-dark { background: #fff !important; }
  .btn-outline-dark:hover,
  .btn-outline-dark:focus,
  .btn-outline-dark:active {
    background: #E9B877 !important;
    border-color: #c9964e !important;
    color: #0A0F1E !important;
  }

  .btn-glass,
  .btn-glass:hover,
  .btn-glass:focus,
  .auth-left a.btn:hover,
  .auth-left a.btn:focus {
    color: #fff !important;
    background: rgba(255,255,255,.16) !important;
    border-color: rgba(255,255,255,.85) !important;
  }
  .auth-left,
  .auth-left .content,
  .auth-left h2,
  .auth-left p,
  .auth-left .small {
    color: #fff !important;
  }
  .auth-left p { color: rgba(255,255,255,.85) !important; }

  .navbar .dropdown-item {
    color: rgba(255,255,255,.9) !important;
  }
  .navbar .dropdown-item:hover,
  .navbar .dropdown-item:focus {
    color: #fff !important;
    background: rgba(255,255,255,.10) !important;
  }

  .card .dropdown-item:hover,
  .modal-content .dropdown-item:hover {
    color: #111827 !important;
    background: #E9B877 !important;
  }