/* Outreachist - Consolidated & Minified CSS */
/* Version: 2.0 */

/* ===== Base Styles ===== */
[x-cloak]{display:none!important}
body{font-family:'Inter',sans-serif}

/* ===== Navigation ===== */
.nav-link{position:relative;font-weight:600;transition:all .2s ease}
.nav-link:hover{color:#ef4444}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:#ef4444;transition:width .2s ease}
.nav-link:hover::after{width:100%}

/* ===== Buttons ===== */
.btn-get-started{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);box-shadow:0 4px 14px 0 rgba(239,68,68,.39);transition:all .3s ease}
.btn-get-started:hover{transform:translateY(-2px);box-shadow:0 6px 20px 0 rgba(239,68,68,.5)}

/* ===== Language Switcher ===== */
.lang-btn{background:#f3f4f6;border-radius:9999px;padding:6px 12px;transition:all .2s ease}
.lang-btn:hover{background:#e5e7eb}

/* ===== Sidebar ===== */
.sidebar-active{background-color:#ef4444;color:#fff}

/* ===== Dashboard Theme Variables ===== */
:root{--bg-primary:#ffffff;--bg-secondary:#f8fafc;--bg-tertiary:#f1f5f9;--text-primary:#0f172a;--text-secondary:#334155;--text-muted:#64748b;--border-primary:#e2e8f0;--accent-primary:#f97316;--accent-secondary:#ea580c;--success:#10b981;--error:#ef4444;--warning:#f59e0b}
[data-theme="dark"]{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--border-primary:#334155;--accent-primary:#f97316;--accent-secondary:#fb923c;--success:#34d399;--error:#f87171;--warning:#fbbf24}

/* ===== Form Styles ===== */
.form-card{background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:1rem;padding:1.5rem}
.form-label{display:block;font-size:.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:.5rem}
.form-input{width:100%;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:.75rem;color:var(--text-primary);font-size:.875rem;transition:all .2s ease}
.form-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.form-input::placeholder{color:var(--text-muted)}
.form-input:disabled{opacity:.5;cursor:not-allowed}
.form-input[type="number"]::-webkit-outer-spin-button,.form-input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.form-input[type="number"]{-moz-appearance:textfield}
.form-select{width:100%;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:.75rem;color:var(--text-primary);font-size:.875rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1.25rem;padding-right:2.5rem}
.form-select:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.form-checkbox{width:1.25rem;height:1.25rem;border-radius:.375rem;border:2px solid var(--border-primary);background:var(--bg-secondary);cursor:pointer;appearance:none;transition:all .2s ease}
.form-checkbox:checked{background:var(--accent-primary);border-color:var(--accent-primary)}
.form-checkbox:checked::after{content:'';display:block;width:.5rem;height:.75rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);margin:0 auto}

/* ===== Cards ===== */
.platform-card{position:relative;background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:1rem;padding:1.5rem;cursor:pointer;transition:all .2s ease}
.platform-card:hover{border-color:var(--text-muted)}
.platform-card.selected{border-color:var(--accent-primary);background:rgba(249,115,22,.05)}
.platform-card.disabled{opacity:.5;cursor:not-allowed}

/* ===== Tabs ===== */
.tab-nav{display:flex;background:var(--bg-secondary);border-radius:1rem;padding:.375rem;margin-bottom:1.5rem}
.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1rem;border-radius:.75rem;font-size:.875rem;font-weight:600;color:var(--text-muted);background:transparent;border:none;cursor:pointer;transition:all .2s ease}
.tab-btn:hover:not(.active):not(:disabled){color:var(--text-secondary);background:var(--bg-tertiary)}
.tab-btn.active{background:var(--accent-primary);color:#fff;box-shadow:0 2px 8px rgba(249,115,22,.3)}
.tab-btn:disabled{opacity:.5;cursor:not-allowed}
.tab-btn .step-num{width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;background:var(--bg-tertiary);color:var(--text-muted)}
.tab-btn.active .step-num{background:rgba(255,255,255,.2);color:#fff}
.tab-btn.completed .step-num{background:#10b981;color:#fff}

/* ===== Type Pills ===== */
.type-pill{position:relative;display:inline-flex;align-items:center;padding:.5rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:.5rem;cursor:pointer;transition:all .15s ease}
.type-pill:hover{border-color:var(--text-muted)}
.type-pill.selected{border-color:var(--accent-primary);background:var(--accent-primary)}
.type-pill.selected .type-name{color:#fff!important}
.type-pill .type-name{font-size:.8125rem;font-weight:500;color:var(--text-secondary)}
.type-pill input[type="radio"]{position:absolute;opacity:0;width:0;height:0}

/* ===== Navigation Buttons ===== */
.btn-nav{display:flex;align-items:center;gap:.5rem;padding:.875rem 1.5rem;border-radius:.75rem;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .2s ease}
.btn-next{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;border:none}
.btn-next:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px rgba(249,115,22,.3)}
.btn-next:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-back{background:var(--bg-secondary);border:1px solid var(--border-primary);color:var(--text-secondary)}
.btn-back:hover{background:var(--bg-tertiary);border-color:var(--text-muted)}
.btn-submit{flex:1;padding:1rem 1.5rem;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:.75rem;border:none;cursor:pointer;transition:all .2s ease}
.btn-submit:hover{background:linear-gradient(135deg,#ea580c,#dc2626);transform:translateY(-1px);box-shadow:0 4px 12px rgba(249,115,22,.3)}

/* ===== Progress Bar ===== */
.progress-bar{height:4px;background:var(--bg-secondary);border-radius:2px;overflow:hidden;margin-bottom:1.5rem}
.progress-fill{height:100%;background:linear-gradient(90deg,#f97316,#ea580c);transition:width .3s ease}

/* ===== Earnings Box ===== */
.earnings-box{padding:1.25rem;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);border-radius:.75rem}

/* ===== Sensitive Cards ===== */
.sensitive-card{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:.5rem;transition:all .15s ease;cursor:pointer;overflow:hidden}
.sensitive-card:hover{border-color:var(--text-muted)}
.sensitive-card.active{border-color:var(--accent-primary)}

/* ===== Asset Grid ===== */
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem}
.asset-card{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:.75rem;cursor:pointer;transition:all .15s ease}
.asset-card:hover{border-color:var(--text-muted)}
.asset-card.selected{border-color:var(--accent-primary);background:rgba(249,115,22,.05)}
.asset-card .asset-icon{width:40px;height:40px;border-radius:.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.asset-card .asset-icon svg{width:20px;height:20px}

/* ===== Utilities ===== */
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.scrollbar-thin::-webkit-scrollbar{width:6px;height:6px}
.scrollbar-thin::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:3px}
.scrollbar-thin::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}
.scrollbar-thin::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}

/* ===== Admin Styles ===== */
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{position:sticky;top:0;z-index:10;background:var(--bg-secondary);padding:.75rem 1rem;text-align:left;font-weight:600;font-size:.75rem;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border-primary)}
.admin-table td{padding:.75rem 1rem;border-bottom:1px solid var(--border-primary);font-size:.875rem}
.admin-table tbody tr:hover{background:var(--bg-secondary)}

/* ===== Status Badges ===== */
.badge{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500}
.badge-success{background:rgba(16,185,129,.1);color:#10b981}
.badge-error{background:rgba(239,68,68,.1);color:#ef4444}
.badge-warning{background:rgba(245,158,11,.1);color:#f59e0b}
.badge-info{background:rgba(59,130,246,.1);color:#3b82f6}
.badge-pending{background:rgba(107,114,128,.1);color:#6b7280}

/* ===== Tailwind JIT Class Polyfills ===== */
/* Emerald colors */
.from-emerald-600{--tw-gradient-from:#059669}
.via-emerald-600{--tw-gradient-stops:var(--tw-gradient-from),#059669,var(--tw-gradient-to,rgba(5,150,105,0))}
.to-emerald-600{--tw-gradient-to:#059669}
.bg-emerald-600{background-color:#059669}
.text-emerald-600{color:#059669}

/* Teal colors */
.from-teal-600{--tw-gradient-from:#0d9488}
.via-teal-600{--tw-gradient-stops:var(--tw-gradient-from),#0d9488,var(--tw-gradient-to,rgba(13,148,136,0))}
.to-teal-600{--tw-gradient-to:#0d9488}
.bg-teal-600{background-color:#0d9488}
.text-teal-600{color:#0d9488}

/* Slate colors */
.from-slate-900{--tw-gradient-from:#0f172a}
.via-slate-900{--tw-gradient-stops:var(--tw-gradient-from),#0f172a,var(--tw-gradient-to,rgba(15,23,42,0))}
.to-slate-900{--tw-gradient-to:#0f172a}
.bg-slate-900{background-color:#0f172a}
.text-slate-900{color:#0f172a}
.from-slate-800{--tw-gradient-from:#1e293b}
.to-slate-800{--tw-gradient-to:#1e293b}
.bg-slate-800{background-color:#1e293b}
.text-slate-800{color:#1e293b}
.text-slate-700{color:#334155}
.text-slate-600{color:#475569}
.text-slate-500{color:#64748b}
.text-slate-400{color:#94a3b8}
.text-slate-300{color:#cbd5e1}
.bg-slate-100{background-color:#f1f5f9}
.bg-slate-50{background-color:#f8fafc}

/* Purple gradient for auth */
.via-purple-900{--tw-gradient-stops:var(--tw-gradient-from),#581c87,var(--tw-gradient-to,rgba(88,28,135,0))}
.from-purple-900{--tw-gradient-from:#581c87}
.to-purple-900{--tw-gradient-to:#581c87}

/* Arbitrary values polyfills */
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.gap-1\.5{gap:.375rem}
.gap-0\.5{gap:.125rem}
.p-0\.5{padding:.125rem}
.text-\[10px\]{font-size:10px}

/* White with opacity */
.text-white\/60{color:rgba(255,255,255,.6)}
.text-white\/40{color:rgba(255,255,255,.4)}
.text-white\/70{color:rgba(255,255,255,.7)}
.bg-white\/10{background-color:rgba(255,255,255,.1)}
.bg-white\/20{background-color:rgba(255,255,255,.2)}
.hover\:text-white\/70:hover{color:rgba(255,255,255,.7)}

/* Red with opacity */
.bg-red-500\/10{background-color:rgba(239,68,68,.1)}
.border-red-500\/20{border-color:rgba(239,68,68,.2)}
.text-red-300{color:#fca5a5}
.text-red-400{color:#f87171}

/* Green with opacity */
.bg-green-500\/10{background-color:rgba(34,197,94,.1)}
.border-green-500\/20{border-color:rgba(34,197,94,.2)}
.text-green-300{color:#86efac}

/* Blue with opacity */
.bg-blue-500\/10{background-color:rgba(59,130,246,.1)}
.border-blue-500\/20{border-color:rgba(59,130,246,.2)}
.text-blue-100{color:#dbeafe}
.text-blue-200{color:#bfdbfe}
.text-blue-300{color:#93c5fd}

/* Purple opacity */
.bg-purple-500\/10{background-color:rgba(168,85,247,.1)}

/* Orange opacity */
.bg-orange-500\/10{background-color:rgba(249,115,22,.1)}

/* Backdrop blur */
.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* Aspect ratio */
.aspect-square{aspect-ratio:1/1}
.aspect-video{aspect-ratio:16/9}

/* Object fit */
.object-cover{object-fit:cover}

/* Grid pattern background (for auth page) */
.bg-grid-pattern{background-image:url('data:image/svg+xml,%3Csvg width=%2240%22 height=%2240%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cdefs%3E%3Cpattern id=%22grid%22 width=%2240%22 height=%2240%22 patternUnits=%22userSpaceOnUse%22%3E%3Cpath d=%22M 40 0 L 0 0 0 40%22 fill=%22none%22 stroke=%22rgba(255,255,255,0.03)%22 stroke-width=%221%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22url(%23grid)%22/%3E%3C/svg%3E')}

/* Announcement bar pattern */
.bg-dots-pattern{background-image:url('data:image/svg+xml,%3Csvg width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22%23ffffff%22 fill-opacity=%220.05%22%3E%3Cpath d=%22M0 0h20v20H0z%22/%3E%3C/g%3E%3C/svg%3E')}

/* Dropdown Menu */
.dropdown-menu{background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:.75rem;box-shadow:0 10px 40px rgba(0,0,0,.15);overflow:hidden}
.dropdown-item{display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;color:var(--text-secondary);font-size:.875rem;transition:all .15s}
.dropdown-item:hover{background:var(--bg-secondary);color:var(--text-primary)}
.dropdown-item svg{width:1.125rem;height:1.125rem;flex-shrink:0}

/* Sidebar */
.sidebar{background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%);--sidebar-text:#f1f5f9;--sidebar-text-muted:#94a3b8;--sidebar-hover:rgba(255,255,255,.08);--sidebar-active:rgba(249,115,22,.2)}

/* Mobile Sidebar - completely hidden when closed */
@media (max-width: 767px) {
    .sidebar {
        position: fixed !important;
        left: 0;
        top: 0;
        height: 100vh !important;
        z-index: 50 !important;
    }
    .sidebar.-translate-x-full {
        transform: translateX(-100%) !important;
        visibility: hidden;
    }
    .sidebar.translate-x-0 {
        transform: translateX(0) !important;
        visibility: visible;
    }
    /* Main content takes full width on mobile */
    .flex-1.flex.flex-col.overflow-hidden {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

/* Alert styles */
.alert{padding:1rem;border-radius:.75rem;margin-bottom:1rem;display:flex;align-items:center;gap:.75rem}
.alert-success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:#10b981}
.alert-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#ef4444}
.alert-warning{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:#f59e0b}
.alert-info{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);color:#3b82f6}
/* ===== Prose Styles (Blog Content) ===== */
.prose h1{font-size:2.5rem;font-weight:800;color:#0f172a;margin-top:2.5rem;margin-bottom:1.25rem;line-height:1.2;letter-spacing:-0.025em}
.prose h2{font-size:2rem;font-weight:700;color:#1e293b;margin-top:2.25rem;margin-bottom:1rem;line-height:1.25;padding-bottom:.5rem;border-bottom:2px solid #f1f5f9}
.prose h3{font-size:1.5rem;font-weight:700;color:#334155;margin-top:2rem;margin-bottom:.75rem;line-height:1.3}
.prose h4{font-size:1.25rem;font-weight:600;color:#475569;margin-top:1.75rem;margin-bottom:.5rem;line-height:1.4}
.prose h5{font-size:1.125rem;font-weight:600;color:#64748b;margin-top:1.5rem;margin-bottom:.5rem}
.prose h6{font-size:1rem;font-weight:600;color:#64748b;margin-top:1.25rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}
.prose p{margin-bottom:1.25rem;line-height:1.8}
.prose ul,.prose ol{margin-bottom:1.25rem;padding-left:1.5rem}
.prose li{margin-bottom:.5rem;line-height:1.7}
.prose blockquote{border-left:4px solid #ef4444;padding-left:1.5rem;margin:1.5rem 0;font-style:italic;color:#475569;background:#f8fafc;padding:1rem 1.5rem;border-radius:0 .5rem .5rem 0}
.prose code{background:#f1f5f9;padding:.125rem .375rem;border-radius:.25rem;font-size:.875em;color:#e11d48}
.prose pre{background:#1e293b;border-radius:.75rem;padding:1.25rem;overflow-x:auto;margin:1.5rem 0}
.prose pre code{background:transparent;color:#e2e8f0;padding:0}
.prose a{color:#ef4444;text-decoration:none;font-weight:500;transition:color .2s}
.prose a:hover{color:#dc2626;text-decoration:underline}
.prose img{border-radius:.75rem;margin:1.5rem 0}
.prose table{width:100%;border-collapse:collapse;margin:1.5rem 0}
.prose th,.prose td{border:1px solid #e2e8f0;padding:.75rem 1rem;text-align:left}
.prose th{background:#f8fafc;font-weight:600}
.prose hr{border:none;border-top:2px solid #f1f5f9;margin:2rem 0}

/* ===== Inline CSS Reduction Utilities (v1.6) ===== */
/* Common gradients */
.gradient-primary{background:linear-gradient(135deg,#ef4444,#f97316)!important}
.gradient-primary-reverse{background:linear-gradient(135deg,#f97316,#ef4444)!important}
.gradient-green{background:linear-gradient(135deg,#10b981,#059669)!important}
.gradient-blue{background:linear-gradient(135deg,#3b82f6,#2563eb)!important}
.gradient-purple{background:linear-gradient(135deg,#a855f7,#7c3aed)!important}
.gradient-dark{background:linear-gradient(to bottom right,#0f172a,#1e293b)!important}
.gradient-dark-br{background:linear-gradient(135deg,#1e293b,#0f172a)!important}
.gradient-orange{background:linear-gradient(135deg,#f97316,#ea580c)!important}
.gradient-red{background:linear-gradient(135deg,#dc2626,#991b1b)!important}
.gradient-emerald{background:linear-gradient(135deg,#10b981,#047857)!important}
.gradient-teal{background:linear-gradient(135deg,#14b8a6,#0d9488)!important}

/* Common box-shadows */
.shadow-primary{box-shadow:0 4px 14px 0 rgba(239,68,68,.39)!important}
.shadow-primary-lg{box-shadow:0 6px 20px 0 rgba(239,68,68,.5)!important}
.shadow-orange{box-shadow:0 4px 12px rgba(249,115,22,.3)!important}
.shadow-green{box-shadow:0 4px 14px rgba(16,185,129,.3)!important}
.shadow-card{box-shadow:0 10px 40px rgba(0,0,0,.15)!important}

/* Common border-radius values */
.rounded-2xl{border-radius:1rem!important}
.rounded-3xl{border-radius:1.5rem!important}
.rounded-4xl{border-radius:2rem!important}

/* Common transform values */
.translate-y--2{transform:translateY(-2px)!important}
.translate-y--3{transform:translateY(-3px)!important}
.scale-105{transform:scale(1.05)!important}

/* Letter spacing */
.tracking-tight{letter-spacing:-0.025em!important}
.tracking-wide{letter-spacing:0.025em!important}
.tracking-wider{letter-spacing:0.05em!important}

/* Common opacity values */
.opacity-90{opacity:0.9!important}
.opacity-80{opacity:0.8!important}
.opacity-70{opacity:0.7!important}
.opacity-60{opacity:0.6!important}
.opacity-50{opacity:0.5!important}

/* Common gap values (if not in Tailwind) */
.gap-3{gap:0.75rem!important}
.gap-4{gap:1rem!important}
.gap-5{gap:1.25rem!important}
.gap-6{gap:1.5rem!important}

/* Common padding values */
.p-6{padding:1.5rem!important}
.p-8{padding:2rem!important}
.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}
.px-8{padding-left:2rem!important;padding-right:2rem!important}
.py-6{padding-top:1.5rem!important;padding-bottom:1.5rem!important}
.py-8{padding-top:2rem!important;padding-bottom:2rem!important}

/* Common margin values */
.mb-6{margin-bottom:1.5rem!important}
.mb-8{margin-bottom:2rem!important}
.mt-6{margin-top:1.5rem!important}
.mt-8{margin-top:2rem!important}

/* Transition utilities */
.transition-all{transition:all 0.2s ease!important}
.transition-transform{transition:transform 0.2s ease!important}
.transition-colors{transition:color 0.2s ease,background-color 0.2s ease!important}

/* ===== Repetitive Pattern Utilities (v1.7) ===== */
/* Footer links - used 27+ times */
.footer-link{color:#d1d5db;transition:color .2s}
.footer-link:hover{color:#fff}

/* Payment badges - used 3+ times */
.payment-badge{padding:.25rem .5rem;font-size:.75rem;font-weight:600;color:#d1d5db;background:#1f2937;border-radius:.25rem}

/* Mobile menu items */
.mobile-menu-item{display:block;padding:1rem;border-radius:.75rem;color:#374151;font-weight:500;transition:all .2s}
.mobile-menu-item:hover{background:#f9fafb}

/* Icon containers in navigation */
.nav-icon-box{width:2rem;height:2rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center}

/* Trust badges */
.trust-badge{display:inline-flex;align-items:center;gap:.375rem;font-size:.875rem;color:#d1d5db}

/* Inline styles to classes */
.bg-gradient-green{background:linear-gradient(to right,#16a34a,#059669,#0d9488)!important}
.bg-gradient-primary{background:linear-gradient(135deg,#ef4444,#f97316)!important}
.bg-gradient-dark-subtle{background:linear-gradient(135deg,rgba(17,24,39,0.95),rgba(31,41,55,0.95))!important}
.bg-gradient-purple{background:linear-gradient(135deg,#8b5cf6,#6366f1)!important}

/* Common spacing */
.py-2-5{padding-top:.625rem!important;padding-bottom:.625rem!important}

/* ===== Homepage Inline Style Utilities (v1.8) ===== */
/* Text Colors */
.text-dark{color:#0f172a!important}
.text-gray-700{color:#334155!important}
.text-gray-600{color:#475569!important}
.text-gray-500{color:#64748b!important}
.text-gray-400{color:#94a3b8!important}
.text-gray-300{color:#cbd5e1!important}

/* Background Colors */
.bg-dark{background:#0f172a!important}
.bg-light{background:#f8fafc!important}

/* Hero Section Gradients */
.bg-gradient-hero{background:linear-gradient(to bottom right,#0f172a,#1e293b,#0f172a)!important}
.bg-gradient-table-header{background:linear-gradient(to right,#1e293b,#0f172a)!important}
.bg-gradient-light-green{background:linear-gradient(to bottom right,#ecfdf5,#f0fdfa)!important}
.bg-gradient-light-blue{background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%)!important;border:1px solid #bae6fd}

/* Text Gradients (webkit) */
.text-gradient-red{background:linear-gradient(to right,#f87171,#fb923c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Glassmorphism Styles */
.glass-badge{background:rgba(255,255,255,0.1)!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;border:1px solid rgba(255,255,255,0.2)!important}
.glass-card{background:rgba(255,255,255,0.05)!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;border:1px solid rgba(255,255,255,0.1)!important}
.glass-btn-blue{background:rgba(59,130,246,0.15)!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;border:2px solid rgba(59,130,246,0.5)!important}
.glass-btn-purple{background:rgba(168,85,247,0.15)!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;border:2px solid rgba(168,85,247,0.5)!important}

/* Button Gradients with Shadows */
.btn-primary-shadow{background:linear-gradient(to right,#ef4444,#f97316)!important;box-shadow:0 10px 15px -3px rgba(239,68,68,0.25),0 4px 6px -2px rgba(239,68,68,0.05)!important}
.btn-green-shadow{background:linear-gradient(to right,#16a34a,#059669)!important;box-shadow:0 10px 15px -3px rgba(34,197,94,0.25)!important}

/* Step Number Gradients */
.bg-step-blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8)!important}
.bg-step-green{background:linear-gradient(135deg,#10b981,#059669)!important}
.bg-step-orange{background:linear-gradient(135deg,#f97316,#ea580c)!important}
.bg-step-purple{background:linear-gradient(135deg,#8b5cf6,#7c3aed)!important}

/* Background Patterns (Data URIs) */
.bg-pattern-grid{background-image:url('data:image/svg+xml,%3Csvg width=%2260%22 height=%2260%22 viewBox=%220 0 60 60%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 fill-rule=%22evenodd%22%3E%3Cg fill=%22%23ffffff%22 fill-opacity=%220.4%22%3E%3Cpath d=%22M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')!important}

/* Additional Homepage Patterns */
.bg-gradient-light-green-h{background:linear-gradient(to right,#f0fdf4,#ecfdf5)!important}
.bg-gradient-yellow{background:linear-gradient(135deg,#fefce8 0%,#fef9c3 100%)!important}
.bg-gradient-dark-br-simple{background:linear-gradient(to bottom right,#0f172a,#1e293b)!important}

/* Specific Brand Colors */
.text-green-600{color:#16a34a!important}
.text-blue-600{color:#2563eb!important}
.text-purple-600{color:#9333ea!important}
.text-orange-600{color:#ea580c!important}

/* Badge Styles */
.badge-white-trans{background:rgba(255,255,255,0.1)!important;color:rgba(255,255,255,0.8)!important}
.badge-blue-trans{background:rgba(59,130,246,0.2)!important}

/* Number Badge Backgrounds */
.bg-red-20{background:rgba(239,68,68,0.2)!important}
.bg-blue-20{background:rgba(59,130,246,0.2)!important}
.bg-purple-20{background:rgba(168,85,247,0.2)!important}

/* Glass Card Variant */
.glass-card-border{background:rgba(255,255,255,0.05)!important;border:1px solid rgba(255,255,255,0.1)!important}

/* Announcement Bar Pattern */
.bg-pattern-dots-announcement{background-image:url('data:image/svg+xml,%3Csvg width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22%23ffffff%22 fill-opacity=%220.05%22%3E%3Cpath d=%22M0 0h20v20H0z%22/%3E%3C/g%3E%3C/svg%3E')!important}

/* Layout-specific utilities */
.gap-1-5{gap:.375rem!important}
.py-0-5{padding-top:.125rem!important;padding-bottom:.125rem!important}
.text-15{font-size:15px!important}
.text-10{font-size:10px!important}
.max-w-320{max-width:320px!important}
.border-white-10{border:1px solid rgba(255,255,255,0.1)!important}
.border-white-20{border:1px solid rgba(255,255,255,0.2)!important}
.border-t-white-10{border-top:1px solid rgba(255,255,255,0.1)!important}
.close-btn-red{background:rgba(239,68,68,0.9)!important;box-shadow:0 2px 8px rgba(239,68,68,0.4)!important}

/* Hero Background Pattern */
.bg-pattern-hero{background-image:url('data:image/svg+xml,%3Csvg width=%2260%22 height=%2260%22 viewBox=%220 0 60 60%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 fill-rule=%22evenodd%22%3E%3Cg fill=%22%23ffffff%22 fill-opacity=%220.4%22%3E%3Cpath d=%22M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')!important}

/* Chatbot Widget Utilities */
.chatbot-position{bottom:20px!important;right:20px!important}
.bg-gradient-emerald{background:linear-gradient(135deg,#10b981,#059669)!important}
.bg-emerald-500{background:#10b981!important}
.chatbot-window{width:375px!important;max-width:calc(100vw - 40px)!important;height:500px!important;max-height:calc(100vh - 100px)!important}
.chatbot-messages{height:calc(100% - 130px)!important}
.chatbot-overlay{top:56px!important}
.animation-delay-0{animation-delay:0ms!important}
.animation-delay-150{animation-delay:150ms!important}
.animation-delay-300{animation-delay:300ms!important}
.bg-user-message{background:linear-gradient(135deg,#10b981,#059669)!important;color:#ffffff!important}
.shadow-purple{box-shadow:0 4px 15px rgba(139,92,246,0.4)!important}

/* Content Strategy Section */
.vertical-line-green-blue{background:linear-gradient(to bottom,#10b981,#3b82f6)!important}
.vertical-line-blue-purple{background:linear-gradient(to bottom,#3b82f6,#8b5cf6)!important}
.bg-gradient-blue-light{background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%)!important}
.strategy-card-green{background:#f0fdf4!important;border:1px solid #bbf7d0!important}
.strategy-card-blue{background:#eff6ff!important;border:1px solid #bfdbfe!important}
.strategy-card-yellow{background:#fef3c7!important;border:1px solid #fcd34d!important}
.strategy-card-purple{background:#fae8ff!important;border:1px solid #e879f9!important}
.strategy-card-red{background:#fef2f2!important;border:1px solid #fca5a5!important}
.badge-green{background:#16a34a!important}
.badge-blue{background:#2563eb!important}
.badge-yellow{background:#d97706!important}
.badge-purple{background:#9333ea!important}
.badge-red{background:#dc2626!important}
.text-green-dark{color:#166534!important}
.text-green-700{color:#15803d!important}
.text-blue-dark{color:#1e40af!important}
.text-blue-700{color:#1d4ed8!important}
.text-yellow-dark{color:#92400e!important}
.text-yellow-700{color:#b45309!important}
.text-purple-dark{color:#6b21a8!important}
.text-purple-700{color:#7e22ce!important}
.text-red-dark{color:#991b1b!important}
.text-red-700{color:#b91c1c!important}
.bg-gradient-red-orange{background:linear-gradient(135deg,#ef4444 0%,#f97316 100%)!important}
.text-white-90{color:rgba(255,255,255,0.9)!important}

/* Tailwind-style Gradients */
.bg-gradient-red-orange-br{background:linear-gradient(to bottom right,#ef4444,#f97316)!important}
.bg-gradient-blue-cyan-br{background:linear-gradient(to bottom right,#3b82f6,#06b6d4)!important}
.bg-gradient-purple-pink-br{background:linear-gradient(to bottom right,#a855f7,#ec4899)!important}
.bg-gradient-blue-purple-br{background:linear-gradient(to bottom right,#3b82f6,#a855f7)!important}
.bg-gradient-pink-rose-br{background:linear-gradient(to bottom right,#ec4899,#f43f5e)!important}
.bg-gradient-red-orange-r{background:linear-gradient(to right,#ef4444,#f97316)!important}
.bg-gradient-blue-cyan-r{background:linear-gradient(to right,#3b82f6,#06b6d4)!important}
.bg-gradient-purple-pink-r{background:linear-gradient(to right,#a855f7,#ec4899)!important}
.bg-gradient-blue-r{background:linear-gradient(to right,#3b82f6,#2563eb)!important}
.bg-gradient-pink-rose-r{background:linear-gradient(to right,#ec4899,#f43f5e)!important}
.bg-gradient-red-orange-r-hover:hover{background:linear-gradient(to right,#dc2626,#ea580c)!important}
.bg-gradient-blue-r-hover:hover{background:linear-gradient(to right,#2563eb,#1d4ed8)!important}
.bg-gradient-purple-pink-r-hover:hover{background:linear-gradient(to right,#9333ea,#db2777)!important}

/* Badge Utilities */
.badge-red-light{background:#fee2e2!important;color:#991b1b!important}
.badge-blue-light{background:#dbeafe!important;color:#1e40af!important}
.badge-green-light{background:#dcfce7!important;color:#166534!important}
.badge-purple-light{background:#f3e8ff!important;color:#6b21a8!important}

/* Icon Backgrounds */
.icon-bg-blue{background:#dbeafe!important}
.icon-bg-red{background:#fee2e2!important}
.icon-bg-purple{background:#f3e8ff!important}
.icon-bg-green{background:#dcfce7!important}

/* Icon Letter Divs */
.icon-letter-active{width:2.5rem!important;height:2.5rem!important;border-radius:0.5rem!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;font-weight:700!important;font-size:0.875rem!important}
.icon-letter-inactive{width:2.5rem!important;height:2.5rem!important;background:#e5e7eb!important;border-radius:0.5rem!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#6b7280!important;font-weight:700!important;font-size:0.875rem!important}

/* Commission Badges */
.badge-commission{display:inline-flex!important;align-items:center!important;gap:0.25rem!important;background:#dcfce7!important;color:#166534!important;padding:0.375rem 0.75rem!important;border-radius:9999px!important;font-weight:700!important;font-size:1.125rem!important}

/* Gradient Buttons with Hover */
.btn-gradient-pink-red{background:linear-gradient(to right,#ec4899,#ef4444)!important;color:#fff!important;font-weight:600!important;padding:0.75rem 1.5rem!important;border-radius:0.75rem!important;transition:all 0.3s!important}
.btn-gradient-pink-red:hover{background:linear-gradient(to right,#db2777,#dc2626)!important}

/* Badge Green with Text */
.badge-green-inline{display:inline-flex!important;align-items:center!important;gap:0.5rem!important;padding:0.25rem 1rem!important;border-radius:9999px!important;background:#dcfce7!important;color:#166534!important;font-size:0.875rem!important;font-weight:600!important;margin-bottom:1rem!important}

/* Icon Circle Steps */
.icon-circle-step{width:3rem!important;height:3rem!important;border-radius:9999px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;font-weight:700!important}

/* CTA Button Base */
.btn-cta-base{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:0.5rem!important;color:#fff!important;font-weight:600!important;padding:1rem 2rem!important;border-radius:0.75rem!important;transition:all 0.3s!important;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)!important}

/* Icon Square Boxes */
.icon-square-lg{width:3rem!important;height:3rem!important;border-radius:0.75rem!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;transition:all 0.3s!important}
.icon-square-md{width:3.5rem!important;height:3.5rem!important;border-radius:0.75rem!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}

/* Additional Badge Colors */
.badge-purple-light{display:inline-block!important;padding:0.25rem 1rem!important;border-radius:9999px!important;background:#f3e8ff!important;color:#6b21a8!important;font-size:0.875rem!important;font-weight:500!important;margin-bottom:1rem!important}
.badge-gray-light{display:inline-block!important;padding:0.25rem 1rem!important;border-radius:9999px!important;background:#f3f4f6!important;color:#4b5563!important;font-size:0.875rem!important;font-weight:500!important;margin-bottom:1rem!important}

/* Icon BG Additional Colors */
.icon-bg-orange{background:#fed7aa!important}
.icon-bg-pink{background:#fce7f3!important}
.icon-bg-yellow{background:#fef3c7!important}
.icon-bg-cyan{background:#cffafe!important}

/* Card Hover Effects */
.card-hover-blue{padding:1rem!important;border-radius:0.75rem!important;border:1px solid #e5e7eb!important;transition:all 0.3s!important;display:flex!important;align-items:flex-start!important;gap:0.75rem!important}
.card-hover-blue:hover{border-color:#93c5fd!important;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)!important}
.card-hover-green{padding:1rem!important;border-radius:0.75rem!important;border:1px solid #e5e7eb!important;transition:all 0.3s!important;display:flex!important;align-items:flex-start!important;gap:0.75rem!important}
.card-hover-green:hover{border-color:#86efac!important;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)!important}

/* Glow Effects */
.glow-blue{position:absolute!important;inset:-0.25rem!important;background:linear-gradient(to right,#3b82f6,#06b6d4)!important;border-radius:1rem!important;filter:blur(8px)!important;opacity:0.25!important;transition:opacity 0.3s!important}
.glow-purple{position:absolute!important;inset:-0.25rem!important;background:linear-gradient(to right,#a855f7,#ec4899)!important;border-radius:1rem!important;filter:blur(8px)!important;opacity:0.25!important;transition:opacity 0.3s!important}
.group:hover .glow-blue,.group:hover .glow-purple{opacity:0.5!important}

/* Step Circle Base */
.step-circle{width:3rem!important;height:3rem!important;border-radius:9999px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;font-weight:700!important}

/* Card Hover Color Variants */
.card-hover-red{padding:1rem!important;border-radius:0.75rem!important;border:1px solid #e5e7eb!important;transition:all 0.3s!important;display:flex!important;align-items:flex-start!important;gap:0.75rem!important}
.card-hover-red:hover{border-color:#fca5a5!important;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)!important}
.card-hover-purple{padding:1rem!important;border-radius:0.75rem!important;border:1px solid #e5e7eb!important;transition:all 0.3s!important;display:flex!important;align-items:flex-start!important;gap:0.75rem!important}
.card-hover-purple:hover{border-color:#d8b4fe!important;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)!important}
.card-hover-orange{padding:1rem!important;border-radius:0.75rem!important;border:1px solid #e5e7eb!important;transition:all 0.3s!important;display:flex!important;align-items:flex-start!important;gap:0.75rem!important}
.card-hover-orange:hover{border-color:#fdba74!important;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)!important}
.card-hover-pink{padding:1rem!important;border-radius:0.75rem!important;border:1px solid #e5e7eb!important;transition:all 0.3s!important;display:flex!important;align-items:flex-start!important;gap:0.75rem!important}
.card-hover-pink:hover{border-color:#fbcfe8!important;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)!important}
.card-hover-yellow{padding:1rem!important;border-radius:0.75rem!important;border:1px solid #e5e7eb!important;transition:all 0.3s!important;display:flex!important;align-items:flex-start!important;gap:0.75rem!important}
.card-hover-yellow:hover{border-color:#fde047!important;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)!important}
.card-hover-cyan{padding:1rem!important;border-radius:0.75rem!important;border:1px solid #e5e7eb!important;transition:all 0.3s!important;display:flex!important;align-items:flex-start!important;gap:0.75rem!important}
.card-hover-cyan:hover{border-color:#a5f3fc!important;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)!important}

/* Badge Yellow */
.badge-yellow-light{display:inline-block!important;padding:0.25rem 1rem!important;border-radius:9999px!important;background:#fef08a!important;color:#854d0e!important;font-size:0.875rem!important;font-weight:500!important;margin-bottom:1rem!important}

/* Feature Card Interactive */
.feature-card-interactive{padding:1rem!important;border-radius:0.75rem!important;transition:all 0.3s!important;cursor:pointer!important;display:flex!important;align-items:center!important;gap:0.75rem!important}

/* Stat Box with Border */
.stat-box-green{display:flex!important;align-items:center!important;gap:0.75rem!important;background:#fff!important;border-radius:0.75rem!important;padding:1.5rem!important;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)!important;border:1px solid #dcfce7!important}
.stat-box-blue{display:flex!important;align-items:center!important;gap:0.75rem!important;background:#fff!important;border-radius:0.75rem!important;padding:1.5rem!important;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)!important;border:1px solid #dbeafe!important}

/* Glow Effect Variants */
.glow-subtle-blue{position:absolute!important;inset:-0.25rem!important;background:linear-gradient(to right,#3b82f6,#06b6d4)!important;border-radius:1rem!important;filter:blur(8px)!important;opacity:0!important;transition:opacity 0.3s!important}
.glow-subtle-purple{position:absolute!important;inset:-0.25rem!important;background:linear-gradient(to right,#a855f7,#ec4899)!important;border-radius:1rem!important;filter:blur(8px)!important;opacity:0!important;transition:opacity 0.3s!important}
.glow-subtle-red{position:absolute!important;inset:-0.25rem!important;background:linear-gradient(to right,#ef4444,#f97316)!important;border-radius:1rem!important;filter:blur(8px)!important;opacity:0!important;transition:opacity 0.3s!important}
.glow-subtle-pink{position:absolute!important;inset:-0.25rem!important;background:linear-gradient(to right,#ec4899,#f43f5e)!important;border-radius:1rem!important;filter:blur(8px)!important;opacity:0!important;transition:opacity 0.3s!important}
.group:hover .glow-subtle-blue,.group:hover .glow-subtle-purple,.group:hover .glow-subtle-red,.group:hover .glow-subtle-pink{opacity:0.3!important}

/* Icon Box Variants - Size 10 */
.icon-box-10{width:2.5rem!important;height:2.5rem!important;border-radius:0.5rem!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}
.icon-box-10-round{width:2.5rem!important;height:2.5rem!important;border-radius:9999px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}

/* Icon Box Variants - Size 12 */
.icon-box-12-round{width:3rem!important;height:3rem!important;border-radius:9999px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}

/* Icon Box Variants - Size 14 */
.icon-box-14{width:3.5rem!important;height:3.5rem!important;border-radius:0.75rem!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}

/* CTA Button Variants */
.btn-cta-white{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:0.5rem!important;background:#fff!important;color:#dc2626!important;font-weight:600!important;padding:1rem 2rem!important;border-radius:0.75rem!important;transition:all 0.3s!important;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)!important}
.btn-cta-white:hover{background:#f9fafb!important}

/* Gradient CTA Buttons */
.btn-cta-gradient-blue{flex:1!important;text-align:center!important;background:linear-gradient(to right,#3b82f6,#2563eb)!important;color:#fff!important;font-weight:600!important;padding:0.75rem 1.5rem!important;border-radius:0.75rem!important;transition:all 0.3s!important}
.btn-cta-gradient-blue:hover{background:linear-gradient(to right,#2563eb,#1d4ed8)!important}
.btn-cta-gradient-purple{flex:1!important;text-align:center!important;background:linear-gradient(to right,#a855f7,#ec4899)!important;color:#fff!important;font-weight:600!important;padding:0.75rem 1.5rem!important;border-radius:0.75rem!important;transition:all 0.3s!important}
.btn-cta-gradient-purple:hover{background:linear-gradient(to right,#9333ea,#db2777)!important}
.btn-cta-gradient-red{flex:1!important;text-align:center!important;background:linear-gradient(to right,#ef4444,#f97316)!important;color:#fff!important;font-weight:600!important;padding:0.75rem 1.5rem!important;border-radius:0.75rem!important;transition:all 0.3s!important}
.btn-cta-gradient-red:hover{background:linear-gradient(to right,#dc2626,#ea580c)!important}

/* Info Button with Border */
.btn-info-border{padding:0.75rem 1rem!important;transition:all 0.3s!important;border:1px solid #e5e7eb!important;border-radius:0.75rem!important;display:flex!important;align-items:center!important;color:#4b5563!important}
.btn-info-blue:hover{color:#3b82f6!important;border-color:#bfdbfe!important}
.btn-info-pink:hover{color:#ec4899!important;border-color:#fbcfe8!important}
.btn-info-purple:hover{color:#a855f7!important;border-color:#e9d5ff!important}
.btn-info-red:hover{color:#ef4444!important;border-color:#fecaca!important}

/* Additional Badge Variants */
.badge-blue-100{display:inline-block!important;padding:0.25rem 1rem!important;border-radius:9999px!important;background:#dbeafe!important;color:#1e40af!important;font-size:0.875rem!important;font-weight:500!important;margin-bottom:1rem!important}
.badge-green-100{display:inline-block!important;padding:0.25rem 1rem!important;border-radius:9999px!important;background:#dcfce7!important;color:#166534!important;font-size:0.875rem!important;font-weight:500!important;margin-bottom:1rem!important}

/* Notification Bell Dropdown */
.notification-count-badge{position:absolute!important;top:-4px!important;right:-4px!important;min-width:18px!important;height:18px!important;padding:0 5px!important;background:var(--danger,#ef4444)!important;border-radius:9999px!important;border:2px solid var(--bg-primary)!important;color:#fff!important;font-size:0.625rem!important;font-weight:700!important;display:flex!important;align-items:center!important;justify-content:center!important}
.notification-dropdown{background:var(--bg-primary)!important;border:1px solid var(--border-primary)!important;border-radius:0.75rem!important;box-shadow:0 10px 40px rgba(0,0,0,0.15)!important;overflow:hidden!important}
.notification-dropdown-header{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:0.875rem 1rem!important;border-bottom:1px solid var(--border-primary)!important;background:var(--bg-secondary)!important}
.notification-dropdown-header h3{color:var(--text-primary)!important}
.notification-list{max-height:400px!important;overflow-y:auto!important}
.notification-item{display:flex!important;align-items:flex-start!important;gap:0.75rem!important;padding:1rem!important;border-bottom:1px solid var(--border-primary)!important;text-decoration:none!important;cursor:pointer!important;transition:background-color 0.15s!important;background:transparent!important}
.notification-item:hover{background:var(--bg-secondary)!important}
.notification-item.unread{background:var(--bg-hover,rgba(0,0,0,0.02))!important}
.notification-item:last-child{border-bottom:none!important}
.notification-icon{flex-shrink:0!important;width:2rem!important;height:2rem!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.notification-icon svg{width:1.25rem!important;height:1.25rem!important;stroke-width:2!important}
.notification-icon.icon-success{background:rgba(34,197,94,0.1)!important;color:#22c55e!important}
.notification-icon.icon-warning{background:rgba(251,146,60,0.1)!important;color:#fb923c!important}
.notification-icon.icon-error{background:rgba(239,68,68,0.1)!important;color:#ef4444!important}
.notification-icon.icon-info{background:rgba(59,130,246,0.1)!important;color:#3b82f6!important}
.notification-content{flex:1!important;min-width:0!important}
.notification-title{font-size:0.875rem!important;font-weight:500!important;color:var(--text-primary)!important;margin-bottom:0.25rem!important}
.notification-message{font-size:0.8125rem!important;color:var(--text-secondary)!important;line-height:1.4!important}
.notification-time{font-size:0.75rem!important;color:var(--text-muted)!important;margin-top:0.25rem!important}
.notification-unread-dot{width:0.5rem!important;height:0.5rem!important;background:var(--accent-primary)!important;border-radius:50%!important;flex-shrink:0!important}
.notification-dropdown-footer{border-top:1px solid var(--border-primary)!important;background:var(--bg-secondary)!important}
.notification-dropdown-footer a{display:block!important;padding:0.75rem!important}
.notification-dropdown-footer a:hover{background:var(--bg-tertiary)!important}

/* ===== Mobile Compatibility Improvements ===== */
/* Touch Target Sizes - Minimum 48x48px for accessibility */
/* Note: Removed generic 'a' selector as it broke small inline links like language switcher */
@media (max-width: 768px) {
    button, [role="button"], input[type="submit"], input[type="button"], .btn, .nav-link, a.btn {
        min-height: 48px;
        min-width: 48px;
    }

    /* Ensure clickable elements have adequate spacing */
    .btn, button, a.btn {
        padding: 12px 16px;
    }

    /* Navigation links spacing */
    nav a, .nav-link {
        padding: 12px 8px;
    }

    /* Form inputs touch-friendly */
    input, select, textarea, .form-input, .form-select {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Checkbox and radio buttons */
    input[type="checkbox"], input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
    }
}

/* Content Width - Prevent horizontal overflow */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

* {
    box-sizing: border-box;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

pre, code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
}

table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* Responsive Typography */
@media (max-width: 640px) {
    html {
        font-size: 14px;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    p, li {
        font-size: 1rem;
        line-height: 1.6;
    }
}

/* Image Optimization Hints */
img {
    content-visibility: auto;
}

img[loading="lazy"] {
    background-color: #f1f5f9;
}

/* Responsive Containers */
@media (max-width: 768px) {
    .max-w-7xl, .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Grid responsiveness */
    .grid {
        gap: 16px;
    }

    /* Cards on mobile */
    .platform-card, .form-card, .asset-card {
        padding: 16px;
    }

    /* Tab buttons on mobile */
    .tab-nav {
        flex-wrap: wrap;
    }

    .tab-btn {
        flex: 1 1 auto;
        min-width: 120px;
        padding: 12px 8px;
        font-size: 0.8125rem;
    }
}

/* Safe Area Insets for notched devices */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* Prevent text from being too small on mobile */
@media (max-width: 480px) {
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .text-xs {
        font-size: 0.8125rem;
    }

    .text-sm {
        font-size: 0.875rem;
    }
}