/* ─── PREMIUM DARK DESIGN TOKENS (ABYSS THEME) ─── */
 :root {
   --bg-base: #07090f;
   --bg-subtle: #0f1423;
   --bg-surface: #141a2e;

   --text-main: #ffffff;
   --text-muted: #94a3b8;
   --text-inverse: #000000;

   --border-light: rgba(255, 255, 255, 0.4);
   --border-hover: rgba(255, 255, 255, 0.6);

   --brand-gold: #fbbf24;
   --brand-gold-light: #fde047;
   --brand-gold-dark: #d97706;

   --brand-primary: var(--brand-gold);
   --brand-primary-hover: var(--brand-gold-light);
   --brand-secondary: #e2e8f0;
   --brand-accent: var(--brand-gold);

   --brand-gradient: linear-gradient(135deg, var(--brand-gold-light), var(--brand-gold-dark));
   --gold-gradient: linear-gradient(135deg, var(--brand-gold-light), var(--brand-gold-dark));

   --blue: #3b82f6;
   --success: #10b981;
   --warning: #fbbf24;
   --danger: #ef4444;

   --header-bg: rgba(7, 9, 15, 0.85);
   --header-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);

   --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.5);
   --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
   --shadow-glow: 0 10px 30px -10px rgba(251, 191, 36, 0.3);
   --shadow-float: 0 20px 40px rgba(0, 0, 0, 0.8);
   --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);

   --font-main: 'Plus Jakarta Sans', sans-serif;
   --transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

   --radius-sm: 6px;
   --radius-md: 10px;
   --radius-lg: 16px;
   --radius-xl: 24px;
   --radius-full: 9999px;
 }

 /* ─── RESET & BASE ─── */
 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 body {
   font-family: var(--font-main);
   background-color: var(--bg-base);
   color: var(--text-main);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   position: relative;
   overflow-x: hidden;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
 }

 a {
   text-decoration: none;
   color: inherit;
   transition: var(--transition);
 }

 button {
   border: none;
   background: none;
   font-family: inherit;
   cursor: pointer;
   color: inherit;
   outline: none;
 }

 ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 /* ─── TYPOGRAPHY & UTILS ─── */
 .text-primary {
   color: var(--brand-primary);
 }

 .text-success {
   color: var(--success);
 }

 .text-muted {
   color: var(--text-muted);
 }

 .font-semibold {
   font-weight: 600;
 }

 .font-bold {
   font-weight: 700;
 }

 .flex {
   display: flex;
 }

 .items-center {
   align-items: center;
 }

 .justify-between {
   justify-content: space-between;
 }

 .gap-2 {
   gap: 6px;
 }

 .gap-4 {
   gap: 12px;
 }

 /* ─── STANDARDIZED BUTTONS ─── */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   padding: 10px 20px;
   border-radius: 999px;
   font-weight: 700;
   font-size: 13px;
   transition: var(--transition);
   cursor: pointer;
   border: 1px solid var(--border-light);
 }

 .btn-primary {
   background: var(--gold-gradient);
   color: #000 !important;
   box-shadow: var(--shadow-glow);
 }

 .btn-primary:not(:disabled):hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 30px -5px rgba(251, 191, 36, 0.4);
 }

 .btn:disabled {
   opacity: 0.9;
   cursor: not-allowed;
   transform: none !important;
 }

 .btn-secondary {
   background: rgba(255, 255, 255, 0.02);
   color: var(--text-main);
   border: 1px solid var(--border-light);
   backdrop-filter: blur(10px);
 }

 .btn-secondary:hover {
   background: rgba(255, 255, 255, 0.06);
   border-color: var(--brand-gold);
   transform: translateY(-1px);
   color: var(--brand-gold);
 }

 /* Beautiful Phone Link Styling */
 .phone-link {
   color: #38bdf8 !important;
   /* Premium sky-blue */
   font-weight: 600;
   text-decoration: none;
   transition: var(--transition);
   display: inline-flex;
   align-items: center;
 }

 .phone-link:hover {
   color: var(--brand-gold) !important;
   text-decoration: underline;
 }

 /* ─── AMBIENT LIGHT BLOOMS ─── */
 .ambient-bloom {
   position: fixed;
   border-radius: 50%;
   filter: blur(120px);
   pointer-events: none;
   z-index: 0;
   opacity: 0.35;
 }

 .bloom-gold {
   background: rgba(251, 191, 36, 0.25);
 }

 .bloom-violet {
   background: rgba(124, 58, 237, 0.15);
 }

 .bloom-dark-purple {
   background: rgba(88, 28, 135, 0.20);
 }

 /* ─── GLOBAL APP HEADER ─── */
 /* .header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      background: var(--header-bg); backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border-light); transition: var(--transition);
      height: 70px;
    }
    .header.scrolled { box-shadow: var(--shadow-sm); }
    .nav-container { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 24px; }
    .nav-left { display: flex; align-items: center; gap: 36px; }
    .brand { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 20px; color: var(--text-main); letter-spacing: -0.05em; }
    .brand-logo { height: 32px; width: auto; display: block; object-fit: contain; filter: brightness(0) invert(1); }
    .nav-links { display: flex; gap: 24px; font-weight: 600; font-size: 13px; color: var(--text-muted); align-items: center; }
    .nav-links a:hover { color: var(--brand-gold); } */

 .hidden-on-mobile {
   display: flex;
   gap: 10px;
   align-items: center;
 }

 .btn-nav {
   padding: 8px 14px;
   font-size: 13px;
   border-radius: 6px;
 }

 .btn-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid var(--border-light);
   color: var(--text-main);
   position: relative;
   transition: var(--transition);
 }

 .btn-icon:hover {
   background: rgba(255, 255, 255, 0.06);
   border-color: var(--brand-gold);
   transform: translateY(-1px);
   color: var(--brand-gold);
 }

 .btn-icon .badge {
   position: absolute;
   top: -2px;
   right: -2px;
   background: var(--danger);
   color: white;
   font-size: 9px;
   font-weight: 800;
   padding: 2px 5px;
   border-radius: 99px;
   border: 2px solid var(--border-light);
 }

 .user-dropdown {
   position: relative;
   display: inline-block;
 }

 .user-dropdown-content {
   position: absolute;
   right: 0;
   top: calc(100% + 10px);
   background: var(--header-bg);
   backdrop-filter: blur(20px);
   min-width: 200px;
   box-shadow: var(--shadow-xl);
   border: 1px solid var(--border-light);
   border-radius: var(--radius-md);
   z-index: 1000;
   flex-direction: column;
   padding: 6px;
   display: flex;
   visibility: hidden;
   opacity: 0;
   transform: translateY(-10px);
   transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease 0.2s;
 }

 .user-dropdown:hover .user-dropdown-content {
   visibility: visible;
   opacity: 1;
   transform: translateY(0);
   transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
 }

 .dropdown-item {
   padding: 8px 14px;
   color: var(--text-main);
   font-size: 13px;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 8px;
   border-radius: 4px;
   transition: var(--transition);
 }

 .dropdown-item:hover {
   background: var(--bg-subtle);
   color: var(--brand-gold);
 }

 /* Contact Selector Next to Hero Search */
 .contact-selector-wrapper {
   display: flex;
   align-items: center;
   gap: 8px;
   border-left: 1px solid var(--border-light);
   padding-left: 16px;
   margin-left: 8px;
   height: 100%;
 }

 .contact-select {
   background: transparent;
   border: none;
   color: var(--text-main);
   font-weight: 700;
   font-size: 14px;
   font-family: inherit;
   outline: none;
   cursor: pointer;
   appearance: none;
   padding-right: 18px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right center;
 }

 .contact-select option {
   background: var(--bg-surface);
   color: var(--text-main);
 }

 .add-contact-btn {
   width: 32px;
   height: 32px;
   flex-shrink: 0;
   padding: 0;
 }

 /* ─── LAYOUT & SIDEBAR ─── */
 .app-layout {
   display: flex;
   padding-top: 70px;
   /* Offset for the fixed header */
   min-height: 100vh;
   width: 100%;
 }

 .sidebar {
   width: 280px;
   background: rgba(20, 26, 46, 0.5);
   backdrop-filter: blur(16px);
   border-right: 1px solid var(--border-light);
   padding: 24px 20px;
   position: fixed;
   top: 70px;
   bottom: 0;
   left: 0;
   overflow-y: auto;
   z-index: 50;
   display: flex;
   flex-direction: column;
 }

 /* Scrollbar for sidebar */
 .sidebar::-webkit-scrollbar {
   width: 4px;
 }

 .sidebar::-webkit-scrollbar-track {
   background: transparent;
 }

 .sidebar::-webkit-scrollbar-thumb {
   background: var(--border-light);
   border-radius: 4px;
 }

 .sidebar-title {
   font-size: 12px;
   font-weight: 800;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin-bottom: 12px;
   padding-bottom: 16px;
   border-bottom: 1px solid var(--border-light);
   display: flex;
   align-items: center;
   gap: 6px;
 }

 /* ─── SLEEK ACCORDION FILTERS ─── */
 .filter-section-title {
   font-size: 11px;
   font-weight: 800;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin-bottom: 8px;
   margin-top: 24px;
   padding-left: 4px;
 }

 .filter-section-title:first-of-type {
   margin-top: 4px;
 }

 .filter-stack {
   display: flex;
   flex-direction: column;
   gap: 0;
 }

 /* Minimalist Group Style */
 .filter-group {
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   overflow: hidden;
   transition: var(--transition);
 }

 .filter-group:last-child {
   border-bottom: none;
 }

 /* Clean Header */
 .filter-toggle {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 4px;
   font-weight: 600;
   font-size: 13px;
   color: var(--text-muted);
   background: transparent;
   transition: var(--transition);
 }

 .filter-toggle:hover,
 .filter-group.is-open .filter-toggle {
   color: var(--text-main);
 }

 .filter-toggle-icon {
   transition: transform 0.3s ease;
   opacity: 0.7;
 }

 .filter-group.is-open .filter-toggle-icon {
   transform: rotate(45deg);
   opacity: 1;
   color: var(--text-main);
 }

 .filter-label-group {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .filter-label-group i {
   opacity: 0.7;
   transition: var(--transition);
 }

 .filter-group.is-open .filter-label-group i {
   color: var(--brand-primary);
   opacity: 1;
 }

 /* Content Area */
 .filter-content {
   display: none;
   padding: 4px 4px 16px 4px;
 }

 .filter-group.is-open .filter-content {
   display: block;
   animation: slideDown 0.3s ease-out;
 }

 .filter-content .filter-item-list li {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .filter-content .filter-item-list li button svg {
   width: 16px;
 }

 /* Search Box styling scaled for minimal layout */
 .filter-search-box {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 12px;
 }

 .filter-search-box input {
   flex: 1;
   padding: 8px 12px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: var(--radius-sm);
   font-size: 12px;
   font-family: inherit;
   background: rgba(0, 0, 0, 0.2);
   color: var(--text-main);
   outline: none;
   transition: var(--transition);
   width: 100%;
 }

 .filter-search-box input:focus {
   border-color: var(--brand-primary);
   background: rgba(0, 0, 0, 0.4);
 }

 .filter-search-btn {
   background: rgba(255, 255, 255, 0.05);
   color: var(--text-muted);
   padding: 5px 6px;
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--transition);
   border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .filter-search-btn:hover {
   background: var(--brand-primary);
   color: #000;
   border-color: var(--brand-primary);
 }

 .filter-item-list {
   display: flex;
   flex-direction: column;
   gap: 2px;
   max-height: 180px;
   overflow-y: auto;
   padding-right: 4px;
 }

 .filter-item-list::-webkit-scrollbar {
   width: 4px;
 }

 .filter-item-list::-webkit-scrollbar-track {
   background: transparent;
 }

 .filter-item-list::-webkit-scrollbar-thumb {
   background: var(--border-light);
   border-radius: 4px;
 }

 .filter-item-list li label {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 6px 8px;
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: var(--transition);
   font-size: 12px;
   font-weight: 500;
   color: var(--text-muted);
   text-align: left;
   line-height: 1.4;
 }

 .filter-item-list li label:hover {
   background: rgba(255, 255, 255, 0.05);
   color: var(--text-main);
 }


 .filter-item-list li label i,
 .filter-item-list span i {
   color: var(--text-muted);
   width: 14px;
   height: 14px;
   flex-shrink: 0;
   transition: color 0.2s;
   opacity: 0.7;
 }

 .filter-item-list li label:hover i {
   color: var(--brand-primary);
   opacity: 1;
 }

 .filter-item-list li label svg {
   width: 18px;
   min-width: 18px;
   max-width: 18px;
 }

 .filter-item-list input[type="checkbox"] {
   appearance: none;
   width: 14px;
   height: 14px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 3px;
   background: rgba(0, 0, 0, 0.2);
   cursor: pointer;
   position: relative;
   transition: var(--transition);
   flex-shrink: 0;
   margin: 0;
 }

 .filter-item-list input[type="checkbox"]:checked {
   background: var(--brand-primary);
   border-color: var(--brand-primary);
 }

 .filter-item-list input[type="checkbox"]:checked::after {
   content: '';
   position: absolute;
   left: 4px;
   top: 1px;
   width: 3px;
   height: 7px;
   border: solid #000;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
 }

 .filter-paginator {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding-top: 8px;
   margin-top: 4px;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
 }

 .filter-paginator button {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 4px;
   width: 24px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--transition);
 }

 .filter-paginator button:hover {
   background: var(--brand-primary);
   color: #000;
 }

 /* ─── MAIN RESULTS AREA ─── */
 .main-contents {
   flex: 1;
   margin-left: 280px;
   padding: 24px 32px;
   min-width: 0;
   position: relative;
   z-index: 10;
   text-align: left;
 }

 form[name="frmsearchcu"] {
   padding: 0 !important;
 }

 form[name="frmsearchcu"] {
   text-align: left;
 }

 /* Category Tabs */
 .search-categories {
   display: inline-flex;
   gap: 6px;
   background: var(--bg-surface);
   padding: 4px;
   border-radius: var(--radius-full);
   border: 1px solid var(--border-light);
   margin-bottom: 12px;
   animation: fadeUp 0.6s ease-out both;
   box-shadow: var(--shadow-sm);
   width: fit-content;
   max-width: 100%;
   overflow-x: auto;
 }

 .category-tab {
   padding: 8px 20px;
   border-radius: var(--radius-full);
   font-size: 13px;
   font-weight: 700;
   color: var(--text-muted);
   transition: var(--transition);
   white-space: nowrap;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .category-tab:hover {
   color: var(--text-main);
   background: var(--bg-subtle);
 }

 .category-tab.active {
   background: var(--brand-gradient);
   color: var(--text-inverse);
   box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
 }

 /* Search Bar Inline */
 .hero-search-wrapper {
   position: relative;
   width: 100%;
   background: var(--bg-surface);
   border: 1px solid var(--border-light);
   border-radius: var(--radius-full);
   padding: 6px 8px;
   display: flex;
   align-items: center;
   gap: 0;
   box-shadow: var(--shadow-md);
   transition: var(--transition);
   animation: fadeUp 0.6s ease-out 0.1s both;
   margin-bottom: 24px;
   z-index: 999 !important;
 }

 .hero-search-wrapper:focus-within {
   border-color: var(--brand-primary);
   box-shadow: var(--shadow-glow);
 }

 .search-input-group {
   flex: 1;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 0 16px;
   position: relative;
 }

 .gsugestion ul li {
   background: none !important;
   padding: 3px 12px !important;
 }

 .gsugestion ul li:hover {
   background: rgba(255, 255, 255, 0.1) !important;
   color: var(--text-main) !important;
 }

 .search-input-group .search-icon {
   color: var(--text-muted);
   flex-shrink: 0;
   transition: var(--transition);
 }

 .search-input-group input {
   flex: 1;
   background: transparent;
   border: none;
   color: var(--text-main);
   font-size: 15px;
   font-weight: 500;
   font-family: inherit;
   outline: none;
   padding: 8px 0;
   min-width: 0;
 }

 .search-input-group input::placeholder {
   color: var(--text-muted);
   opacity: 0.6;
 }

 .kbd-hint {
   display: flex;
   gap: 4px;
   align-items: center;
   margin-right: 8px;
 }

 .kbd-hint kbd {
   background: var(--bg-base);
   color: var(--text-muted);
   border: 1px solid var(--border-light);
   border-radius: 4px;
   padding: 4px 8px;
   font-size: 11px;
   font-family: monospace;
   font-weight: 700;
 }

 .btn-search {
   padding: 10px 24px !important;
   font-size: 14px !important;
 }

 .btn-search .spinner {
   display: none;
   animation: spin 1s linear infinite;
 }

 .btn-search.loading .search-text {
   display: none;
 }

 .btn-search.loading .spinner {
   display: block;
 }

 /* Results Toolbar */
 .toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
   font-size: 14px;
   color: var(--text-muted);
   font-weight: 600;
   animation: fadeUp 0.6s ease-out 0.2s both;
 }

 .contact-media {
   min-width: 120px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   max-width: 120px;
   width: 100%;
 }

 .gsugestion {
   position: absolute;
   background: #141a2e !important;
   margin: 40px 0 0 0;
   margin-left: 0px;
   width: 100%;
   height: 200px;
   overflow: auto;
   border: 1px solid #727682;
   padding: 10px;
   top: 0 !important;
 }

 .display-select {
   background: var(--bg-surface);
   border: 1px solid var(--border-light);
   color: var(--text-main);
   padding: 6px 12px;
   border-radius: var(--radius-sm);
   outline: none;
   font-weight: 700;
   font-family: inherit;
   font-size: 13px;
 }

 .contact-text {
   width: 250px;
   word-break: break-word;
 }

 /* ─── RESULTS TABLE / LIST ─── */
 .results-header {
   display: grid;
   grid-template-columns: 2fr 2fr 1.5fr auto;
   gap: 20px;
   padding: 0 24px 12px;
   font-size: 12px;
   font-weight: 800;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   border-bottom: 1px solid var(--border-light);
   margin-bottom: 16px;
   animation: fadeUp 0.6s ease-out 0.3s both;
 }

 .result-card {
   background: var(--bg-surface);
   border: 1px solid var(--border-light);
   border-radius: var(--radius-lg);
   margin-bottom: 16px;
   transition: var(--transition);
   box-shadow: var(--shadow-sm);
   overflow: hidden;
   animation: fadeUp 0.6s ease-out 0.4s both;
 }

 .result-card:hover {
   border-color: var(--brand-primary);
   box-shadow: var(--shadow-float);
   transform: translateY(-2px);
 }

 .result-card.is-expanded {
   border-color: var(--brand-primary);
   box-shadow: var(--shadow-lg);
   transform: translateY(0);
 }

 .row-summary {
   display: grid;
   grid-template-columns: 2fr 2fr 1.5fr auto;
   gap: 20px;
   align-items: center;
   padding: 20px 24px;
   cursor: pointer;
 }

 /* Column 1: Contact Detail */
 .contact-cell {
   display: flex;
   gap: 14px;
   align-items: center;
 }

 .avatar {
   width: 48px;
   height: 48px;
   border-radius: var(--radius-md);
   display: grid;
   place-items: center;
   font-weight: 800;
   font-size: 16px;
   flex-shrink: 0;
   border: 1px solid var(--border-light);
   color: white;
 }

 .av-green {
   background: rgba(16, 185, 129, 0.15);
   color: var(--success);
 }

 .av-brand {
   background: var(--brand-gradient);
   box-shadow: var(--shadow-glow);
   color: #000;
 }

 .av-orange {
   background: rgba(245, 158, 11, 0.15);
   color: var(--warning);
 }

 .av-blue {
   background: rgba(59, 130, 246, 0.15);
   color: #3b82f6;
 }

 .contact-name-group {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 4px;
 }

 .contact-name {
   font-size: 16px;
   font-weight: 800;
   color: var(--text-main);
   letter-spacing: -0.01em;
 }

 .linkedin-icon {
   color: #0a66c2;
   opacity: 0.8;
   transition: var(--transition);
   display: flex;
   align-items: center;
 }

 .linkedin-icon:hover {
   opacity: 1;
   transform: scale(1.1);
 }

 .location-group {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   color: var(--text-muted);
   font-weight: 600;
 }

 .location-group i {
   color: var(--text-muted);
   width: 12px;
   height: 12px;
 }

 /* Column 2: Company Details */
 .company-cell {
   display: flex;
   flex-direction: column;
   gap: 8px;
   justify-content: center;
   width: 250px;
   word-break: break-word;
 }

 .company-name {
   font-size: 15px;
   font-weight: 800;
   color: var(--text-main);
   transition: var(--transition);
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .company-name i {
   color: var(--text-muted);
   width: 14px;
   height: 14px;
 }

 .company-name:hover {
   color: var(--brand-primary);
 }

 .company-name:hover i {
   color: var(--brand-primary);
 }

 .tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 }

 .tag {
   padding: 4px 10px;
   background: var(--bg-subtle);
   border: 1px solid var(--border-light);
   border-radius: var(--radius-sm);
   font-size: 11px;
   font-weight: 700;
   color: var(--text-muted);
 }

 /* Column 3: Contact Info */
 .status-cell {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 8px;
   font-size: 13px;
 }

 .valid-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--success);
   font-weight: 800;
   background: rgba(16, 185, 129, 0.1);
   border: 1px solid rgba(16, 185, 129, 0.2);
   padding: 4px 12px;
   border-radius: var(--radius-full);
   width: fit-content;
   font-size: 12px;
 }

 .corp-email {
   font-weight: 600;
   color: var(--text-main);
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
 }

 .corp-email i {
   color: var(--text-muted);
 }

 /* Column 4: Actions */
 .action-cell {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 24px;
 }

 .btn-book-meeting {
   width: 145px;
   flex-shrink: 0;
   justify-content: center;
 }

 .btn-book-meeting.requested {
   color: var(--success) !important;
   border-color: rgba(16, 185, 129, 0.4) !important;
   background: rgba(16, 185, 129, 0.05) !important;
 }

 .primary-action-container {
   width: 150px;
   display: flex;
   justify-content: flex-end;
   flex-shrink: 0;
 }

 .primary-action-container .btn {
   width: 100%;
   justify-content: center;
 }

 .added-status {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   font-size: 12px;
   color: var(--text-muted);
   font-weight: 600;
 }

 .added-status span:first-child {
   color: var(--brand-primary);
   font-weight: 800;
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .expand-btn {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--bg-subtle);
   color: var(--text-muted);
   border: 1px solid var(--border-light);
   display: grid;
   place-items: center;
   transition: var(--transition);
 }

 .expand-btn:hover {
   background: var(--bg-surface);
   color: var(--brand-gold);
   border-color: var(--brand-gold);
 }

 .result-card.is-expanded .expand-btn {
   transform: rotate(180deg);
   background: var(--brand-gradient);
   color: #000;
   border-color: var(--border-light);
   box-shadow: var(--shadow-glow);
 }

 /* ─── EXPANDED DETAILS (Bento Layout) ─── */
 .row-details {
   display: none;
   border-top: 1px solid var(--border-light);
   background: var(--bg-subtle);
   padding: 32px;
 }

 .result-card.is-expanded .row-details {
   display: block;
   animation: slideDown 0.3s var(--transition) forwards;
 }

 .details-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr;
   gap: 32px;
   margin-bottom: 0px;
 }

 .about-text {
   font-size: 14px;
   color: var(--text-muted);
   margin-bottom: 24px;
   line-height: 1.6;
   font-weight: 500;
 }

 .about-text strong {
   color: var(--text-main);
   font-weight: 800;
 }

 .info-list {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .info-item {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 14px;
   color: var(--text-muted);
   font-weight: 600;
 }

 .info-item i {
   width: 18px;
   height: 18px;
   color: var(--brand-primary);
 }

 .info-item a {
   color: var(--text-main);
   font-weight: 700;
 }

 .info-item a:hover {
   color: var(--brand-primary);
   text-decoration: underline;
 }

 .email-unlock-pill {
   background: var(--bg-surface);
   border: 1px solid var(--border-light);
   padding: 8px 16px;
   border-radius: var(--radius-full);
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: 700;
   font-size: 13px;
   color: var(--text-main);
   box-shadow: var(--shadow-sm);
   cursor: pointer;
   transition: var(--transition);
 }

 .email-unlock-pill:hover {
   border-color: var(--brand-primary);
   color: var(--brand-primary);
   box-shadow: var(--shadow-md);
   transform: translateY(-2px);
 }

 .company-logo-box {
   background: var(--bg-surface);
   border: 1px solid var(--border-light);
   border-radius: var(--radius-lg);
   padding: 24px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 120px;
   box-shadow: var(--shadow-sm);
   background-image: radial-gradient(circle at top right, rgba(251, 191, 36, 0.05), transparent);
 }

 .company-logo-box span {
   font-weight: 900;
   font-size: 20px;
   color: var(--text-main);
   letter-spacing: -0.02em;
 }

 .company-logo-box small {
   font-size: 11px;
   color: var(--text-muted);
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin-top: 4px;
 }

 .address-block {
   margin-top: 24px;
   font-size: 13px;
   color: var(--text-muted);
 }

 .section-title {
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 800;
   font-size: 15px;
   color: var(--text-main);
   margin-bottom: 16px;
   letter-spacing: -0.01em;
 }

 .section-title i {
   color: var(--brand-primary);
 }

 .address-list {
   display: grid;
   gap: 8px;
   margin-left: 28px;
   font-weight: 600;
   font-size: 13px;
 }

 .supplier-contact-dropdown.open .dropdown-menu {
   display: block;
 }

 .trade-stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   margin-top: 16px;
 }

 .stat-box {
   background: var(--bg-surface);
   border: 1px solid var(--border-light);
   border-radius: var(--radius-lg);
   padding: 24px 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
   position: relative;
   overflow: hidden;
 }

 .stat-box::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: var(--border-light);
   transition: var(--transition);
 }

 .stat-box:hover::after {
   background: var(--brand-primary);
 }

 .stat-box:hover {
   border-color: var(--brand-primary);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
   transform: translateY(-2px);
 }

 .stat-val {
   font-size: 26px;
   font-weight: 900;
   color: var(--text-main);
   margin-bottom: 2px;
   letter-spacing: -0.03em;
 }

 .stat-label {
   font-size: 11px;
   font-weight: 800;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }

 /* Animations */
 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(15px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes slideDown {
   from {
     opacity: 0;
     transform: translateY(-8px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes spin {
   100% {
     transform: rotate(360deg);
   }
 }

 /* Flipping Dice Loader CSS */
 .loader-dice {
   width: 14px;
   height: 14px;
   background-color: #000;
   animation: sk-rotateplane 1.2s infinite ease-in-out;
   border-radius: 3px;
   display: inline-block;
 }

 @keyframes sk-rotateplane {
   0% {
     transform: perspective(120px) rotateX(0deg) rotateY(0deg);
   }

   50% {
     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
   }

   100% {
     transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
   }
 }

 /* ─── RESPONSIVE ─── */
 @media (max-width: 1024px) {
   .results-header {
     display: none;
   }

   .row-summary {
     grid-template-columns: 1fr !important;
     gap: 20px;
     padding: 20px;
   }

   .action-cell {
     justify-content: space-between !important;
     flex-direction: row-reverse;
   }

   .details-grid {
     grid-template-columns: 1fr;
     gap: 24px;
   }

   .company-logo-box {
     width: 100%;
   }

   .trade-stats {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 768px) {
   .sidebar {
     display: none;
   }

   .main-contents {
     margin-left: 0;
     padding: 20px 16px;
   }

   .search-categories {
     width: 100%;
     overflow-x: auto;
   }

   .search-categories::-webkit-scrollbar {
     display: none;
   }

   .search-categories {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }

   .hero-search-wrapper {
     flex-direction: column;
     align-items: stretch;
     padding: 12px;
     border-radius: var(--radius-md);
   }

   .search-input-group {
     padding: 0 6px;
   }

   .search-input-group input {
     font-size: 15px;
     width: 100%;
     padding: 6px 0;
   }

   .kbd-hint {
     display: none;
   }

   .btn-search {
     width: 100%;
     justify-content: center;
     padding: 12px;
     margin-top: 10px;
   }

   .contact-selector-wrapper {
     border-left: none;
     border-top: 1px solid var(--border-light);
     padding-left: 0;
     padding-top: 12px;
     margin-left: 0;
     margin-top: 8px;
     width: 100%;
     justify-content: space-between;
   }

   .trade-stats {
     grid-template-columns: 1fr;
   }
 }

 /* ─── CUSTOM MODAL & TOAST ADDITIONS ─── */
 .custom-modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.75);
   backdrop-filter: blur(8px);
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
 }

 .custom-modal-overlay.active {
   opacity: 1;
   visibility: visible;
 }

 .custom-modal {
   background: var(--bg-surface);
   border: 1px solid var(--border-light);
   border-radius: var(--radius-lg);
   padding: 32px;
   text-align: center;
   width: 90%;
   max-width: 420px;
   box-shadow: var(--shadow-xl);
   transform: translateY(20px) scale(0.95);
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 .custom-modal-overlay.active .custom-modal {
   transform: translateY(0) scale(1);
 }

 .modal-icon-wrapper {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: rgba(16, 185, 129, 0.1);
   color: var(--success);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
   border: 1px solid rgba(16, 185, 129, 0.2);
 }

 .modal-title {
   font-size: 20px;
   font-weight: 800;
   color: var(--text-main);
   margin-bottom: 12px;
   letter-spacing: -0.02em;
 }

 .modal-text {
   font-size: 14px;
   color: var(--text-muted);
   margin-bottom: 32px;
   font-weight: 500;
   line-height: 1.5;
 }

 .modal-actions {
   display: flex;
   gap: 12px;
   justify-content: center;
 }

 .toast-container {
   position: fixed;
   bottom: 24px;
   right: 24px;
   z-index: 10000;
   display: flex;
   flex-direction: column;
   gap: 12px;
   pointer-events: none;
 }

 .toast {
   background: var(--bg-surface);
   border: 1px solid var(--border-light);
   padding: 16px 20px;
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 14px;
   font-weight: 600;
   color: var(--text-main);
   pointer-events: auto;
   transform: translateX(120%);
   animation: slideInToast 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
 }

 .toast.hiding {
   animation: fadeOutToast 0.3s ease forwards;
 }

 .toast i {
   color: var(--brand-primary);
 }

 @keyframes slideInToast {
   to {
     transform: translateX(0);
   }
 }

 @keyframes fadeOutToast {
   to {
     opacity: 0;
     transform: translateX(20px);
   }
 }

 /* Utility class for main containers */
 .module-results-container {
   width: 100%;
 }