/* ==========================================================================
   GCIKA BANKING SYSTEM - OFFLINE CORE STYLESHEET
   100% Local: Zero Internet Dependencies for Fonts, Colors, Icons & Styling
   High-Visibility Typography & Increased Font Sizes for Smooth Bank Operations
   ========================================================================== */

/* 1. CSS VARIABLES & SYSTEM PALETTE */
:root {
    /* Brand Deep Navy & Amber Palette */
    --navy-950: #060D1A;
    --navy-900: #0A192F;
    --navy-800: #102A4C;
    --navy-700: #1A365D;
    --navy-600: #234E82;
    --amber-400: #FBBF24;
    --amber-500: #F59E0B;
    --amber-600: #D97706;
    --amber-100: #FEF3C7;
    --amber-200: #FDE68A;
    --amber-300: #FCD34D;
    --amber-50:  #FFFBEB;
    --amber-800: #92400E;
    --amber-900: #78350F;
    --amber-950: #451A03;

    /* Semantic Accents */
    --emerald-50:  #ECFDF5;
    --emerald-100: #D1FAE5;
    --emerald-200: #A7F3D0;
    --emerald-500: #10B981;
    --emerald-600: #059669;
    --emerald-700: #047857;
    --emerald-800: #065F46;
    --emerald-900: #064E3B;

    --rose-50:  #FFF1F2;
    --rose-100: #FFE4E6;
    --rose-200: #FECDD3;
    --rose-500: #F43F5E;
    --rose-600: #E11D48;
    --rose-700: #BE123C;
    --rose-800: #9F1239;

    --blue-50:  #EFF6FF;
    --blue-100: #DBEAFE;
    --blue-200: #BFDBFE;
    --blue-600: #2563EB;
    --blue-700: #1D4ED8;
    --blue-800: #1E40AF;

    --indigo-50:  #EEF2FF;
    --indigo-100: #E0E7FF;
    --indigo-200: #C7D2FE;
    --indigo-300: #A5B4FC;
    --indigo-400: #818CF8;
    --indigo-500: #6366F1;
    --indigo-600: #4F46E5;
    --indigo-700: #4338CA;
    --indigo-800: #3730A3;
    --indigo-900: #312E81;
    --indigo-950: #1E1B4B;

    --sky-50:  #F0F9FF;
    --sky-100: #E0F2FE;
    --sky-200: #BAE6FD;
    --sky-300: #7DD3FC;
    --sky-400: #38BDF8;
    --sky-500: #0EA5E9;
    --sky-600: #0284C7;
    --sky-700: #0369A1;
    --sky-800: #075985;
    --sky-900: #0C4A6E;
    --sky-950: #082F49;

    /* Crisp Surfaces & Neutrals */
    --white: #FFFFFF;
    --slate-50:  #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
    --slate-900: #0F172A;

    /* Native Offline System Fonts */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Segoe UI Mono", "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
    
    /* Increased Base Operating Sizes */
    --font-size-base: 15.5px;
    --sidebar-width: 270px;
}

/* 2. BASE RESET & ACCESSIBILITY */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--slate-50);
    color: var(--slate-800);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

input, button, select, textarea {
    font: inherit;
    color: inherit;
}

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

