/* Copyright 2026 AbilitySoft. All rights reserved. */
/* Developed for InstaFreight, Inc. under license agreement. */

:root{color-scheme:light}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #ffffff inset !important;-webkit-text-fill-color:#1e293b !important;transition:background-color 5000s ease-in-out 0s}:root{--color-brand-50:#fdecec;--color-brand-100:#f9c9c9;--color-brand-200:#f2a0a0;--color-brand-400:#e05252;--color-brand-500:#d32f2f;--color-brand-600:#b71c1c;--color-brand-700:#9b1818;--color-brand-gradient:linear-gradient(135deg,#b71c1c 0%,#770000 100%);--color-brand-gradient-hover:linear-gradient(135deg,#d32f2f 0%,#b71c1c 100%);--bg-canvas:hsl(210,40%,98%);--bg-card:hsl(0,0%,100%);--bg-elevated:hsl(0,0%,100%);--bg-muted:hsl(210,40%,96%);--bg-glass:rgba(255,255,255,0.75);--border-glass:rgba(255,255,255,0.4);--backdrop-blur:blur(16px);--border-light:hsl(214,32%,91%);--border-subtle:hsl(220,13%,95%);--border-brand:rgba(183,28,28,0.25);--text-primary:hsl(222,47%,11%);--text-secondary:hsl(215,14%,34%);--text-muted:hsl(215,16%,40%);--text-faint:hsl(215,16%,44%);--color-success:#15803d;--color-warning:#92400e;--color-error:#991b1b;--color-info:#1e293b;--shadow-xs:0 1px 2px 0 rgb(0 0 0 / 0.04);--shadow-sm:0 1px 3px 0 rgb(0 0 0 / 0.05),0 1px 2px -1px rgb(0 0 0 / 0.04);--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.05),0 2px 4px -2px rgb(0 0 0 / 0.04);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.06),0 4px 6px -4px rgb(0 0 0 / 0.04);--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.06),0 8px 10px -6px rgb(0 0 0 / 0.04);--shadow-elite:0 8px 32px 0 rgba(15,23,42,0.04),0 1px 2px 0 rgba(0,0,0,0.02);--shadow-brand:0 4px 14px rgb(183 28 28 / 0.2);--shadow-brand-lg:0 8px 24px rgb(183 28 28 / 0.25);--font-body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;--font-heading:'Outfit',system-ui,-apple-system,sans-serif;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--radius-2xl:24px;--radius-pill:9999px;--sidebar-width:256px;--header-height:64px;--mobile-header-height:56px;--transition-fast:0.15s cubic-bezier(0.4,0,0.2,1);--transition-base:0.2s cubic-bezier(0.4,0,0.2,1);--transition-smooth:0.3s cubic-bezier(0.4,0,0.2,1);--transition-spring:0.35s cubic-bezier(0.22,1,0.36,1)}*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);background-color:var(--bg-canvas);background-image:radial-gradient(at 0% 0%,rgba(183,28,28,0.02) 0px,transparent 50%),radial-gradient(at 50% 0%,rgba(211,47,47,0.015) 0px,transparent 50%),radial-gradient(at 100% 0%,rgba(16,185,129,0.01) 0px,transparent 50%);background-attachment:fixed;color:var(--text-primary);line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.25;color:var(--text-primary)}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:var(--radius-pill)}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:9999px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#94a3b8}.list-scroll-wrapper{max-height:65vh;overflow-y:auto;overflow-x:hidden;padding-right:0.5rem}.table-scroll-wrapper{width:100%;overflow-x:auto;overflow-y:auto;max-height:65vh;-webkit-overflow-scrolling:touch}*{scrollbar-width:thin;scrollbar-color:var(--border-light) transparent}.htmx-indicator{display:none}.htmx-request .htmx-indicator{display:inline-block}.htmx-request.htmx-indicator{display:inline-block}.app-layout{display:flex;height:100vh;overflow:hidden}.app-sidebar{width:var(--sidebar-width);flex-shrink:0;background:var(--bg-card);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;height:100%;box-shadow:var(--shadow-sm);transition:transform var(--transition-smooth);position:relative;z-index:30}@media (min-width:768px){.app-sidebar{transition:none}}.app-main{flex:1;display:flex;flex-direction:column;height:100%;overflow:hidden;min-width:0}.app-header{height:var(--header-height);background:rgba(255,255,255,0.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(226,232,240,0.8);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;flex-shrink:0;position:sticky;top:0;z-index:30;box-shadow:0 1px 3px rgba(0,0,0,0.05),0 4px 12px rgba(0,0,0,0.04)}.app-content{flex:1;overflow-y:auto;padding:2rem;background:transparent}.mobile-header{display:none;height:var(--mobile-header-height);background:rgba(255,255,255,0.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(226,232,240,0.8);align-items:center;justify-content:space-between;padding:0 1rem;position:sticky;top:0;z-index:40;box-shadow:0 1px 3px rgba(0,0,0,0.05),0 4px 12px rgba(0,0,0,0.04)}.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:29;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity var(--transition-smooth)}.sidebar-overlay.active{opacity:1;pointer-events:auto}@media (max-width:767px){.app-layout{flex-direction:column;height:auto;min-height:100vh;overflow:visible}.mobile-header{display:flex}.app-sidebar{position:fixed;top:0;left:0;height:100vh;width:min(var(--sidebar-width),85vw);transform:translateX(-110%);z-index:40;box-shadow:var(--shadow-xl)}.app-sidebar.sidebar-open{transform:translateX(0)}.sidebar-overlay{display:block}.app-main{height:auto;flex:none;width:100%}.app-header{display:none}.app-content{overflow-y:visible;padding:1rem}}@media (min-width:768px) and (max-width:1023px){.app-content{padding:1.5rem}.app-header{padding:0 1.5rem}}.nav-item{display:flex;align-items:center;gap:0.75rem;padding:0.625rem 1rem;border-radius:var(--radius-lg);font-size:0.875rem;font-weight:500;color:var(--text-muted);transition:background var(--transition-fast),color var(--transition-fast);text-decoration:none;cursor:pointer}.nav-item:hover{background:var(--bg-muted);color:var(--color-brand-600)}.nav-item.active{background:var(--color-brand-600);color:white;box-shadow:0 2px 8px rgb(183 28 28 / 0.25)}.nav-item .nav-icon{width:1.25rem;text-align:center;flex-shrink:0}.card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-2xl);box-shadow:var(--shadow-sm)}.card-body{padding:1.5rem}.card-hover{transition:transform var(--transition-base),box-shadow var(--transition-base);cursor:pointer}.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.card-hover:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.stat-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;box-shadow:var(--shadow-sm);transition:transform var(--transition-base),box-shadow var(--transition-base)}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.stat-card-icon{width:3rem;height:3rem;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.625rem 1.25rem;border-radius:var(--radius-lg);font-family:var(--font-body);font-size:0.8125rem;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:all var(--transition-base);min-height:40px;white-space:nowrap;letter-spacing:0.01em}.btn:active{transform:scale(0.97)}.btn:disabled{opacity:0.55;cursor:not-allowed}.btn-primary{background:var(--color-brand-gradient);color:white;box-shadow:var(--shadow-brand)}.btn-primary:hover{background:var(--color-brand-gradient-hover);box-shadow:var(--shadow-brand-lg);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-muted);color:var(--text-secondary);border:1px solid var(--border-light)}.btn-secondary:hover{background:var(--border-light);color:var(--text-primary)}.btn-ghost{background:transparent;color:var(--text-muted)}.btn-ghost:hover{background:var(--bg-muted);color:var(--text-primary)}.btn-danger{background:#fff1f2;color:#991b1b;border:1px solid #fecaca}.btn-danger:hover{background:#fee2e2;color:#7f1d1d}.btn-sm{padding:0.375rem 0.875rem;font-size:0.75rem;min-height:32px}.btn-lg{padding:0.875rem 1.75rem;font-size:0.9375rem;min-height:48px}@media (max-width:767px){.btn{min-height:44px}.btn-sm{min-height:40px}}.badge{display:inline-flex;align-items:center;gap:0.25rem;padding:0.2rem 0.6rem;border-radius:var(--radius-pill);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em}.badge-open{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}.badge-booked{background:#f8fafc;color:#334155;border:1px solid #e2e8f0}.badge-pending{background:#fffbeb;color:#92400e;border:1px solid #fde68a}.badge-cancelled{background:#fff1f2;color:#9f1239;border:1px solid #fecdd3}.badge-verified{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}.badge-brand{background:var(--color-brand-50);color:var(--color-brand-600);border:1px solid var(--color-brand-100)}.badge-purple{background:#fdecec;color:#b71c1c;border:1px solid #f9c9c9}.badge-blue{background:#f8fafc;color:#334155;border:1px solid #e2e8f0}.form-label{display:block;font-size:.6875rem;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:0.07em;margin-bottom:0.375rem}.form-input,.form-select,.form-textarea{width:100%;padding:0.625rem 0.875rem;background:#ffffff;border:1.5px solid #e2e8f0;border-radius:var(--radius-md);color:#0f172a;font-size:0.8125rem;font-family:var(--font-body);font-weight:500;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);min-height:40px;line-height:1.5}.form-input:focus,.form-select:focus,.form-textarea:focus{background:#ffffff;border-color:var(--color-brand-600);box-shadow:0 0 0 3px rgb(183 28 28 / 0.1)}.form-input::placeholder,.form-textarea::placeholder{color:#94a3b8;font-weight:400}.form-input:disabled,.form-select:disabled{opacity:0.55;cursor:not-allowed}.form-input.is-error,.form-select.is-error{border-color:#f87171;background:#fff8f8;box-shadow:0 0 0 3px rgb(248 113 113 / 0.12)}.form-error-msg{font-size:.6875rem;color:#dc2626;font-weight:500;margin-top:4px;display:none}.form-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.875rem center;padding-right:2.5rem}@media (max-width:767px){.form-input,.form-select,.form-textarea{min-height:44px}}@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-md)}.skeleton-text{height:0.875rem}.skeleton-title{height:1.5rem}.skeleton-card{height:6rem}.skeleton-avatar{width:2.25rem;height:2.25rem;border-radius:50%}@keyframes fadeSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fadeSlideUp 0.35s cubic-bezier(0.22,1,0.36,1) forwards}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fade-in{animation:fadeIn 0.25s ease forwards}@keyframes pulse-ring{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(183,28,28,0.7)}70%{transform:scale(1);box-shadow:0 0 0 8px rgba(183,28,28,0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(183,28,28,0)}}.notification-pulse{animation:pulse-ring 2s infinite}@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-9px) rotate(0.4deg)}66%{transform:translateY(-4px) rotate(-0.3deg)}}.float-anim{animation:float 8s ease-in-out infinite}.page-content > *{animation:fadeSlideUp 0.3s cubic-bezier(0.22,1,0.36,1) backwards}.page-content > :is(.fixed,[id$="-drawer"],[id$="-overlay"],[id$="-modal"],[role="dialog"]){animation:none}.page-content > *:nth-child(1){animation-delay:0.02s}.page-content > *:nth-child(2){animation-delay:0.06s}.page-content > *:nth-child(3){animation-delay:0.10s}.page-content > *:nth-child(4){animation-delay:0.14s}.page-content > *:nth-child(5){animation-delay:0.18s}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1.5rem;text-align:center;gap:1rem}.empty-state img{width:clamp(120px,30%,200px);opacity:0.9;margin-bottom:0.5rem}.empty-state-title{font-family:var(--font-heading);font-weight:700;font-size:1.125rem;color:var(--text-primary)}.empty-state-desc{font-size:0.875rem;color:var(--text-muted);max-width:360px;line-height:1.6}.empty-dashed{border:1.5px dashed var(--border-light);border-radius:var(--radius-xl);padding:2.5rem 1.5rem;text-align:center}.progress-steps{display:flex;align-items:center;gap:0;margin-bottom:2rem;overflow-x:auto;padding-bottom:0.25rem}.progress-step{display:flex;align-items:center;flex:0 0 auto;min-width:0}.progress-step-dot{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;flex-shrink:0;border:2px solid var(--border-light);background:var(--bg-card);color:var(--text-faint);transition:all var(--transition-base)}.progress-step.active .progress-step-dot{background:var(--color-brand-600);border-color:var(--color-brand-600);color:white;box-shadow:0 0 0 4px var(--color-brand-50)}.progress-step.done .progress-step-dot{background:#15803d;border-color:#15803d;color:white}.progress-step-label{font-size:.6875rem;font-weight:600;color:var(--text-faint);margin-left:0.5rem;white-space:nowrap}.progress-step.active .progress-step-label{color:var(--color-brand-600)}.progress-step.done .progress-step-label{color:#15803d}.progress-connector{flex:1;height:2px;background:var(--border-light);margin:0 0.25rem;min-width:1rem}.progress-connector.done{background:#15803d}#toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:0.75rem;pointer-events:none}.toast{display:flex;align-items:center;gap:0.75rem;padding:0.875rem 1.25rem;border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);font-size:0.875rem;font-weight:500;color:white;pointer-events:auto;transform:translateY(8px);opacity:0;transition:opacity 0.3s ease,transform 0.3s ease;max-width:min(360px,calc(100vw - 3rem))}.toast.show{opacity:1;transform:translateY(0)}.toast-success{background:#16a34a}.toast-error{background:var(--color-brand-600)}.toast-info{background:#334155}.toast-warning{background:#d97706}.dropdown-panel{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden;z-index:50}.notif-dropdown{width:320px;max-width:calc(100vw - 2rem)}@media (max-width:767px){.mobile-stack{display:flex;flex-direction:column;gap:0.75rem}.desktop-only{display:none !important}}@media (min-width:768px){.mobile-only{display:none !important}}.list-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:1rem 1.25rem;display:flex;flex-direction:column;gap:0.625rem;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.list-card:hover{border-color:var(--color-brand-100);box-shadow:var(--shadow-md)}.list-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem}.list-card-route{font-size:0.8125rem;color:var(--text-muted);display:flex;align-items:center;gap:0.375rem;flex-wrap:wrap}.list-card-footer{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;flex-wrap:wrap;margin-top:0.25rem}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:60;display:flex;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadeIn 0.2s ease}.modal-panel{background:var(--bg-card);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;animation:fadeSlideUp 0.25s cubic-bezier(0.22,1,0.36,1)}@media (max-width:767px){.modal-backdrop{align-items:flex-end;padding:0}.modal-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;max-height:92vh;max-width:100%}}.verification-step{display:flex;align-items:center;gap:1rem;padding:0.875rem 1rem;border-radius:var(--radius-lg);background:var(--bg-muted);border:1px solid var(--border-subtle)}.verification-step-num{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:800;flex-shrink:0}.truncate-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.glass-card{background:rgba(255,255,255,0.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.6)}:focus-visible{outline:2px solid var(--color-brand-600);outline-offset:2px}.divider{border:none;border-top:1px solid var(--border-subtle);margin:1.25rem 0}.section-label{font-size:.6875rem;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.1em}.drawer-backdrop{position:fixed;inset:0;background:rgba(15,23,42,0.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:100;opacity:0;pointer-events:none;transition:opacity var(--transition-smooth)}.drawer-backdrop.active{opacity:1;pointer-events:auto}.drawer-panel{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:500px;background:var(--bg-card);box-shadow:-10px 0 40px -10px rgba(0,0,0,0.12);z-index:101;transform:translateX(100%);transition:transform var(--transition-spring);display:flex;flex-direction:column}.drawer-panel.active{transform:translateX(0)}.drawer-header{padding:1.5rem;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;background:var(--bg-muted)}.drawer-body{flex:1;overflow-y:auto;padding:1.5rem}.drawer-footer{padding:1rem 1.5rem;border-top:1px solid var(--border-subtle);background:var(--bg-muted);display:flex;align-items:center;justify-content:flex-end;gap:0.75rem}@media (max-width:767px){.drawer-panel{max-width:100%}}.page-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#1e293b 0%,#0f172a 60%,#1e1b4b 100%);border-radius:var(--radius-2xl);padding:2rem 2.25rem;color:white;box-shadow:0 8px 32px rgba(15,23,42,0.18),inset 0 1px 0 rgba(255,255,255,0.06)}.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 85% 30%,rgba(183,28,28,0.15),transparent),radial-gradient(ellipse 50% 40% at 15% 80%,rgba(211,47,47,0.1),transparent);pointer-events:none}.page-hero > *{position:relative;z-index:1;color:inherit}.page-hero-title{font-family:var(--font-heading);font-weight:800;font-size:1.5rem;line-height:1.2;letter-spacing:-0.02em;color:#ffffff}.page-hero-subtitle{font-size:0.8125rem;color:rgba(255,255,255,0.72);margin-top:0.375rem;font-weight:400}@media (max-width:767px){.page-hero{padding:1.5rem 1.25rem;border-radius:var(--radius-xl)}.page-hero-title{font-size:1.25rem}}.elite-table{width:100%;border-collapse:separate;border-spacing:0;font-size:0.8125rem}.elite-table thead th{padding:0.75rem 1rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-faint);background:var(--bg-muted);border-bottom:1.5px solid var(--border-light);white-space:nowrap;text-align:left}.elite-table tbody tr{transition:background var(--transition-fast)}.elite-table tbody tr:hover{background:linear-gradient(90deg,rgba(183,28,28,0.02),rgba(183,28,28,0.04))}.elite-table tbody td{padding:0.875rem 1rem;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);vertical-align:middle}.elite-table tbody tr:last-child td{border-bottom:none}.filter-panel{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-2xl);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow var(--transition-base)}.filter-panel:hover{box-shadow:var(--shadow-md)}.filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;cursor:pointer;user-select:none}.filter-panel-header:hover{background:var(--bg-muted)}.filter-panel-chevron{transition:transform var(--transition-base);color:var(--text-faint);font-size:0.75rem}.filter-panel-body{padding:0 1.5rem 1.5rem}@keyframes scaleIn{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}.scale-in{animation:scaleIn 0.25s cubic-bezier(0.22,1,0.36,1) forwards}@keyframes slideRight{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}.slide-right{animation:slideRight 0.3s cubic-bezier(0.22,1,0.36,1) forwards}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.gradient-animate{background-size:200% 200%;animation:gradientShift 6s ease infinite}.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem}.info-item{display:flex;flex-direction:column;gap:0.25rem}.info-label{font-size:.6875rem;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.1em}.info-value{font-size:0.875rem;font-weight:600;color:var(--text-primary);line-height:1.4}.accent-top{border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--color-brand-600),#d32f2f,var(--color-brand-400)) 1}.counter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 0.375rem;border-radius:var(--radius-pill);font-size:.6875rem;font-weight:700;background:var(--color-brand-600);color:white;box-shadow:0 2px 8px rgba(183,28,28,0.3);animation:scaleIn 0.3s cubic-bezier(0.22,1,0.36,1)}.section-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-2xl);box-shadow:var(--shadow-elite);overflow:hidden}.section-card-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:1rem}.section-card-body{padding:1.5rem}@media (max-width:767px){.section-card-header{padding:1rem 1.25rem}.section-card-body{padding:1.25rem}}.glow-brand{position:relative}.glow-brand::after{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,rgba(183,28,28,0.4),rgba(211,47,47,0.2));filter:blur(12px);opacity:0;transition:opacity var(--transition-base);z-index:-1}.glow-brand:hover::after{opacity:1}.tab-bar{display:flex;gap:0.25rem;background:var(--bg-muted);border-radius:var(--radius-lg);padding:0.25rem}.tab-item{flex:1;display:flex;align-items:center;justify-content:center;gap:0.375rem;padding:0.5rem 1rem;border-radius:var(--radius-md);font-size:0.75rem;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;text-decoration:none}.tab-item:hover{color:var(--text-primary);background:rgba(255,255,255,0.6)}.tab-item.active{color:var(--text-primary);background:var(--bg-card);box-shadow:var(--shadow-sm)}.options-list{overflow:auto !important;white-space:nowrap !important}.options-list .option-item{white-space:nowrap !important}.overflow-x-auto{overflow-x:auto !important;-webkit-overflow-scrolling:touch}.table-scroll-wrapper{overflow:auto !important;max-height:600px;-webkit-overflow-scrolling:touch}.table-scroll-wrapper table th,.table-scroll-wrapper table td,.overflow-x-auto table th,.overflow-x-auto table td{white-space:nowrap}table,.elite-table{min-width:600px}@media (min-width:768px){table,.elite-table{min-width:100%}}h1,h2,h3,h4,h5,h6{font-family:'Outfit',var(--font-heading,sans-serif);font-weight:700;letter-spacing:-0.025em;line-height:1.2;color:#1e293b}h1{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800}h2{font-size:clamp(1.25rem,2.5vw,1.75rem);font-weight:700}h3{font-size:clamp(1.1rem,2vw,1.375rem);font-weight:700}h4{font-size:1.125rem;font-weight:600}h5{font-size:1rem;font-weight:600}h6{font-size:0.875rem;font-weight:600}.post-body h2{font-size:1.05rem;font-weight:900;color:#1e293b;margin:0.5rem 0 0.2rem;line-height:1.3}.post-body h3{font-size:0.9rem;font-weight:700;color:#334155;margin:0.4rem 0 0.15rem;line-height:1.3}.post-body blockquote{border-left:3px solid #f2a0a0;padding-left:0.75rem;margin:0.35rem 0;color:#64748b;font-style:italic}.post-body ul{list-style:disc;padding-left:1.25rem;margin:0.2rem 0}.post-body ol{list-style:decimal;padding-left:1.25rem;margin:0.2rem 0}.post-body li{margin:0.1rem 0;color:#374151}.post-body code{background:#f1f5f9;color:#e11d48;border-radius:4px;padding:0.05em 0.3em;font-size:0.82em;font-family:ui-monospace,monospace}@media (max-width:767px){a,button,[role="button"],input[type="submit"],input[type="button"],label[for],select,.nav-item{min-height:44px}p a,li a,span a,td a{min-height:unset}}.btn,button[class*="bg-brand"],a[class*="bg-brand"],button[class*="btn-"],a[class*="btn-"]{transition:transform 0.15s ease,box-shadow 0.15s ease,background-color 0.15s ease}.btn:hover,button[class*="bg-brand"]:hover,a[class*="bg-brand"]:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(183,28,28,0.25)}.btn:active,button[class*="bg-brand"]:active,a[class*="bg-brand"]:active{transform:scale(0.98);box-shadow:none}.card,[class*="rounded-xl bg-white"],[class*="rounded-2xl bg-white"]{transition:box-shadow 0.2s ease,transform 0.2s ease}[class*="rounded-xl bg-white"]:hover,[class*="rounded-2xl bg-white"]:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08)}table tbody tr{transition:background-color 0.1s ease}table tbody tr:hover{background-color:#f8fafc}@keyframes modal-in{from{opacity:0;transform:scale(0.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}[role="dialog"] > div,.modal-content,[class*="modal-panel"]{animation:modal-in 0.2s cubic-bezier(0.22,1,0.36,1) both}@keyframes drawer-in-right{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes drawer-in-left{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}.drawer-panel.open,[class*="drawer-panel"][class*="open"]{animation:drawer-in-right 0.25s cubic-bezier(0.22,1,0.36,1) both}