img, svg {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-track {
    background: #0A192F;
}
::-webkit-scrollbar-thumb {
    background: #1E3A8A;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--amber-500);
}

/* 3. INCREASED FONT SIZES & HIGH VISIBILITY TYPOGRAPHY */
.font-sans { font-family: var(--font-sans) !important; }
.font-mono { font-family: var(--font-mono) !important; }

/* Stepped up font scale for clear visible operation */
.text-\[9px\]   { font-size: 0.8rem !important; }  /* 12.5px */
.text-\[10px\]  { font-size: 0.85rem !important; } /* 13.2px */
.text-\[11px\]  { font-size: 0.9rem !important; }  /* 14.0px */
.text-xs        { font-size: 0.935rem !important; } /* 14.6px - upgraded from 12px */
.text-sm        { font-size: 1.025rem !important; } /* 16.0px - upgraded from 14px */
.text-base      { font-size: 1.125rem !important; } /* 17.5px */
.text-lg        { font-size: 1.25rem !important; }  /* 19.5px */
.text-xl        { font-size: 1.45rem !important; }  /* 22.5px */
.text-2xl       { font-size: 1.8rem !important; }   /* 28.0px */
.text-3xl       { font-size: 2.25rem !important; }  /* 35.0px */
.text-4xl       { font-size: 2.85rem !important; }  /* 44.0px */

.font-light     { font-weight: 300 !important; }
.font-normal    { font-weight: 400 !important; }
.font-medium    { font-weight: 500 !important; }
.font-semibold  { font-weight: 600 !important; }
.font-bold      { font-weight: 700 !important; }
.font-black     { font-weight: 900 !important; }

.uppercase      { text-transform: uppercase !important; }
.lowercase      { text-transform: lowercase !important; }
.capitalize     { text-transform: capitalize !important; }

.tracking-wider  { letter-spacing: 0.05em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }
.tracking-tight  { letter-spacing: -0.025em !important; }

.text-left      { text-align: left !important; }
.text-center    { text-align: center !important; }
.text-right     { text-align: right !important; }
.text-justify   { text-align: justify !important; }

.leading-none    { line-height: 1 !important; }
.leading-tight   { line-height: 1.25 !important; }
.leading-snug    { line-height: 1.375 !important; }
.leading-normal  { line-height: 1.5 !important; }
.leading-relaxed { line-height: 1.65 !important; }

.underline       { text-decoration: underline !important; }
.no-underline    { text-decoration: none !important; }
.truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 4. HIGH CONTRAST COLOR CLASSES */
/* Navy */
.bg-navy-950   { background-color: var(--navy-950) !important; }
.bg-navy-900   { background-color: var(--navy-900) !important; }
.bg-navy-800   { background-color: var(--navy-800) !important; }
.bg-navy-700   { background-color: var(--navy-700) !important; }
.bg-navy-600   { background-color: var(--navy-600) !important; }
.text-navy-950 { color: var(--navy-950) !important; }
.text-navy-900 { color: var(--navy-900) !important; }
.text-navy-800 { color: var(--navy-800) !important; }
.border-navy-950 { border-color: var(--navy-950) !important; }
.border-navy-900 { border-color: var(--navy-900) !important; }
.border-navy-800 { border-color: var(--navy-800) !important; }

/* Amber Yellow */
.bg-amber-50    { background-color: var(--amber-50) !important; }
.bg-amber-100   { background-color: var(--amber-100) !important; }
.bg-amber-200   { background-color: var(--amber-200) !important; }
.bg-amber-300   { background-color: var(--amber-300) !important; }
.bg-amber-400   { background-color: var(--amber-400) !important; }
.bg-amber-500   { background-color: var(--amber-500) !important; }
.bg-amber-600   { background-color: var(--amber-600) !important; }
.text-amber-400 { color: var(--amber-400) !important; }
.text-amber-500 { color: var(--amber-500) !important; }
.text-amber-600 { color: var(--amber-600) !important; }
.text-amber-700 { color: #B45309 !important; }
.text-amber-800 { color: var(--amber-800) !important; }
.text-amber-900 { color: var(--amber-900) !important; }
.text-amber-950 { color: var(--amber-950) !important; }
.border-amber-200 { border-color: var(--amber-200) !important; }
.border-amber-300 { border-color: var(--amber-300) !important; }
.border-amber-400 { border-color: var(--amber-400) !important; }
.border-amber-500 { border-color: var(--amber-500) !important; }

/* Slate & Neutrals */
.bg-white      { background-color: #FFFFFF !important; }
.bg-slate-50   { background-color: var(--slate-50) !important; }
.bg-slate-100  { background-color: var(--slate-100) !important; }
.bg-slate-200  { background-color: var(--slate-200) !important; }
.bg-slate-300  { background-color: var(--slate-300) !important; }
.bg-slate-800  { background-color: var(--slate-800) !important; }
.bg-slate-900  { background-color: var(--slate-900) !important; }
.bg-slate-950  { background-color: #020617 !important; }

.text-white     { color: #FFFFFF !important; }
.text-slate-100 { color: var(--slate-100) !important; }
.text-slate-200 { color: var(--slate-200) !important; }
.text-slate-300 { color: var(--slate-300) !important; }
.text-slate-400 { color: var(--slate-400) !important; }
.text-slate-500 { color: #526071 !important; } /* high contrast */
.text-slate-600 { color: var(--slate-600) !important; }
.text-slate-700 { color: var(--slate-700) !important; }
.text-slate-800 { color: var(--slate-800) !important; }
.text-slate-900 { color: var(--slate-900) !important; }
.text-slate-950 { color: #020617 !important; }

.border-white     { border-color: #FFFFFF !important; }
.border-slate-100 { border-color: var(--slate-100) !important; }
.border-slate-200 { border-color: var(--slate-200) !important; }
.border-slate-300 { border-color: var(--slate-300) !important; }

/* Emerald (Success/Income) */
.bg-emerald-50    { background-color: var(--emerald-50) !important; }
.bg-emerald-100   { background-color: var(--emerald-100) !important; }
.bg-emerald-500   { background-color: var(--emerald-500) !important; }
.bg-emerald-600   { background-color: var(--emerald-600) !important; }
.bg-emerald-700   { background-color: var(--emerald-700) !important; }
.bg-emerald-800   { background-color: var(--emerald-800) !important; }
.text-emerald-300 { color: #6EE7B7 !important; }
.text-emerald-600 { color: var(--emerald-600) !important; }
.text-emerald-700 { color: var(--emerald-700) !important; }
.text-emerald-800 { color: var(--emerald-800) !important; }
.text-emerald-950 { color: #022C22 !important; }
.border-emerald-200 { border-color: var(--emerald-200) !important; }
.border-emerald-300 { border-color: #6EE7B7 !important; }
.border-emerald-500 { border-color: var(--emerald-500) !important; }
.border-emerald-600 { border-color: var(--emerald-600) !important; }

/* Rose (Danger/Expenses/Withdrawals) */
.bg-rose-50     { background-color: var(--rose-50) !important; }
.bg-rose-100    { background-color: var(--rose-100) !important; }
.bg-rose-200    { background-color: var(--rose-200) !important; }
.bg-rose-500    { background-color: var(--rose-500) !important; }
.bg-rose-600    { background-color: var(--rose-600) !important; }
.bg-rose-700    { background-color: var(--rose-700) !important; }
.bg-rose-800    { background-color: var(--rose-800) !important; }
.bg-rose-900    { background-color: #881337 !important; }
.bg-rose-950    { background-color: #4C0519 !important; }
.text-rose-400  { color: #FB7185 !important; }
.text-rose-500  { color: var(--rose-500) !important; }
.text-rose-600  { color: var(--rose-600) !important; }
.text-rose-700  { color: var(--rose-700) !important; }
.text-rose-800  { color: var(--rose-800) !important; }
.text-rose-900  { color: #881337 !important; }
.text-rose-950  { color: #4C0519 !important; }
.border-rose-100 { border-color: var(--rose-100) !important; }
.border-rose-200 { border-color: var(--rose-200) !important; }
.border-rose-300 { border-color: #FDA4AF !important; }
.border-rose-400 { border-color: #FB7185 !important; }
.border-rose-500 { border-color: var(--rose-500) !important; }
.border-rose-600 { border-color: var(--rose-600) !important; }
.border-rose-700 { border-color: var(--rose-700) !important; }

/* Indigo (Fixed Deposits & Investments) */
.bg-indigo-50    { background-color: var(--indigo-50) !important; }
.bg-indigo-100   { background-color: var(--indigo-100) !important; }
.bg-indigo-200   { background-color: var(--indigo-200) !important; }
.bg-indigo-500   { background-color: var(--indigo-500) !important; }
.bg-indigo-600   { background-color: var(--indigo-600) !important; }
.bg-indigo-700   { background-color: var(--indigo-700) !important; }
.bg-indigo-800   { background-color: var(--indigo-800) !important; }
.bg-indigo-900   { background-color: var(--indigo-900) !important; }
.bg-indigo-950   { background-color: var(--indigo-950) !important; }
.text-indigo-400 { color: var(--indigo-400) !important; }
.text-indigo-500 { color: var(--indigo-500) !important; }
.text-indigo-600 { color: var(--indigo-600) !important; }
.text-indigo-700 { color: var(--indigo-700) !important; }
.text-indigo-800 { color: var(--indigo-800) !important; }
.text-indigo-900 { color: var(--indigo-900) !important; }
.text-indigo-950 { color: var(--indigo-950) !important; }
.border-indigo-100 { border-color: var(--indigo-100) !important; }
.border-indigo-200 { border-color: var(--indigo-200) !important; }
.border-indigo-300 { border-color: var(--indigo-300) !important; }
.border-indigo-500 { border-color: var(--indigo-500) !important; }
.border-indigo-600 { border-color: var(--indigo-600) !important; }
.border-indigo-700 { border-color: var(--indigo-700) !important; }

/* Sky (Transfers & Movement) */
.bg-sky-50     { background-color: var(--sky-50) !important; }
.bg-sky-100    { background-color: var(--sky-100) !important; }
.bg-sky-200    { background-color: var(--sky-200) !important; }
.bg-sky-500    { background-color: var(--sky-500) !important; }
.bg-sky-600    { background-color: var(--sky-600) !important; }
.bg-sky-700    { background-color: var(--sky-700) !important; }
.bg-sky-800    { background-color: var(--sky-800) !important; }
.bg-sky-900    { background-color: var(--sky-900) !important; }
.bg-sky-950    { background-color: var(--sky-950) !important; }
.text-sky-500  { color: var(--sky-500) !important; }
.text-sky-600  { color: var(--sky-600) !important; }
.text-sky-700  { color: var(--sky-700) !important; }
.text-sky-800  { color: var(--sky-800) !important; }
.text-sky-900  { color: var(--sky-900) !important; }
.text-sky-950  { color: var(--sky-950) !important; }
.border-sky-100 { border-color: var(--sky-100) !important; }
.border-sky-200 { border-color: var(--sky-200) !important; }
.border-sky-300 { border-color: var(--sky-300) !important; }
.border-sky-500 { border-color: var(--sky-500) !important; }
.border-sky-600 { border-color: var(--sky-600) !important; }
.border-sky-700 { border-color: var(--sky-700) !important; }

/* Blue */
.bg-blue-50     { background-color: var(--blue-50) !important; }
.bg-blue-100    { background-color: var(--blue-100) !important; }
.bg-blue-600    { background-color: var(--blue-600) !important; }
.bg-blue-700    { background-color: var(--blue-700) !important; }
.text-blue-600  { color: var(--blue-600) !important; }
.text-blue-700  { color: var(--blue-700) !important; }
.text-blue-800  { color: var(--blue-800) !important; }
.border-blue-200 { border-color: var(--blue-200) !important; }
.border-blue-600 { border-color: var(--blue-600) !important; }

/* Hover states */
.hover\:bg-white:hover { background-color: #FFFFFF !important; }
.hover\:bg-slate-50:hover { background-color: var(--slate-50) !important; }
.hover\:bg-slate-100:hover { background-color: var(--slate-100) !important; }
.hover\:bg-slate-200:hover { background-color: var(--slate-200) !important; }
.hover\:bg-navy-800:hover { background-color: var(--navy-800) !important; }
.hover\:bg-navy-900:hover { background-color: var(--navy-900) !important; }
.hover\:bg-amber-400:hover { background-color: var(--amber-400) !important; }
.hover\:bg-amber-500:hover { background-color: var(--amber-500) !important; }
.hover\:bg-emerald-600:hover { background-color: var(--emerald-600) !important; }
.hover\:bg-emerald-700:hover { background-color: var(--emerald-700) !important; }
.hover\:bg-emerald-800:hover { background-color: var(--emerald-800) !important; }
.hover\:bg-rose-50:hover { background-color: var(--rose-50) !important; }
.hover\:bg-rose-600:hover { background-color: var(--rose-600) !important; }
.hover\:bg-rose-700:hover { background-color: var(--rose-700) !important; }
.hover\:bg-rose-800:hover { background-color: var(--rose-800) !important; }
.hover\:bg-indigo-50:hover { background-color: var(--indigo-50) !important; }
.hover\:bg-indigo-600:hover { background-color: var(--indigo-600) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--indigo-700) !important; }
.hover\:bg-indigo-800:hover { background-color: var(--indigo-800) !important; }
.hover\:bg-sky-50:hover { background-color: var(--sky-50) !important; }
.hover\:bg-sky-600:hover { background-color: var(--sky-600) !important; }
.hover\:bg-sky-700:hover { background-color: var(--sky-700) !important; }
.hover\:bg-sky-800:hover { background-color: var(--sky-800) !important; }

.hover\:text-white:hover { color: #FFFFFF !important; }
.hover\:text-slate-700:hover { color: var(--slate-700) !important; }
.hover\:text-slate-800:hover { color: var(--slate-800) !important; }
.hover\:text-slate-900:hover { color: var(--slate-900) !important; }
.hover\:text-amber-300:hover { color: var(--amber-300) !important; }
.hover\:text-amber-400:hover { color: var(--amber-400) !important; }
.hover\:text-amber-600:hover { color: var(--amber-600) !important; }
.hover\:text-rose-600:hover { color: var(--rose-600) !important; }
.hover\:text-rose-700:hover { color: var(--rose-700) !important; }
.hover\:text-indigo-600:hover { color: var(--indigo-600) !important; }
.hover\:text-sky-700:hover { color: var(--sky-700) !important; }

/* 5. FLEXBOX & CSS GRID SUITE */
.flex         { display: flex !important; }
.inline-flex  { display: inline-flex !important; }
.block        { display: block !important; }
.inline-block { display: inline-block !important; }
.hidden       { display: none !important; }

.flex-row     { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-col     { flex-direction: column !important; }
.flex-wrap    { flex-wrap: wrap !important; }
.flex-nowrap  { flex-wrap: nowrap !important; }

.items-start   { align-items: flex-start !important; }
.items-center  { align-items: center !important; }
.items-end     { align-items: flex-end !important; }
.items-stretch { align-items: stretch !important; }
.items-baseline { align-items: baseline !important; }

.justify-start   { justify-content: flex-start !important; }
.justify-center  { justify-content: center !important; }
.justify-end     { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around  { justify-content: space-around !important; }

.flex-1 { flex: 1 1 0% !important; }
.shrink-0 { flex-shrink: 0 !important; }
.grow { flex-grow: 1 !important; }

/* Grid Layouts */
.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

.col-span-1 { grid-column: span 1 / span 1 !important; }
.col-span-2 { grid-column: span 2 / span 2 !important; }
.col-span-3 { grid-column: span 3 / span 3 !important; }
.col-span-4 { grid-column: span 4 / span 4 !important; }
.col-span-5 { grid-column: span 5 / span 5 !important; }
.col-span-12 { grid-column: span 12 / span 12 !important; }

/* Gaps */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.25rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-8 { gap: 2rem !important; }

/* Space helpers */
.space-x-1 > * + * { margin-left: 0.25rem !important; }
.space-x-1\.5 > * + * { margin-left: 0.375rem !important; }
.space-x-2 > * + * { margin-left: 0.5rem !important; }
.space-x-3 > * + * { margin-left: 0.75rem !important; }
.space-x-4 > * + * { margin-left: 1rem !important; }
.space-x-6 > * + * { margin-left: 1.5rem !important; }

.space-y-1 > * + * { margin-top: 0.25rem !important; }
.space-y-1\.5 > * + * { margin-top: 0.375rem !important; }
.space-y-2 > * + * { margin-top: 0.5rem !important; }
.space-y-3 > * + * { margin-top: 0.75rem !important; }
.space-y-4 > * + * { margin-top: 1rem !important; }
.space-y-6 > * + * { margin-top: 1.5rem !important; }

/* 6. SPACING & SIZING SUITE */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-2\.5 { padding: 0.625rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-3\.5 { padding: 0.875rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.25rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-8 { padding: 2rem !important; }

.px-1   { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-1\.5 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }
.px-2   { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.px-3   { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-3\.5 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
.px-4   { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5   { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.px-6   { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-8   { padding-left: 2rem !important; padding-right: 2rem !important; }

.py-0\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
.py-1   { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.py-2   { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
.py-3   { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-3\.5 { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }
.py-4   { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-6   { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pt-6 { padding-top: 1.5rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 0.75rem !important; }
.pb-4 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 0.75rem !important; }
.pl-9 { padding-left: 2.25rem !important; }
.pl-10 { padding-left: 2.5rem !important; }
.pr-3 { padding-right: 0.75rem !important; }
.pr-4 { padding-right: 1rem !important; }
.pr-9 { padding-right: 2.25rem !important; }
.pr-10 { padding-right: 2.5rem !important; }

.m-0 { margin: 0 !important; }
.m-auto { margin: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.25rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.25rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }

/* Widths & Heights */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.w-1\/2 { width: 50% !important; }
.w-2    { width: 0.5rem !important; }
.w-3    { width: 0.75rem !important; }
.w-4    { width: 1rem !important; }
.w-6    { width: 1.5rem !important; }
.w-7    { width: 1.75rem !important; }
.w-8    { width: 2rem !important; }
.w-9    { width: 2.25rem !important; }
.w-10   { width: 2.5rem !important; }
.w-11   { width: 2.75rem !important; }
.w-12   { width: 3rem !important; }
.w-16   { width: 4rem !important; }
.w-48   { width: 12rem !important; }
.w-56   { width: 14rem !important; }
.w-64   { width: 16rem !important; }
.w-72   { width: 18rem !important; }
.w-80   { width: 20rem !important; }
.w-96   { width: 24rem !important; }

.max-w-xs { max-width: 20rem !important; }
.max-w-sm { max-width: 24rem !important; }
.max-w-md { max-width: 28rem !important; }
.max-w-lg { max-width: 32rem !important; }
.max-w-xl { max-width: 36rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-3xl { max-width: 48rem !important; }
.max-w-4xl { max-width: 56rem !important; }
.max-w-5xl { max-width: 64rem !important; }
.max-w-6xl { max-width: 72rem !important; }
.max-w-7xl { max-width: 80rem !important; }

.h-full   { height: 100% !important; }
.h-screen { height: 100vh !important; }
.min-h-screen { min-height: 100vh !important; }
.h-2    { height: 0.5rem !important; }
.h-2\.5 { height: 0.625rem !important; }
.h-3    { height: 0.75rem !important; }
.h-4    { height: 1rem !important; }
.h-6    { height: 1.5rem !important; }
.h-7    { height: 1.75rem !important; }
.h-8    { height: 2rem !important; }
.h-9    { height: 2.25rem !important; }
.h-10   { height: 2.5rem !important; }
.h-11   { height: 2.75rem !important; }
.h-12   { height: 3rem !important; }
.h-16   { height: 4rem !important; }
.h-48   { height: 12rem !important; }
.h-56   { height: 14rem !important; }
.h-64   { height: 16rem !important; }
.h-72   { height: 18rem !important; }
.max-h-56 { max-height: 14rem !important; }
.max-h-80 { max-height: 20rem !important; }

/* 7. BORDERS, RADII, & SHADOWS */
.border     { border-width: 1px !important; border-style: solid !important; }
.border-2   { border-width: 2px !important; border-style: solid !important; }
.border-4   { border-width: 4px !important; border-style: solid !important; }
.border-0   { border-width: 0 !important; }
.border-t   { border-top-width: 1px !important; border-top-style: solid !important; }
.border-b   { border-bottom-width: 1px !important; border-bottom-style: solid !important; }
.border-l   { border-left-width: 1px !important; border-left-style: solid !important; }
.border-r   { border-right-width: 1px !important; border-right-style: solid !important; }
.border-t-4 { border-top-width: 4px !important; border-top-style: solid !important; }
.border-l-4 { border-left-width: 4px !important; border-left-style: solid !important; }

.divide-y > * + * { border-top-width: 1px; border-top-style: solid; border-color: var(--slate-100); }
.divide-slate-100 > * + * { border-color: var(--slate-100) !important; }
.divide-slate-200 > * + * { border-color: var(--slate-200) !important; }

.rounded      { border-radius: 0.375rem !important; }
.rounded-md   { border-radius: 0.5rem !important; }
.rounded-lg   { border-radius: 0.65rem !important; }
.rounded-xl   { border-radius: 0.85rem !important; }
.rounded-2xl  { border-radius: 1.15rem !important; }
.rounded-3xl  { border-radius: 1.75rem !important; }
.rounded-full { border-radius: 9999px !important; }

.shadow-none { box-shadow: none !important; }
.shadow-xs   { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
.shadow-sm   { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important; }
.shadow-md   { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important; }
.shadow-lg   { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; }
.shadow-xl   { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; }
.shadow-2xl  { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }

/* 8. POSITIONING & OVERFLOW */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed    { position: fixed !important; }
.sticky   { position: sticky !important; }

.inset-0   { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.inset-y-0 { top: 0 !important; bottom: 0 !important; }
.top-0     { top: 0 !important; }
.bottom-0  { bottom: 0 !important; }
.left-0    { left: 0 !important; }
.right-0   { right: 0 !important; }
.top-full  { top: 100% !important; }

.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }

.overflow-hidden { overflow: hidden !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-x-auto { overflow-x: auto !important; }
.pointer-events-none { pointer-events: none !important; }
.cursor-pointer { cursor: pointer !important; }
.select-none { user-select: none !important; }

.transition { transition: all 0.2s ease-in-out !important; }
.duration-300 { transition-duration: 300ms !important; }

/* 9. CORE BANKING APP COMPONENTS */
/* App Layout Container */
#sidebar-panel {
    width: var(--sidebar-width);
    background-color: var(--navy-950);
    color: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    padding: 0.65rem 0.9rem;
    color: #94A3B8;
    border-radius: 0.65rem;
    font-size: 0.95rem; /* Upgraded font size */
    font-weight: 600;
    margin-bottom: 0.15rem;
    transition: all 0.15s ease-in-out;
}
.sidebar-nav-item:hover {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.09);
}
.sidebar-nav-item.active {
    color: #FFFFFF;
    background-color: #1E3A8A;
    border-left: 4px solid var(--amber-500);
    box-shadow: 0 4px 12px rgba(10, 25, 47, 0.4);
}

/* Card Surface */
.card-glass {
    background-color: #FFFFFF;
    border: 1px solid var(--slate-200);
    border-radius: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
}

/* Form Controls (Enlarged for Clear Counter Operations) */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="date"],
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 0.95rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--slate-900);
    background-color: var(--slate-50);
    border: 1.5px solid var(--slate-200);
    border-radius: 0.75rem;
    outline: none;
    transition: all 0.15s ease-in-out;
}

input:focus,
select:focus,
textarea:focus {
    background-color: #FFFFFF;
    border-color: var(--navy-900);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

label {
    display: block;
    font-size: 0.885rem;
    font-weight: 700;
    color: var(--slate-700);
    margin-bottom: 0.35rem;
}

/* Buttons */
button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 0.75rem;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease-in-out;
    text-align: center;
}

/* Status Badges */
.badge-active {
    background-color: #DCFCE7;
    color: #15803D;
    border: 1px solid #BBF7D0;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.825rem;
}
.badge-pending {
    background-color: #FEF3C7;
    color: #B45309;
    border: 1px solid #FDE68A;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.825rem;
}
.badge-danger {
    background-color: #FEE2E2;
    color: #B91C1C;
    border: 1px solid #FECACA;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.825rem;
}
.badge-info {
    background-color: #E0F2FE;
    color: #0369A1;
    border: 1px solid #BAE6FD;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.825rem;
}

/* Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
}
th {
    padding: 0.75rem 1rem;
    font-size: 0.825rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-500);
    background-color: var(--slate-50);
    border-bottom: 1.5px solid var(--slate-200);
}
td {
    padding: 0.85rem 1rem;
    font-size: 0.935rem;
    border-bottom: 1px solid var(--slate-100);
}
tr:hover td {
    background-color: #F8FAFC;
}

/* 10. OFFLINE EMBEDDED VECTOR ICONS (Zero Internet Needed) */
.fa, .fa-solid, [class*="fa-"] {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.16em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    line-height: 1;
}

/* Embedded Vector SVGs for every FontAwesome icon class used */
.fa-gauge-high { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm320 96c0-35.3-28.7-64-64-64c-3.1 0-6.2 .2-9.2 .7L337 175.7c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-88.7 88.7c-5.2 2.9-9.8 6.9-13.4 11.6C186.2 258 192 276.3 192 296c0 35.3 28.7 64 64 64s64-28.7 64-64z"/></svg>'); }
.fa-cash-register { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM224 96H288v32H224V96zm-64 0h32v32H160V96zm160 0h32v32H320V96zM128 224a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm96 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm96 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM96 384H416v32H96V384z"/></svg>'); }
.fa-money-bill-transfer, .fa-arrows-left-right { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 160c0-35.3 28.7-64 64-64H384c35.3 0 64 28.7 64 64v192c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V160zm448 32v128h32c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H448zM224 256a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"/></svg>'); }
.fa-users { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192h74.7c58.8 0 106.7 47.8 106.7 106.7V352H0v-53.3zM352 352v-53.3c0-58.8 47.8-106.7 106.7-106.7h74.7c58.8 0 106.7 47.8 106.7 106.7V352H352z"/></svg>'); }
.fa-user, .fa-user-gear { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>'); }
.fa-user-plus { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312V248H440c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V136c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H552v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>'); }
.fa-user-shield { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3 0 498.7 13.3 512 29.7 512H340c-5.8-15.1-9.3-31.5-9.9-48.5C330.1 463.5 330 463.5 330 463.5V368c0-30.8 15.6-59.4 41.5-76.3C337.8 296.8 304.5 296 269.7 296H178.3zM512 256l128 48v64c0 106-73.4 199.6-128 224-54.6-24.4-128-118-128-224V304l128-48z"/></svg>'); }
.fa-piggy-bank { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 256c0-79.5-64.5-144-144-144H288V48c0-26.5-21.5-48-48-48s-48 21.5-48 48V112H160C71.6 112 0 183.6 0 272v48c0 17.7 14.3 32 32 32h16.5c14.2 38.3 50.8 65.5 94.1 66.8L128 480c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V418.7c21.2 1.3 42.6 1.3 64 0V480c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32l-14.6-61.2c43.3-1.3 79.9-28.5 94.1-66.8H480c17.7 0 32-14.3 32-32V256zM224 208h64v32H224V208z"/></svg>'); }
.fa-vault, .fa-building-columns { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm256 96a96 96 0 1 0 0 192 96 96 0 1 0 0-192zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>'); }
.fa-hand-holding-dollar { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M312 24V0H264V24c-39.8 0-72 32.2-72 72 0 37.6 28.8 68.6 65.7 71.7l30.6 2.6c17.9 1.5 31.7 16.5 31.7 34.4 0 19.3-15.7 35-35 35H232c-15.4 0-29.2-9.7-34.4-24.3l-22.6 8c9.6 27.2 35.2 45.4 65 45.6V320h48V296c39.8 0 72-32.2 72-72 0-37.6-28.8-68.6-65.7-71.7l-30.6-2.6c-17.9-1.5-31.7-16.5-31.7-34.4 0-19.3 15.7-35 35-35H344c15.4 0 29.2 9.7 34.4 24.3l22.6-8c-9.6-27.2-35.2-45.4-65-45.6V24zM32 352H256v32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32zm256 0h256c17.7 0 32 14.3 32 32s-14.3 32-32 32H288v-64z"/></svg>'); }
.fa-chart-pie { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M448 256c0-106-86-192-192-192V256H448zM224 32A224 224 0 1 0 448 256H224V32z"/></svg>'); }
.fa-book-journal-whills, .fa-book-bookmark, .fa-file-lines { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zM64 96c0-17.7 14.3-32 32-32H384V384H96c-17.7 0-32 14.3-32 32V96z"/></svg>'); }
.fa-file-invoice, .fa-file-invoice-dollar { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM80 256h160v32H80V256zm0 64h224v32H80V320zm0 64h224v32H80V384z"/></svg>'); }
.fa-shield-halved, .fa-shield-check { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.7 36.3 31.4 36.3 55.4V264c0 141.4-96.8 243.3-228.4 247.9C260.6 512 256 512 256 512s-4.6 0-9.6-.1C114.8 507.3 18 405.4 18 264V138.2c0-24 14.3-45.7 36.3-55.4L242.6 2.9C246.8 1 251.4 0 256 0zm0 64.3L82 133.7V264c0 108.6 72.8 190.5 174 195.9V64.3z"/></svg>'); }
.fa-clock-rotate-left, .fa-history { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M75 75L41 41C25.9 25.9 0 36.6 0 58V202c0 13.3 10.7 24 24 24H168c21.4 0 32.1-25.9 17-41L141 141c59.3-59.3 155.6-59.3 214.9 0s59.3 155.6 0 214.9-155.6 59.3-214.9 0c-15.6-15.6-40.9-15.6-56.6 0s-15.6 40.9 0 56.6c90.6 90.6 237.4 90.6 328 0s90.6-237.4 0-328S165.6-15.6 75 75zm181 85c-13.3 0-24 10.7-24 24V280c0 6.4 2.5 12.5 7 17l64 64c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L280 270.1V184c0-13.3-10.7-24-24-24z"/></svg>'); }
.fa-magnifying-glass { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.1-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>'); }
.fa-circle-check { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>'); }
.fa-circle-xmark, .fa-xmark { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/></svg>'); }
.fa-triangle-exclamation, .fa-circle-exclamation { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.4-7.7-34.7-20.1s-7.1-27.7 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>'); }
.fa-circle-info { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144a32 32 0 1 1 0-64 32 32 0 1 1 0 64z"/></svg>'); }
.fa-print { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M128 0C92.7 0 64 28.7 64 64v96h64V64H384v96h64V64c0-35.3-28.7-64-64-64H128zM448 208c0-17.7-14.3-32-32-32H96c-17.7 0-32 14.3-32 32V352c0 17.7 14.3 32 32 32h32v64c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V384h32c17.7 0 32-14.3 32-32V208zM320 448H192V320H320v128z"/></svg>'); }
.fa-arrow-right-from-bracket, .fa-power-off { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M377.9 105.9L500.7 228.7c6.2 6.2 9.4 14.4 9.4 22.6s-3.1 16.4-9.4 22.6L377.9 396.7c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L402.7 280H160c-17.7 0-32-14.3-32-32s14.3-32 32-32H402.7L332.7 151.2c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0zM160 96H96c-35.3 0-64 28.7-64 64V352c0 35.3 28.7 64 64 64h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H96c-70.7 0-128-57.3-128-128V160C-32 89.3 25.3 32 96 32h64c17.7 0 32 14.3 32 32s-14.3 32-32 32z"/></svg>'); }
.fa-bars { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM416 416H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32z"/></svg>'); }
.fa-rotate-left, .fa-rotate { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M125.7 160H176c17.7 0 32-14.3 32-32s-14.3-32-32-32H48C21.5 96 0 117.5 0 144v128c0 17.7 14.3 32 32 32s32-14.3 32-32V197.6C105.7 137.9 181 96 256 96c114.9 0 208 93.1 208 208s-93.1 208-208 208c-37.1 0-72.3-9.8-102.7-27.1c-15.3-8.8-34.9-3.5-43.7 11.9s-3.5 34.9 11.9 43.7C161.4 466.9 207 480 256 480c141.4 0 256-114.6 256-256S397.4 0 256 0C164.7 0 86.8 48.7 44.5 120.7L125.7 160z"/></svg>'); }
.fa-plus, .fa-plus-circle, .fa-file-circle-plus { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>'); }
.fa-lock { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"/></svg>'); }
.fa-arrow-down { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>'); }
.fa-arrow-up { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>'); }
.fa-arrow-left { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>'); }
.fa-arrow-right { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>'); }
.fa-bolt { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M0 256L224 0 160 192h192L128 512l64-256H0z"/></svg>'); }
.fa-coins { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 80c0 44.2-114.6 80-256 80S0 124.2 0 80 114.6 0 256 0s256 35.8 256 80zm0 112c0 38.6-87.3 71.1-208 78.4V216c0-13.3-10.7-24-24-24s-24 10.7-24 24v54.4C135.3 263.1 48 230.6 48 192v-35.8C98.4 179 173.2 192 256 192s157.6-13 208-35.8V192zM0 304c0 38.6 87.3 71.1 208 78.4V328c0-13.3 10.7-24 24-24s24 10.7 24 24v54.4C376.7 375.1 464 342.6 464 304v-35.8c-50.4 22.8-125.2 35.8-208 35.8s-157.6-13-208-35.8V304zM256 512c-141.4 0-256-35.8-256-80v-35.8c50.4 22.8 125.2 35.8 208 35.8s157.6-13 208-35.8V432c0 44.2-114.6 80-256 80z"/></svg>'); }
.fa-scale-balanced { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M384 32H256c-17.7 0-32 14.3-32 32v64H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h160v192H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H512c17.7 0 32-14.3 32-32s-14.3-32-32-32H448V256h160c17.7 0 32-14.3 32-32V192c0-35.3-28.7-64-64-64H416V64c0-17.7-14.3-32-32-32zM320 128h64v320H256V128h64z"/></svg>'); }
.fa-file-signature, .fa-file-excel { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM128 320h128v32H128V320zm0 64h128v32H128V384z"/></svg>'); }
.fa-calendar-days { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H48c-35.3 0-64-28.7-64-64V128C-16 92.7 12.7 64 48 64H96V32c0-17.7 14.3-32 32-32zM48 192v256h352V192H48z"/></svg>'); }
.fa-pencil, .fa-pen-nib { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M410.3 231l11.3-11.3c27.6-27.6 27.6-72.4 0-100L392.1 90.2c-27.6-27.6-72.4-27.6-100 0L280.9 101.5l129.4 129.5zm-33.9 33.9L129.5 511.9 0 512l.1-129.5L247 135.5 376.4 264.9z"/></svg>'); }
.fa-eye { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 0 240c17.3 32 48.6 84 95.4 127.4C142.5 411.2 207.2 448 288 448s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 95.4-127.4-17.3-32-48.6-84-95.4-127.4C433.5 68.8 368.8 32 288 32zm0 320a96 96 0 1 1 0-192 96 96 0 1 1 0 192z"/></svg>'); }
.fa-certificate { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0c14.1 0 27.2 6.8 35.3 18.2l24.9 35.1 42.4-7.4c17.6-3.1 35.1 5.4 43.8 21.3l21 38.3 40.5 14.1c16.8 5.9 28.1 21.6 28.1 39.4V202l35.1 24.9c11.4 8.1 18.2 21.2 18.2 35.3s-6.8 27.2-18.2 35.3L492 322.4v42.9c0 17.8-11.3 33.5-28.1 39.4l-40.5 14.1-21 38.3c-8.7 15.9-26.2 24.4-43.8 21.3l-42.4-7.4-24.9 35.1C283.2 505.2 270.1 512 256 512s-27.2-6.8-35.3-18.2l-24.9-35.1-42.4 7.4c-17.6 3.1-35.1-5.4-43.8-21.3l-21-38.3-40.5-14.1C71.3 396.5 60 380.8 60 363V320.1L24.9 295.2C13.5 287.1 6.7 274 6.7 259.9s6.8-27.2 18.2-35.3L60 199.7v-42.9c0-17.8 11.3-33.5 28.1-39.4l40.5-14.1 21-38.3c8.7-15.9 26.2-24.4 43.8-21.3l42.4 7.4 24.9-35.1C228.8 6.8 241.9 0 256 0zm0 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z"/></svg>'); }
.fa-phone { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></svg>'); }
.fa-location-dot { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M192 0C86 0 0 86 0 192c0 77.4 117.4 233.4 174.5 306.7c9.5 12.2 27.5 12.2 37 0C266.6 425.4 384 269.4 384 192c0-106-86-192-192-192zm0 288a96 96 0 1 1 0-192 96 96 0 1 1 0 192z"/></svg>'); }
.fa-id-card, .fa-address-card { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M0 96C0 60.7 28.7 32 64 32H512c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM128 288a64 64 0 1 0 0-128 64 64 0 1 0 0 128zm192-80H448v32H320V208zm0 64H448v32H320V272z"/></svg>'); }
.fa-receipt { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M14 2.2C22.5-1.7 32.5-.3 39.6 5.8L80 40.4 120.4 5.8c9-7.7 22.2-7.7 31.2 0L192 40.4 232.4 5.8c9-7.7 22.2-7.7 31.2 0L304 40.4 344.4 5.8c7.1-6.1 17.1-7.5 25.6-3.6S384 14.5 384 24V488c0 9.5-5.5 18.1-14 22s-18.5 2.5-25.6-3.6L304 471.6l-40.4 34.6c-9 7.7-22.2 7.7-31.2 0L192 471.6l-40.4 34.6c-9 7.7-22.2 7.7-31.2 0L80 471.6 39.6 506.2c-7.1 6.1-17.1 7.5-25.6 3.6S0 497.5 0 488V24C0 14.5 5.5 5.9 14 2.2zM64 128H320v32H64V128zm0 64H320v32H64V192zm0 64H224v32H64V256z"/></svg>'); }
.fa-calculator { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64zM96 64H288v64H96V64zm0 128h48v48H96V192zm96 0h48v48H192V192zm96 0h48v48H288V192zm-192 96h48v48H96V288zm96 0h48v48H192V288zm96 0h48v144H288V288zM96 384h48v48H96V384zm96 0h48v48H192V384z"/></svg>'); }
.fa-fingerprint { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 0C100.3 0 0 100.3 0 224c0 37.7 9.4 73.2 25.9 104.5 7.8 14.8 26.2 20.4 41 12.6s20.4-26.2 12.6-41C66 274.6 60 250 60 224c0-90.6 73.4-164 164-164s164 73.4 164 164c0 23.3-4.9 45.4-13.6 65.4-7.1 16.3 0.3 35.3 16.6 42.4s35.3-.3 42.4-16.6C441.7 286.9 448 256.2 448 224 448 100.3 347.7 0 224 0z"/></svg>'); }
.fa-floppy-disk { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V160L320 32H64zM96 96h192v96H96V96zm224 320H128V288h192v128z"/></svg>'); }
.fa-building { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M48 0C21.5 0 0 21.5 0 48V464c0 26.5 21.5 48 48 48H336c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48H48zM96 64h48v48H96V64zm96 0h48v48H192V64zm96 0h48v48H288V64zM96 160h48v48H96V160zm96 0h48v48H192V160zm96 0h48v48H288V160zM96 256h48v48H96V256zm96 0h48v48H192V256zm96 0h48v48H288V256zM144 384h96v128H144V384z"/></svg>'); }
.fa-clipboard-list, .fa-list-check { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M192 0c-41.8 0-77.4 26.7-90.5 64H48C21.5 64 0 85.5 0 112V464c0 26.5 21.5 48 48 48H336c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H282.5C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM96 224h192v32H96V224zm0 64h192v32H96V288zm0 64h192v32H96V352z"/></svg>'); }
.fa-handshake { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm352 64h-72.2c-29.2 0-56.5 12.8-74.8 35L384 410.7l-45-55.7c-18.3-22.2-45.6-35-74.8-35H192c-53 0-96 43-96 96v64c0 17.7 14.3 32 32 32h416c17.7 0 32-14.3 32-32v-64c0-53-43-96-96-96z"/></svg>'); }
.fa-table-list, .fa-sheet-plastic { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm64 64H448v-32H64v32zm0 64H224v64H64V224zm0 128H224v64H64V352zm224 64H448V352H288v64zm160-128H288V224H448v64z"/></svg>'); }
.fa-user-check { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3 0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3zm380.4-82.7l-73.4 73.4-31.1-31.1c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l48 48c9.4 9.4 24.6 9.4 33.9 0l90.5-90.5c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-34-0.1z"/></svg>'); }

/* Generic Fallback for other icon names */
.fa-stamp:before { content: "★"; font-style: normal; }
.fa-ban:before { content: "⊘"; font-style: normal; }
.fa-chevron-down { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>'); }
.fa-circle-user { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM208 352a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm48-80c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80zm0 176c-48.4 0-92.3-21.4-122.4-55.5 12.3-28.9 40.8-48.5 74.4-48.5h96c33.6 0 62.1 19.6 74.4 48.5C348.3 426.6 304.4 448 256 448z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM208 352a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm48-80c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80zm0 176c-48.4 0-92.3-21.4-122.4-55.5 12.3-28.9 40.8-48.5 74.4-48.5h96c33.6 0 62.1 19.6 74.4 48.5C348.3 426.6 304.4 448 256 448z"/></svg>'); }

/* Animation, Gradients & Special Utilities */
.min-w-0 { min-width: 0 !important; }
.h-16 { height: 4rem !important; }
.w-64 { width: 16rem !important; }
.-translate-x-full { transform: translateX(-100%) !important; }
.transition-all { transition-property: all !important; }
.duration-200 { transition-duration: 200ms !important; }
.backdrop-blur-xs { backdrop-filter: blur(2px); }
.bg-gradient-to-br { background: linear-gradient(135deg, var(--amber-400), var(--amber-600)) !important; }
.bg-gradient-to-r { background: linear-gradient(90deg, var(--navy-950), var(--navy-900), var(--navy-800)) !important; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

/* 11. RESPONSIVE MEDIA QUERIES (Mobile, Tablet, Desktop) */
@media (max-width: 1023px) {
    #sidebar-panel {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 50 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
    }
    #sidebar-panel:not(.-translate-x-full) {
        transform: translateX(0) !important;
    }
    .lg\:hidden { display: block !important; }
}

@media (min-width: 640px) {
    .sm\:block { display: block !important; }
    .sm\:flex  { display: flex !important; }
    .sm\:p-6   { padding: 1.5rem !important; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) {
    .md\:flex { display: flex !important; }
    .md\:grid { display: grid !important; }
    .md\:hidden { display: none !important; }
    .md\:flex-row { flex-direction: row !important; }
    .md\:items-center { align-items: center !important; }
    .md\:justify-between { justify-content: space-between !important; }
    .md\:w-auto { width: auto !important; }
    .md\:w-48 { width: 12rem !important; }
    .md\:w-64 { width: 16rem !important; }
    .md\:w-96 { width: 24rem !important; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .md\:col-span-2 { grid-column: span 2 / span 2 !important; }
    .md\:col-span-3 { grid-column: span 3 / span 3 !important; }
}

@media (min-width: 1024px) {
    #sidebar-panel {
        position: static !important;
        transform: translateX(0) !important;
        display: flex !important;
    }
    .lg\:static { position: static !important; }
    .lg\:translate-x-0 { transform: translateX(0) !important; }
    .lg\:flex { display: flex !important; }
    .lg\:grid { display: grid !important; }
    .lg\:hidden { display: none !important; }
    .lg\:flex-row { flex-direction: row !important; }
    .lg\:items-center { align-items: center !important; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .lg\:col-span-2 { grid-column: span 2 / span 2 !important; }
    .lg\:p-8 { padding: 2rem !important; }
}

@media (min-width: 1280px) {
    .xl\:flex { display: flex !important; }
}

/* 12. PRINT MEDIA RULES */
@media print {
    .no-print { display: none !important; }
    body { background: white !important; color: black !important; padding: 0 !important; margin: 0 !important; }
    #sidebar-panel, #sidebar-overlay, header { display: none !important; }
    main { overflow: visible !important; height: auto !important; padding: 0 !important; }
    .card-glass { border: none !important; box-shadow: none !important; }
}