/* ═══════════════════════════════════════════════════════════
   PRISM LAYOUT v1.1.90
   Column-flex page wrapper: topbar (56px) + body-row + footer (40px)
═══════════════════════════════════════════════════════════ */
:root{--rail-width:52px;--sub-width:240px;--topbar-height:56px;--footer-height:40px}

/* ── Neutralise old layout rules ── */
.app-sidebar{display:none!important}
.mobile-header{display:none!important}
.app-layout{display:flex!important;flex-direction:row!important;height:100%!important;width:100%!important;overflow:hidden!important;min-height:0!important}
.app-main{flex:1!important;display:flex!important;flex-direction:column!important;height:100%!important;overflow:hidden!important;min-width:0!important}
.app-header{position:relative!important;top:auto!important}

/* ── Page wrapper: column flex fills viewport ── */
#if-page{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:#f8fafc}

/* ── Topbar: natural row, full width ── */
#if-topbar{height:var(--topbar-height);min-height:var(--topbar-height);background:#fff;border-bottom:1px solid #e2e8f0;display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;padding:0 1rem;z-index:50;box-shadow:0 1px 3px rgba(0,0,0,0.05);gap:0.75rem;flex-shrink:0;width:100%;box-sizing:border-box}
#if-topbar-left{display:flex;align-items:center;gap:0.625rem;flex-shrink:0}
#if-topbar-center{flex:1;display:none;justify-content:center;min-width:0}
@media(min-width:768px){#if-topbar-center{display:flex}}
#if-topbar-right{display:flex;align-items:center;gap:0.375rem;flex-shrink:0}

/* ── Body row: rail + sub + main ── */
#if-body{flex:1;display:flex;flex-direction:row;overflow:hidden;min-height:0;background:#f8fafc}

/* ── Icon Rail ── */
#if-rail,#if-staff-rail{width:var(--rail-width);flex-shrink:0;background:#fff;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;align-items:center;padding:6px 0;gap:2px;height:100%;overflow:hidden;z-index:30}
.rail-btn{position:relative;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#64748b;cursor:pointer;border:none;background:transparent;transition:background .15s ease,color .15s ease;flex-shrink:0}
.rail-btn:hover{background:#f1f5f9;color:#1e293b}
.rail-btn.active{background:#fff1f1;color:#b71c1c}
.rail-btn.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:0 3px 3px 0;background:#b71c1c}

.rail-spacer{flex:1}
.rail-badge{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;border:1.5px solid #fff;pointer-events:none}

/* ── Sub-sidebar ── */
#if-sub,#if-staff-sub{width:var(--sub-width);flex-shrink:0;background:#fff;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;height:100%;overflow:hidden;transition:width .28s cubic-bezier(0.4,0,0.2,1);z-index:29}
#if-sub.sub-collapsed,#if-staff-sub.sub-collapsed{width:0!important;overflow:hidden}
#if-sub-titlebar{height:40px;padding:0 10px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:8px;flex-shrink:0;background:#fafafa}
#if-sub-title-text{font-family:var(--font-heading,'Outfit',sans-serif);font-size:.6875rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:#64748b;flex:1;white-space:nowrap;overflow:hidden}
#if-sub-company-chip{padding:6px 8px 4px;flex-shrink:0}
#if-sub-nav{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:3px 5px;scrollbar-width:thin;scrollbar-color:#e2e8f0 transparent}
#if-sub-nav::-webkit-scrollbar{width:3px}
#if-sub-nav::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:9999px}
.sub-cat{display:none!important}
.sub-cat.active{display:block!important}
.sub-section-label{display:flex;align-items:center;gap:5px;padding:7px 7px 3px}
.sub-section-label span{font-size:11px;font-weight:900;color:#64748b;text-transform:uppercase;letter-spacing:.14em;white-space:nowrap}
.sub-section-divider{flex:1;height:1px;background:#f1f5f9}
#if-sub-collapse{padding:6px 8px;border-top:1px solid #e2e8f0;flex-shrink:0}
.sub-collapse-btn{display:flex;align-items:center;gap:6px;width:100%;height:30px;border-radius:8px;background:#f8fafc;border:1px solid #f1f5f9;padding:0 10px;color:#64748b;cursor:pointer;font-size:.7rem;font-weight:600;transition:background .15s ease,border-color .15s ease;white-space:nowrap;overflow:hidden}
.sub-collapse-btn:hover{background:#fdecec;border-color:#f9c9c9;color:#b71c1c}
#if-sub .nav-item{font-size:.8rem!important;padding:.45rem .875rem!important;gap:.625rem!important;border-left:3px solid transparent!important}
#if-sub .nav-item.active{background:#fff1f1!important;color:#b71c1c!important;border-left:3px solid #b71c1c!important;box-shadow:none!important;padding-left:.875rem!important}

/* ── Footer ── */
#if-footer{height:var(--footer-height);background:#fff;border-top:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;flex-shrink:0;font-size:.7rem;color:#64748b}
#if-footer a{color:#64748b;text-decoration:none;transition:color .15s ease}
#if-footer a:hover{color:#475569}
#if-footer .status-dot{width:6px;height:6px;border-radius:50%;background:#10b981;display:inline-block;margin-right:3px;vertical-align:middle}

/* ── Mobile (<768px) ── */
@media(max-width:767px){
  .mobile-header{display:none!important}
  #if-page{height:100dvh;height:100vh}
  #if-footer{display:none!important}
  #if-rail,#if-staff-rail{display:none!important}
  #if-topbar{display:flex!important}
  #if-sub,#if-staff-sub{position:fixed!important;top:var(--topbar-height)!important;left:0!important;bottom:0!important;width:min(280px,85vw)!important;height:auto!important;transform:translateX(-110%);z-index:40;box-shadow:2px 0 20px rgba(0,0,0,0.12);transition:transform .28s cubic-bezier(0.4,0,0.2,1)}
  #if-sub.mobile-open,#if-staff-sub.mobile-open{transform:translateX(0)!important}
  #if-sub.sub-collapsed:not(.mobile-open),#if-staff-sub.sub-collapsed:not(.mobile-open){transform:translateX(-110%)!important}
}
@media(min-width:768px){
  .mobile-header{display:none!important}
}
@media(max-width:639px){
  #ports_map,#airports_map,#terminals_map,
  #pd-map,#ap-map,#detail_map,#ci-map,
  #wx-map,#wt-map,#vessel_map,#air_map,
  #rc-route-map,#ship-route-map,
  .canal-map-wrap,.cd-map-wrap,.ci-map-wrap{
    height:260px!important;
  }
}

/* === PHASE 2.4: content-visibility: auto on below-fold sections === */
.cv-auto{content-visibility:auto;contain-intrinsic-size:0 400px}
.cv-auto-sm{content-visibility:auto;contain-intrinsic-size:0 200px}
.cv-auto-lg{content-visibility:auto;contain-intrinsic-size:0 600px}
.dashboard-below-fold,.stats-section,.activity-section,.charts-section{content-visibility:auto;contain-intrinsic-size:0 500px}

/* === PHASE 4.1/4.2: Force correct border-radius on cards via CSS === */
.card,.section-card,.stat-card,.filter-panel,.glass-card{border-radius:var(--radius-2xl)!important}
.modal-panel{border-radius:var(--radius-2xl)!important}
@media(max-width:767px){.modal-panel{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}}

/* === PHASE 4.3: Universal button active:scale-95 press feedback === */
.btn:active,button[type="submit"]:active,button[type="button"]:active,[role="button"]:active{transform:scale(0.95)!important;transition:transform 0.1s cubic-bezier(0.4,0,0.2,1)!important}
.btn-primary:active{transform:scale(0.95) translateY(0)!important}

/* === PHASE 4.4: Card shine sweep (.card-shine) on hover === */
.card-shine,.stat-card,.list-card,.section-card{position:relative;overflow:hidden}
.card-shine::before,.stat-card::before,.list-card::before,.section-card::before{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.16) 50%,rgba(255,255,255,0) 100%);transform:skewX(-15deg);opacity:0;pointer-events:none;z-index:1}
.card-shine:hover::before,.stat-card:hover::before,.list-card:hover::before,.section-card:hover::before{animation:cardShine 0.55s cubic-bezier(0.22,1,0.36,1) forwards}
@keyframes cardShine{0%{left:-75%;opacity:0}20%{opacity:1}100%{left:125%;opacity:0}}

/* === PHASE 5.3: View Transitions API (same-origin page morphing) === */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-fade-out 0.2s cubic-bezier(0.4,0,0.2,1) both}
::view-transition-new(root){animation:vt-fade-in 0.25s cubic-bezier(0.22,1,0.36,1) both}
@keyframes vt-fade-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* === PHASE 5.4: Wizard card — self-contained scroll so action bar stays at bottom without overlapping content === */
/* The card becomes a flex column; content scrolls inside; buttons pin to card bottom — no viewport sticky */
/* wizard-page: makes .app-content and .page-content into flex columns so wizard-card can fill height correctly */
.wizard-page .app-content{overflow:hidden!important;display:flex!important;flex-direction:column!important;padding:1rem!important}
/* Mobile: base.html's bottom-nav clearance rule (.app-content{padding-bottom:4rem}) is
   specificity 0,0,1,0 and loses to the 0,0,2,0 + !important rule above, so on every
   wizard/create page the sticky action bar (Save Draft / Submit) rendered UNDER the
   fixed 53px .mobile-bottom-tab -- measured: action bar 750-827px vs nav 791-844px,
   36px of the primary submit button covered. Restore the clearance here at matching
   specificity. */
@media(max-width:767px){.wizard-page .app-content{padding-bottom:calc(4rem + env(safe-area-inset-bottom,0px))!important}}
/* Readable secondary text (light mode). text-slate-400 (#94a3b8) is only 2.6:1 on white and is
   used ~4,800 times for helper text, dates and labels. On light surfaces use slate-500 (4.8:1);
   inside dark surfaces keep the original light grey. */
:is(.page-content,main.page-body) .text-slate-400:not(:is([class*="bg-slate-7"],[class*="bg-slate-8"],[class*="bg-slate-9"],[class*="bg-gray-8"],[class*="bg-gray-9"],[class*="from-slate-8"],[class*="from-slate-9"],[class*="bg-brand-6"],[class*="bg-brand-7"],[class*="bg-indigo-9"],[class*="bg-blue-9"],[class*="from-brand-"],[class*="from-indigo-"],[class*="from-gray-9"],[class*="from-black"],[class*="bg-black"],[class*="bg-[#0"],[class*="bg-[#1"],.infra-hero,.dark-surface)):not(:is([class*="bg-slate-7"],[class*="bg-slate-8"],[class*="bg-slate-9"],[class*="bg-gray-8"],[class*="bg-gray-9"],[class*="from-slate-8"],[class*="from-slate-9"],[class*="bg-brand-6"],[class*="bg-brand-7"],[class*="bg-indigo-9"],[class*="bg-blue-9"],[class*="from-brand-"],[class*="from-indigo-"],[class*="from-gray-9"],[class*="from-black"],[class*="bg-black"],[class*="bg-[#0"],[class*="bg-[#1"],.infra-hero,.dark-surface) *){--tw-text-opacity:1;color:rgb(82 97 116/var(--tw-text-opacity,1))}
/* text-slate-300 (1.5:1) as readable text ("No reviews yet", captions) — same treatment, text elements only */
:is(.page-content,main.page-body) :is(p,span,div,td,th,label,small,li).text-slate-300:not(:is([class*="bg-slate-7"],[class*="bg-slate-8"],[class*="bg-slate-9"],[class*="bg-gray-8"],[class*="bg-gray-9"],[class*="from-slate-8"],[class*="from-slate-9"],[class*="bg-brand-6"],[class*="bg-brand-7"],[class*="bg-indigo-9"],[class*="bg-blue-9"],[class*="from-brand-"],[class*="from-indigo-"],[class*="from-gray-9"],[class*="from-black"],[class*="bg-black"],[class*="bg-[#0"],[class*="bg-[#1"],.infra-hero,.dark-surface)):not(:is([class*="bg-slate-7"],[class*="bg-slate-8"],[class*="bg-slate-9"],[class*="bg-gray-8"],[class*="bg-gray-9"],[class*="from-slate-8"],[class*="from-slate-9"],[class*="bg-brand-6"],[class*="bg-brand-7"],[class*="bg-indigo-9"],[class*="bg-blue-9"],[class*="from-brand-"],[class*="from-indigo-"],[class*="from-gray-9"],[class*="from-black"],[class*="bg-black"],[class*="bg-[#0"],[class*="bg-[#1"],.infra-hero,.dark-surface) *){--tw-text-opacity:1;color:rgb(82 97 116/var(--tw-text-opacity,1))}
/* Pin-to-dashboard stars and similar icon-only header buttons: 18px wide is hard to tap on phones */
@media(max-width:767px){.page-content button[onclick^="toggleFavoritePage"]{min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center}}

/* Mobile result/KPI tiles (tool calculators, reference specs): 3-4 column tile grids
   leave ~90px per tile at 390px, so big font-black values ("$10.00", "100,000")
   spilled out of their boxes. Let tiles shrink, tighten padding, scale values down. */
@media(max-width:640px){
  .page-content .grid[class*="grid-cols-"]>*{min-width:0}
  .page-content .grid.grid-cols-3>*,.page-content .grid.grid-cols-4>*{padding-left:.4rem;padding-right:.4rem}
  .page-content .grid.grid-cols-3>* :is(p,div,span).font-black,
  .page-content .grid.grid-cols-4>* :is(p,div,span).font-black,
  .page-content .grid.grid-cols-3>* :is(p,div,span).font-extrabold,
  .page-content .grid.grid-cols-4>* :is(p,div,span).font-extrabold{font-size:1rem;line-height:1.35rem;overflow-wrap:break-word}
  .page-content .grid.grid-cols-2>* :is(p,div).font-black:is(.text-2xl,.text-3xl){font-size:1.25rem;line-height:1.6rem;overflow-wrap:break-word}
  .page-content .grid:is(.grid-cols-2,.grid-cols-3,.grid-cols-4)>* :is(p,div,label).uppercase{letter-spacing:.02em;overflow-wrap:break-word}
  /* CBM calculator rows: 12-col row squeezed Qty to ~20px */
  .page-content .cbm-row{grid-template-columns:repeat(6,minmax(0,1fr))}
  .page-content .cbm-row>.col-span-3{grid-column:span 2/span 2}
  .page-content .cbm-row>.col-span-1{grid-column:span 2/span 2}
  .page-content .cbm-row>.col-span-2{grid-column:span 4/span 4}
  /* FX rate list: long rate numbers pushed the currency code out of its chip */
  .page-content #rate-table .rate-row>div:last-child{font-size:.75rem;min-width:0;overflow-wrap:break-word}
}
.wizard-page .page-content{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.wizard-page .page-content > *{flex:1 1 0;min-height:0}
/* Wizard card fills available flex height — no hardcoded max-height needed */
.wizard-card{display:flex;flex-direction:column;overflow:hidden;flex:1 1 0;min-height:0;max-height:calc(100dvh - 7.5rem)}
@media(max-width:767px){.wizard-card{max-height:calc(100dvh - 5.5rem)}}
.wizard-page .wizard-card{max-height:none!important}
/* Scrollable content area inside wizard card */
.wizard-scroll-body{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;padding:1.5rem 2rem;scrollbar-width:thin;scrollbar-color:#e2e8f0 transparent}
@media(max-width:767px){.wizard-scroll-body{padding:1.25rem}}
/* Action bar — static inside flex column, always visible at card bottom */
.sticky-form-actions{position:static;flex-shrink:0;border-top:1px solid var(--border-subtle);box-shadow:0 -2px 12px rgba(0,0,0,0.06);padding:1.25rem 2rem;background:white;display:flex;align-items:center;justify-content:flex-end;gap:0.75rem;margin-top:0}
@media(max-width:767px){.sticky-form-actions{padding:1rem 1.25rem}}

/* === PHASE 5.5: Animated dot-connector progress steps === */
.progress-step.active .progress-step-dot{animation:step-pulse 2s ease-in-out infinite}
@keyframes step-pulse{0%,100%{box-shadow:0 0 0 4px var(--color-brand-50)}50%{box-shadow:0 0 0 8px rgba(183,28,28,0.08),0 0 0 4px var(--color-brand-50)}}
.progress-connector{transition:background 0.4s ease}

/* === PHASE 6.2: Lazy image smooth fade-in === */
img[loading="lazy"]{transition:opacity 0.35s ease}

/* === PHASE 6.4: Empty state global styles for list pages === */
.empty-page-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;gap:1.25rem;min-height:320px}
.empty-page-state-icon{width:5rem;height:5rem;border-radius:var(--radius-xl);background:var(--bg-muted);border:1.5px dashed var(--border-light);display:flex;align-items:center;justify-content:center;font-size:1.75rem;color:var(--text-faint)}
.empty-page-state-title{font-family:var(--font-heading);font-weight:700;font-size:1.125rem;color:var(--text-primary);margin:0}
.empty-page-state-desc{font-size:0.875rem;color:var(--text-muted);max-width:380px;line-height:1.65;margin:0}

/* === PHASE 2.2: HTMX global top progress bar === */
#htmx-top-progress{position:fixed;top:0;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--color-brand-600),#f87171,var(--color-brand-600));background-size:200% 100%;z-index:99999;pointer-events:none;opacity:0;transition:opacity 0.2s ease,width 0.4s cubic-bezier(0.22,1,0.36,1)}
#htmx-top-progress.htmx-progress-active{opacity:1;width:80%;animation:htmx-progress-shimmer 1.2s linear infinite}
#htmx-top-progress.htmx-progress-done{width:100%;opacity:0;transition:width 0.15s ease,opacity 0.3s ease 0.1s}
@keyframes htmx-progress-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
/* Copyright 2026 AbilitySoft. All rights reserved. */
/* Developed for InstaFreight, Inc. under license agreement. */

/* Self-hosted fonts — auto-generated */

/* Outfit */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/Outfit-300.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/Outfit-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Outfit-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Outfit-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Outfit-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Outfit-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Outfit-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Outfit-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Outfit-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Outfit-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/Outfit-800.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/Outfit-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/static/fonts/Outfit-900.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/static/fonts/Outfit-900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Plus_Jakarta_Sans */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-300.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-300.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-300.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-400.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-400.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-500.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-500.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-600.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-600.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-700.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-700.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-800.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-800.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-800.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/Plus_Jakarta_Sans-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === PHASE 3.2: .page-hero-light — light-mode hero variant === */
.page-hero-light{position:relative;overflow:hidden;background:#fff;border:1px solid rgba(226,232,240,0.8);border-left:4px solid var(--color-brand-600);border-radius:var(--radius-2xl);padding:2rem 2.25rem;box-shadow:var(--shadow-sm)}.page-hero-light::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 95% 0%,rgba(183,28,28,0.04),transparent),radial-gradient(ellipse 50% 50% at 5% 100%,rgba(211,47,47,0.03),transparent);pointer-events:none}.page-hero-light > *{position:relative;z-index:1}.page-hero-light .page-hero-title{color:var(--text-primary)}.page-hero-light .page-hero-subtitle{color:var(--text-muted)}@media (max-width:767px){.page-hero-light{padding:1.5rem 1.25rem;border-radius:var(--radius-xl)}}

/* page-hero-light content recolor — maps dark-hero Tailwind white utilities to light equivalents */
.page-hero-light .page-hero-title,.page-hero-light h1.page-hero-title{color:var(--text-primary)}
.page-hero-light .page-hero-subtitle{color:var(--text-muted)}
.page-hero-light .text-white{color:var(--text-primary) !important}
.page-hero-light .text-white\/80,.page-hero-light [class*="text-white/"]{color:var(--text-secondary) !important}
.page-hero-light .text-white\/60{color:var(--text-muted) !important}
.page-hero-light [class*="bg-white/"]{background-color:var(--bg-muted) !important;backdrop-filter:none !important}
.page-hero-light [class*="border-white/"]{border-color:var(--border-light) !important}
.page-hero-light a[class*="bg-white/"]{background:var(--bg-muted) !important;color:var(--text-secondary) !important;border-color:var(--border-light) !important}
.page-hero-light a[class*="bg-white/"]:hover{background:var(--border-light) !important;color:var(--text-primary) !important}

/* ══════════════════════════════════════════════════════════════════════════
   FEEDBACK SYSTEM (v1.4.5) — all classes scoped .fb-*
   Tokens: brand-600 #d32f2f · brand-700 #b71c1c · amber-400 #fbbf24
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* brand-700 resting / brand-800 hover: white-on-brand-600 is only 4.23:1,
     below the 4.5:1 AA floor for this text size. */
  --fb-brand:#b71c1c; --fb-brand-dark:#b71c1c; --fb-brand-50:#ffebee;
  --fb-brand-ring:#d32f2f;
  --fb-star:#d97706; --fb-empty:#cbd5e1;   /* 3.1:1 and 1.9:1 vs white */
  --fb-ease:cubic-bezier(.16,1,.3,1);
}

/* ── Focus ring (applies to every interactive fb control) ───────────────── */
.fb-strip button:focus-visible,.fb-thumb:focus-visible,.fb-upvote:focus-visible,
.fb-btn-primary:focus-visible,.fb-btn-ghost:focus-visible,.fb-view:focus-visible,
.fb-launcher:focus-visible,.fb-input:focus-visible,.fb-drawer button:focus-visible,
.fb-star-input:focus-visible+.fb-star,.fb-face input:focus-visible+i,
.fb-nps-seg input:focus-visible+span,.fb-type input:focus-visible~.fb-type-ico{
  outline:2px solid var(--fb-brand-ring);outline-offset:2px;border-radius:.5rem;
}

/* ── 15. StarRating ─────────────────────────────────────────────────────── */
.fb-stars{display:inline-flex;flex-direction:row-reverse;gap:.3rem;position:relative}
.fb-star-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fb-star{cursor:pointer;color:var(--fb-empty);line-height:1;
  transition:color .15s var(--fb-ease),transform .15s var(--fb-ease)}
.fb-stars:hover .fb-star{color:var(--fb-empty)}
.fb-star:hover,.fb-star:hover~.fb-star,
.fb-stars:not(:hover) .fb-star-input:checked~.fb-star{color:var(--fb-star)}
.fb-star:hover{transform:scale(1.14)}
@media (max-width:640px){.fb-star{padding:.15rem;min-width:44px;text-align:center}}

/* ── 16. FaceScale ──────────────────────────────────────────────────────── */
.fb-faces{display:flex;gap:.5rem;justify-content:space-between}
.fb-face{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:.6rem .25rem;border-radius:.75rem;border:1px solid #e2e8f0;background:#fff;
  cursor:pointer;transition:all .15s var(--fb-ease);min-height:44px}
.fb-face i{font-size:1.35rem;color:#94a3b8;transition:color .15s,transform .15s var(--fb-ease)}
.fb-face span{font-size:11px;font-weight:600;color:#94a3b8;letter-spacing:.02em}
.fb-face:hover{border-color:#cbd5e1;transform:translateY(-2px)}
.fb-face:hover i{transform:scale(1.12)}
.fb-face[data-val="1"]:hover i,.fb-face[data-val="1"].is-on i{color:#ef4444}
.fb-face[data-val="2"]:hover i,.fb-face[data-val="2"].is-on i{color:#f97316}
.fb-face[data-val="3"]:hover i,.fb-face[data-val="3"].is-on i{color:#f59e0b}
.fb-face[data-val="4"]:hover i,.fb-face[data-val="4"].is-on i{color:#84cc16}
.fb-face[data-val="5"]:hover i,.fb-face[data-val="5"].is-on i{color:#22c55e}
.fb-face.is-on{border-color:#cbd5e1;background:#f8fafc}
.fb-face.is-on span{color:#334155}

/* ── 17. ThumbStrip ─────────────────────────────────────────────────────── */
.fb-strip{border:1px solid #e2e8f0;background:#fff;border-radius:1rem;padding:.9rem 1.1rem;
  box-shadow:0 1px 2px rgba(15,23,42,.04)}
.fb-strip-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fb-strip-q{font-size:.8125rem;font-weight:600;color:#334155}
.fb-strip-actions{display:flex;gap:.5rem}
.fb-thumb{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem;border-radius:.6rem;
  border:1px solid #e2e8f0;background:#fff;font-size:.75rem;font-weight:600;color:#475569;
  cursor:pointer;transition:all .15s var(--fb-ease);min-height:36px}
.fb-thumb:hover{border-color:#22c55e;color:#15803d;background:#f0fdf4}
.fb-thumb.fb-thumb-down:hover{border-color:#ef4444;color:#b91c1c;background:#fef2f2}
.fb-thumb.is-on{border-color:#22c55e;color:#15803d;background:#f0fdf4}
.fb-thumb.fb-thumb-down.is-on{border-color:#ef4444;color:#b91c1c;background:#fef2f2}
.fb-strip-expand{margin-top:.8rem;animation:fb-slide-down .2s var(--fb-ease)}
.fb-strip-done{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:600;
  color:#334155;padding:.15rem 0;animation:fb-fade-in .25s var(--fb-ease)}
@media (max-width:640px){.fb-thumb{flex:1;justify-content:center;min-height:44px}
  .fb-strip-actions{width:100%}}

/* ── 18. NPSScale ───────────────────────────────────────────────────────── */
.fb-nps-track{display:flex;gap:.25rem}
.fb-nps-seg{flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  border-radius:.5rem;border:1px solid #e2e8f0;background:#fff;min-height:40px;
  font-size:.75rem;font-weight:700;color:#64748b;transition:all .15s var(--fb-ease)}
.fb-nps-seg:hover{transform:translateY(-2px)}
.fb-nps-det:hover,.fb-nps-det.is-on{background:#fef2f2;border-color:#ef4444;color:#b91c1c}
.fb-nps-pas:hover,.fb-nps-pas.is-on{background:#fffbeb;border-color:#f59e0b;color:#b45309}
.fb-nps-pro:hover,.fb-nps-pro.is-on{background:#f0fdf4;border-color:#22c55e;color:#15803d}
@media (max-width:640px){.fb-nps-track{flex-wrap:wrap}.fb-nps-seg{flex:0 0 calc(16.66% - .25rem);min-height:44px}}

/* ── 20. TypePicker ─────────────────────────────────────────────────────── */
.fb-types{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.fb-type{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.9rem .4rem;
  border:1px solid #e2e8f0;border-radius:.9rem;background:#fff;cursor:pointer;
  transition:all .18s var(--fb-ease);min-height:88px;justify-content:center}
.fb-type:hover{border-color:#cbd5e1;transform:translateY(-2px);box-shadow:0 4px 12px rgba(15,23,42,.06)}
.fb-type.is-on{border-color:var(--fb-brand);background:var(--fb-brand-50);
  box-shadow:0 0 0 3px rgba(229,57,53,.08)}
.fb-type-ico{width:2rem;height:2rem;border-radius:.6rem;display:flex;align-items:center;
  justify-content:center;font-size:.85rem}
.fb-type-label{font-size:11px;font-weight:700;color:#334155;letter-spacing:.01em}
.fb-type-amber{background:#fffbeb;color:#f59e0b}
.fb-type-red{background:#fef2f2;color:#ef4444}
.fb-type-green{background:#f0fdf4;color:#22c55e}
.fb-type-violet{background:#fdecec;color:#d32f2f}
.fb-type-orange{background:#fff7ed;color:#f97316}
.fb-type-slate{background:#f8fafc;color:#94a3b8}
@media (max-width:380px){.fb-types{grid-template-columns:repeat(2,1fr)}}

/* ── 19. FeedbackDrawer / bottom sheet ──────────────────────────────────── */
.fb-scrim{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);
  z-index:2147483000;opacity:0;transition:opacity .2s var(--fb-ease)}
.fb-scrim.is-open{opacity:1}
.fb-drawer{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:32rem;background:#fff;
  z-index:2147483001;display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(15,23,42,.18);
  transform:translateX(100%);transition:transform .28s var(--fb-ease)}
.fb-drawer.is-open{transform:translateX(0)}
.fb-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.25rem 1.5rem 1rem;border-bottom:1px solid #f1f5f9}
.fb-drawer-body{flex:1;overflow-y:auto;padding:1.25rem 1.5rem 1.5rem}
.fb-drawer-close{width:2rem;height:2rem;border-radius:.6rem;display:flex;align-items:center;
  justify-content:center;color:#94a3b8;background:transparent;border:0;cursor:pointer;transition:all .15s}
.fb-drawer-close:hover{background:#f1f5f9;color:#334155}
@media (max-width:640px){
  .fb-drawer{top:auto;left:0;right:0;max-width:100%;max-height:92vh;border-radius:1.5rem 1.5rem 0 0;
    transform:translateY(100%);box-shadow:0 -8px 40px rgba(15,23,42,.18)}
  .fb-drawer.is-open{transform:translateY(0)}
  .fb-drawer-head{padding-top:1.75rem}
  .fb-drawer::before{content:"";position:absolute;top:.6rem;left:50%;transform:translateX(-50%);
    width:2.5rem;height:.25rem;border-radius:999px;background:#e2e8f0}
  .fb-drawer-body{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))}
}

/* ── Steps ──────────────────────────────────────────────────────────────── */
.fb-steps{display:flex;gap:.35rem;align-items:center}
.fb-step-dot{width:.4rem;height:.4rem;border-radius:999px;background:#e2e8f0;transition:all .2s var(--fb-ease)}
.fb-step-dot.is-on{background:var(--fb-brand);width:1.1rem;border-radius:999px}

/* ── Context pill ───────────────────────────────────────────────────────── */
.fb-context{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .6rem;border-radius:.5rem;
  background:#f8fafc;border:1px solid #e2e8f0;font-size:11px;font-weight:600;color:#64748b;max-width:100%}
.fb-context span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Inputs & buttons ───────────────────────────────────────────────────── */
.fb-input{width:100%;border:1px solid #e2e8f0;border-radius:.6rem;padding:.6rem .75rem;
  font-size:.8125rem;color:#334155;background:#fff;transition:border-color .15s,box-shadow .15s;resize:vertical}
.fb-input::placeholder{color:#94a3b8}
.fb-input:focus{border-color:var(--fb-brand);box-shadow:0 0 0 3px rgba(229,57,53,.08);outline:none}
.fb-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.6rem 1.1rem;border-radius:.6rem;background:var(--fb-brand);color:#fff;border:0;
  font-size:.8125rem;font-weight:700;cursor:pointer;transition:background .15s,transform .1s;min-height:40px}
.fb-btn-primary:hover:not(:disabled){background:var(--fb-brand-dark)}
.fb-btn-primary:active:not(:disabled){transform:scale(.98)}
.fb-btn-primary:disabled{opacity:.6;cursor:not-allowed}
.fb-btn-ghost{padding:.6rem .9rem;border-radius:.6rem;background:transparent;border:0;
  font-size:.8125rem;font-weight:600;color:#64748b;cursor:pointer;transition:background .15s;min-height:40px}
.fb-btn-ghost:hover{background:#f1f5f9;color:#334155}

/* ── Launcher ───────────────────────────────────────────────────────────── */
.fb-launcher{position:fixed;right:0;top:50%;transform:translateY(-50%) translateX(0);
  z-index:2147482000;display:inline-flex;align-items:center;gap:.45rem;
  padding:.7rem .65rem;border:0;border-radius:.75rem 0 0 .75rem;cursor:pointer;
  background:var(--fb-brand);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;writing-mode:vertical-rl;box-shadow:-2px 2px 14px rgba(183,28,28,.32);
  transition:background .15s,transform .25s var(--fb-ease),opacity .2s}
.fb-launcher:hover{background:var(--fb-brand-dark);transform:translateY(-50%) translateX(-2px)}
.fb-launcher i{writing-mode:horizontal-tb}
.fb-launcher.is-hidden{transform:translateY(-50%) translateX(110%);opacity:0;pointer-events:none}
@media (max-width:768px){
  .fb-launcher{top:auto;bottom:calc(4.75rem + env(safe-area-inset-bottom));right:.9rem;
    writing-mode:horizontal-tb;border-radius:999px;padding:.7rem 1rem;transform:none;min-height:44px}
  .fb-launcher:hover{transform:none}
  .fb-launcher.is-hidden{transform:translateY(140%);opacity:0}
}

/* ── 21. UpvotePill ─────────────────────────────────────────────────────── */
.fb-upvote{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.05rem;min-width:2.75rem;padding:.4rem .35rem;border-radius:.7rem;border:1px solid #e2e8f0;
  background:#fff;color:#64748b;cursor:pointer;transition:all .15s var(--fb-ease);min-height:44px}
.fb-upvote:hover{border-color:var(--fb-brand);color:var(--fb-brand);transform:translateY(-1px)}
.fb-upvote.is-voted{background:var(--fb-brand-50);border-color:#ef9a9a;color:var(--fb-brand-dark)}
.fb-upvote i{font-size:.9rem;line-height:1}
.fb-upvote-count{font-size:.75rem;font-weight:800;line-height:1.1}

/* ── 23. ScoreMeter ─────────────────────────────────────────────────────── */
.fb-meter-track{height:.5rem;border-radius:999px;background:#f1f5f9;overflow:hidden}
.fb-meter-fill{height:100%;border-radius:999px;transition:width .5s var(--fb-ease)}

/* ── 24. HeatCell ───────────────────────────────────────────────────────── */
.fb-heat{display:inline-block;width:100%;height:1.5rem;border-radius:.35rem;background:#f1f5f9;position:relative}
.fb-heat::after{content:"";position:absolute;inset:0;border-radius:.35rem;opacity:var(--fb-i,0)}
.fb-heat-green::after{background:#22c55e}
.fb-heat-red::after{background:#ef4444}

/* ── 25. SavedViewChip ──────────────────────────────────────────────────── */
.fb-view{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .7rem;border-radius:.6rem;
  border:1px solid #e2e8f0;background:#fff;font-size:11px;font-weight:600;color:#64748b;
  transition:all .15s var(--fb-ease);white-space:nowrap}
.fb-view:hover{border-color:#cbd5e1;color:#334155;background:#f8fafc}
.fb-view.is-active{background:var(--fb-brand-50);border-color:#ef9a9a;color:var(--fb-brand-dark)}
.fb-view-count{padding:0 .3rem;border-radius:.35rem;background:#f1f5f9;font-size:11px;font-weight:800;color:#334155}
.fb-view.is-active .fb-view-count{background:#fff}

/* ── 26. BulkActionBar ──────────────────────────────────────────────────── */
.fb-bulk{position:sticky;bottom:0;z-index:30;display:flex;align-items:center;gap:.75rem;
  padding:.75rem 1rem;background:#0f172a;color:#fff;border-radius:.9rem;
  box-shadow:0 8px 24px rgba(15,23,42,.28);animation:fb-rise .2s var(--fb-ease)}

/* ── Admin inbox layout ─────────────────────────────────────────────────── */
.fb-inbox{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:1024px){.fb-inbox{grid-template-columns:15rem minmax(0,1fr)}}
@media (min-width:1440px){.fb-inbox{grid-template-columns:15rem minmax(0,1fr) 26rem}}
.fb-row{display:flex;gap:.75rem;padding:.85rem 1rem;border-left:3px solid transparent;
  cursor:pointer;transition:background .12s}
.fb-row:hover{background:#f8fafc}
.fb-row.is-selected{background:var(--fb-brand-50)}
.fb-row.p-critical{border-left-color:#ef4444}
.fb-row.p-high{border-left-color:#f59e0b}
.fb-row.is-unread .fb-row-title{font-weight:800;color:#0f172a}

/* ── Thread bubbles ─────────────────────────────────────────────────────── */
.fb-bubble{border-radius:.9rem;padding:.75rem .9rem;font-size:.8125rem;line-height:1.55;
  max-width:92%;white-space:pre-wrap;word-break:break-word}
.fb-bubble-user{background:#f1f5f9;color:#334155;border-bottom-left-radius:.25rem}
.fb-bubble-staff{background:var(--fb-brand-50);color:#7f1d1d;margin-left:auto;
  border-bottom-right-radius:.25rem}
.fb-bubble-internal{background:#fffbeb;color:#92400e;border:1px dashed #fcd34d;margin-left:auto}

/* ── Success check draw ─────────────────────────────────────────────────── */
.fb-check circle,.fb-check path{stroke-dasharray:180;stroke-dashoffset:180;
  animation:fb-draw .5s var(--fb-ease) forwards}
.fb-check path{animation-delay:.22s}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes fb-draw{to{stroke-dashoffset:0}}
@keyframes fb-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes fb-slide-down{from{opacity:0;max-height:0}to{opacity:1;max-height:14rem}}
@keyframes fb-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fb-shimmer{100%{background-position:100% 0}}
.fb-shimmer{background-image:linear-gradient(90deg,#f1f5f9 0%,#e2e8f0 40%,#f1f5f9 80%);
  background-size:300% 100%;animation:fb-shimmer 1.3s linear infinite}
.fb-fade-in{animation:fb-fade-in .25s var(--fb-ease)}

@media (prefers-reduced-motion:reduce){
  .fb-drawer,.fb-scrim,.fb-launcher,.fb-type,.fb-face,.fb-nps-seg,.fb-upvote,
  .fb-star,.fb-meter-fill,.fb-thumb{transition:none !important}
  .fb-check circle,.fb-check path{animation:none !important;stroke-dashoffset:0 !important}
  .fb-shimmer{animation:none !important;background:#f1f5f9 !important}
  .fb-strip-expand,.fb-strip-done,.fb-bulk,.fb-fade-in{animation:none !important}
  .fb-type:hover,.fb-face:hover,.fb-nps-seg:hover,.fb-upvote:hover{transform:none !important}
}

/* ── Feedback charts — validated diverging palette ────────────────────────
   Negative #dc2626 ↔ neutral #94a3b8 ↔ positive #475569.
   Plain red/green fails CVD separation (deutan ΔE 5.0); teal is the safe pole.
   Every series also carries a legend + direct label, never color alone.      */
:root{
  --fb-c-neg:#dc2626; --fb-c-neu:#64748b; --fb-c-pos:#475569;
  --fb-c-seq:#334155; --fb-c-surface:#ffffff;
}
.fb-chart{display:flex;align-items:flex-end;gap:3px;height:11rem;padding-top:.5rem}
.fb-chart-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  min-width:0;height:100%;position:relative}
.fb-chart-seg{border-radius:2px;min-height:2px;transition:opacity .15s}
.fb-chart-seg:first-child{border-radius:4px 4px 2px 2px}
.fb-chart-col:hover .fb-chart-seg{opacity:.75}
.fb-seg-pos{background:var(--fb-c-pos)}
.fb-seg-neu{background:var(--fb-c-neu)}
.fb-seg-neg{background:var(--fb-c-neg)}
.fb-chart-tip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:.4rem;padding:.4rem .55rem;border-radius:.5rem;background:#0f172a;color:#fff;
  font-size:11px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .12s;z-index:5}
.fb-chart-col:hover .fb-chart-tip,.fb-chart-col:focus-within .fb-chart-tip{opacity:1}
.fb-legend{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.fb-legend-item{display:inline-flex;align-items:center;gap:.4rem;font-size:11px;
  font-weight:600;color:#64748b}
.fb-legend-swatch{width:.6rem;height:.6rem;border-radius:2px;flex:none}
.fb-bar-row{display:flex;align-items:center;gap:.75rem}
.fb-bar-track{flex:1;height:.6rem;border-radius:999px;background:#f1f5f9;overflow:hidden}
.fb-bar-fill{height:100%;border-radius:999px;background:var(--fb-c-seq)}
.fb-gauge-track{height:.75rem;border-radius:999px;background:#f1f5f9;position:relative;overflow:hidden}
.fb-gauge-seg{position:absolute;top:0;bottom:0}
@media (prefers-reduced-motion:reduce){.fb-chart-seg,.fb-chart-tip{transition:none !important}}

/* Mobile assistance is available under More, leaving one primary action FAB. */
@media (max-width: 767px) {
  .fb-launcher, #support-chat-launcher, #cw-launcher, #proactive-chat-invite {
    display: none !important;
  }
}

#mobile-help-menu { display: none; }
@media (max-width: 767px) {
  #mobile-help-menu { display: block; }
}

/* === UI/UX REDESIGN FOUNDATION v2026-09-14 === */
.if-ux-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.if-ux-page-actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex-wrap:wrap}
.if-ux-action{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:.6rem 1rem;border-radius:var(--radius-xl);font-size:.8rem;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base),background-color var(--transition-base)}
.if-ux-action:hover{transform:translateY(-1px)}
.if-ux-action-muted{background:#fff;border-color:var(--border-light);color:var(--text-muted)}
.if-ux-action-muted:hover{border-color:var(--color-brand-300);color:var(--color-brand-600)}
.if-ux-action-primary{background:var(--color-brand-600);border-color:var(--color-brand-600);color:#fff;box-shadow:var(--shadow-sm)}
.if-ux-action-primary:hover{background:var(--color-brand-700)}
.if-ux-action-danger{background:#e11d48;border-color:#e11d48;color:#fff;box-shadow:var(--shadow-sm)}
.if-ux-action-danger:hover{background:#be123c}
.if-ux-eyebrow{margin:0 0 .35rem;color:var(--color-brand-600);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.if-ux-title{margin:0;color:var(--text-primary);font-family:var(--font-heading);font-size:clamp(1.35rem,2.2vw,2rem);font-weight:800;letter-spacing:0;line-height:1.15}
.if-ux-subtitle{margin:.45rem 0 0;max-width:52rem;color:var(--text-muted);font-size:.875rem;line-height:1.65}
.if-ux-stat{display:flex;align-items:center;gap:.85rem;min-height:5.25rem;padding:1rem 1.1rem;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}
.if-ux-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--color-brand-100)}
.if-ux-stat-icon{width:2.75rem;height:2.75rem;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex:none;font-size:1rem;background:var(--bg-muted);color:var(--text-muted)}
.if-ux-stat-brand .if-ux-stat-icon{background:var(--color-brand-50);color:var(--color-brand-600)}
.if-ux-stat-info .if-ux-stat-icon{background:#f8fafc;color:#334155}
.if-ux-stat-success .if-ux-stat-icon{background:#f0fdf4;color:#15803d}
.if-ux-stat-warning .if-ux-stat-icon{background:#fffbeb;color:#92400e}
.if-ux-stat-danger .if-ux-stat-icon{background:#fff1f2;color:#9f1239}
.if-ux-stat-copy{display:flex;flex-direction:column;min-width:0}
.if-ux-stat-label{color:var(--text-muted);font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.if-ux-stat-value{margin-top:.15rem;color:var(--text-primary);font-family:var(--font-heading);font-size:1.45rem;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.if-ux-empty{background:#fff;border:1px dashed var(--border-light);border-radius:var(--radius-2xl)}
.if-ux-filter{overflow:hidden}
.if-ux-filter-toggle{width:100%;border:0;background:transparent;text-align:left;cursor:pointer}
.if-ux-filter-toggle span{display:inline-flex;align-items:center;gap:.5rem}
.if-ux-badge{display:inline-flex;align-items:center;gap:.35rem;border-radius:var(--radius-pill);padding:.25rem .65rem;font-size:.6875rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;border:1px solid var(--border-light);background:var(--bg-muted);color:var(--text-muted)}
.if-ux-badge-brand{background:var(--color-brand-50);border-color:var(--color-brand-100);color:var(--color-brand-600)}
.if-ux-badge-success{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.if-ux-badge-warning{background:#fffbeb;border-color:#fde68a;color:#92400e}
.if-ux-badge-danger{background:#fff1f2;border-color:#fecdd3;color:#9f1239}
.if-ux-badge-info{background:#f8fafc;border-color:#e2e8f0;color:#334155}
.if-ux-badge-dot{width:.35rem;height:.35rem;border-radius:50%;background:currentColor;flex-shrink:0}
.dyn-color{color:var(--dyn-color)}
.mini-cover-fallback{background:linear-gradient(135deg,#312e81,#b71c1c 60%,#b71c1c)}
@media(max-width:767px){
  .if-ux-page-header{flex-direction:column;align-items:stretch;margin-bottom:1rem}
  .if-ux-page-actions{justify-content:stretch}
  .if-ux-page-actions > *{flex:1 1 auto}
  .if-ux-title{font-size:1.35rem}
  .if-ux-stat{min-height:4.75rem;padding:.9rem}
}
@media(prefers-reduced-motion:reduce){
  .if-ux-stat,.if-ux-stat:hover{transition:none;transform:none}
}

/* Font Awesome sets display:inline-block on icons, which beats Tailwind .hidden — toggled icons (open/close) showed both states. */
.fa-solid.hidden,.fa-regular.hidden,.fa-brands.hidden,.fas.hidden,.far.hidden,.fab.hidden,.fa.hidden{display:none!important}

/* Long stat values (e.g. "USD 152,690.00") wrapped past their card on phones */
.if-ux-stat-value{overflow-wrap:break-word;min-width:0}


/* Reputation Platform — radio tiles (sr-only inputs): visible keyboard focus + non-colour checked cue */
.rep-choice:has(input:focus-visible){outline:2px solid #b71c1c;outline-offset:2px}
.rep-choice:has(input:checked){font-weight:800;box-shadow:inset 0 0 0 1px #b71c1c}


/* WCAG AA TEXT FLOOR (2026-09-21) — tailwind.built.css loads after this file, so the selectors carry
   a `body` prefix to win on specificity. Light-mode only. Text utilities below 4.5:1 on white / slate-50 /
   tinted -50 surfaces are remapped to the nearest AA-passing shade. Use -300/-400 on DARK surfaces (unaffected). */
body .text-slate-400{color:#5f6e82}
body .text-slate-500{color:#526174}
body .text-amber-500,body .text-amber-600{color:#92400e}
body .text-emerald-500,body .text-emerald-600{color:#047857}
body .text-green-500,body .text-green-600{color:#15803d}
body .text-sky-500,body .text-sky-600{color:#334155}
body .text-teal-500,body .text-teal-600{color:#334155}
body .text-cyan-500,body .text-cyan-600{color:#334155}
body .text-red-500,body .text-red-600{color:#b91c1c}
body .text-orange-500,body .text-orange-600{color:#c2410c}
body .text-rose-500,body .text-rose-600{color:#be123c}
body .text-indigo-500,body .text-indigo-600{color:#9b1818}
body .text-blue-500,body .text-blue-600{color:#334155}
body .text-violet-500,body .text-violet-600{color:#9b1818}
body .text-purple-500,body .text-purple-600{color:#9b1818}
body .text-stone-400,body .text-stone-500{color:#57534e}
body .text-gray-400,body .text-gray-500{color:#4b5563}
body .text-zinc-400,body .text-zinc-500{color:#52525b}
body .text-neutral-400,body .text-neutral-500{color:#525252}

@media(max-width:1024px){.ui-tap-min,.page-content button[onclick^="toggleFavoritePage"],.page-content a.icon-only,.page-content button.icon-only{min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center}}

@media(max-width:1024px){.page-content button[id^="react-btn-"],.page-content button[id^="react-count-"],.fav-toggle-btn,.msg-action-btn,.msg-emoji-btn,.post-icon-btn{min-width:28px;min-height:28px}}

/* WCAG AA SOLID-FILL FLOOR (2026-09-21) — white text on these -600 fills measured 3.2–4.1:1; use the -700 shade. */
body .bg-amber-600{background-color:#b45309}
body .bg-emerald-600{background-color:#047857}
body .bg-orange-600{background-color:#c2410c}
body .bg-sky-600{background-color:#334155}
body .bg-teal-600{background-color:#334155}
body .bg-cyan-600{background-color:#334155}
body .bg-green-600{background-color:#15803d}
body .hover\:bg-amber-600:hover,body .hover\:bg-orange-600:hover,body .hover\:bg-emerald-600:hover{filter:brightness(.92)}

/* Unread badge on the notifications hero pill sat 4px outside the viewport on phones → page-wide horizontal scroll. */
#unread-hero-badge .absolute{right:0}   /* was -right-1 (4px outside its pill) at every width */

/* The fixed mobile bottom tab bar (~53px) covered the last primary action on short pages (live-chat, rates/browse). */
@media(max-width:767px){.page-content{padding-bottom:calc(9rem + env(safe-area-inset-bottom,0px))}}

/* Closed tool drawer: hide it entirely (no focusable/scrollable off-canvas content, no page overflow). */
#tool-drawer.translate-x-full{visibility:hidden;transition:transform .3s,visibility 0s linear .3s}

/* TABLET (768–1023px): the sidebar stays open, leaving ~500px of content — squeezed grids/labels spilled on ~40 pages. */
@media (min-width:768px) and (max-width:1023px){
  .page-content .grid[class*="md:grid-cols-4"],.page-content .grid[class*="md:grid-cols-5"],.page-content .grid[class*="md:grid-cols-6"],
  .page-content .grid[class*="grid-cols-4"]:not([class*="md:grid-cols-"]),.page-content .grid[class*="grid-cols-5"]:not([class*="md:grid-cols-"]),
  .page-content .grid[class*="grid-cols-6"]:not([class*="md:grid-cols-"]){grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-content .grid>*{min-width:0}
  .page-content :is(label,p,td,th,h2,h3,h4,button,a,span,div):not(pre):not(code){overflow-wrap:break-word}
}

@media(max-width:1024px){.page-content button.flex.items-center:not(.w-full){min-height:24px;min-width:24px}}

/* MOBILE SCROLL: the legacy <768px rule made .app-content overflow:visible, but the shell now clips at .app-main (overflow:hidden) — content below the fold was unreachable by touch/wheel. .app-content is the scroller at every width. */
@media(max-width:767px){.app-content{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}}

/* WCAG floor, part 2 — -400 accent text and -500 fills that carry white text (dark/gradient surfaces excluded). */
body :is(.text-red-400,.text-rose-400):not(:is(.bg-slate-900,.bg-slate-800,.bg-slate-950,[class*="from-"],[class*="bg-gradient"])):not(:is(.bg-slate-900,.bg-slate-800,.bg-slate-950,[class*="from-"],[class*="bg-gradient"]) *){color:#b91c1c}
body :is(.text-indigo-400,.text-blue-400):not(:is(.bg-slate-900,.bg-slate-800,.bg-slate-950,[class*="from-"],[class*="bg-gradient"])):not(:is(.bg-slate-900,.bg-slate-800,.bg-slate-950,[class*="from-"],[class*="bg-gradient"]) *){color:#9b1818}
body :is(.text-emerald-400,.text-green-400,.text-teal-400):not(:is(.bg-slate-900,.bg-slate-800,.bg-slate-950,[class*="from-"],[class*="bg-gradient"])):not(:is(.bg-slate-900,.bg-slate-800,.bg-slate-950,[class*="from-"],[class*="bg-gradient"]) *){color:#047857}
body :is(.text-amber-400,.text-orange-400,.text-yellow-500):not(:is(.bg-slate-900,.bg-slate-800,.bg-slate-950,[class*="from-"],[class*="bg-gradient"])):not(:is(.bg-slate-900,.bg-slate-800,.bg-slate-950,[class*="from-"],[class*="bg-gradient"]) *){color:#92400e}
body .bg-blue-500{background-color:#334155}body .bg-indigo-500{background-color:#9b1818}body .bg-violet-500{background-color:#9b1818}
body .bg-emerald-500{background-color:#047857}body .bg-red-500{background-color:#b91c1c}body .bg-sky-500{background-color:#334155}body .bg-teal-500{background-color:#334155}
body :is(.text-violet-400,.text-purple-400,.text-fuchsia-400,.text-pink-400):not(:is(.bg-slate-900,.bg-slate-800,.bg-slate-950,[class*="from-"],[class*="bg-gradient"])):not(:is(.bg-slate-900,.bg-slate-800,.bg-slate-950,[class*="from-"],[class*="bg-gradient"]) *){color:#9b1818}
body .text-brand-500{color:#b71c1c}
/* Solid amber/orange bars & cards that carry white text, and dark-on-amber cards */
body .bg-amber-500:has(> .text-white),body .bg-amber-500:has(> span.text-white){background-color:#b45309}
body .bg-orange-500:has(> .text-white){background-color:#c2410c}
body .bg-amber-500 :is(.text-amber-700,.text-amber-800,.text-amber-900,.text-amber-600){color:#451a03}
/* Any coloured bar/pill whose ONLY child is white text: darken its own background whatever colour it is (dynamic bg-{c}-500) */
body :is(.rounded-full,.rounded):has(> span.text-white.whitespace-nowrap),body :is(.rounded-full,.rounded):has(> span.text-white:only-child){background-image:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.30))}
@media(max-width:767px){.page-content :is(td,th,label,p,h2,h3,h4,button,a,span,div):not(pre):not(code){overflow-wrap:break-word}}

/* sr-only spans are position:absolute with no offset, so inside a wide table in an overflow-x-auto wrapper
   (not positioned) they sit at the table's far right and widen the whole page on mobile. Anchor them at
   the left edge — they are invisible, so nothing moves visually. (2026-09-28, /company/api) */
body .sr-only{left:0;top:0}
/* Right-edge fade hint for horizontally-scrollable chip/tab rows so scrollability is
   visually obvious instead of discovered by accident (2026-09-30). */
.scroll-fade-right{-webkit-mask-image:linear-gradient(to right,#000 92%,transparent 100%);mask-image:linear-gradient(to right,#000 92%,transparent 100%)}
/* Google reCAPTCHA's own badge is position:fixed with right:-186px (pinned mostly off-screen
   until hover) — Chromium still counts it into document.documentElement.scrollWidth on some
   pages, causing an hscroll finding that an ancestor overflow-x:hidden rule alone doesn't always
   suppress. Google explicitly supports repositioning the badge via CSS (this does not hide it —
   it stays fully visible, just flush against the edge instead of partially off-screen), so this
   is the source-level fix rather than relying only on ancestor clipping. (2026-09-29)
   Loaded on: auth/{login,signup,forgot_password}.html, admin/login.html, admin/team.html,
   public/{ambassadors,advisors,mentors,contact,waitlist,get_quote}.html, quotations/create.html,
   public/reputation/_recaptcha.html — any future reCAPTCHA-bearing page gets this for free. */
.grecaptcha-badge{right:0!important}

/* 2026-10-04 theme: white text on a brand-coloured chip stays white inside the light page hero (was forced dark: 2.9:1) */
.page-hero-light [class*="bg-brand-"].text-white,.page-hero-light [class*="bg-brand-"] .text-white{color:#fff!important}

/* 2026-10-04 theme: command-palette search box meets the tap minimum */
.if-cmd-input,#if-cmd-input{min-height:40px}

/* UI checklist #31 — admin editor controls reach the 24px tap floor (toolbar buttons, checkboxes, range sliders, provider chips) */
.tt-btn,.tt-toolbar-btn,button[onclick*="vidCmd"],button[onclick*="ttCmd"]{min-width:28px;min-height:28px}
form input[type=checkbox]:not(.sr-only):not(.peer){width:18px;height:18px;margin:3px}
input[type=range]{min-height:24px}
button[onclick^="addProvider"]{min-height:28px}
.text-sm.text-slate-500.hover\:text-slate-700{display:inline-block;min-height:24px;line-height:24px}
.maplibregl-ctrl-attrib a,.leaflet-control-attribution a,.mapboxgl-ctrl-attrib a{display:inline-block;min-height:24px;line-height:24px}
button[onclick^="bkCmd"]{min-width:28px;min-height:28px}
/* hero titles inside an unclassed flex child must never collapse to one letter per line (tablet) */
div:not([class])>h1.flex{min-width:12rem}
/* page header: the title column never shrinks below a readable width; actions wrap under it instead of squeezing it (tablet) */
.if-ux-page-header{flex-wrap:wrap}
.if-ux-page-header>.min-w-0{flex:1 1 16rem}
.if-ux-title{overflow-wrap:break-word;word-break:normal}
button[aria-label="Close"],button[aria-label="Dismiss"],button[data-dashboard-action="dismiss-onboarding"]{min-width:28px;min-height:28px}

/* 57-check typography/component floor.  Compact utility labels are used across
   portal surfaces; retain their visual hierarchy but never render below the
   documented 9.5px minimum. */
.text-\[9px\]{font-size:10px!important}
.text-\[10px\]{font-size:11px!important}

/* Native file controls otherwise inherit the browser's square corner. */
input[type="file"]{border-radius:var(--radius-sm)}

/* Reduced-motion users must not receive the decorative keyframe effects used
   by legacy cards, drawers, and loading affordances. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}