/* ================================================================
   ZEROTH SOLUTIONS — COMPLETE STYLESHEET
   Version 3.4.0 — Header lines removed (no border under header)
   Fully Responsive: 280px to 4K+
   ---------------------------------------------------------------
   Changelog v3.4.0:
   - Removed the horizontal line directly under the main header:
       • .floating-header   — border-bottom removed
       • .adverts-banner    — border-bottom removed
     Everything else is unchanged.

   Changelog v3.3.1:
   - §09 SIDEBAR rewritten (transform-based, touch-optimized, etc.)
   - Header version aligned with js/app.js v3.3.0.

   Changelog v3.2.0:
   - NEW §58 — Social Media Hub (shub-*) fully integrated.

   Changelog v3.1.0:
   - §50 Advert Hub rebuilt (accepts .active + hidden triggers).

   Changelog v3.0.0:
   - Merged legacy inline <style> into §57.

   Changelog v2.9.0:
   - Responsive header buttons + FABs.
   ================================================================ */

/* ================================================================
   01. CSS VARIABLES
   ================================================================ */
:root {
    /* Brand */
    --color-primary: #e6b42c;
    --color-primary-dark: #c99a1e;
    --color-primary-light: #f0c040;
    --color-bg: #ffffff;
    --color-bg-card: #f8f9fa;
    --color-bg-alt: #eef0f2;
    --color-border: #b0b8c0;
    --color-text: #1a1a1a;
    --color-text-muted: #4a4a4a;
    --color-accent: #2b6cb0;
    --color-accent-light: #4299e1;
    --color-success: #16a34a;
    --color-danger: #dc2626;
    --color-warning: #c05621;

    /* Advert Hub tokens */
    --adv-primary: #ea580c;
    --adv-primary-dark: #c2410c;
    --adv-accent: #f59e0b;
    --adv-bg: #fff7ed;
    --adv-border: #fed7aa;
    --adv-text: #7c2d12;
    --adv-muted: #9a3412;

    /* Layout */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --radius: 12px;
    --transition: 0.25s ease;
    --header-height: 50px;
    --footer-height: 60px;
    --max-width: 1200px;

    /* Financial Hub tokens */
    --fin-primary: #1e5b8a;
    --fin-primary-dark: #154360;
    --fin-primary-light: #2b7fb8;
    --fin-gold: #fbbf24;

    /* Agriculture Hub tokens */
    --ag-primary: #15803d;
    --ag-primary-dark: #166534;
    --ag-primary-light: #16a34a;
    --ag-gold: #fde047;
    --ag-bg: #f8fafc;
    --ag-surface: #ffffff;
    --ag-surface-2: #f1f5f9;
    --ag-text: #0f172a;
    --ag-text-2: #334155;
    --ag-muted: #64748b;
    --ag-border: #e2e8f0;
    --ag-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.4);
    --ag-radius: 12px;
    --ag-radius-sm: 10px;

    /* Construction Hub tokens */
    --con-primary:      #1e3a8a;
    --con-primary-dark: #172e6e;
    --con-accent:       #f59e0b;
    --con-success:      #10b981;
    --con-danger:       #ef4444;
    --con-bg:           #f9fafb;
    --con-card:         #ffffff;
    --con-text:         #111827;
    --con-muted:        #6b7280;
    --con-border:       #e5e7eb;

    /* Shared ZBS tokens */
    --zbs-green:        #1f7a3d;
    --zbs-green-dark:   #14532d;
    --zbs-green-light:  #86efac;
    --zbs-green-bg:     #f0fdf4;
    --zbs-orange:       #ea580c;
    --zbs-amber:        #f59e0b;
    --zbs-amber-bg:     #fef9c3;
    --zbs-amber-text:   #854d0e;
    --zbs-red:          #991b1b;
    --zbs-red-bg:       #fee2e2;
    --zbs-blue:         #1e40af;
    --zbs-blue-bg:      #dbeafe;
    --zbs-slate-50:     #f8fafc;
    --zbs-slate-100:    #f1f5f9;
    --zbs-slate-200:    #e2e8f0;
    --zbs-slate-300:    #cbd5e1;
    --zbs-slate-400:    #94a3b8;
    --zbs-slate-500:    #64748b;
    --zbs-slate-600:    #475569;
    --zbs-slate-700:    #334155;
    --zbs-slate-800:    #1e293b;
    --zbs-slate-900:    #0f172a;

    --radius-sm:   6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.18);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.35);

    --z-dropdown: 10050;
    --z-camera:   10060;
    --z-modal:     9999;
    --z-toast:   10100;

    --font-mono: 'Courier New', monospace;
}

/* ================================================================
   02. RESET + BASE
   ================================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ================================================================
   03. SKIP LINK
   ================================================================ */
.skip-link {
    position: absolute;
    top: -200%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-text);
    padding: 12px 24px;
    border-radius: 0 0 var(--radius) var(--radius);
    font-weight: 700;
    z-index: 9999;
    text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ================================================================
   04. BUTTON SYSTEM
   ================================================================ */
button,
.btn-primary,
.btn-secondary,
.pay-btn,
.auth-btn,
.search-submit-btn,
.send-btn,
.footer-menu-btn,
.footer-search-btn,
.ai-chatbot-btn,
.service-item,
.close-modal,
.close-search,
.close-chat,
.sidebar-close-btn,
.sidebar-toggle-btn,
.sidebar-action-btn,
.sidebar-nav-link,
.profile-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    border: none;
    outline: none;
    text-decoration: none;
    font-family: inherit;
    line-height: 1.2;
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
    font-weight: 600;
    min-height: 44px;
    min-width: 44px;
    width: auto;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-text);
    border: 2px solid var(--color-primary-dark);
    padding: 0.6rem 1.2rem;
    font-size: clamp(0.7rem, 1vw, 1rem);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--color-primary-light); transform: scale(1.02); }
.btn-primary:active { transform: scale(0.95); }

.btn-secondary {
    background: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-primary);
    padding: 0.6rem 1.2rem;
    font-size: clamp(0.7rem, 1vw, 1rem);
}
.btn-secondary:hover { background: rgba(230, 180, 44, 0.1); }
.btn-secondary:active { transform: scale(0.95); }

.pay-btn, .auth-btn {
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 0.625rem;
    font-size: clamp(0.8rem, 1.1vw, 1rem);
    min-height: 48px;
    background: rgba(255, 255, 255, 0.98);
    color: var(--color-text);
    border: 2px solid var(--color-border);
}
.pay-btn:hover, .auth-btn:hover { background: var(--color-primary-light); }

.close-modal,
.close-search,
.close-chat,
.sidebar-close-btn {
    font-size: clamp(1.2rem, 2vw, 2rem);
    background: transparent;
    color: var(--color-text-muted);
    padding: 0.2rem 0.6rem;
    min-height: 40px;
    min-width: 40px;
    border-radius: 50%;
}
.close-modal:hover,
.close-search:hover,
.close-chat:hover,
.sidebar-close-btn:hover { color: var(--color-text); background: rgba(0, 0, 0, 0.05); }
.close-modal:active,
.close-search:active,
.close-chat:active,
.sidebar-close-btn:active { transform: scale(0.9); }

.service-item {
    padding: 0.4rem 0.8rem;
    border-radius: 2rem;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    font-size: clamp(0.55rem, 0.8vw, 0.8rem);
    min-height: 36px;
    min-width: auto;
    white-space: nowrap;
}
.service-item:hover { border-color: var(--color-border); background: rgba(230, 180, 44, 0.06); }
.service-item:active { transform: scale(0.95); }

/* ================================================================
   05. FEATURED HUB BUTTONS
   ================================================================ */
.service-item-hub {
    background: linear-gradient(135deg, #fef9e7 0%, #fdf4d3 100%) !important;
    border-color: var(--color-border) !important;
    font-weight: 700;
    position: relative;
    box-shadow: 0 2px 6px rgba(230, 180, 44, 0.15);
}
.service-item-hub::before {
    content: '★';
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--color-primary-dark);
    color: #fff;
    font-size: 0.45rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.service-item-hub:hover {
    background: linear-gradient(135deg, #fdf4d3 0%, #f0c040 100%) !important;
    border-color: var(--color-primary-dark) !important;
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(230, 180, 44, 0.35);
}
.service-item-hub + .service-item:not(.service-item-hub) {
    margin-left: 8px;
    position: relative;
}
.service-item-hub + .service-item:not(.service-item-hub)::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--color-border);
    opacity: 0.5;
}

.advert-trigger-btn {
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%) !important;
    border-color: #ea580c !important;
    color: #7c2d12 !important;
    font-weight: 800;
}
.advert-trigger-btn:hover {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%) !important;
    border-color: #c2410c !important;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.28) !important;
}

.service-item.advert-hub-featured {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 12px);
    padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.4vw, 18px);
    margin-bottom: 10px;
    border-radius: var(--radius, 12px);
    background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(0.68rem, 0.82vw, 0.82rem);
    text-align: left;
    border: 2px solid #c2410c;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    position: relative;
    width: 100%;
    font-family: inherit;
    white-space: normal;
    min-height: 52px;
    min-width: 0;
}
.service-item.advert-hub-featured::before { display: none; }
.service-item.advert-hub-featured:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(234, 88, 12, 0.5);
    background: linear-gradient(135deg, #dc4d09 0%, #e08a08 100%);
    border-color: #9a3412;
}
.service-item.advert-hub-featured:active {
    transform: translateY(0) scale(0.98);
}
.advert-hub-featured-icon {
    font-size: clamp(1.3rem, 1.7vw, 1.6rem);
    flex: 0 0 auto;
    line-height: 1;
}
.advert-hub-featured-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
    overflow: hidden;
}
.advert-hub-featured-text small {
    font-size: clamp(0.55rem, 0.68vw, 0.68rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    white-space: normal;
    line-height: 1.3;
}
.advert-hub-featured-badge {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-size: clamp(0.5rem, 0.6vw, 0.6rem);
    font-weight: 900;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: 999px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

/* ================================================================
   06. UNIVERSAL WINDOW CLOSE BUTTON
   ================================================================ */
.window-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(26px, 2.8vw, 34px);
    height: clamp(26px, 2.8vw, 34px);
    min-width: 26px;
    min-height: 26px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.window-close-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text);
    border-color: var(--color-border);
    transform: rotate(90deg);
}
.window-close-btn:active { transform: scale(0.88) rotate(90deg); }
.window-close-btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.profile-close-btn { position: absolute; top: 6px; right: 6px; z-index: 2; }
.profile-dropdown { position: relative; }

.edu-header .window-close-btn,
.fee-header .window-close-btn,
.app-form-header .window-close-btn,
.about-inst-close,
.etf-header .window-close-btn,
.etf-detail-header .window-close-btn,
.etf-portfolio-header .window-close-btn,
.bet-header .window-close-btn,
.bet-portfolio-header .window-close-btn {
    color: #ffffff;
}
.edu-header .window-close-btn:hover,
.fee-header .window-close-btn:hover,
.app-form-header .window-close-btn:hover,
.about-inst-close:hover,
.etf-header .window-close-btn:hover,
.etf-detail-header .window-close-btn:hover,
.etf-portfolio-header .window-close-btn:hover,
.bet-header .window-close-btn:hover,
.bet-portfolio-header .window-close-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* ================================================================
   07. HEADER
   ----------------------------------------------------------------
   v3.4.0 — border-bottom removed. No horizontal line under header.
   ================================================================ */
.floating-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* border-bottom: 2px solid var(--color-border);  ← REMOVED v3.4.0 */
    padding: 4px 8px;
    height: var(--header-height);
    display: flex;
    align-items: center;
}
.floating-header-inner {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    gap: 6px;
}
.brand { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.logo-img img {
    width: clamp(28px, 3vw, 44px);
    height: clamp(28px, 3vw, 44px);
    border-radius: 50%;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}
.brand-name { display: flex; flex-direction: column; min-width: 0; }
.company-name {
    font-size: clamp(0.5rem, 0.8vw, 0.9rem);
    font-weight: 700;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.company-tagline { font-size: clamp(0.4rem, 0.6vw, 0.65rem); font-weight: 900; color: blue; }
.floating-user-info { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.login-btn {
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(228, 225, 225, 0.904);
    color: var(--color-text);
    font-weight: 700;
    font-size: clamp(0.5rem, 0.7vw, 0.75rem);
    border: 1px solid var(--color-border);
    min-height: 32px;
    min-width: auto;
}
.login-btn:hover { background: var(--color-primary-light); }
.login-btn:active { transform: scale(0.95); }

.advertise-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: clamp(0.55rem, 0.72vw, 0.82rem);
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    margin-right: 8px;
    min-height: 32px;
    min-width: auto;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: advertisePulse 2.4s ease-in-out infinite;
}
.advertise-header-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.5);
}
.advertise-header-btn:active { transform: scale(0.96); }
.advertise-header-btn i { font-size: clamp(0.6rem, 0.75vw, 0.9rem); }

@keyframes advertisePulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35); }
    50%      { box-shadow: 0 4px 22px rgba(234, 88, 12, 0.6); }
}

.rental-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: clamp(0.55rem, 0.72vw, 0.82rem);
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    margin-right: 8px;
    min-height: 32px;
    min-width: auto;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: rentalPulse 2.4s ease-in-out infinite;
}
.rental-header-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(14, 165, 233, 0.5);
}
.rental-header-btn:active { transform: scale(0.96); }
.rental-header-btn i { font-size: clamp(0.6rem, 0.75vw, 0.9rem); }

@keyframes rentalPulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35); }
    50%      { box-shadow: 0 4px 22px rgba(14, 165, 233, 0.6); }
}

.profile-photo {
    width: clamp(28px, 3vw, 40px);
    height: clamp(28px, 3vw, 40px);
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    overflow: hidden;
    min-height: 28px;
    min-width: 28px;
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }

.sidebar-toggle-btn {
    padding: 0.25rem 0.3rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    background: transparent;
    min-height: 36px;
    min-width: 36px;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}
.sidebar-toggle-btn .hamburger-line {
    width: 18px;
    height: 2.5px;
    background: var(--color-text-muted);
    border-radius: 2px;
    transition: all 0.3s ease;
}
.sidebar-toggle-btn.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.sidebar-toggle-btn.active .hamburger-line:nth-child(2) { opacity: 0; }
.sidebar-toggle-btn.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ================================================================
   08. ADVERT BANNER
   ----------------------------------------------------------------
   v3.4.0 — border-bottom removed.
   ================================================================ */
.adverts-banner {
    background: var(--color-bg-alt);
    /* border-bottom: 1px solid var(--color-border);  ← REMOVED v3.4.0 */
    overflow: hidden;
    padding: 4px 0;
    position: sticky;
    top: var(--header-height);
    z-index: 500;
}
.adverts-track {
    display: flex;
    gap: 12px;
    animation: scrollAdverts 30s linear infinite;
    width: max-content;
    padding: 0 8px;
}
.advert-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s ease;
    min-height: 30px;
}
.advert-item .advert-image {
    width: clamp(18px, 2.5vw, 32px);
    height: clamp(18px, 2.5vw, 32px);
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}
.advert-item .advert-text { font-size: clamp(0.4rem, 0.6vw, 0.7rem); font-weight: 600; color: var(--color-text); }
.advert-item .advert-tag {
    font-size: clamp(0.3rem, 0.4vw, 0.5rem);
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 12px;
    background: rgba(250, 248, 248, 0.822);
    color: var(--color-text);
    flex-shrink: 0;
}
.advert-item .advert-tag.hot { background: #dc3545; color: #fff; }
.advert-item .advert-tag.new { background: #28a745; color: #fff; }
.advert-item .advert-tag.sale { background: #ff6b35; color: #fff; }
.advert-item .advert-tag.best { background: #ffc107; color: #000; }
.advert-item:hover {
    transform: scale(1.02);
    border-color: var(--color-primary);
    box-shadow: 0 2px 10px rgba(230, 180, 44, 0.15);
}
@keyframes scrollAdverts {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ================================================================
   09. SIDEBAR — RESPONSIVE & TOUCH-OPTIMIZED (v3.3.1)
   ================================================================ */

/* ---------- 09.1 Container ---------- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(320px, 85vw);
    max-width: 340px;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    z-index: 10000;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 2px solid var(--color-border, #b0b8c0);
    will-change: transform;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
.sidebar.open { transform: translateX(0); }
.sidebar *,
.sidebar *::before,
.sidebar *::after { box-sizing: border-box; }

.sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    padding-bottom: 0;
}

/* ---------- 09.2 Header ---------- */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 2px solid var(--color-border, #b0b8c0);
    flex-shrink: 0;
    background: #fff;
    min-height: 60px;
    position: relative;
    z-index: 10;
}
.sidebar-logo { display: flex; align-items: center; gap: 8px; }
.sidebar-logo img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: relative;
    left: 20px;
    border: 1px solid var(--color-border);
}
.sidebar-brand-text { display: flex; flex-direction: column; }
.sidebar-company {
    font-size: clamp(0.6rem, 0.8vw, 0.8rem);
    font-weight: 700;
    position: relative;
    left: 20px;
    color: rgba(15, 13, 13, 0.897);
}
.sidebar-tagline {
    font-size: clamp(0.35rem, 0.5vw, 0.5rem);
    color: rgba(23, 83, 196, 0.98);
    position: relative;
    left: 53px;
}

/* ---------- 09.3 User profile strip ---------- */
.sidebar-user-profile {
    padding: 12px 16px;
    border-bottom: 2px solid var(--color-border, #b0b8c0);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.sidebar-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}
.sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-user-avatar.guest {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: 1.8rem;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
    font-size: clamp(0.6rem, 0.8vw, 0.8rem);
    font-weight: 700;
    color: var(--color-text);
    display: block;
}
.sidebar-user-email {
    font-size: clamp(0.45rem, 0.6vw, 0.6rem);
    color: var(--color-text-muted);
    display: block;
}
.sidebar-login-btn,
.sidebar-logout-btn {
    min-height: 40px !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: clamp(0.5rem, 0.6vw, 0.65rem);
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--color-border);
    background: lightgray;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.sidebar-login-btn:hover,
.sidebar-logout-btn:hover {
    background: var(--color-primary-light);
    transform: scale(1.02);
}
.sidebar-login-btn:active,
.sidebar-logout-btn:active { transform: scale(0.96); }

/* ---------- 09.4 Nav (the only scrolling region) ---------- */
.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.15) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.15);
    border-radius: 999px;
}
.sidebar-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-nav-list > li { display: block; margin: 0; }

/* ---------- 09.5 Nav links — 48px tap target ---------- */
.sidebar-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    color: var(--color-text-muted, #4a4a4a) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-left: 3px solid transparent !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
    user-select: none;
}
.sidebar-nav-link:hover {
    background: var(--color-bg-alt, #eef0f2) !important;
    color: var(--color-text, #1a1a1a) !important;
}
.sidebar-nav-link.active {
    background: rgba(236, 238, 241, 0.938)) !important;
    color: var(--color-primary-dark, #0e0d0bcb) !important;
    border-left-color:var(--color-border, #ece9e6de) !important;
}
.sidebar-nav-link:active {
    background: rgba(235, 233, 236, 0.932) !important;
    transform: scale(0.98);
    transition: transform 0.08s ease, background 0.08s ease !important;
}
.sidebar-nav-link i {
    width: 22px !important;
    min-width: 22px !important;
    text-align: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    color: inherit !important;
    pointer-events: none;
}
.sidebar-nav-link span {
    display: inline-block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit !important;
    pointer-events: none;
}

/* ---------- 09.6 Sidebar action buttons ---------- */
.sidebar-actions {
    padding: 10px 14px;
    border-top: 2px solid var(--color-border, #b0b8c0);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    background: #fff;
    max-height: 30vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.sidebar-action-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: 2px solid var(--color-border, #b0b8c0) !important;
    background: var(--color-bg-alt, #eef0f2) !important;
    color: var(--color-text-muted, #4a4a4a) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: left !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.sidebar-action-btn:hover {
    border-color: var(--color-border, #e6b42c) !important;
    background: rgba(230, 180, 44, 0.06) !important;
    color: var(--color-text, #1a1a1a) !important;
}
.sidebar-action-btn:active {
    transform: scale(0.98);
    background: rgba(230, 180, 44, 0.15) !important;
}
.sidebar-action-btn i {
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    pointer-events: none;
}

/* ---------- 09.7 Close button ---------- */
.sidebar-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: var(--color-text-muted, #4a4a4a) !important;
    font-size: 20px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
.sidebar-close-btn:hover {
    background: rgba(0,0,0,0.06) !important;
    color: var(--color-text, #1a1a1a) !important;
}
.sidebar-close-btn:active {
    transform: scale(0.9);
    background: rgba(0,0,0,0.1) !important;
}

/* ---------- 09.8 Footer (social + version) ---------- */
.sidebar-footer {
    padding: 10px 14px;
    border-top: 2px solid var(--color-border, #b0b8c0);
    text-align: center;
    flex-shrink: 0;
    background: #fff;
}
.sidebar-social {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.sidebar-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--color-border, #b0b8c0);
    background: var(--color-bg-alt, #eef0f2);
    color: var(--color-text-muted, #4a4a4a);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: all 0.15s ease;
}
.sidebar-social a:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    color: var(--color-text);
}
.sidebar-social a:active { transform: scale(0.92); }

.sidebar-version {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: clamp(0.35rem, 0.45vw, 0.5rem);
    color: var(--color-text-muted);
    margin-bottom: 4px;
}
.sidebar-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    display: inline-block;
}
.sidebar-copyright {
    font-size: clamp(0.35rem, 0.5vw, 0.5rem);
    color: var(--color-text-muted);
}

/* ---------- 09.9 Overlay (BEHIND the sidebar) ---------- */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9990;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ---------- 09.10 Responsive ---------- */
@media (max-width: 480px) {
    .sidebar { width: 88vw; max-width: 88vw; }
    .sidebar-nav-link {
        font-size: 13px !important;
        padding: 11px 14px !important;
    }
    .sidebar-nav-link i {
        font-size: 15px !important;
        width: 20px !important;
        min-width: 20px !important;
    }
    .sidebar-actions { padding: 8px 12px; gap: 6px; }
    .sidebar-action-btn {
        font-size: 12px !important;
        padding: 11px 14px !important;
    }
}
@media (max-width: 360px) {
    .sidebar { width: 92vw; max-width: 92vw; }
    .sidebar-nav-link {
        font-size: 12.5px !important;
        padding: 10px 12px !important;
    }
}
@media (max-height: 500px) and (orientation: landscape) {
    .sidebar-user-profile { padding: 8px 12px; }
    .sidebar-nav-link { min-height: 42px !important; padding: 9px 14px !important; }
    .sidebar-footer { padding: 6px 10px; }
    .sidebar-social { margin-bottom: 4px; }
    .sidebar-version { display: none; }
}

/* ---------- 09.11 Accessibility focus ring ---------- */
.sidebar-nav-link:focus-visible,
.sidebar-action-btn:focus-visible,
.sidebar-close-btn:focus-visible,
.sidebar-login-btn:focus-visible,
.sidebar-logout-btn:focus-visible,
.sidebar-social a:focus-visible {
    outline: 3px solid var(--color-primary, #e6b42c);
    outline-offset: 2px;
}

/* ================================================================
   09b. SIDEBAR — ALL SERVICES ACCORDION
   ================================================================ */
.sidebar-services-accordion {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.sidebar-services-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: #1e2a3a;
    color: #e2e8f0;
    font-size: clamp(0.55rem, 0.72vw, 0.78rem);
    cursor: pointer;
    text-align: left;
    font-weight: 600;
    transition: background 0.15s ease;
    min-height: 42px;
}
.sidebar-services-toggle:hover { background: #263445; }
.sidebar-services-toggle > i:first-child { width: 18px; text-align: center; }
.sidebar-services-toggle .sidebar-services-chevron {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}
.sidebar-services-toggle.open .sidebar-services-chevron { transform: rotate(180deg); }

.sidebar-services-panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 4px 6px;
    border-left: 2px solid #2d3e52;
    margin-left: 12px;
}
.sidebar-services-panel[hidden] { display: none !important; }

.sidebar-services-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-services-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    font-size: clamp(0.5rem, 0.64vw, 0.68rem);
    cursor: pointer;
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background 0.15s ease, color 0.15s ease;
    min-height: 36px;
}
.sidebar-services-group-header:hover { background: #1e2a3a; color: #e2e8f0; }
.sidebar-services-group-header .services-group-emoji { font-size: 0.95rem; }
.sidebar-services-group-header .sidebar-services-chevron {
    margin-left: auto;
    font-size: 0.6rem;
    transition: transform 0.2s ease;
}
.sidebar-services-group-header.open .sidebar-services-chevron { transform: rotate(180deg); }

.sidebar-services-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 4px 10px;
    border-left: 1px dashed #2d3e52;
    margin-left: 16px;
}
.sidebar-services-items[hidden] { display: none !important; }

.sidebar-subservice-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #cbd5e1;
    font-size: clamp(0.52rem, 0.68vw, 0.72rem);
    cursor: pointer;
    text-align: left;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
    min-height: 34px;
}
.sidebar-subservice-btn:hover {
    background: #263445;
    color: #fff;
    transform: translateX(2px);
}
.sidebar-subservice-btn i {
    width: 16px;
    text-align: center;
    font-size: 0.75rem;
    opacity: 0.85;
}
.sidebar-subservice-btn:hover i { opacity: 1; color: #4ade80; }

/* ================================================================
   10. MAIN CONTENT + HERO
   ================================================================ */
.main-content-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 8px 10px;
}
.hero-section {
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    padding: clamp(16px, 3vw, 48px) clamp(12px, 2vw, 32px);
    text-align: center;
    border: 1px solid var(--color-border);
    margin-bottom: clamp(12px, 2vw, 24px);
}
.hero-section h1 {
    font-size: clamp(1.1rem, 3vw, 2.2rem);
    font-weight: 800;
    color: rgba(0, 0, 0, 1);
    line-height: 1.3;
}
.hero-section p {
    font-size: clamp(0.7rem, 1.2vw, 1.1rem);
    color: var(--color-text-muted);
    margin: clamp(4px, 1vh, 12px) 0;
}
.hero-tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(4px, 0.8vw, 10px);
    margin-bottom: clamp(10px, 2vw, 20px);
}
.hero-tags span {
    padding: clamp(4px, 0.5vw, 8px) clamp(10px, 1.5vw, 24px);
    border-radius: 30px;
    font-size: clamp(0.5rem, 0.8vw, 0.7rem);
    font-weight: 700;
    background: #fff;
    color: var(--color-text);
    border: 2px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}
.hero-tags .tag-ground { border-color: rgba(54, 207, 123, 0.747); }
.hero-tags .tag-in-between { border-color: rgba(214, 72, 37, 0.726); }
.hero-tags .tag-sky { border-color: rgba(9, 133, 235, 0.897); }

.hero-cta-row {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.hero-cta-advertise {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%);
    color: #ffffff;
    border: none;
    border-radius: 16px;
    padding: 14px 26px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    box-shadow: 0 8px 28px rgba(234, 88, 12, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
    min-height: 44px;
    min-width: auto;
}
.hero-cta-advertise::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: rotate(25deg);
    animation: heroShine 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes heroShine {
    0%   { left: -60%; }
    60%  { left: 130%; }
    100% { left: 130%; }
}
.hero-cta-advertise:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(234, 88, 12, 0.55);
}
.hero-cta-advertise:active { transform: translateY(0) scale(0.98); }
.hero-cta-advertise i {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: clamp(1rem, 1.3vw, 1.35rem);
    opacity: 0.85;
}
.hero-cta-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(0.85rem, 1.05vw, 1.05rem);
    font-weight: 800;
    line-height: 1.1;
}
.hero-cta-label i {
    position: static;
    font-size: 1.15em;
    opacity: 1;
}
.hero-cta-sub {
    font-size: clamp(0.6rem, 0.75vw, 0.78rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.hero-cta-rentals {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #ffffff;
    border: none;
    border-radius: 16px;
    padding: 14px 26px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    box-shadow: 0 8px 28px rgba(14, 165, 233, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
    min-height: 44px;
    min-width: auto;
}
.hero-cta-rentals::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: rotate(25deg);
    animation: heroShine 3.5s ease-in-out infinite;
    pointer-events: none;
    animation-delay: 1.75s;
}
.hero-cta-rentals:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(14, 165, 233, 0.55);
}
.hero-cta-rentals:active { transform: translateY(0) scale(0.98); }
.hero-cta-rentals i {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: clamp(1rem, 1.3vw, 1.35rem);
    opacity: 0.85;
}
.section-title {
    font-size: clamp(0.95rem, 2.2vw, 1.6rem);
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    margin-bottom: clamp(12px, 2vw, 24px);
}
.section-title::after {
    content: '';
    display: block;
    width: clamp(40px, 5vw, 60px);
    height: clamp(2px, 0.3vw, 4px);
    background: var(--color-primary);
    margin: clamp(4px, 0.5vh, 8px) auto 0;
    border-radius: 2px;
}

/* ================================================================
   11. CATEGORY GRID
   ================================================================ */
.category-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(8px, 1.5vw, 16px);
    margin-bottom: clamp(12px, 2vw, 24px);
}
.category-card {
    background: var(--color-bg-card);
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    overflow: hidden;
}
.category-card-header {
    padding: clamp(10px, 1.5vw, 20px) clamp(8px, 1.5vw, 16px);
    text-align: center;
    cursor: pointer;
    position: relative;
    min-height: 44px;
}
.category-card-header:hover { background: rgba(0, 0, 0, 0.02); }
.category-card-header:active { transform: scale(0.99); }
.category-card-header .cat-toggle-icon {
    display: inline-block;
    margin-top: 4px;
    font-size: clamp(0.6rem, 0.8vw, 0.8rem);
    color: var(--color-text-muted);
    transition: transform 0.3s ease;
}
.category-card.expanded .cat-toggle-icon { transform: rotate(180deg); }
.category-card .service-list-container { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.category-card.expanded .service-list-container { max-height: 800px; }
.category-card .service-list {
    padding: clamp(6px, 1vw, 12px) clamp(6px, 1.5vw, 16px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(4px, 0.5vh, 8px);
    border-top: 1px solid var(--color-border);
    padding-top: clamp(6px, 1vw, 12px);
}
.category-card .service-item { flex: 0 0 auto; }
.category-card .cat-title { font-size: clamp(0.8rem, 1.2vw, 1rem); font-weight: 700; color: var(--color-text); }
.category-card .cat-sub { font-size: clamp(0.45rem, 0.6vw, 0.6rem); color: var(--color-text-muted); }
.category-card .cat-badge {
    position: absolute;
    top: clamp(4px, 0.5vw, 8px);
    right: clamp(4px, 0.5vw, 8px);
    font-size: clamp(0.35rem, 0.5vw, 0.55rem);
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 12px;
    border: 2px solid;
    background: #fff;
}
.cat-badge.ground { border-color: var(--color-accent); color: var(--color-accent); }
.cat-badge.brokerage { border-color: var(--color-primary); color: var(--color-primary-dark); }
.cat-badge.sky { border-color: var(--color-accent-light); color: var(--color-accent); }
.cat-icon-wrapper img { width: clamp(50px, 6vw, 80px); height: clamp(50px, 6vw, 80px); object-fit: contain; }

/* ================================================================
   12. BROKERAGE — THREE CIRCULATING ARROWS
   ================================================================ */
.brokerage-arrows {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(80px, 9vw, 120px);
    height: clamp(80px, 9vw, 120px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
    --orbit-radius: clamp(28px, 3.5vw, 44px);
}
.brokerage-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: clamp(0.9rem, 1.5vw, 1.4rem);
    color: var(--color-primary);
    opacity: 0.85;
    filter: drop-shadow(0 2px 6px rgba(230, 180, 44, 0.5));
    will-change: transform, opacity;
}
.brokerage-arrow-1 { animation: brokerageArrowSpin1 3s linear infinite; }
.brokerage-arrow-2 { animation: brokerageArrowSpin2 3s linear infinite; }
.brokerage-arrow-3 { animation: brokerageArrowSpin3 3s linear infinite; }

@keyframes brokerageArrowSpin1 {
    0%   { transform: translate(-50%, -50%) rotate(0deg)   translateX(var(--orbit-radius)) rotate(90deg); }
    25%  { transform: translate(-50%, -50%) rotate(90deg)  translateX(var(--orbit-radius)) rotate(90deg); }
    50%  { transform: translate(-50%, -50%) rotate(180deg) translateX(var(--orbit-radius)) rotate(90deg); }
    75%  { transform: translate(-50%, -50%) rotate(270deg) translateX(var(--orbit-radius)) rotate(90deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(var(--orbit-radius)) rotate(90deg); }
}
@keyframes brokerageArrowSpin2 {
    0%   { transform: translate(-50%, -50%) rotate(120deg) translateX(var(--orbit-radius)) rotate(90deg); }
    25%  { transform: translate(-50%, -50%) rotate(210deg) translateX(var(--orbit-radius)) rotate(90deg); }
    50%  { transform: translate(-50%, -50%) rotate(300deg) translateX(var(--orbit-radius)) rotate(90deg); }
    75%  { transform: translate(-50%, -50%) rotate(390deg) translateX(var(--orbit-radius)) rotate(90deg); }
    100% { transform: translate(-50%, -50%) rotate(480deg) translateX(var(--orbit-radius)) rotate(90deg); }
}
@keyframes brokerageArrowSpin3 {
    0%   { transform: translate(-50%, -50%) rotate(240deg) translateX(var(--orbit-radius)) rotate(90deg); }
    25%  { transform: translate(-50%, -50%) rotate(330deg) translateX(var(--orbit-radius)) rotate(90deg); }
    50%  { transform: translate(-50%, -50%) rotate(420deg) translateX(var(--orbit-radius)) rotate(90deg); }
    75%  { transform: translate(-50%, -50%) rotate(510deg) translateX(var(--orbit-radius)) rotate(90deg); }
    100% { transform: translate(-50%, -50%) rotate(600deg) translateX(var(--orbit-radius)) rotate(90deg); }
}
.brokerage-arrows::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--orbit-radius) * 2);
    height: calc(var(--orbit-radius) * 2);
    transform: translate(-50%, -50%);
    border: 2px dashed rgba(230, 180, 44, 0.25);
    border-radius: 50%;
    animation: brokerageTrackSpin 12s linear infinite reverse;
}
@keyframes brokerageTrackSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.category-card.service-brokerage:hover .brokerage-arrow {
    color: var(--color-primary-dark);
    filter: drop-shadow(0 2px 10px rgba(230, 180, 44, 0.8));
}

/* ================================================================
   13. MANAGEMENT & TRUSTEES
   ================================================================ */
<---.management-section, . ---trustees-section--->
{
    background: var(--color-bg-card);
    border-radius: var(--radius);
    padding: clamp(10px, 2vw, 20px) clamp(10px, 2vw, 20px);
    border: 2px solid var(--color-border);
    margin-bottom: clamp(10px, 2vw, 20px);
}
.management-subtitle, .trustees-subtitle {
    text-align: center;
    font-size: clamp(0.6rem, 0.9vw, 0.9rem);
    color: var(--color-text-muted);
    margin-bottom: clamp(10px, 1.5vw, 20px);
}

.management-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
}
.management-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 10px 6px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
    background: #fff;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}
.management-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.management-card .management-img {
    width: 100% !important;
    max-width: 90px !important;
    height: 90px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    margin: 0 auto 8px !important;
    border: 1px solid var(--color-border);
}
.management-info h4 {
    font-size: 0.82rem !important;
    margin: 0 0 2px !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
    color: var(--color-text);
}
.management-role {
    font-size: 0.68rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    color: var(--color-text-muted);
}
@media (max-width: 1024px) {
    .management-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
    .management-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
    .management-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

.trustees-grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 0.5vw, 20px);
    justify-content: center;
}
.trustee-card {
    background: #fff;
    border-radius: 9%;
    border: 1px solid var(--color-border);
    padding: clamp(2px, 1vw, 8px);
    text-align: center;
    transition: all 0.3s ease;
    flex: 0 1 calc(33.33% - 20px);
    min-width: 120px;
}
@media (min-width: 768px) { .trustee-card { flex: 0 1 calc(16.66% - 20px); } }
.trustee-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.trustee- img {
    width: clamp(40px, 4vw, 60px);
    height: clamp(40px, 4vw, 60px);
    border-radius: 80%;
    object-fit: cover;
    border: 1px solid var(--color-border);
}
.trustee-info h4 { font-size: clamp(0.6rem, 0.8vw, 0.85rem); margin-top: 4px; color: var(--color-text); }
.trustee-role { font-size: clamp(0.4rem, 0.6vw, 0.6rem); color: var(--color-text-muted); }

/* ================================================================
   14. ABOUT SECTION
   ================================================================ */
.about-combined-section {
    background: var(--color-bg-card);
    border-radius: var(--radius);
    padding: clamp(12px, 2vw, 24px) clamp(10px, 2vw, 20px);
    border: 2px solid var(--color-border);
    margin-bottom: clamp(12px, 2vw, 24px);
}
.about-company-info p {
    font-size: clamp(0.7rem, 1vw, 0.9rem);
    color: rgba(0, 0, 0, 0.877);
    line-height: 1.6;
}
.about-vision-mission {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(8px, 1vw, 16px);
    margin: clamp(10px, 1.5vw, 20px) 0;
}
@media (min-width: 768px) { .about-vision-mission { grid-template-columns: repeat(3, 1fr); } }
.vision-box, .mission-box, .motto-box {
    background: #fff;
    border-radius: var(--radius);
    padding: clamp(10px, 1.5vw, 20px);
    border: 2px solid var(--color-border);
    text-align: center;
}
.vision-box h4, .mission-box h4, .motto-box h4 { font-size: clamp(0.7rem, 0.9vw, 0.95rem); color: rgba(0, 0, 0, 0.877); }
.vision-box p, .mission-box p, .motto-box p { font-size: clamp(0.6rem, 0.8vw, 0.8rem); color: rgba(0, 0, 0, 0.877); margin-top: 4px; }
.about-core-values h4, .about-keys h4, .about-quality h4, .about-safety h4 {
    font-size: clamp(0.7rem, 0.9vw, 0.95rem);
    color: rgba(0, 0, 0, 0.877);
    margin: clamp(8px, 1vw, 16px) 0 4px;
}
.values-grid { display: flex; flex-wrap: wrap; gap: clamp(6px, 0.5vw, 10px); }
.value-tag {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 20px;
    padding: 2px 12px;
    font-size: clamp(0.5rem, 0.6vw, 0.7rem);
    font-weight: 600;
    color: rgba(0, 0, 0, 0.877);
}
.keys-list-horizontal { display: flex; flex-wrap: wrap; gap: 4px 15px; font-size: clamp(0.55rem, 0.7vw, 0.75rem); color: var(--color-text-muted); }
.key-divider { color: var(--color-border); }
.about-quality p, .about-safety p { font-size: clamp(0.6rem, 0.8vw, 0.8rem); color: rgba(0, 0, 0, 0.877); }

/* ================================================================
   15. STATISTICS
   ================================================================ */
<---.statistics-section --->
{
    background: var(--color-bg-card);
    border-radius: var(--radius);
    padding: clamp(10px, 2vw, 20px);
    border: 2px solid var(--color-border);
    margin-bottom: clamp(10px, 2vw, 20px);
}
.statistics-subtitle { font-size: clamp(0.6rem, 0.8vw, 0.9rem); color: var(--color-text-muted); text-align: center; }
.statistics-row { display: flex; flex-wrap: wrap; gap: clamp(8px, 0.5vw, 16px); justify-content: center; }
.stat-item {
    background: #fff;
    border-radius: var(--radius);
    padding: clamp(8px, 1vw, 16px);
    text-align: center;
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.8vw, 16px);
    flex: 0 1 calc(33.33% - 16px);
    min-width: 120px;
}
@media (min-width: 768px) { .stat-item { flex: 0 1 calc(16.66% - 16px); } }
.stat-icon { font-size: clamp(0.5rem, 1.5vw, 1.0rem); color: var(--color-primary-dark); flex-shrink: 0; }
.stat-content { text-align: left; }
.stat-text { font-size: clamp(0.3rem, 1.2vw, 0.70rem); font-weight: 700; color: rgba(0, 0, 0, 0.877); display: block; }

/* ================================================================
   16. ZBS-Stocks APPLICATION FORM
   ================================================================ */
.ZBS-Stocks-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; }
.ZBS-Stocks-wrapper.active { max-height: 3000px; }
.ZBS-Stocks-container {
    padding: 16px;
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    margin: 8px;
}
.ZBS-Stocks-header h2 { font-size: clamp(0.9rem, 1.2vw, 1.2rem); color: black; }
.ZBS-Stocks-header p { font-size: clamp(0.6rem, 0.8vw, 0.8rem); color: black; }
.share-stock-info {
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    padding: 12px;
    margin: 10px 0;
    border: 2px solid var(--color-border);
}
.share-stock-info p { font-size: clamp(0.55rem, 0.7vw, 0.75rem); color: var(--color-text-muted); }
.share-form-section { margin: 12px 0; }
.share-section-title {
    font-size: clamp(0.7rem, 0.9vw, 0.9rem);
    color: black);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 4px;
    margin-bottom: 8px;
}
.share-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-form-row .form-group.full { grid-column: 1 / -1; }
.share-form-row .form-group.half { grid-column: span 1; }
.share-terms-box {
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    padding: 12px 16px;
    border: 2px solid var(--color-border);
    max-height: 150px;
    overflow-y: auto;
}
.share-terms-box ol { padding-left: 20px; }
.share-terms-box ol li { font-size: clamp(0.5rem, 0.65vw, 0.7rem); color: var(--color-text-muted); margin-bottom: 4px; }
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(0.55rem, 0.7vw, 0.75rem);
    color: var(--color-text-muted);
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    width: 18px; height: 18px;
    min-height: 18px; min-width: 18px;
    cursor: pointer;
}
.share-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.share-submit-btn, .share-cancel-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 0.5rem;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    font-weight: 600;
    min-height: 44px;
}
.share-submit-btn {
    background: white;
    color: black;
    border: 1px solid var(--color-border);
    flex: 1;
}
.share-submit-btn:hover { background: lightgrey; }
.share-cancel-btn {
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    border: 2px solid var(--color-border);
}
.share-cancel-btn:hover { background: #e2e6ea; }
.share-status {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: clamp(0.6rem, 0.75vw, 0.8rem);
    margin-top: 8px;
}
.share-status.success { background: #d4edda; color: #155724; border: 2px solid #c3e6cb; }
.share-status.error { background: #f8d7da; color: #721c24; border: 2px solid #f5c6cb; }

/* ================================================================
   17. FORM ELEMENTS
   ================================================================ */
.form-group { margin-bottom: 12px; }
.form-group label {
    display: block;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 3px;
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    font-size: clamp(0.7rem, 0.8vw, 0.85rem);
    outline: none;
    min-height: 40px;
    font-family: inherit;
    background: #fff;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(230, 180, 44, 0.15);
}
.form-group textarea { min-height: 60px; resize: vertical; }
.form-hint {
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    color: var(--color-text-muted);
    margin-top: 3px;
    display: block;
    font-style: italic;
}

/* ================================================================
   18. BECOME A PARTNER BUTTON
   ================================================================ */
.partner-cta { text-align: center; padding: clamp(10px, 1.5vw, 20px); border-radius: var(--radius); }
.partner-cta p {
    font-size: clamp(0.7rem, 1vw, 1rem);
    color: var(--color-text-muted);
    margin-bottom: clamp(8px, 1vh, 14px);
    font-weight: 600;
}
.partner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1vw, 12px);
    min-width: clamp(180px, 20vw, 240px);
    min-height: 50px;
    padding: clamp(8px, 1vh, 12px) clamp(16px, 2vw, 28px);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.partner-btn:hover {
    background: lightgrey;
    border-color: var(--color-border);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(110, 109, 106, 0.87);
}
.partner-btn:active { transform: translateY(0) scale(0.97); }
.partner-btn-img {
    width: clamp(38px, 2.5vw, 40px);
    height: clamp(38px, 2.5vw, 40px);
    object-fit: contain;
    border-radius: 50%;
    flex-shrink: 0;
    background: #fff;
    padding: 2px;
    transition: transform 0.25s ease;
}
.partner-btn:hover .partner-btn-img { transform: scale(1.1) rotate(-5deg); }
.partner-btn-text {
    color: var(--color-text);
    font-size: clamp(0.7rem, 0.9vw, 0.95rem);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* ================================================================
   19. DRAGGABLE AI CHATBOT
   ================================================================ */
.ai-chatbot-container {
    position: fixed;
    right: clamp(8px, 2vw, 24px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.ai-chatbot-container.dragging { cursor: grabbing; opacity: 0.9; z-index: 1000; }
.ai-chatbot-container .ai-drag-label {
    font-size: clamp(0.25rem, 0.4vw, 0.45rem);
    color: var(--color-text-muted);
    opacity: 0.5;
    writing-mode: vertical-rl;
    letter-spacing: 2px;
    pointer-events: none;
    display: block;
}
.ai-chatbot-btn {
    position: relative;
    width: clamp(60px, 5.5vw, 100px);
    height: clamp(60px, 5.5vw, 100px);
    border-radius: 50%;
    background: lightgray;
    border: 3px solid var(--color-border);
    min-height: 44px;
    min-width: 44px;
    box-shadow: 0 4px 20px rgba(139, 149, 153, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    touch-action: none;
    flex-shrink: 0;
}
.ai-chatbot-container.dragging .ai-chatbot-btn {
    cursor: grabbing;
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(230, 180, 44, 0.5);
}
.ai-chatbot-btn:hover { transform: scale(1.06); }
.ai-chatbot-btn:active { transform: scale(0.95); }
.ai-chatbot-btn img { width: 100px; height: 100%; border-radius: 50%; object-fit: cover; pointer-events: none; }
.ai-chatbot-btn .ai-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: var(--color-accent);
    color: #fff;
    font-size: clamp(0.3rem, 0.5vw, 0.5rem);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    border: 2px solid #fff;
    pointer-events: none;
    white-space: nowrap;
}
.ai-chatbot-btn .drag-handle {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text-muted);
    color: #fff;
    font-size: clamp(0.3rem, 0.4vw, 0.45rem);
    padding: 1px 6px;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
}
.ai-chatbot-container:hover .drag-handle { opacity: 0.7; }

/* ================================================================
   20. AI CHATBOT MODAL
   ================================================================ */
.ai-chatbot-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: clamp(340px, 40vw, 450px);
    max-width: 92vw;
    height: clamp(450px, 60vh, 550px);
    max-height: 85vh;
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    z-index: 2000;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.ai-chatbot-modal.active {
    display: flex !important;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
}
.ai-chatbot-modal .chat-header {
    padding: clamp(10px, 1.5vh, 16px) clamp(12px, 2vw, 20px);
    border-bottom: 2px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    cursor: grab;
    background: var(--color-bg-card);
    min-height: 50px;
}
.ai-chatbot-modal .chat-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: clamp(0.7rem, 1vw, 1rem);
    color: black;
}
.ai-chatbot-modal .chat-title .chat-logo {
    width: clamp(28px, 3vw, 36px);
    height: clamp(28px, 3vw, 36px);
    border-radius: 50%;
    border: 1px solid var(--color-border);
    object-fit: cover;
}
.ai-chatbot-modal .chat-title .chat-status {
    font-size: clamp(0.4rem, 0.5vw, 0.55rem);
    color: #4ade80;
    font-weight: 600;
    background: rgba(74, 222, 128, 0.15);
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
}
.ai-chatbot-modal .close-chat {
    font-size: clamp(1.2rem, 1.8vw, 1.8rem);
    min-height: 36px;
    min-width: 36px;
    padding: 0 8px;
    background: transparent;
    color: black;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ai-chatbot-modal .close-chat:hover { background: rgba(0, 0, 0, 0.05); color: var(--color-text); }
.ai-chatbot-modal .chat-messages {
    flex: 1;
    padding: clamp(10px, 1.5vh, 16px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.8vh, 10px);
    background: var(--color-bg);
    min-height: 150px;
}
.ai-chatbot-modal .chat-messages .message {
    max-width: 85%;
    padding: clamp(6px, 0.8vh, 10px) clamp(10px, 1.5vw, 16px);
    border-radius: 12px;
    font-size: clamp(0.65rem, 0.85vw, 0.85rem);
    line-height: 1.5;
    word-wrap: break-word;
    animation: messageSlide 0.3s ease;
}
@keyframes messageSlide {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ai-chatbot-modal .chat-messages .message.bot { background: lightgray; align-self: flex-start; border-bottom-left-radius: 4px; }
.ai-chatbot-modal .chat-messages .message.user { background: lightgray; color: var(--color-text); align-self: flex-end; border-bottom-right-radius: 4px; }
.ai-chatbot-modal .chat-messages .message .msg-avatar { margin-right: 6px; font-size: clamp(0.8rem, 1vw, 1.1rem); }
.ai-chatbot-modal .chat-messages .message .msg-time {
    font-size: clamp(0.35rem, 0.45vw, 0.5rem);
    color: var(--color-text-muted);
    opacity: 0.6;
    display: block;
    margin-top: 4px;
    text-align: right;
}
.ai-chatbot-modal .chat-messages .typing-indicator {
    display: flex;
    gap: 4px;
    padding: 8px 14px;
    background: var(--color-bg-alt);
    border-radius: 12px;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}
.ai-chatbot-modal .chat-messages .typing-indicator span {
    width: clamp(6px, 0.6vw, 8px);
    height: clamp(6px, 0.6vw, 8px);
    background: var(--color-text-muted);
    border-radius: 50%;
    animation: typingBounce 1.4s ease-in-out infinite;
}
.ai-chatbot-modal .chat-messages .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.ai-chatbot-modal .chat-messages .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-8px); opacity: 1; }
}
.ai-chatbot-modal .ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(4px, 0.5vw, 6px);
    padding: clamp(6px, 0.8vh, 10px) clamp(8px, 1vw, 12px);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-bg-card);
}
.ai-chatbot-modal .ai-suggestions .suggestion {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 20px;
    padding: clamp(2px, 0.3vh, 4px) clamp(8px, 0.8vw, 12px);
    font-size: clamp(0.4rem, 0.55vw, 0.65rem);
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 28px;
    min-width: auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ai-chatbot-modal .ai-suggestions .suggestion:hover { border-color: var(--color-border); background: rgba(230, 180, 44, 0.06); color: var(--color-text); }
.ai-chatbot-modal .chat-input {
    padding: clamp(6px, 0.8vh, 10px) clamp(8px, 1vw, 12px);
    border-top: 2px solid var(--color-border);
    display: flex;
    gap: clamp(6px, 0.6vw, 10px);
    flex-shrink: 0;
    background: #fff;
}
.ai-chatbot-modal .chat-input input {
    flex: 1;
    padding: clamp(6px, 0.8vh, 10px) clamp(10px, 1.2vw, 14px);
    border: 2px solid var(--color-border);
    border-radius: 30px;
    font-size: clamp(0.65rem, 0.85vw, 0.85rem);
    outline: none;
    min-height: 38px;
    background: var(--color-bg-alt);
    transition: border-color 0.3s ease;
}
.ai-chatbot-modal .chat-input input:focus { border-color: var(--color-border); box-shadow: 0 0 0 3px rgba(230, 180, 44, 0.15); }
.ai-chatbot-modal .chat-input .send-btn {
    width: clamp(38px, 4vw, 48px);
    height: clamp(38px, 4vw, 48px);
    border-radius: 50%;
    background: lightgray;
    color: var(--color-text);
    font-size: clamp(0.7rem, 0.9vw, 1rem);
    min-height: 38px;
    min-width: 38px;
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ai-chatbot-modal .chat-input .send-btn:hover { background: var(--color-primary-light); transform: scale(1.05); }

/* ================================================================
   21. FLOATING FOOTER
   ================================================================ */
.floating-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 2px solid var(--color-border);
    padding: 4px 6px;
    height: var(--footer-height);
    min-height: 48px;
    max-height: 80px;
}
.floating-footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    gap: 4px;
}
.footer-left, .footer-right { display: flex; align-items: center; flex-shrink: 0; }
.footer-center { display: flex; align-items: center; justify-content: center; flex: 1; }
.footer-notification-wrapper { position: relative; display: inline-block; }

.footer-notification-btn {
    position: relative;
    width: clamp(36px, 4.5vw, 48px);
    height: clamp(36px, 4.5vw, 48px);
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: clamp(0.85rem, 1.1vw, 1.15rem);
    min-height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}
.footer-notification-btn:hover {
    background: rgba(228, 231, 235, 0.93);
    border-color: var(--color-border);
    color: black;
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(230, 180, 44, 0.35);
}
.footer-notification-btn:active { transform: scale(0.92); }
.footer-notification-btn .notification-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: clamp(0.4rem, 0.55vw, 0.6rem);
    font-weight: 800;
    min-width: clamp(16px, 2vw, 22px);
    height: clamp(16px, 2vw, 22px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.5);
    animation: badgeBounce 2s ease-in-out infinite;
    z-index: 5;
}
@keyframes badgeBounce {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}
.footer-notification-btn .notification-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: clamp(8px, 0.9vw, 10px);
    height: clamp(8px, 0.9vw, 10px);
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid #fff;
    display: none;
    z-index: 4;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
}
.footer-notification-btn .notification-dot.show {
    display: block;
    animation: dotPulseGreen 1.6s ease-in-out infinite;
}
@keyframes dotPulseGreen {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px rgba(34, 197, 94, 0.8); }
    50%      { opacity: 0.75; transform: scale(1.25); box-shadow: 0 0 14px rgba(34, 197, 94, 1); }
}

.footer-notification-dropdown {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    min-width: clamp(240px, 30vw, 340px);
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    overflow: hidden;
    padding: 0;
}
.footer-notification-dropdown .notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(8px, 1vh, 14px) clamp(12px, 1.5vw, 18px);
    border-bottom: 2px solid var(--color-border);
    font-weight: 700;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
}
.footer-notification-dropdown .notification-header .notification-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.footer-notification-dropdown .notification-header .notification-mark-read {
    font-size: clamp(0.5rem, 0.7vw, 0.65rem);
    color: var(--color-accent);
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    padding: 4px 8px;
    min-height: auto;
    min-width: auto;
}
.footer-notification-dropdown .notification-header .notification-mark-read:hover { text-decoration: underline; }
.footer-notification-dropdown .notification-list { max-height: clamp(200px, 30vh, 300px); overflow-y: auto; padding: 4px 0; }
.footer-notification-dropdown .notification-item {
    display: flex;
    align-items: flex-start;
    gap: clamp(6px, 0.8vw, 12px);
    padding: clamp(6px, 0.8vh, 10px) clamp(10px, 1.2vw, 16px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.2s ease;
}
.footer-notification-dropdown .notification-item:hover { background: var(--color-bg-alt); }
.footer-notification-dropdown .notification-item.unread { background: rgba(230, 180, 44, 0.04); }
.footer-notification-dropdown .notification-item .notification-icon { font-size: clamp(0.8rem, 1vw, 1.1rem); flex-shrink: 0; }
.footer-notification-dropdown .notification-item .notification-text {
    flex: 1;
    font-size: clamp(0.55rem, 0.7vw, 0.75rem);
    color: var(--color-text);
    line-height: 1.4;
}
.footer-notification-dropdown .notification-item .notification-time {
    font-size: clamp(0.4rem, 0.5vw, 0.55rem);
    color: var(--color-text-muted);
    flex-shrink: 0;
    opacity: 0.7;
}

.footer-menu-btn {
    position: relative;
    width: clamp(36px, 4.5vw, 48px);
    height: clamp(36px, 4.5vw, 48px);
    border-radius: 40%;
    background:  rgba(227, 234, 235, 0.73);
    border: 2px solid var(--color-border);
    min-height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}
.footer-menu-btn:hover { transform: scale(1.05); box-shadow: 0 2px 12px rgba(167, 164, 159, 0.9); }
.footer-menu-btn:active { transform: scale(0.9); }
.footer-menu-btn .footer-menu-logo-img {
    width: clamp(30px, 2.5vw, 25px);
    height: clamp(30px, 2.5vw, 35px);
    border-radius: 50%;
    border: 2px solid var(--color-border);
    object-fit: cover;
}
.footer-menu-btn .footer-menu-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: clamp(0.55rem, 0.7vw, 0.75rem);
    font-weight: 800;
    min-width: clamp(18px, 2.2vw, 22px);
    height: clamp(18px, 2.2vw, 22px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.5);
    z-index: 5;
    padding: 0;
    transition: transform 0.2s ease;
}
.footer-menu-btn:hover .footer-menu-badge { transform: scale(1.15) rotate(-8deg); }
.footer-menu-btn .footer-menu-badge::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(59, 130, 246, 0.5);
    animation: menuBadgePulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes menuBadgePulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

.footer-menu-content {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    min-width: clamp(280px, 40vw, 450px);
    max-width: 92vw;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    padding: 0;
}
.footer-menu-content .footer-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: clamp(10px, 1.5vh, 16px) clamp(12px, 1.5vw, 20px);
    border-bottom: 2px solid var(--color-border);
    background:  rgba(226, 230, 235, 0.95);
    border-radius: var(--radius) var(--radius) 0 0;
}
.footer-menu-content .footer-menu-header-logo { display: flex; align-items: center; gap: 8px; }
.footer-menu-content .footer-menu-header-logo img {
    width: clamp(32px, 3vw, 44px);
    height: clamp(32px, 3vw, 44px);
    position:absolute;
    left:120px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
}
.footer-menu-content .footer-menu-header-text { display: flex; flex-direction: column; }
.footer-menu-content .footer-menu-header-name { font-size: clamp(0.6rem, 0.8vw, 0.85rem);position:absolute;left:163px;top:13px;font-weight: 700; color: black; }
.footer-menu-content .footer-menu-header-tagline { font-size: clamp(0.35rem, 0.5vw, 0.55rem); color: blue;position:absolute;left:180px;top:25px; }
.footer-menu-content .footer-menu-divider { border-top: 2px solid var(--color-border); margin: 0; }
.footer-menu-category { border-bottom: 1px solid var(--color-border); }
.footer-menu-category:last-child { border-bottom: none; }
.footer-menu-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: clamp(8px, 1vh, 12px) clamp(10px, 1.2vw, 16px);
    cursor: pointer;
    transition: background 0.2s ease;
    min-height: 40px;
}
.footer-menu-category-header:hover { background: var(--color-bg-alt); }
.footer-menu-category-header .footer-menu-icon { font-size: clamp(0.8rem, 1vw, 1.1rem); flex-shrink: 0; }
.footer-menu-category-header .financial-text { font-size: clamp(0.55rem, 0.7vw, 0.75rem); font-weight: 600; flex: 1; color: #4cbcdf; }
.footer-menu-category-header .brokerage-text { font-size: clamp(0.55rem, 0.7vw, 0.75rem); font-weight: 600; flex: 1; color: #863426; }
.footer-menu-category-header .agricultural-text { font-size: clamp(0.55rem, 0.7vw, 0.75rem); font-weight: 600; flex: 1; color: #2d8a4e; }
.footer-menu-category-header .category-badge {
    font-size: clamp(0.4rem, 0.5vw, 0.55rem);
    background: var(--color-bg-alt);
    padding: 1px 8px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    font-weight: 700;
}
.footer-menu-category-header i.fa-chevron-down {
    font-size: clamp(0.5rem, 0.6vw, 0.7rem);
    color: var(--color-text-muted);
    transition: transform 0.3s ease;
}
.footer-menu-category-header[aria-expanded="true"] i.fa-chevron-down { transform: rotate(180deg); }
.footer-menu-category-items { padding: 4px 0; background: var(--color-bg-card); }
.footer-menu-category-items a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: clamp(6px, 0.8vh, 10px) clamp(12px, 1.2vw, 20px);
    font-size: clamp(0.5rem, 0.65vw, 0.7rem);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background 0.2s ease;
    min-height: 36px;
}
.footer-menu-category-items a:hover { background: var(--color-bg-alt); color: var(--color-text); }
.footer-menu-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    padding: clamp(8px, 1vh, 12px);
    border-top: 2px solid var(--color-border);
    background: var(--color-bg-card);
    border-radius: 0 0 var(--radius) var(--radius);
}
.footer-menu-action {
    padding: clamp(6px, 0.8vh, 10px) clamp(8px, 0.8vw, 12px);
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    background: #fff;
    color: var(--color-text-muted);
    font-size: clamp(0.5rem, 0.65vw, 0.7rem);
    font-weight: 600;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.footer-menu-action:hover { border-color: var(--color-primary); background: rgba(230, 180, 44, 0.06); color: var(--color-text); }
.footer-menu-action i { font-size: clamp(0.6rem, 0.7vw, 0.8rem); }

/* ================================================================
   21b. FOOTER — ALL SERVICES ACCORDION
   ================================================================ */
.footer-services-accordion {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}
.footer-services-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: #f1f5f9;
    color: #1e293b;
    font-size: clamp(0.55rem, 0.72vw, 0.78rem);
    cursor: pointer;
    text-align: left;
    font-weight: 700;
    transition: background 0.15s ease, color 0.15s ease;
    min-height: 42px;
}
.footer-services-toggle:hover { background: #e2e8f0; color: #14532d; }
.footer-services-toggle > i:first-child { width: 18px; text-align: center; }
.footer-services-toggle .footer-services-chevron {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}
.footer-services-toggle.open .footer-services-chevron { transform: rotate(180deg); }

.footer-services-panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 4px 6px;
    border-left: 2px solid #cbd5e1;
    margin-left: 12px;
}
.footer-services-panel[hidden] { display: none !important; }

.footer-services-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-services-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: clamp(0.5rem, 0.64vw, 0.68rem);
    cursor: pointer;
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background 0.15s ease, color 0.15s ease;
    min-height: 36px;
}
.footer-services-group-header:hover { background: #f1f5f9; color: #14532d; }
.footer-services-group-header .services-group-emoji { font-size: 0.95rem; }
.footer-services-group-header .footer-services-chevron {
    margin-left: auto;
    font-size: 0.6rem;
    transition: transform 0.2s ease;
}
.footer-services-group-header.open .footer-services-chevron { transform: rotate(180deg); }

.footer-services-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 4px 10px;
    border-left: 1px dashed #cbd5e1;
    margin-left: 16px;
}
.footer-services-items[hidden] { display: none !important; }

.footer-subservice-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #334155;
    font-size: clamp(0.52rem, 0.68vw, 0.72rem);
    cursor: pointer;
    text-align: left;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
    min-height: 34px;
}
.footer-subservice-btn:hover {
    background: #f0fdf4;
    color: #14532d;
    transform: translateX(2px);
}
.footer-subservice-btn i {
    width: 16px;
    text-align: center;
    font-size: 0.75rem;
    opacity: 0.85;
}
.footer-subservice-btn:hover i { opacity: 1; color: #1f7a3d; }

.footer-search-btn {
    position: relative;
    width: clamp(80px, 4.5vw, 100px);
    height: clamp(25px, 4.5vw, 40px);
    border-radius: 13px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: clamp(0.85rem, 1.1vw, 1.15rem);
    min-height: 20px;
    min-width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
    overflow: visible;
}
.footer-search-btn:hover {
    background: rgba(182, 182, 177, 0.897);
    border-color: var(--color-border);
    color: var(--color-primary-dark);
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(228, 227, 223, 0.842);
}
.footer-search-btn:active { transform: scale(0.92); }
.footer-search-btn i {
    font-size: clamp(0.85rem, 1.1vw, 1.15rem);
    transition: transform 0.3s ease;
    pointer-events: none;
}
.footer-search-btn:hover i { transform: scale(1.15); }
.footer-search-btn .footer-search-badge {
    position: absolute;
    top: 20px                   
    right: 11px;                           
    background: linear-gradient(135deg, #fcfdff, #eff0f3);
    color: #1a1a1a;
    font-size: clamp(0.38rem, 0.5vw, 0.5rem);
    font-weight: 900;
    padding: 2px clamp(6px, 0.6vw, 8px);
    border-radius: 10px;
    letter-spacing: 0.5px;
    border: 2px solid #fff;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(233, 232, 230, 0.938);
    z-index: 5;
    white-space: nowrap;
    animation: searchBadgeShine 3s ease-in-out infinite;
    text-transform: uppercase;
}
@keyframes searchBadgeShine {
    0%, 100% { box-shadow: 0 2px 6px rgba(230, 180, 44, 0.5); transform: scale(1); }
    50%      { box-shadow: 0 4px 14px rgba(230, 180, 44, 0.9), 0 0 20px rgba(230, 180, 44, 0.5); transform: scale(1.05); }
}

.footer-bottom {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px 0;
    border-top: 1px solid var(--color-border);
    margin-top: 4px;
    font-size: clamp(0.5rem, 0.45vw, 0.7rem);
    color: var(--color-text-muted);
    flex-wrap: wrap;
    gap: 4px;
}
.footer-bottom-left .footer-social-icons { display: flex; gap: 4px; }
.footer-bottom-left .footer-social-icons a {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: clamp(0.5rem, 0.6vw, 0.65rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-height: 28px;
    min-width: 28px;
    transition: all 0.3s ease;
}
.footer-bottom-left .footer-social-icons a:hover { transform: translateY(-2px); border-color: var(--color-primary); color: var(--color-text); }
.footer-bottom-center .footer-copyright { font-size: clamp(0.5rem, 0.45vw, 0.5rem); color: var(--color-text-muted); }
.footer-bottom-right .footer-nav-links { display: flex; gap: 8px; list-style: none; }
.footer-bottom-right .footer-nav-links a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: clamp(0.5rem, 0.45vw, 0.7rem);
    font-weight: 600;
    transition: color 0.3s ease;
}
.footer-bottom-right .footer-nav-links a:hover { color: var(--color-primary-dark); }

/* ================================================================
   26. SEARCH OVERLAY
   ================================================================ */
.search-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(60px, 10vh, 120px) 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.search-overlay.active { display: flex !important; }
.search-container {
    background: #fff;
    border-radius: var(--radius);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px 20px;
    border: 2px solid var(--color-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: searchSlideDown 0.3s ease;
}
@keyframes searchSlideDown {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.search-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.search-header h3 {
    font-size: clamp(0.9rem, 1.1vw, 1.2rem);
    color: black ;
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-header h3 .ai-badge {
    font-size: clamp(0.4rem, 0.5vw, 0.55rem);
    background: white;
    color: black;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 700;
}
.search-header .close-search {
    font-size: clamp(1.2rem, 1.8vw, 1.8rem);
    min-height: 36px;
    min-width: 36px;
    padding: 0 8px;
    background: transparent;
    color: var(--color-text-muted);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-header .close-search:hover { background: rgba(0, 0, 0, 0.05); color: var(--color-text); }
.search-input-wrapper {
    display: flex;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.3s ease;
}
.search-input-wrapper:focus-within { border-color: var(--color-border); box-shadow: 0 0 0 3px rgba(238, 237, 235, 0.89); }
.search-input-wrapper .search-icon {
    display: flex;
    align-items: center;
    padding: 0 12px;
    color:black;
    font-size: clamp(0.8rem, 1vw, 1rem);
    flex-shrink: 0;
}
.search-input-wrapper input {
    flex: 1;
    padding: 10px 12px;
    border: none;
    font-size: clamp(0.75rem, 0.9vw, 0.95rem);
    outline: none;
    min-height: 44px;
    background: transparent;
    color: var(--color-text);
}
.search-input-wrapper input::placeholder { color: black; opacity: 0.6; }

.search-actions {
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.4vw, 6px);
    padding: clamp(3px, 0.5vh, 6px) clamp(4px, 0.6vw, 10px);
    flex-shrink: 0;
    border-left: 2px solid var(--color-border);
}
.search-actions .search-voice-btn,
.search-actions .search-camera-btn,
.search-actions .search-upload-btn {
    width: clamp(30px, 3.2vw, 44px);
    height: clamp(30px, 3.2vw, 44px);
    min-width: clamp(30px, 3.2vw, 44px);
    min-height: clamp(30px, 3.2vw, 44px);
    border-radius: 50%;
    border: 2px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    font-size: clamp(0.55rem, 0.8vw, 0.9rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}
.search-actions .search-voice-btn:hover,
.search-actions .search-camera-btn:hover,
.search-actions .search-upload-btn:hover {
    background: rgba(230, 180, 44, 0.1);
    border-color: var(--color-primary);
    color: var(--color-text);
    transform: scale(1.08);
}
.search-actions .search-voice-btn.listening {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #ef4444;
    animation: voicePulse 1.2s ease-in-out infinite;
}
@keyframes voicePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
.search-actions .divider-line {
    width: 1px;
    height: clamp(18px, 2.4vh, 28px);
    background: var(--color-border);
    margin: 0 clamp(2px, 0.4vw, 6px);
    flex-shrink: 0;
    opacity: 0.7;
}
.search-actions .search-submit-btn {
    background: lightgrey;
    color: var(--color-text);
    border: 2px solid var(--color-border);
    border-radius: 30%;
    padding: clamp(4px, 0.6vh, 10px) clamp(8px, 1vw, 18px);
    font-weight: 700;
    font-size: clamp(0.55rem, 0.8vw, 0.85rem);
    min-height: clamp(35px, 3.5vw, 46px);
    min-width: clamp(60px, 6vw, 90px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3px, 0.4vw, 6px);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.search-actions .search-submit-btn:hover { background: var(--color-primary-light); transform: scale(1.03); }

.search-results { margin-top: 16px; max-height: 250px; overflow-y: auto; }
.search-results .result-item {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(0.7rem, 0.8vw, 0.8rem);
    transition: background 0.2s ease;
    border-radius: 4px;
}
.search-results .result-item:hover { background: var(--color-bg-alt); }
.search-shortcut {
    font-size: clamp(0.5rem, 0.6vw, 0.65rem);
    color: var(--color-text-muted);
    margin-top: 12px;
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}
.search-shortcut kbd {
    background: var(--color-bg-alt);
    padding: 1px 8px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    font-size: clamp(0.4rem, 0.5vw, 0.55rem);
    font-family: inherit;
}

/* ================================================================
   27. LOGIN MODAL
   ================================================================ */
.login-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.login-modal.active { display: flex; }
.modal-content {
    background: #fff;
    border-radius: var(--radius);
    max-width: 450px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px 20px;
    border: 2px solid var(--color-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    position: relative;
}
.modal-content .close-modal { position: absolute; top: 12px; right: 12px; }
.modal-content h2 { font-size: clamp(1.2rem, 1.5vw, 1.5rem); color: black ; margin-bottom: 16px; text-align: center; }
.switch-auth { text-align: center; margin-top: 12px; font-size: clamp(0.6rem, 0.7vw, 0.75rem); color: black; }
.error-msg {
    background: #f8d7da;
    color: #721c24;
    border: 2px solid #f5c6cb;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    margin-top: 10px;
}
.success-msg {
    background: #d4edda;
    color: #155724;
    border: 2px solid #c3e6cb;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    margin-top: 10px;
}

/* ================================================================
   28. TOAST
   ================================================================ */
.toast {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--radius);
    z-index: 9999;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    border: 2px solid var(--color-primary);
    max-width: 90%;
    text-align: center;
    animation: slideUp 0.3s ease;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ================================================================
   29–33. PARTNERS SECTION
   ================================================================ */
.partners-section {
    background: var(--color-bg-card);
    border-radius: var(--radius);
    padding: clamp(16px, 2.5vw, 40px) clamp(12px, 2vw, 32px);
    border: 2px solid var(--color-border);
    margin-bottom: clamp(12px, 2vw, 24px);
    overflow: hidden;
}
.partners-header {
    margin-bottom: clamp(20px, 3vw, 40px);
    position: relative;
}
.partners-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1vw, 16px);
}
.partners-header-logo {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.5vw, 32px);
    background: #fff;
    padding: clamp(12px, 1.5vw, 20px) clamp(20px, 3vw, 40px);
    border-radius: var(--radius);
    border: 2px solid rgb(22, 167, 224);
    box-shadow: 0 4px 20px rgba(221, 227, 230, 0.233);
    width: clamp(250px, 5vw, 600px);
    height: clamp(20px, 5vw, 20px);
    transition: all 0.3s ease;
    justify-content: flex-start;
}
.partners-header-logo:hover {
    box-shadow: 0 8px 30px rgba(233, 236, 238, 0.822);
    border-color: #35e6d7da;
}
.partners-header-logo img {
    width: clamp(50px, 5vw, 72px);
    height: clamp(50px, 5vw, 72px);
    border-radius: 50%;
    position: absolute;
    right: 640px;
    border: 2px solid rgba(10, 198, 255, 0.856);
    object-fit: cover;
    flex-shrink: 0;
    background: #fff;
    padding: 4px;
    transition: transform 0.3s ease;
}
.partners-header-logo:hover img { transform: scale(1.05); }
.partners-header-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.partners-title {
    font-size: clamp(1rem, 2.2vw, 1.6rem);
    font-weight: 700;
    color: rgba(3, 3, 3, 0.856);
    position: absolute;
    right: 480px;
    top: 10px;
    margin: 0;
    line-height: 1;
}
.partners-subtitle {
    font-size: clamp(0.6rem, 0.8vw, 0.9rem);
    color: rgba(11, 12, 11, 0.856);
    position: absolute;
    right: 400px;
    margin: 0;
    line-height: 5.3;
}

.partners-header-decoration {
    display: flex;
    align-items: center;
    gap: clamp(80px, 5vw, 160px);
    width: 100%;
    max-width: 400px;
    justify-content: center;
}
.decoration-star {
    font-size: clamp(1.5rem, 1vw, 3rem);
    color: var(--color-primary);
    animation: starSpin 8s linear infinite;
    display: inline-block;
    position: absolute;
    right: 460px;
    top: 9px;
}
@keyframes starSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.partner-slot-inner {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    min-width: clamp(38px, 4vw, 55px);
    min-height: clamp(38px, 4vw, 55px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    gap: 1px;
}
.partner-slot-inner .partner-logo-img {
    width: clamp(30px, 3.2vw, 45px);
    height: clamp(30px, 3.2vw, 45px);
    object-fit: contain;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: block;
    background: #fff;
    padding: 2px;
}
.partner-slot-inner .slot-code {
    font-size: clamp(0.2rem, 0.28vw, 0.32rem);
    font-weight: 700;
    color: var(--color-text-muted);
    opacity: 0.5;
    letter-spacing: 0.5px;
}
.partner-slot-inner:hover .partner-logo-img {
    transform: scale(1.08);
    filter: brightness(1.05) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

.partners-grid-mobile {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: clamp(4px, 0.6vw, 8px);
    margin-bottom: clamp(12px, 1.5vw, 20px);
}
.partners-grid-mobile .partner-item {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: clamp(6px, 0.8vw, 12px) clamp(4px, 0.5vw, 8px);
    text-align: center;
    transition: all 0.3s ease;
}
.partners-grid-mobile .partner-item i {
    font-size: clamp(1rem, 1.5vw, 1.8rem);
    color: var(--color-primary-dark);
    display: block;
    margin-bottom: 2px;
}
.partners-grid-mobile .partner-item .p-name {
    font-size: clamp(0.4rem, 0.6vw, 0.7rem);
    font-weight: 600;
    display: block;
    color: var(--color-text);
}
.partners-grid-mobile .partner-item .p-code {
    font-size: clamp(0.3rem, 0.4vw, 0.5rem);
    color: var(--color-text-muted);
    opacity: 0.5;
}

@media (min-width: 1025px) {
    .partners-star-container {
        display: flex !important;
        position: relative;
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
        aspect-ratio: 1 / 1;
        min-height: 400px;
        max-height: 550px;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at center, rgba(230, 180, 44, 0.04) 0%, transparent 70%);
    }
    .partners-grid-mobile { display: none !important; }
    #partnerSlotsContainer { display: contents; }

    .partner-star-center {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: clamp(100px, 14vw, 150px);
        height: clamp(100px, 14vw, 150px);
        z-index: 10;
    }
    .partner-star-center::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 160%; height: 160%;
        background: radial-gradient(circle at center, rgba(230, 211, 44, 0.4) 0%, rgba(230, 180, 44, 0.1) 40%, transparent 70%);
        border-radius: 50%;
        z-index: -1;
        animation: glowPulse 2.5s ease-in-out infinite;
    }
    @keyframes glowPulse {
        0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
        50%      { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    }
    .star-8point {
        position: relative;
        width: 100%;
        height: 100%;
        animation: starPulse 3s ease-in-out infinite;
    }
    @keyframes starPulse {
        0%, 100% { transform: scale(1); }
        50%      { transform: scale(1.06); }
    }
    .star-point {
        position: absolute;
        top: 50%; left: 50%;
        width: 30%; height: 30%;
        background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        transform-origin: center center;
        opacity: 0.95;
        transition: all 0.3s ease;
        box-shadow: 0 0 15px rgba(230, 180, 44, 0.4), inset 0 0 10px rgba(255, 215, 0, 0.3);
        border: 1px solid rgba(255, 215, 0, 0.2);
    }
    .star-point:hover {
        opacity: 1;
        transform: scale(1.2) !important;
        filter: brightness(1.3) drop-shadow(0 0 20px rgba(230, 180, 44, 0.6));
    }
    .point-n  { transform: translate(-50%, -50%) rotate(0deg); }
    .point-ne { transform: translate(-50%, -50%) rotate(45deg); }
    .point-e  { transform: translate(-50%, -50%) rotate(90deg); }
    .point-se { transform: translate(-50%, -50%) rotate(135deg); }
    .point-s  { transform: translate(-50%, -50%) rotate(180deg); }
    .point-sw { transform: translate(-50%, -50%) rotate(225deg); }
    .point-w  { transform: translate(-50%, -50%) rotate(270deg); }
    .point-nw { transform: translate(-50%, -50%) rotate(315deg); }

    .star-core {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 150%; height: 150%;
        background: radial-gradient(circle at center, #ffffff 0%, #fdf6e3 30%, #f8f0d0 60%, #f0e0b0 100%);
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 50px rgba(230, 180, 44, 0.4), 0 0 100px rgba(230, 180, 44, 0.2), 0 0 150px rgba(230, 180, 44, 0.1), inset 0 0 30px rgba(230, 180, 44, 0.15);
        z-index: 2;
        padding: 6px;
        animation: coreGlow 2s ease-in-out infinite;
    }
    @keyframes coreGlow {
        0%, 100% { box-shadow: 0 0 50px rgba(230, 180, 44, 0.4), 0 0 100px rgba(230, 180, 44, 0.2), 0 0 150px rgba(230, 180, 44, 0.1), inset 0 0 30px rgba(230, 180, 44, 0.15); }
        50%      { box-shadow: 0 0 60px rgba(230, 180, 44, 0.6), 0 0 120px rgba(230, 180, 44, 0.3), 0 0 180px rgba(230, 180, 44, 0.15), inset 0 0 40px rgba(230, 180, 44, 0.25); }
    }
    .star-core::before {
        content: '';
        position: absolute;
        top: -12px; left: -12px; right: -12px; bottom: -12px;
        border-radius: 50%;
        border: 2px dashed rgba(230, 180, 44, 0.3);
        animation: spin 20s linear infinite;
    }
    @keyframes spin {
        0%   { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .star-core .star-logo {
        width: clamp(100px, 10vw, 150px);
        height: clamp(100px, 10vw, 150px);
        border-radius: 50%;
        object-fit: cover;
        background: #fff;
        padding: 3px;
        box-shadow: 0 0 20px rgba(230, 180, 44, 0.2);
        z-index: 3;
        position: relative;
    }
    .star-core .star-label {
        font-size: clamp(0.5rem, 0.6vw, 0.85rem);
        font-weight: 700;
        color: var(--color-primary-dark);
        letter-spacing: 0.5px;
        margin-top: 2px;
        z-index: 3;
        position: relative;
    }
    .star-core .star-sub {
        font-size: clamp(0.4rem, 0.5vw, 0.7rem);
        color: var(--color-text-muted);
        font-weight: 600;
        letter-spacing: 0.5px;
        z-index: 3;
        position: relative;
    }
    .star-dots {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 85%; height: 85%;
        pointer-events: none;
        z-index: 1;
    }
    .star-dots span {
        position: absolute;
        width: 3px; height: 3px;
        background: var(--color-primary);
        border-radius: 50%;
        opacity: 0.4;
        animation: dotPulse 2s ease-in-out infinite;
    }
    .star-dots span:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
    .star-dots span:nth-child(2) { top: 50%; right: 0; transform: translateY(-50%); animation-delay: 0.25s; }
    .star-dots span:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: 0.5s; }
    .star-dots span:nth-child(4) { top: 50%; left: 0; transform: translateY(-50%); animation-delay: 0.75s; }
    .star-dots span:nth-child(5) { top: 15%; right: 15%; animation-delay: 0.1s; }
    .star-dots span:nth-child(6) { bottom: 15%; right: 15%; animation-delay: 0.35s; }
    .star-dots span:nth-child(7) { bottom: 15%; left: 15%; animation-delay: 0.6s; }
    .star-dots span:nth-child(8) { top: 15%; left: 15%; animation-delay: 0.85s; }
    @keyframes dotPulse {
        0%, 100% { opacity: 0.2; transform: scale(1); }
        50%      { opacity: 0.8; transform: scale(1.5); }
    }

    .partner-slot {
        position: absolute;
        z-index: 5;
        transition: all 0.3s ease;
    }
    .partner-slot:hover { transform: scale(1.15) !important; z-index: 6; }
    .partner-slot:hover .partner-slot-inner {
        border-color: var(--color-primary);
        box-shadow: 0 6px 20px rgba(230, 180, 44, 0.25);
        background: #fff;
    }

    .slot-ad1  { top: 20%; left: 50%; transform: translate(-50%, -50%); }
    .slot-ad1 .partner-slot-inner { border-color: var(--color-primary); background: rgba(230, 180, 44, 0.08); }
    .slot-ad2  { top: 30%; right: 20%; transform: translate(50%, -50%); }
    .slot-ad3  { top: 50%; right: 12%; transform: translate(0, -50%); }
    .slot-ad4  { bottom: 30%; right: 20%; transform: translate(50%, 50%); }
    .slot-ad5  { bottom: 20%; left: 50%; transform: translate(-50%, 50%); }
    .slot-ad6  { bottom: 30%; left: 20%; transform: translate(-50%, 50%); }
    .slot-ad7  { top: 50%; left: 12%; transform: translate(0, -50%); }
    .slot-ad8  { top: 30%; left: 20%; transform: translate(-50%, -50%); }
    .slot-ad9  { top: 7%; left: 50%; transform: translateX(-50%); }
    .slot-ad9 .partner-slot-inner { border-color: var(--color-primary-dark); }
    .slot-ad10 { top: 8%; right: 32%; transform: translate(50%, -50%); }
    .slot-ad11 { top: 20%; right: 14%; transform: translate(0, -50%); }
    .slot-ad12 { top: 38%; right: 5%; transform: translate(0, -50%); }
    .slot-ad13 { top: 58%; right: 5%; transform: translate(0, -50%); }
    .slot-ad14 { bottom: 20%; right: 14%; transform: translate(0, 50%); }
    .slot-ad15 { bottom: 8%; right: 32%; transform: translate(50%, 50%); }
    .slot-ad16 { bottom: 7%; left: 50%; transform: translateX(-50%); }
    .slot-ad16 .partner-slot-inner { border-color: var(--color-primary-dark); }
    .slot-ad17 { bottom: 8%; left: 32%; transform: translate(-50%, 50%); }
    .slot-ad18 { bottom: 20%; left: 14%; transform: translate(0, 50%); }
    .slot-ad19 { bottom: 38%; left: 5%; transform: translate(0, 50%); }
    .slot-ad20 { top: 38%; left: 5%; transform: translate(0, -50%); }
    .slot-ad21 { top: 20%; left: 14%; transform: translate(0, -50%); }
    .slot-ad22 { top: 8%; left: 32%; transform: translate(-50%, -50%); }
    .slot-ad23 { top: 14%; right: 23%; transform: translate(50%, -50%); }
    .slot-ad24 { bottom: 14%; right: 23%; transform: translate(50%, 50%); }
    .slot-ad25 { bottom: 14%; left: 23%; transform: translate(-50%, 50%); }
    .slot-ad26 { top: 14%; left: 23%; transform: translate(-50%, -50%); }
    .slot-ad27 { top: -2%; left: 50%; transform: translateX(-50%); }
    .slot-ad27 .partner-slot-inner { border-color: var(--color-primary); border-width: 2.5px; }
    .slot-ad28 { top: 50%; right: -2%; transform: translate(0, -50%); }
    .slot-ad28 .partner-slot-inner { border-color: var(--color-primary); border-width: 2.5px; }
    .slot-ad29 { bottom: -2%; left: 50%; transform: translateX(-50%); }
    .slot-ad29 .partner-slot-inner { border-color: var(--color-primary); border-width: 2.5px; }
    .slot-ad30 { top: 50%; left: -2%; transform: translate(0, -50%); }
    .slot-ad30 .partner-slot-inner { border-color: var(--color-primary); border-width: 2.5px; }
}

.partner-star-center .star-rings {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
.partner-star-center .star-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid transparent;
    pointer-events: none;
    will-change: transform, opacity, border-color, box-shadow;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.partner-star-center .star-ring.ring-green {
    width: 130%; height: 130%;
    animation: ringSizeGreen 3s ease-in-out infinite, ringColorCycle 6s ease-in-out infinite;
}
.partner-star-center .star-ring.ring-red {
    width: 175%; height: 175%;
    animation: ringSizeRed 3.5s ease-in-out infinite, ringColorCycle 6s ease-in-out infinite;
    animation-delay: 0.4s, 0.4s;
}
.partner-star-center .star-ring.ring-blue {
    width: 220%; height: 220%;
    animation: ringSizeBlue 4s ease-in-out infinite, ringColorCycle 6s ease-in-out infinite;
    animation-delay: 0.8s, 0.8s;
}
@keyframes ringSizeGreen {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes ringSizeRed {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes ringSizeBlue {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes ringColorCycle {
    0% {
        border-color: rgba(34, 197, 94, 0.75);
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.7), 0 0 40px rgba(34, 197, 94, 0.5), 0 0 80px rgba(34, 197, 94, 0.3), inset 0 0 20px rgba(34, 197, 94, 0.35);
        opacity: 0.9;
    }
    33% {
        border-color: rgba(239, 68, 68, 0.75);
        box-shadow: 0 0 22px rgba(239, 68, 68, 0.7), 0 0 44px rgba(239, 68, 68, 0.5), 0 0 88px rgba(239, 68, 68, 0.3), inset 0 0 22px rgba(239, 68, 68, 0.35);
        opacity: 1;
    }
    66% {
        border-color: rgba(59, 130, 246, 0.75);
        box-shadow: 0 0 24px rgba(59, 130, 246, 0.7), 0 0 48px rgba(59, 130, 246, 0.5), 0 0 96px rgba(59, 130, 246, 0.3), inset 0 0 24px rgba(59, 130, 246, 0.35);
        opacity: 0.95;
    }
    100% {
        border-color: rgba(34, 197, 94, 0.75);
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.7), 0 0 40px rgba(34, 197, 94, 0.5), 0 0 80px rgba(34, 197, 94, 0.3), inset 0 0 20px rgba(34, 197, 94, 0.35);
        opacity: 0.9;
    }
}
.partner-star-center .star-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px dashed currentColor;
    opacity: 0.35;
    animation: ringSpin 14s linear infinite;
}
.partner-star-center .star-ring.ring-green::before { animation-duration: 14s; }
.partner-star-center .star-ring.ring-red::before   { animation-duration: 18s; animation-direction: reverse; }
.partner-star-center .star-ring.ring-blue::before  { animation-duration: 22s; }
@keyframes ringSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ================================================================
   34. ENTERTAINMENT HUB MODAL
   ================================================================ */
.entertainment-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2500;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
}
.entertainment-modal.active { display: flex; }
.ent-container {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 1100px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: entSlideIn 0.3s ease;
}
@keyframes entSlideIn {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 1.8vw, 20px) clamp(14px, 2vw, 24px);
    border-bottom: 2px solid var(--color-border);
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    flex-shrink: 0;
}
.ent-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(0.95rem, 1.5vw, 1.35rem);
    font-weight: 800;
    color: var(--color-text);
}
.ent-header-title .ent-badge {
    font-size: clamp(0.45rem, 0.6vw, 0.65rem);
    background: #dc3545;
    color: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.ent-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    background: var(--color-bg-card);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.ent-tabs::-webkit-scrollbar { display: none; }
.ent-tab {
    flex: 1;
    min-width: 100px;
    padding: clamp(10px, 1.3vw, 16px) clamp(12px, 1.5vw, 20px);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.7rem, 0.9vw, 0.9rem);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.ent-tab:hover { background: rgba(230, 180, 44, 0.06); color: var(--color-text); }
.ent-tab.active { color: var(--color-primary-dark); border-bottom-color: var(--color-primary); background: #fff; }
.ent-tab-count {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 700;
}
.ent-tab.active .ent-tab-count { background: var(--color-primary); color: var(--color-text); }
.ent-actions {
    display: flex;
    gap: clamp(6px, 0.8vw, 10px);
    padding: clamp(10px, 1.3vw, 16px) clamp(14px, 2vw, 24px);
    border-bottom: 1px solid var(--color-border);
    background: #fff;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.ent-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: clamp(8px, 1vh, 10px) clamp(12px, 1.4vw, 18px);
    background: var(--color-primary);
    color: var(--color-text);
    border: 2px solid var(--color-primary-dark);
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 40px;
}
.ent-upload-btn:hover { background: var(--color-primary-light); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(230, 180, 44, 0.3); }
.ent-upload-btn.admin { background: var(--color-text); color: #fff; border-color: #000; }
.ent-upload-btn.admin:hover { background: #333; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.ent-search-box {
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-alt);
    transition: border-color 0.2s ease;
}
.ent-search-box:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(230, 180, 44, 0.15); }
.ent-search-box i { color: var(--color-text-muted); font-size: 0.85rem; }
.ent-search-box input {
    flex: 1;
    padding: 10px 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    color: var(--color-text);
    min-height: 40px;
}
.ent-content {
    flex: 1;
    overflow-y: auto;
    padding: clamp(14px, 2vw, 24px);
    background: var(--color-bg-alt);
    min-height: 250px;
}
.ent-panel { display: none; }
.ent-panel.active { display: block; }
.ent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: clamp(10px, 1.2vw, 16px);
}
.ent-card {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}
.ent-card:hover { transform: translateY(-4px); border-color: var(--color-primary); box-shadow: 0 12px 30px rgba(230, 180, 44, 0.2); }
.ent-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #2b2b2b, #1a1a1a);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ent-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ent-card-thumb .ent-type-icon { font-size: clamp(2rem, 4vw, 3rem); color: rgba(255, 255, 255, 0.85); z-index: 1; }
.ent-card-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.7));
    pointer-events: none;
}
.ent-card-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(230, 180, 44, 0.95);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 2;
}
.ent-card:hover .ent-card-play { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
.ent-card-source {
    position: absolute;
    top: 8px; right: 8px;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    z-index: 2;
}
.ent-card-source.admin { background: #16a34a; }
.ent-card-source.user { background: #2563eb; }
.ent-card-body { padding: clamp(8px, 1vw, 12px); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ent-card-title {
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ent-card-artist { font-size: clamp(0.55rem, 0.7vw, 0.7rem); color: var(--color-text-muted); font-weight: 600; }
.ent-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    font-size: clamp(0.5rem, 0.6vw, 0.6rem);
    color: var(--color-text-muted);
    opacity: 0.75;
}
.ent-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: clamp(30px, 6vw, 60px) 20px;
    text-align: center;
    color: var(--color-text-muted);
}
.ent-empty i { font-size: clamp(2rem, 4vw, 3rem); opacity: 0.3; }
.ent-empty p { font-size: clamp(0.7rem, 0.9vw, 0.9rem); font-weight: 600; }
.ent-empty.show { display: flex; }
.ent-footer {
    padding: clamp(8px, 1vh, 12px) clamp(14px, 2vw, 24px);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-card);
    text-align: center;
    flex-shrink: 0;
}
.ent-footer-note {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ================================================================
   35. ENTERTAINMENT UPLOAD MODAL
   ================================================================ */
.ent-upload-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2600;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
}
.ent-upload-modal.active { display: flex; }
.upload-container {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: entSlideIn 0.3s ease;
}
.upload-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px);
    border-bottom: 2px solid var(--color-border);
    background: var(--color-bg-card);
    position: sticky;
    top: 0;
    z-index: 1;
    border-radius: var(--radius) var(--radius) 0 0;
}
.upload-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    color: var(--color-primary-dark);
}
#uploadForm { padding: clamp(14px, 1.8vw, 22px); }
.file-drop-zone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    padding: clamp(16px, 2.5vw, 28px) 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    background: var(--color-bg-alt);
}
.file-drop-zone:hover,
.file-drop-zone.drag-over { border-color: var(--color-primary); background: rgba(230, 180, 44, 0.08); }
.file-drop-zone i {
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    color: var(--color-primary-dark);
    margin-bottom: 8px;
    display: block;
}
.file-drop-zone p { font-size: clamp(0.7rem, 0.85vw, 0.85rem); color: var(--color-text); font-weight: 600; margin-bottom: 4px; }
.file-drop-zone .browse-link { color: var(--color-accent); text-decoration: underline; cursor: pointer; }
.file-drop-zone small { font-size: clamp(0.5rem, 0.65vw, 0.65rem); color: var(--color-text-muted); display: block; }
.file-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(34, 197, 94, 0.08);
    border: 2px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
}
.file-preview-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.file-preview-info > i { font-size: 1.3rem; color: #16a34a; flex-shrink: 0; }
.file-preview-info > div { display: flex; flex-direction: column; min-width: 0; }
.file-preview-name {
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-preview-size { font-size: clamp(0.5rem, 0.65vw, 0.65rem); color: var(--color-text-muted); }
.file-remove-btn {
    background: transparent;
    border: none;
    color: #dc3545;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}
.file-remove-btn:hover { background: rgba(220, 53, 69, 0.1); }
.upload-progress {
    margin: 12px 0;
    position: relative;
    height: 22px;
    background: var(--color-bg-alt);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.upload-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    transition: width 0.15s linear;
    border-radius: 12px;
}
.upload-progress-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    font-weight: 700;
    color: var(--color-text);
}
.upload-status {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    margin: 8px 0;
    font-weight: 600;
}
.upload-status.success { background: #d4edda; color: #155724; border: 2px solid #c3e6cb; }
.upload-status.error { background: #f8d7da; color: #721c24; border: 2px solid #f5c6cb; }
.upload-actions { display: flex; gap: 8px; margin-top: 12px; }
.upload-submit-btn,
.upload-cancel-btn {
    padding: clamp(10px, 1.2vh, 14px) clamp(14px, 1.5vw, 20px);
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.upload-submit-btn {
    flex: 1;
    background: var(--color-primary);
    color: var(--color-text);
    border: 2px solid var(--color-primary-dark);
}
.upload-submit-btn:hover { background: var(--color-primary-light); transform: translateY(-1px); }
.upload-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.upload-cancel-btn {
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    border: 2px solid var(--color-border);
}
.upload-cancel-btn:hover { background: #e2e6ea; color: var(--color-text); }

/* ================================================================
   36. MARKET HUB
   ================================================================ */
.market-modal,
.market-shop-modal,
.market-auth-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2500;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
}
.market-modal.active,
.market-shop-modal.active,
.market-auth-modal.active { display: flex; }
.market-shop-modal { z-index: 2700; }
.market-auth-modal { z-index: 2800; }

.market-container {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 1200px;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: entSlideIn 0.3s ease;
}
.market-shop-container {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 780px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: entSlideIn 0.3s ease;
}
.market-auth-container {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: entSlideIn 0.3s ease;
}

.market-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 1.8vw, 20px) clamp(14px, 2vw, 24px);
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    flex-shrink: 0;
    border-radius: var(--radius) var(--radius) 0 0;
}
.market-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(0.95rem, 1.5vw, 1.35rem);
    font-weight: 800;
    color: #fff;
}
.market-header-title .market-badge {
    font-size: clamp(0.45rem, 0.6vw, 0.65rem);
    background: #fbbf24;
    color: #1a1a1a;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.market-header .window-close-btn { color: #fff; }
.market-header .window-close-btn:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

.market-location-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: clamp(8px, 1vh, 12px) clamp(14px, 2vw, 24px);
    background: rgba(5, 150, 105, 0.08);
    border-bottom: 1px solid var(--color-border);
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    color: var(--color-text);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.market-location-bar i { color: #059669; }
.market-location-btn {
    margin-left: auto;
    padding: 6px 14px;
    background: #059669;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.market-location-btn:hover { background: #047857; transform: translateY(-1px); }

.market-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    background: #fff;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.market-tabs::-webkit-scrollbar { display: none; }
.market-tab {
    flex: 1;
    min-width: 130px;
    padding: clamp(10px, 1.3vw, 14px) clamp(12px, 1.5vw, 18px);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.65rem, 0.85vw, 0.85rem);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.market-tab:hover { background: rgba(5, 150, 105, 0.06); color: #059669; }
.market-tab.active { color: #059669; border-bottom-color: #059669; background: #fff; }
.market-tab-count {
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 700;
}
.market-tab.active .market-tab-count { background: #059669; color: #fff; }

.market-filters {
    display: flex;
    gap: 8px;
    padding: clamp(10px, 1.2vw, 14px) clamp(14px, 2vw, 24px);
    border-bottom: 1px solid var(--color-border);
    background: #fff;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.market-filter-search {
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-alt);
    transition: border-color 0.2s ease;
}
.market-filter-search:focus-within { border-color: #059669; box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12); }
.market-filter-search i { color: var(--color-text-muted); font-size: 0.85rem; }
.market-filter-search input {
    flex: 1;
    padding: 9px 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    color: var(--color-text);
    min-height: 38px;
}
.market-select {
    padding: 9px 12px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    background: #fff;
    cursor: pointer;
    min-height: 38px;
    min-width: 140px;
    outline: none;
}
.market-select:focus { border-color: #059669; box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12); }
.market-select.full { width: 100%; }

.market-content {
    flex: 1;
    overflow-y: auto;
    padding: clamp(14px, 2vw, 24px);
    background: var(--color-bg-alt);
    min-height: 300px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.market-content::-webkit-scrollbar { width: 10px; }
.market-content::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
    border: 2px solid var(--color-bg-alt);
}
.market-panel { display: none; }
.market-panel.active { display: block; }

.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
}
.market-shop-card {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}
.market-shop-card:hover {
    transform: translateY(-4px);
    border-color: #059669;
    box-shadow: 0 12px 30px rgba(5, 150, 105, 0.18);
}
.market-shop-thumb {
    height: clamp(100px, 12vh, 130px);
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #059669;
    border-bottom: 2px solid var(--color-border);
}
.market-shop-body { padding: clamp(10px, 1.2vw, 14px); flex: 1; display: flex; flex-direction: column; gap: 5px; }
.market-shop-name {
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.3;
}
.market-shop-meta {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.market-shop-distance {
    color: #059669;
    font-weight: 700;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.market-shop-cat-badge {
    background: var(--color-bg-alt);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9em;
    text-transform: capitalize;
}
.market-shop-products-count {
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    color: var(--color-text-muted);
    margin-top: 4px;
}
.market-shop-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.market-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: clamp(40px, 7vw, 80px) 20px;
    text-align: center;
    color: var(--color-text-muted);
}
.market-empty i { font-size: clamp(2.4rem, 5vw, 3.5rem); opacity: 0.25; color: #059669; }
.market-empty p { font-size: clamp(0.75rem, 0.95vw, 0.95rem); font-weight: 600; }
.market-empty small { font-size: clamp(0.6rem, 0.75vw, 0.75rem); opacity: 0.75; }
.market-empty.show { display: flex; }

.market-btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.65rem, 0.85vw, 0.85rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px solid transparent;
}
.market-btn-primary {
    background: #059669;
    color: #fff;
    border-color: #047857;
}
.market-btn-primary:hover { background: #047857; transform: translateY(-1px); }
.market-btn-outline {
    background: #fff;
    color: #059669;
    border-color: #059669;
}
.market-btn-outline:hover { background: rgba(5, 150, 105, 0.08); }
.market-btn.full { width: 100%; }
.market-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.market-card {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: clamp(14px, 1.8vw, 22px);
    margin-bottom: 14px;
}
.market-card h3 {
    font-size: clamp(0.85rem, 1vw, 1rem);
    font-weight: 800;
    color: #059669;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.market-form { display: flex; flex-direction: column; gap: 12px; }
.market-form-row { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.market-form-row:has(.market-geo-btn) { grid-template-columns: 1fr 1fr auto; align-items: end; }
@media (max-width: 600px) {
    .market-form-row { grid-template-columns: 1fr; }
    .market-form-row:has(.market-geo-btn) { grid-template-columns: 1fr; }
}
.market-form-group { display: flex; flex-direction: column; gap: 5px; }
.market-form-group label {
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    font-weight: 700;
    color: var(--color-text);
}
.market-form-group input,
.market-form-group select,
.market-form-group textarea,
.market-input {
    padding: 9px 12px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    outline: none;
    min-height: 40px;
    background: #fff;
    color: var(--color-text);
    width: 100%;
}
.market-form-group input:focus,
.market-form-group select:focus,
.market-form-group textarea:focus,
.market-input:focus {
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
}
.market-form-group textarea { resize: vertical; min-height: 60px; }
.market-geo-btn { padding: 10px 14px; min-height: 40px; white-space: nowrap; }

.market-vendor-auth { display: flex; justify-content: center; padding: 20px 0; }
.market-vendor-login-card {
    background: #fff;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    padding: clamp(20px, 3vw, 40px);
    max-width: 420px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.market-vendor-login-card i { font-size: 3rem; color: #059669; opacity: 0.8; }
.market-vendor-login-card h3 { font-size: 1.15rem; color: var(--color-text); }
.market-vendor-login-card p { font-size: 0.85rem; color: var(--color-text-muted); }

.market-vendor-hello {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(5, 150, 105, 0.08);
    border-radius: var(--radius);
    margin-bottom: 14px;
    font-size: clamp(0.75rem, 0.9vw, 0.9rem);
    flex-wrap: wrap;
}
.market-vendor-hello i { color: #059669; font-size: 1.3rem; }
.market-logout-btn {
    margin-left: auto;
    padding: 6px 12px;
    background: transparent;
    border: 2px solid #059669;
    border-radius: 8px;
    color: #059669;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.market-logout-btn:hover { background: #059669; color: #fff; }

.market-my-shop {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.market-my-shop-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.market-my-shop-name { font-size: 0.9rem; font-weight: 800; color: var(--color-text); }
.market-my-shop-meta { font-size: 0.7rem; color: var(--color-text-muted); }
.market-my-shop-actions { display: flex; gap: 6px; }
.market-my-shop-actions button {
    padding: 6px 12px;
    border-radius: 6px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.7rem;
    cursor: pointer;
    border: 2px solid #059669;
    background: transparent;
    color: #059669;
    min-height: 32px;
    transition: all 0.2s ease;
}
.market-my-shop-actions button:hover { background: #059669; color: #fff; }
.market-my-shop-actions button.danger { border-color: #dc2626; color: #dc2626; }
.market-my-shop-actions button.danger:hover { background: #dc2626; color: #fff; }

.market-shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px);
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    flex-shrink: 0;
}
.market-back-btn {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.market-back-btn:hover { background: rgba(255, 255, 255, 0.28); }
.market-shop-header-text { flex: 1; min-width: 0; }
.market-shop-category {
    font-size: 0.65rem;
    font-weight: 700;
    color: #a7f3d0;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.market-shop-header-text h2 {
    font-size: clamp(0.9rem, 1.2vw, 1.15rem);
    font-weight: 800;
    margin: 0;
    color: #fff;
}
.market-shop-header .window-close-btn { color: #fff; }
.market-shop-header .window-close-btn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.market-shop-body {
    flex: 1;
    overflow-y: auto;
    padding: clamp(14px, 2vw, 22px);
    background: var(--color-bg-alt);
}
.market-shop-info {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    padding: clamp(12px, 1.5vw, 18px);
    margin-bottom: 14px;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    color: var(--color-text);
    line-height: 1.6;
}
.market-shop-info i { color: #059669; margin-right: 6px; }
.market-section-subtitle {
    font-size: clamp(0.85rem, 1vw, 1rem);
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.market-section-subtitle i { color: #059669; }
.market-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.market-product-card {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s ease;
}
.market-product-card:hover { border-color: #059669; box-shadow: 0 6px 20px rgba(5, 150, 105, 0.15); }
.market-product-name { font-size: 0.85rem; font-weight: 800; color: var(--color-text); }
.market-product-cat { font-size: 0.65rem; color: var(--color-text-muted); text-transform: capitalize; }
.market-product-price {
    font-size: 1rem;
    font-weight: 900;
    color: #059669;
    margin-top: 4px;
}
.market-product-stock {
    font-size: 0.6rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.market-add-to-cart-btn {
    margin-top: 8px;
    padding: 8px 12px;
    background: #059669;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.market-add-to-cart-btn:hover { background: #047857; transform: translateY(-1px); }
.market-add-to-cart-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; }

.market-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.market-cart-header h3 {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 800;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.market-cart-header h3 i { color: #059669; }
.market-clear-cart-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: 2px solid #dc2626;
    background: transparent;
    color: #dc2626;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.market-clear-cart-btn:hover { background: #dc2626; color: #fff; }
.market-cart-items { display: flex; flex-direction: column; gap: 8px; }
.market-cart-item {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.market-cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.market-cart-item-name { font-size: 0.85rem; font-weight: 800; color: var(--color-text); }
.market-cart-item-price { font-size: 0.7rem; color: var(--color-text-muted); }
.market-cart-item-qty {
    display: flex;
    align-items: center;
    gap: 6px;
}
.market-cart-item-qty button {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid #059669;
    background: #fff;
    color: #059669;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.market-cart-item-qty button:hover { background: #059669; color: #fff; }
.market-cart-item-qty span { font-weight: 800; min-width: 26px; text-align: center; font-size: 0.85rem; }
.market-cart-item-total { font-weight: 800; color: #059669; font-size: 0.9rem; white-space: nowrap; }
.market-cart-item-remove {
    background: transparent;
    border: none;
    color: #dc2626;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
}
.market-cart-item-remove:hover { background: rgba(220, 38, 38, 0.1); }

.market-checkout-section { margin-top: 20px; }
.market-checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 720px) { .market-checkout-grid { grid-template-columns: 1fr; } }
.market-checkout-summary {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: clamp(12px, 1.5vw, 18px);
}
.market-checkout-summary h3 { font-size: 0.95rem; margin-bottom: 10px; color: #059669; font-weight: 800; }
.market-checkout-line {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.8rem;
    color: var(--color-text);
}
.market-checkout-line.total {
    border-top: 2px solid var(--color-border);
    padding-top: 10px;
    margin-top: 6px;
    font-weight: 800;
    font-size: 0.95rem;
    color: #059669;
}
.market-delivery-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}
.market-delivery-option:hover { background: #ecfdf5; border-color: #059669; }
.market-delivery-option input { margin-left: 6px; cursor: pointer; }

.market-orders-list { display: flex; flex-direction: column; gap: 10px; }
.market-order-card {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.market-order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-text);
    flex-wrap: wrap;
    gap: 6px;
}
.market-order-status {
    font-size: 0.6rem;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.market-order-status.pending { background: #fef3c7; color: #92400e; }
.market-order-status.paid { background: #d1fae5; color: #065f46; }
.market-order-status.delivered { background: #dbeafe; color: #1e40af; }
.market-order-items {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.market-order-total { font-weight: 800; color: #059669; font-size: 0.95rem; text-align: right; }

.market-auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px);
    border-bottom: 2px solid var(--color-border);
    background: var(--color-bg-card);
    position: sticky;
    top: 0;
    z-index: 1;
}
.market-auth-header h2 {
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 800;
    color: #059669;
}
.market-auth-container .market-form { padding: clamp(14px, 1.8vw, 22px); }
.market-auth-toggle-text {
    text-align: center;
    font-size: 0.75rem;
    margin-top: 8px;
}
.market-auth-toggle-text a {
    color: #059669;
    text-decoration: none;
    font-weight: 700;
}
.market-auth-toggle-text a:hover { text-decoration: underline; }

.market-footer {
    padding: clamp(8px, 1vh, 12px) clamp(14px, 2vw, 24px);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-card);
    text-align: center;
    flex-shrink: 0;
}
.market-footer-note {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.market-footer-note i { color: #059669; }

/* ================================================================
   37. EDUCATION HUB MODAL
   ================================================================ */
.education-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2500;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
}
.education-modal.active { display: flex; }
.edu-container {
    background: #ffffff;
    border-radius: 16px;
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 1150px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: entSlideIn 0.3s ease;
}
.edu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(14px, 2vw, 22px) clamp(16px, 2.5vw, 26px);
    background: linear-gradient(135deg, #2b6cb0 0%, #1a365d 100%);
    color: #ffffff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.edu-header::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.edu-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    font-weight: 800;
    color: #ffffff;
    position: relative;
    z-index: 1;
}
.edu-header-title i { font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: #f0c040; }
.edu-badge {
    font-size: clamp(0.45rem, 0.6vw, 0.65rem);
    background: #dc3545;
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.edu-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    background: #f8f9fa;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.edu-tabs::-webkit-scrollbar { display: none; }
.edu-tab {
    flex: 1;
    min-width: 120px;
    padding: clamp(12px, 1.5vw, 18px) clamp(10px, 1.2vw, 16px);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.65rem, 0.85vw, 0.82rem);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.edu-tab i { font-size: clamp(0.7rem, 0.9vw, 0.9rem); transition: transform 0.25s ease; }
.edu-tab:hover { background: rgba(43, 108, 176, 0.06); color: var(--color-accent); }
.edu-tab:hover i { transform: scale(1.12); }
.edu-tab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    background: #ffffff;
}
.edu-tab-count {
    font-size: clamp(0.5rem, 0.62vw, 0.65rem);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}
.edu-tab.active .edu-tab-count { background: var(--color-accent); color: #ffffff; }
.edu-actions {
    display: flex;
    gap: clamp(8px, 1vw, 12px);
    padding: clamp(12px, 1.5vw, 18px) clamp(16px, 2.5vw, 26px);
    border-bottom: 1px solid var(--color-border);
    background: #ffffff;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
}
.edu-tutor-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: clamp(9px, 1.1vh, 12px) clamp(14px, 1.6vw, 20px);
    background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%);
    color: #ffffff;
    border: 2px solid #1e4d7a;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.65rem, 0.8vw, 0.82rem);
    cursor: pointer;
    transition: all 0.25s ease;
    min-height: 42px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(43, 108, 176, 0.25);
}
.edu-tutor-btn:hover {
    background: linear-gradient(135deg, #4299e1 0%, #63b3ed 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(43, 108, 176, 0.35);
}
.edu-search-box {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-alt);
    transition: all 0.25s ease;
}
.edu-search-box:focus-within {
    border-color: var(--color-accent);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(43, 108, 176, 0.12);
}
.edu-search-box i { color: var(--color-text-muted); font-size: clamp(0.8rem, 0.95vw, 0.95rem); flex-shrink: 0; }
.edu-search-box input {
    flex: 1;
    padding: 11px 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    color: var(--color-text);
    min-height: 42px;
}
.edu-content {
    flex: 1;
    overflow-y: auto;
    padding: clamp(16px, 2vw, 26px);
    background: var(--color-bg-alt);
    min-height: 280px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.edu-content::-webkit-scrollbar { width: 10px; }
.edu-content::-webkit-scrollbar-track { background: transparent; }
.edu-content::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
    border: 2px solid var(--color-bg-alt);
}
.edu-panel { display: none; animation: eduPanelFade 0.3s ease; }
.edu-panel.active { display: block; }
@keyframes eduPanelFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.edu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
}
.edu-library-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.edu-lib-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 22px;
    border: 2px solid var(--color-border);
    background: #ffffff;
    color: var(--color-text-muted);
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.58rem, 0.72vw, 0.72rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
}
.edu-lib-filter:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-1px); }
.edu-lib-filter.active {
    background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%);
    color: #ffffff;
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(43, 108, 176, 0.3);
}
.edu-card {
    background: #ffffff;
    border: 2px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
}
.edu-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-accent);
    box-shadow: 0 16px 40px rgba(43, 108, 176, 0.22);
}
.edu-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #2b6cb0 0%, #1a365d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.edu-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.edu-card:hover .edu-card-thumb img { transform: scale(1.08); }
.edu-card-thumb .edu-type-icon {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    color: rgba(255, 255, 255, 0.92);
    z-index: 1;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}
.edu-card:hover .edu-card-thumb .edu-type-icon { transform: scale(1.12); }
.edu-card-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.7));
    pointer-events: none;
}
.edu-card-type {
    position: absolute;
    top: 10px; left: 10px;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    z-index: 2;
    backdrop-filter: blur(4px);
}
.edu-card-badge {
    position: absolute;
    top: 10px; right: 10px;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 12px;
    color: #ffffff;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    z-index: 2;
    backdrop-filter: blur(4px);
}
.edu-card-badge.free { background: #16a34a; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.4); }
.edu-card-badge.paid { background: #dc2626; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4); }
.edu-card-badge.featured { background: #d97706; box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4); }
.edu-card-body {
    padding: clamp(10px, 1.2vw, 14px);
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}
.edu-card-title {
    font-size: clamp(0.72rem, 0.88vw, 0.88rem);
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.edu-card-sub {
    font-size: clamp(0.56rem, 0.72vw, 0.72rem);
    color: var(--color-accent);
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.edu-card-desc {
    font-size: clamp(0.52rem, 0.66vw, 0.66rem);
    color: var(--color-text-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.edu-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: clamp(0.5rem, 0.62vw, 0.62rem);
    color: var(--color-text-muted);
    gap: 8px;
}
.edu-card-price {
    font-weight: 800;
    color: var(--color-accent);
    font-size: clamp(0.62rem, 0.78vw, 0.78rem);
    white-space: nowrap;
}
.edu-card-price.free { color: #16a34a; }
.edu-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: clamp(40px, 7vw, 80px) 20px;
    text-align: center;
    color: var(--color-text-muted);
}
.edu-empty i { font-size: clamp(2.4rem, 5vw, 3.5rem); opacity: 0.25; color: var(--color-accent); }
.edu-empty p { font-size: clamp(0.72rem, 0.92vw, 0.92rem); font-weight: 600; opacity: 0.75; }
.edu-empty.show { display: flex; }
.edu-footer {
    padding: clamp(10px, 1.3vh, 14px) clamp(16px, 2.5vw, 26px);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-card);
    text-align: center;
    flex-shrink: 0;
}
.edu-footer-note {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.edu-footer-note i { color: var(--color-accent); }

.edu-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.edu-card-action-btn {
    flex: 1;
    padding: 6px 8px;
    border-radius: 6px;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    border: 2px solid transparent;
}
.edu-card-action-btn.apply { background: var(--color-accent); color: #fff; border-color: #1e4d7a; }
.edu-card-action-btn.apply:hover { background: var(--color-accent-light); transform: translateY(-1px); }
.edu-card-action-btn.fees { background: var(--color-primary); color: var(--color-text); border-color: var(--color-primary-dark); }
.edu-card-action-btn.fees:hover { background: var(--color-primary-light); transform: translateY(-1px); }
.edu-card-action-btn:active { transform: scale(0.96); }

/* ================================================================
   38. ONLINE TUTOR MODAL
   ================================================================ */
.tutor-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2700;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
}
.tutor-modal.active { display: flex; }
.tutor-container {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: entSlideIn 0.3s ease;
}
.tutor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px);
    border-bottom: 2px solid var(--color-border);
    background: var(--color-bg-card);
    position: sticky;
    top: 0;
    z-index: 1;
    border-radius: var(--radius) var(--radius) 0 0;
}
.tutor-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    color: var(--color-accent);
}
#tutorForm { padding: clamp(14px, 1.8vw, 22px); }
.tutor-actions { display: flex; gap: 8px; margin-top: 12px; }
.tutor-submit-btn,
.tutor-cancel-btn {
    padding: clamp(10px, 1.2vh, 14px) clamp(14px, 1.5vw, 20px);
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.tutor-submit-btn {
    flex: 1;
    background: var(--color-accent);
    color: #fff;
    border: 2px solid #1e4d7a;
}
.tutor-submit-btn:hover { background: var(--color-accent-light); transform: translateY(-1px); }
.tutor-cancel-btn {
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    border: 2px solid var(--color-border);
}
.tutor-cancel-btn:hover { background: #e2e6ea; color: var(--color-text); }
.tutor-status {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    margin-top: 10px;
    font-weight: 600;
}
.tutor-status.success { background: #d4edda; color: #155724; border: 2px solid #c3e6cb; }
.tutor-status.error { background: #f8d7da; color: #721c24; border: 2px solid #f5c6cb; }

/* ================================================================
   39. ABOUT INSTITUTION MODAL
   ================================================================ */
.about-inst-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2750;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
}
.about-inst-modal.active { display: flex; }
.about-inst-container {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 780px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: entSlideIn 0.3s ease;
}
.about-inst-banner {
    position: relative;
    flex-shrink: 0;
    padding: clamp(16px, 2.5vw, 28px) clamp(16px, 2vw, 24px);
    overflow: hidden;
    color: #fff;
}
.about-inst-banner-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2b6cb0 0%, #1a365d 100%);
    z-index: 0;
}
.about-inst-banner-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 45%);
}
.about-inst-banner-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.5vw, 20px);
}
.about-inst-icon-wrap {
    width: clamp(56px, 7vw, 80px);
    height: clamp(56px, 7vw, 80px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    border: 3px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}
.about-inst-banner-text { min-width: 0; flex: 1; }
.about-inst-type {
    display: inline-block;
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 10px;
    border-radius: 12px;
    margin-bottom: 6px;
}
.about-inst-name {
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 4px;
    color: #fff;
}
.about-inst-location {
    font-size: clamp(0.6rem, 0.8vw, 0.8rem);
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.about-inst-close { position: absolute; top: 10px; right: 10px; z-index: 2; color: #fff; }
.about-inst-close:hover { background: rgba(255, 255, 255, 0.2); color: #fff; border-color: rgba(255, 255, 255, 0.3); }

.about-inst-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--color-bg-card);
    border-bottom: 2px solid var(--color-border);
    flex-shrink: 0;
}
.about-inst-stat {
    padding: clamp(10px, 1.3vw, 16px) clamp(8px, 1vw, 14px);
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.8vw, 10px);
    border-right: 1px solid var(--color-border);
}
.about-inst-stat:last-child { border-right: none; }
.about-inst-stat i { font-size: clamp(0.9rem, 1.2vw, 1.2rem); color: var(--color-accent); flex-shrink: 0; }
.about-inst-stat > div { display: flex; flex-direction: column; min-width: 0; }
.about-inst-stat-value {
    font-size: clamp(0.75rem, 1vw, 0.95rem);
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.about-inst-stat-label {
    font-size: clamp(0.45rem, 0.55vw, 0.6rem);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.about-inst-body {
    flex: 1;
    overflow-y: auto;
    padding: clamp(14px, 2vw, 24px);
    background: #fff;
}
.about-inst-section { margin-bottom: clamp(16px, 2vw, 22px); }
.about-inst-section:last-child { margin-bottom: 0; }
.about-inst-section-title {
    font-size: clamp(0.75rem, 0.95vw, 0.9rem);
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.about-inst-text {
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}
.about-inst-highlights { display: flex; flex-wrap: wrap; gap: 6px; }
.about-inst-highlight {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(43, 108, 176, 0.08);
    border: 1px solid rgba(43, 108, 176, 0.25);
    border-radius: 20px;
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    font-weight: 600;
    color: var(--color-accent);
}
.about-inst-programs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
}
.about-inst-program-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: clamp(0.55rem, 0.7vw, 0.72rem);
    color: var(--color-text);
    transition: all 0.2s ease;
}
.about-inst-program-item:hover { background: rgba(43, 108, 176, 0.06); border-color: var(--color-accent); }
.about-inst-program-item i { color: var(--color-accent); flex-shrink: 0; font-size: 0.9em; }
.about-inst-program-item .program-duration {
    margin-left: auto;
    font-size: 0.85em;
    color: var(--color-text-muted);
    opacity: 0.75;
    white-space: nowrap;
}
.about-inst-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.about-inst-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: var(--color-bg-alt);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}
.about-inst-contact-item > i {
    color: var(--color-accent);
    font-size: clamp(0.75rem, 0.95vw, 0.9rem);
    margin-top: 2px;
    flex-shrink: 0;
}
.about-inst-contact-item > div { display: flex; flex-direction: column; min-width: 0; }
.about-inst-contact-label {
    font-size: clamp(0.4rem, 0.5vw, 0.55rem);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
}
.about-inst-contact-value {
    font-size: clamp(0.55rem, 0.7vw, 0.72rem);
    color: var(--color-text);
    font-weight: 600;
    word-break: break-word;
    line-height: 1.3;
}
.about-inst-footer {
    display: flex;
    gap: 8px;
    padding: clamp(12px, 1.5vw, 16px) clamp(14px, 2vw, 22px);
    border-top: 2px solid var(--color-border);
    background: var(--color-bg-card);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.about-inst-action-btn {
    padding: clamp(10px, 1.2vh, 13px) clamp(14px, 1.5vw, 20px);
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px solid transparent;
    flex: 1;
    min-width: 110px;
}
.about-inst-action-btn.apply { background: var(--color-accent); color: #fff; border-color: #1e4d7a; }
.about-inst-action-btn.apply:hover { background: var(--color-accent-light); transform: translateY(-1px); }
.about-inst-action-btn.fees { background: var(--color-primary); color: var(--color-text); border-color: var(--color-primary-dark); }
.about-inst-action-btn.fees:hover { background: var(--color-primary-light); transform: translateY(-1px); }
.about-inst-action-btn.close { background: var(--color-bg-alt); color: var(--color-text-muted); border-color: var(--color-border); flex: 0 0 auto; }
.about-inst-action-btn.close:hover { background: #e2e6ea; color: var(--color-text); }
.about-inst-action-btn:active { transform: scale(0.97); }

/* ================================================================
   40. FEE STRUCTURE MODAL
   ================================================================ */
.fee-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2800;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
}
.fee-modal.active { display: flex; }
.fee-container {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 720px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: entSlideIn 0.3s ease;
}
.fee-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px);
    border-bottom: 2px solid var(--color-border);
    background: linear-gradient(135deg, #e6b42c, #c99a1e);
    color: var(--color-text);
    flex-shrink: 0;
    border-radius: var(--radius) var(--radius) 0 0;
}
.fee-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: clamp(0.9rem, 1.2vw, 1.15rem);
    color: var(--color-text);
}
.fee-institution-bar {
    padding: clamp(8px, 1vh, 12px) clamp(14px, 2vw, 22px);
    background: rgba(230, 180, 44, 0.1);
    border-bottom: 1px solid var(--color-border);
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.fee-institution-bar i { color: var(--color-primary-dark); }
.fee-content {
    flex: 1;
    overflow-y: auto;
    padding: clamp(14px, 2vw, 22px);
    background: var(--color-bg-alt);
}
.fee-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--color-border);
    margin-bottom: 12px;
}
.fee-table thead { background: var(--color-bg-card); }
.fee-table th {
    padding: clamp(8px, 1vh, 12px) clamp(10px, 1.2vw, 14px);
    text-align: left;
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    font-weight: 700;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-border);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.fee-table th:last-child { text-align: right; }
.fee-table td {
    padding: clamp(8px, 1vh, 12px) clamp(10px, 1.2vw, 14px);
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}
.fee-table tbody tr:hover { background: rgba(230, 180, 44, 0.04); }
.fee-table tbody tr:last-child td { border-bottom: none; }
.fee-table .fee-amount {
    text-align: right;
    font-weight: 800;
    color: var(--color-primary-dark);
    white-space: nowrap;
}
.fee-table .fee-currency { font-size: 0.85em; opacity: 0.7; margin-right: 2px; }
.fee-table .fee-program-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(43, 108, 176, 0.1);
    color: var(--color-accent);
    font-size: 0.7rem;
    margin-right: 8px;
    vertical-align: middle;
}
.fee-total-row td {
    background: rgba(230, 180, 44, 0.08);
    font-weight: 800;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    border-top: 2px solid var(--color-border);
}
.fee-footer {
    padding: clamp(10px, 1.2vh, 14px) clamp(14px, 2vw, 22px);
    border-top: 2px solid var(--color-border);
    background: #fff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fee-note {
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    color: var(--color-text-muted);
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.4;
}
.fee-note i { color: var(--color-accent); margin-top: 2px; }
.fee-apply-btn {
    padding: clamp(10px, 1.2vh, 14px) clamp(14px, 1.5vw, 20px);
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--color-primary);
    color: var(--color-text);
    border: 2px solid var(--color-primary-dark);
    width: 100%;
}
.fee-apply-btn:hover { background: var(--color-primary-light); transform: translateY(-1px); }

/* ================================================================
   41. APPLICATION FORM MODAL
   ================================================================ */
.app-form-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2800;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
}
.app-form-modal.active { display: flex; }
.app-form-container {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 800px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: entSlideIn 0.3s ease;
}
.app-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px);
    border-bottom: 2px solid var(--color-border);
    background: linear-gradient(135deg, #2b6cb0, #1a365d);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
    border-radius: var(--radius) var(--radius) 0 0;
}
.app-form-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: clamp(0.9rem, 1.2vw, 1.15rem);
    color: #fff;
}
.app-form-institution-bar {
    padding: clamp(8px, 1vh, 12px) clamp(14px, 2vw, 22px);
    background: rgba(43, 108, 176, 0.08);
    border-bottom: 1px solid var(--color-border);
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 56px;
    z-index: 1;
    backdrop-filter: blur(8px);
}
.app-form-institution-bar i { color: var(--color-accent); }
#institutionAppForm { padding: clamp(14px, 1.8vw, 22px); }
.app-form-section {
    margin-bottom: clamp(16px, 2vw, 24px);
    padding-bottom: clamp(14px, 1.5vw, 20px);
    border-bottom: 1px dashed var(--color-border);
}
.app-form-section:last-of-type { border-bottom: none; }
.app-form-section-title {
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: clamp(10px, 1.2vw, 14px);
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-form-hint {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: 10px;
}
.app-form-sub-label {
    display: block;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 6px;
    margin-top: 6px;
}
.app-form-row { display: grid; gap: 10px; margin-bottom: 10px; }
.app-form-row.two { grid-template-columns: 1fr 1fr; }
.app-form-row.three { grid-template-columns: 1fr 1fr 1fr; }
.app-form-row .form-group { margin-bottom: 0; }
.app-form-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    margin: 6px 0 12px;
}
.app-form-attachments-list {
    list-style: none;
    padding: 8px 12px;
    background: rgba(43, 108, 176, 0.06);
    border: 2px dashed rgba(43, 108, 176, 0.3);
    border-radius: 8px;
    margin-bottom: 12px;
}
.app-form-attachments-list li {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text);
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-form-attachments-list i { color: var(--color-accent); }
.edu-record-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 2px solid var(--color-border);
    margin-bottom: 8px;
}
.edu-record-table { width: 100%; border-collapse: collapse; min-width: 500px; }
.edu-record-table th {
    background: var(--color-bg-card);
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    font-weight: 700;
    color: var(--color-text);
    padding: 8px 6px;
    text-align: left;
    border-bottom: 2px solid var(--color-border);
}
.edu-record-table td { padding: 4px; border-bottom: 1px solid var(--color-border); }
.edu-record-table td input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: inherit;
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    background: transparent;
    outline: none;
    min-height: 32px;
}
.edu-record-table td input:focus { border-color: var(--color-accent); background: rgba(43, 108, 176, 0.05); }
.edu-record-add-btn {
    background: var(--color-bg-alt);
    border: 2px dashed var(--color-border);
    border-radius: 8px;
    padding: 8px 14px;
    font-family: inherit;
    font-weight: 600;
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
}
.edu-record-add-btn:hover { border-color: var(--color-accent); color: var(--color-accent); background: rgba(43, 108, 176, 0.06); }
.app-form-actions {
    display: flex;
    gap: 8px;
    margin-top: clamp(14px, 1.5vw, 20px);
    padding-top: clamp(14px, 1.5vw, 20px);
    border-top: 2px solid var(--color-border);
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-bottom: 4px;
}
.app-form-submit-btn,
.app-form-cancel-btn {
    padding: clamp(10px, 1.2vh, 14px) clamp(14px, 1.5vw, 20px);
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.app-form-submit-btn {
    flex: 1;
    background: var(--color-accent);
    color: #fff;
    border: 2px solid #1e4d7a;
}
.app-form-submit-btn:hover { background: var(--color-accent-light); transform: translateY(-1px); }
.app-form-cancel-btn {
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    border: 2px solid var(--color-border);
}
.app-form-cancel-btn:hover { background: #e2e6ea; color: var(--color-text); }
.app-form-status {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    margin-top: 10px;
    font-weight: 600;
}
.app-form-status.success { background: #d4edda; color: #155724; border: 2px solid #c3e6cb; }
.app-form-status.error { background: #f8d7da; color: #721c24; border: 2px solid #f5c6cb; }

/* ================================================================
   42. ETF TRADING HUB MODAL
   ================================================================ */
.etf-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2500;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
}
.etf-modal.active { display: flex; }
.etf-container {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 1200px;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: entSlideIn 0.3s ease;
}
.etf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 1.8vw, 20px) clamp(14px, 2vw, 24px);
    background: linear-gradient(135deg, #1a365d 0%, #2b6cb0 100%);
    color: #fff;
    flex-shrink: 0;
    border-radius: var(--radius) var(--radius) 0 0;
}
.etf-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(0.95rem, 1.5vw, 1.35rem);
    font-weight: 800;
    color: #fff;
}
.etf-header-title i { color: #f0c040; }
.etf-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(0.45rem, 0.6vw, 0.65rem);
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    border: 1px solid rgba(239, 68, 68, 0.4);
}
.live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ef4444;
    animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.4); }
}

.etf-wallet-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.5vw, 20px);
    padding: clamp(10px, 1.3vw, 16px) clamp(14px, 2vw, 24px);
    background: var(--color-bg-card);
    border-bottom: 2px solid var(--color-border);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.etf-wallet-info { display: flex; align-items: center; gap: 10px; }
.etf-wallet-info > i {
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    color: var(--color-primary-dark);
    background: rgba(230, 180, 44, 0.15);
    width: clamp(38px, 4vw, 46px);
    height: clamp(38px, 4vw, 46px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.etf-wallet-info > div { display: flex; flex-direction: column; }
.etf-wallet-label {
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.etf-wallet-value {
    font-size: clamp(0.85rem, 1.3vw, 1.2rem);
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.2;
}
.etf-wallet-stats {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.5vw, 24px);
    flex-wrap: wrap;
}
.etf-stat { display: flex; flex-direction: column; }
.etf-stat-label {
    font-size: clamp(0.45rem, 0.6vw, 0.6rem);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.etf-stat-value {
    font-size: clamp(0.7rem, 0.95vw, 0.9rem);
    font-weight: 800;
    color: var(--color-text);
}
.etf-portfolio-btn {
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--color-accent);
    color: #fff;
    border: 2px solid #1e4d7a;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.etf-portfolio-btn:hover { background: var(--color-accent-light); transform: translateY(-1px); }

.etf-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    background: #fff;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.etf-tabs::-webkit-scrollbar { display: none; }
.etf-tab {
    flex: 1;
    min-width: 130px;
    padding: clamp(10px, 1.3vw, 14px) clamp(12px, 1.5vw, 18px);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.65rem, 0.85vw, 0.85rem);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.etf-tab:hover { background: rgba(43, 108, 176, 0.06); color: var(--color-accent); }
.etf-tab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    background: #fff;
}
.etf-tab-count {
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 700;
}
.etf-tab.active .etf-tab-count { background: var(--color-accent); color: #fff; }

.etf-actions {
    padding: clamp(8px, 1vh, 12px) clamp(14px, 2vw, 24px);
    border-bottom: 1px solid var(--color-border);
    background: #fff;
    flex-shrink: 0;
}
.etf-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-alt);
    transition: all 0.25s ease;
}
.etf-search-box:focus-within {
    border-color: var(--color-accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(43, 108, 176, 0.12);
}
.etf-search-box i { color: var(--color-text-muted); font-size: 0.9rem; flex-shrink: 0; }
.etf-search-box input {
    flex: 1;
    padding: 11px 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    color: var(--color-text);
    min-height: 40px;
}

.etf-content {
    flex: 1;
    overflow-y: auto;
    padding: clamp(14px, 2vw, 24px);
    background: var(--color-bg-alt);
    min-height: 300px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.etf-content::-webkit-scrollbar { width: 10px; }
.etf-content::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
    border: 2px solid var(--color-bg-alt);
}
.etf-panel { display: none; }
.etf-panel.active { display: block; }

.etf-exchanges-list {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vw, 16px);
}
.etf-exchange-card {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.25s ease;
}
.etf-exchange-card:hover { border-color: var(--color-accent); box-shadow: 0 8px 24px rgba(43, 108, 176, 0.12); }
.etf-exchange-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: clamp(12px, 1.5vw, 16px) clamp(14px, 1.8vw, 20px);
    background: linear-gradient(135deg, #f8f9fa, #eef0f2);
    border-bottom: 2px solid var(--color-border);
    cursor: pointer;
    transition: background 0.2s ease;
    flex-wrap: wrap;
}
.etf-exchange-header:hover { background: linear-gradient(135deg, #eef0f2, #e2e6ea); }
.etf-exchange-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.etf-exchange-flag {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1;
    flex-shrink: 0;
}
.etf-exchange-text { display: flex; flex-direction: column; min-width: 0; }
.etf-exchange-name {
    font-size: clamp(0.75rem, 1vw, 0.95rem);
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.2;
}
.etf-exchange-meta {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.etf-exchange-symbol {
    background: var(--color-accent);
    color: #fff;
    padding: 1px 8px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85em;
    letter-spacing: 0.4px;
}
.etf-exchange-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.etf-exchange-count {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    background: var(--color-bg-alt);
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
}
.etf-exchange-chevron {
    font-size: clamp(0.7rem, 0.9vw, 0.9rem);
    color: var(--color-text-muted);
    transition: transform 0.3s ease;
}
.etf-exchange-card.expanded .etf-exchange-chevron { transform: rotate(180deg); }
.etf-exchange-companies {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.etf-exchange-card.expanded .etf-exchange-companies { max-height: 3000px; }

.etf-companies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: clamp(8px, 1vw, 12px);
    padding: clamp(12px, 1.5vw, 18px);
}
.etf-companies-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: clamp(10px, 1.2vw, 16px);
}
.etf-company-card {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    padding: clamp(10px, 1.2vw, 14px);
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}
.etf-company-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent);
    box-shadow: 0 10px 24px rgba(43, 108, 176, 0.15);
}
.etf-company-top { display: flex; align-items: flex-start; gap: 10px; }
.etf-company-logo {
    width: clamp(36px, 4vw, 44px);
    height: clamp(36px, 4vw, 44px);
    border-radius: 8px;
    background: linear-gradient(135deg, #2b6cb0, #1a365d);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    flex-shrink: 0;
    letter-spacing: -0.5px;
}
.etf-company-info { flex: 1; min-width: 0; }
.etf-company-symbol {
    font-size: clamp(0.6rem, 0.75vw, 0.7rem);
    font-weight: 800;
    color: var(--color-accent);
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}
.etf-company-name {
    font-size: clamp(0.7rem, 0.85vw, 0.82rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.etf-watch-btn {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: clamp(0.9rem, 1.1vw, 1.1rem);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
}
.etf-watch-btn:hover { background: rgba(230, 180, 44, 0.15); color: var(--color-primary-dark); transform: scale(1.15); }
.etf-watch-btn.active { color: var(--color-primary); }
.etf-company-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.etf-company-price {
    font-size: clamp(0.8rem, 1.05vw, 0.98rem);
    font-weight: 800;
    color: var(--color-text);
}
.etf-company-price-currency { font-size: 0.7em; opacity: 0.7; margin-right: 3px; }
.etf-company-change {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.etf-company-change.positive { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.etf-company-change.negative { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.etf-company-change.neutral { background: var(--color-bg-alt); color: var(--color-text-muted); }
.etf-company-actions { display: flex; gap: 6px; margin-top: 4px; }
.etf-company-btn {
    flex: 1;
    padding: 6px 8px;
    border-radius: 6px;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 2px solid transparent;
}
.etf-company-btn.buy { background: #16a34a; color: #fff; border-color: #15803d; }
.etf-company-btn.buy:hover { background: #22c55e; transform: translateY(-1px); }
.etf-company-btn.sell { background: #dc2626; color: #fff; border-color: #991b1b; }
.etf-company-btn.sell:hover { background: #ef4444; transform: translateY(-1px); }
.etf-portfolio-summary { margin-bottom: 14px; }
.etf-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: clamp(40px, 7vw, 80px) 20px;
    text-align: center;
    color: var(--color-text-muted);
}
.etf-empty i { font-size: clamp(2.4rem, 5vw, 3.5rem); opacity: 0.25; color: var(--color-accent); }
.etf-empty p { font-size: clamp(0.75rem, 0.95vw, 0.95rem); font-weight: 600; }
.etf-empty small { font-size: clamp(0.6rem, 0.75vw, 0.75rem); opacity: 0.75; }
.etf-empty.show { display: flex; }
.etf-footer {
    padding: clamp(8px, 1vh, 12px) clamp(14px, 2vw, 24px);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-card);
    text-align: center;
    flex-shrink: 0;
}
.etf-footer-note {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.etf-footer-note i { color: var(--color-accent); }
.etf-footer-note strong { color: var(--color-primary-dark); }

/* ================================================================
   43. ETF DETAIL MODAL
   ================================================================ */
.etf-detail-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2700;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
}
.etf-detail-modal.active { display: flex; }
.etf-detail-container {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 680px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: entSlideIn 0.3s ease;
}
.etf-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px);
    background: linear-gradient(135deg, #1a365d 0%, #2b6cb0 100%);
    color: #fff;
    flex-shrink: 0;
}
.etf-detail-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.etf-back-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.etf-back-btn:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.05); }
.etf-detail-symbol {
    font-size: clamp(0.6rem, 0.8vw, 0.75rem);
    font-weight: 800;
    color: #f0c040;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.etf-detail-name {
    font-size: clamp(0.85rem, 1.2vw, 1.1rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0;
}
.etf-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: clamp(14px, 2vw, 22px);
    background: var(--color-bg-alt);
}
.etf-price-card {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    padding: clamp(14px, 1.8vw, 20px);
    margin-bottom: 14px;
}
.etf-price-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}
.etf-price-value {
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    font-weight: 900;
    color: var(--color-text);
    line-height: 1;
}
.etf-price-currency {
    font-size: clamp(0.75rem, 1vw, 0.95rem);
    font-weight: 700;
    color: var(--color-text-muted);
}
.etf-price-change {
    font-size: clamp(0.75rem, 0.95vw, 0.9rem);
    font-weight: 800;
    margin-bottom: 10px;
}
.etf-price-change.positive { color: #16a34a; }
.etf-price-change.negative { color: #dc2626; }
.etf-price-change.neutral { color: var(--color-text-muted); }
.etf-price-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text-muted);
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex-wrap: wrap;
}
.etf-price-meta strong { color: var(--color-text); }
.etf-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.etf-stat-item {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.etf-stat-item .etf-stat-label {
    font-size: clamp(0.45rem, 0.6vw, 0.6rem);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
}
.etf-stat-item .etf-stat-value {
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    font-weight: 800;
    color: var(--color-text);
}
.etf-detail-section {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    padding: clamp(12px, 1.5vw, 18px);
    margin-bottom: 14px;
}
.etf-detail-section-title {
    font-size: clamp(0.75rem, 0.95vw, 0.9rem);
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.etf-detail-about {
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}
.etf-trade-section {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    overflow: hidden;
}
.etf-trade-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    background: var(--color-bg-card);
}
.etf-trade-tab {
    flex: 1;
    padding: clamp(10px, 1.3vw, 14px);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.etf-trade-tab:hover { background: rgba(43, 108, 176, 0.06); }
.etf-trade-tab.active[data-trade-mode="buy"] {
    color: #16a34a;
    border-bottom-color: #16a34a;
    background: #fff;
}
.etf-trade-tab.active[data-trade-mode="sell"] {
    color: #dc2626;
    border-bottom-color: #dc2626;
    background: #fff;
}
#etfTradeForm { padding: clamp(14px, 1.8vw, 20px); }
.etf-trade-summary {
    background: var(--color-bg-alt);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.etf-trade-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    color: var(--color-text-muted);
}
.etf-trade-row span:last-child { font-weight: 700; color: var(--color-text); }
.etf-trade-row.commission-row { color: var(--color-primary-dark); }
.etf-trade-row.commission-row span:last-child { color: var(--color-primary-dark); }
.etf-trade-row.total-row {
    border-top: 2px solid var(--color-border);
    padding-top: 8px;
    margin-top: 4px;
    font-size: clamp(0.75rem, 0.95vw, 0.9rem);
}
.etf-trade-row.total-row span:last-child {
    font-weight: 900;
    color: var(--color-accent);
    font-size: 1.1em;
}
.etf-trade-status {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    margin: 8px 0;
    font-weight: 600;
}
.etf-trade-status.success { background: #d4edda; color: #155724; border: 2px solid #c3e6cb; }
.etf-trade-status.error { background: #f8d7da; color: #721c24; border: 2px solid #f5c6cb; }
.etf-trade-actions { display: flex; gap: 8px; margin-top: 12px; }
.etf-trade-submit-btn,
.etf-trade-cancel-btn {
    padding: clamp(10px, 1.2vh, 13px) clamp(14px, 1.5vw, 20px);
    border-radius: 8px;
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.etf-trade-submit-btn {
    flex: 1;
    background: #16a34a;
    color: #fff;
    border: 2px solid #15803d;
}
.etf-trade-submit-btn:hover { background: #22c55e; transform: translateY(-1px); }
.etf-trade-submit-btn.sell-mode { background: #dc2626; border-color: #991b1b; }
.etf-trade-submit-btn.sell-mode:hover { background: #ef4444; }
.etf-trade-cancel-btn {
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    border: 2px solid var(--color-border);
}
.etf-trade-cancel-btn:hover { background: #e2e6ea; color: var(--color-text); }

/* ================================================================
   44. ETF PORTFOLIO MODAL
   ================================================================ */
.etf-portfolio-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2700;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
}
.etf-portfolio-modal.active { display: flex; }
.etf-portfolio-container {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 700px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: entSlideIn 0.3s ease;
}
.etf-portfolio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px);
    background: linear-gradient(135deg, #1a365d 0%, #2b6cb0 100%);
    color: #fff;
    flex-shrink: 0;
    border-radius: var(--radius) var(--radius) 0 0;
}
.etf-portfolio-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(0.9rem, 1.2vw, 1.15rem);
    font-weight: 800;
    color: #fff;
}
.etf-portfolio-title i { color: #f0c040; }
.etf-portfolio-body {
    flex: 1;
    overflow-y: auto;
    padding: clamp(14px, 2vw, 22px);
    background: var(--color-bg-alt);
}
.etf-portfolio-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.etf-portfolio-stat {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    padding: clamp(12px, 1.5vw, 16px);
    text-align: center;
}
.etf-portfolio-stat-label {
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}
.etf-portfolio-stat-value {
    font-size: clamp(0.85rem, 1.15vw, 1.05rem);
    font-weight: 900;
    color: var(--color-accent);
    display: block;
}
.etf-portfolio-holdings { display: flex; flex-direction: column; gap: 8px; }
.etf-holding-row {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    padding: clamp(10px, 1.2vw, 14px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: all 0.2s ease;
    flex-wrap: wrap;
}
.etf-holding-row:hover { border-color: var(--color-accent); }
.etf-holding-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.etf-holding-logo {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #2b6cb0, #1a365d);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.etf-holding-info { display: flex; flex-direction: column; min-width: 0; }
.etf-holding-symbol {
    font-size: clamp(0.6rem, 0.75vw, 0.72rem);
    font-weight: 800;
    color: var(--color-accent);
    letter-spacing: 0.4px;
}
.etf-holding-name {
    font-size: clamp(0.65rem, 0.8vw, 0.78rem);
    font-weight: 700;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.etf-holding-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.etf-holding-qty { display: flex; flex-direction: column; text-align: right; }
.etf-holding-qty-label {
    font-size: clamp(0.45rem, 0.6vw, 0.6rem);
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-weight: 700;
}
.etf-holding-qty-value {
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    font-weight: 800;
    color: var(--color-text);
}
.etf-holding-value {
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    font-weight: 900;
    color: var(--color-accent);
    white-space: nowrap;
}
.etf-holding-sell-btn {
    padding: 6px 12px;
    border-radius: 6px;
    background: #dc2626;
    color: #fff;
    border: 2px solid #991b1b;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.etf-holding-sell-btn:hover { background: #ef4444; transform: translateY(-1px); }

/* ================================================================
   45. BET & GAMING HUB MODAL
   ================================================================ */
.bet-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2500;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
}
.bet-modal.active { display: flex; }
.bet-container {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 1150px;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: entSlideIn 0.3s ease;
}
.bet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 1.8vw, 20px) clamp(14px, 2vw, 24px);
    background: linear-gradient(135deg, #166534 0%, #15803d 100%);
    color: #fff;
    flex-shrink: 0;
    border-radius: var(--radius) var(--radius) 0 0;
}
.bet-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(0.95rem, 1.5vw, 1.35rem);
    font-weight: 800;
    color: #fff;
}
.bet-header-title i { color: #fbbf24; }
.bet-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(0.45rem, 0.6vw, 0.65rem);
    background: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    border: 1px solid rgba(239, 68, 68, 0.5);
    animation: liveBadgePulse 1.8s ease-in-out infinite;
}
@keyframes liveBadgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}
.bet-wallet-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.5vw, 20px);
    padding: clamp(10px, 1.3vw, 16px) clamp(14px, 2vw, 24px);
    background: var(--color-bg-card);
    border-bottom: 2px solid var(--color-border);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.bet-wallet-info { display: flex; align-items: center; gap: 10px; }
.bet-wallet-info > i {
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    color: #16a34a;
    background: rgba(34, 197, 94, 0.15);
    width: clamp(38px, 4vw, 46px);
    height: clamp(38px, 4vw, 46px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bet-wallet-info > div { display: flex; flex-direction: column; }
.bet-wallet-label {
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.bet-wallet-value {
    font-size: clamp(0.85rem, 1.3vw, 1.2rem);
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.2;
}
.bet-wallet-stats { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 24px); flex-wrap: wrap; }
.bet-stat { display: flex; flex-direction: column; }
.bet-stat-label {
    font-size: clamp(0.45rem, 0.6vw, 0.6rem);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.bet-stat-value {
    font-size: clamp(0.7rem, 0.95vw, 0.9rem);
    font-weight: 800;
    color: var(--color-text);
}
.bet-history-btn {
    padding: 8px 16px;
    border-radius: 8px;
    background: #16a34a;
    color: #fff;
    border: 2px solid #15803d;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bet-history-btn:hover { background: #22c55e; transform: translateY(-1px); }
.bet-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    background: #fff;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.bet-tabs::-webkit-scrollbar { display: none; }
.bet-tab {
    flex: 1;
    min-width: 120px;
    padding: clamp(10px, 1.3vw, 14px) clamp(12px, 1.5vw, 18px);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.65rem, 0.85vw, 0.85rem);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.bet-tab:hover { background: rgba(22, 163, 74, 0.06); color: #16a34a; }
.bet-tab.active {
    color: #16a34a;
    border-bottom-color: #16a34a;
    background: #fff;
}
.bet-tab-count {
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 700;
}
.bet-tab.active .bet-tab-count { background: #16a34a; color: #fff; }
.bet-actions {
    padding: clamp(8px, 1vh, 12px) clamp(14px, 2vw, 24px);
    border-bottom: 1px solid var(--color-border);
    background: #fff;
    flex-shrink: 0;
}
.bet-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-alt);
    transition: all 0.25s ease;
}
.bet-search-box:focus-within {
    border-color: #16a34a;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}
.bet-search-box i { color: var(--color-text-muted); font-size: 0.9rem; flex-shrink: 0; }
.bet-search-box input {
    flex: 1;
    padding: 11px 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    color: var(--color-text);
    min-height: 40px;
}
.bet-content {
    flex: 1;
    overflow-y: auto;
    padding: clamp(14px, 2vw, 24px);
    background: var(--color-bg-alt);
    min-height: 320px;
}
.bet-panel { display: none; }
.bet-panel.active { display: block; }
.bet-section-header {
    margin-bottom: 16px;
    padding: clamp(12px, 1.5vw, 16px) clamp(14px, 1.8vw, 20px);
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
}
.bet-section-header h3 {
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    font-weight: 800;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.bet-section-header h3 i { color: #16a34a; }
.bet-section-header p {
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}
.bet-events-list { display: flex; flex-direction: column; gap: clamp(8px, 1vw, 12px); }
.bet-event-row {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: clamp(12px, 1.5vw, 16px) clamp(14px, 1.8vw, 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-wrap: wrap;
}
.bet-event-row:hover {
    transform: translateY(-2px);
    border-color: #16a34a;
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.15);
}
.bet-event-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.bet-event-icon-wrap {
    width: clamp(42px, 5vw, 52px);
    height: clamp(42px, 5vw, 52px);
    border-radius: 12px;
    background: linear-gradient(135deg, #166534, #15803d);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    flex-shrink: 0;
}
.bet-event-info { display: flex; flex-direction: column; min-width: 0; }
.bet-event-name {
    font-size: clamp(0.72rem, 0.9vw, 0.88rem);
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.3;
    margin-bottom: 3px;
}
.bet-event-meta {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.bet-event-meta .bet-meta-badge {
    background: var(--color-bg-alt);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9em;
}
.bet-event-right { display: flex; align-items: center; gap: clamp(8px, 1vw, 14px); flex-shrink: 0; }
.bet-event-players { display: flex; flex-direction: column; text-align: right; gap: 2px; }
.bet-event-players-label {
    font-size: clamp(0.45rem, 0.6vw, 0.6rem);
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-weight: 700;
}
.bet-event-players-value {
    font-size: clamp(0.65rem, 0.85vw, 0.8rem);
    font-weight: 800;
    color: #16a34a;
}
.bet-event-cta-btn {
    padding: clamp(8px, 1vh, 10px) clamp(12px, 1.4vw, 18px);
    background: #16a34a;
    color: #fff;
    border: 2px solid #15803d;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.bet-event-cta-btn:hover { background: #22c55e; transform: translateY(-1px); }
.bet-event-cta-btn.pvp { background: #0284c7; border-color: #0369a1; }
.bet-event-cta-btn.pvp:hover { background: #0ea5e9; }
.bet-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(10px, 1.2vw, 16px);
}
.bet-game-card {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: clamp(14px, 1.5vw, 18px);
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}
.bet-game-card:hover {
    transform: translateY(-4px);
    border-color: #16a34a;
    box-shadow: 0 12px 30px rgba(22, 163, 74, 0.2);
}
.bet-game-card-icon { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.bet-game-card-name {
    font-size: clamp(0.75rem, 0.95vw, 0.9rem);
    font-weight: 800;
    color: var(--color-text);
}
.bet-game-card-desc {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text-muted);
    line-height: 1.4;
}
.bet-game-card-players {
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    color: #16a34a;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}
.bet-game-card-btn {
    margin-top: 4px;
    padding: 8px 16px;
    background: #16a34a;
    color: #fff;
    border: 2px solid #15803d;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
}
.bet-game-card-btn:hover { background: #22c55e; }
.bet-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: clamp(40px, 7vw, 80px) 20px;
    text-align: center;
    color: var(--color-text-muted);
}
.bet-empty i { font-size: clamp(2.4rem, 5vw, 3.5rem); opacity: 0.25; color: #16a34a; }
.bet-empty p { font-size: clamp(0.75rem, 0.95vw, 0.95rem); font-weight: 600; }
.bet-empty small { font-size: clamp(0.6rem, 0.75vw, 0.75rem); opacity: 0.75; }
.bet-empty.show { display: flex; }
.bet-footer {
    padding: clamp(8px, 1vh, 12px) clamp(14px, 2vw, 24px);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-card);
    text-align: center;
    flex-shrink: 0;
}
.bet-footer-note {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.bet-footer-note i { color: #16a34a; }
.bet-footer-note strong { color: var(--color-primary-dark); }

/* ================================================================
   46. BET PLACEMENT / COMPANY / GAME MODALS
   ================================================================ */
.bet-place-modal,
.bet-company-modal,
.bet-game-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2700;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
}
.bet-place-modal.active,
.bet-company-modal.active,
.bet-game-modal.active { display: flex; }
.bet-place-container {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: entSlideIn 0.3s ease;
}
.bet-place-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px);
    background: linear-gradient(135deg, #166534 0%, #15803d 100%);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
    border-radius: var(--radius) var(--radius) 0 0;
}
.bet-place-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    color: #fff;
}
.bet-place-title i { color: #fbbf24; }
.bet-place-body { padding: clamp(14px, 1.8vw, 22px); }
.bet-event-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--color-bg-alt);
    border-radius: 10px;
    border: 2px solid var(--color-border);
    margin-bottom: 16px;
}
.bet-event-icon {
    font-size: clamp(1.8rem, 2.5vw, 2.2rem);
    line-height: 1;
    flex-shrink: 0;
}
.bet-event-info { display: flex; flex-direction: column; }
.bet-event-name {
    font-size: clamp(0.75rem, 0.9vw, 0.88rem);
    font-weight: 800;
    color: var(--color-text);
}
.bet-event-meta {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text-muted);
}
.bet-place-section { margin-bottom: 16px; }
.bet-place-label {
    display: block;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
}
.bet-place-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.bet-pick-btn,
.bet-outcome-btn {
    flex: 1;
    min-width: 140px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 2px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 60px;
}
.bet-pick-btn:hover,
.bet-outcome-btn:hover { border-color: #16a34a; background: rgba(22, 163, 74, 0.05); }
.bet-pick-btn.selected,
.bet-outcome-btn.selected {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.12);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}
.bet-pick-name,
.bet-outcome-name {
    font-size: 0.9em;
    font-weight: 800;
    color: var(--color-text);
}
.bet-pick-info { font-size: 0.7em; color: var(--color-text-muted); font-weight: 600; }
.bet-outcome-odds {
    font-size: 0.85em;
    font-weight: 800;
    color: #16a34a;
    padding: 2px 8px;
    background: rgba(22, 163, 74, 0.12);
    border-radius: 10px;
}
.bet-place-amount-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.bet-place-input {
    flex: 1;
    min-width: 140px;
    padding: 10px 14px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: clamp(0.75rem, 0.9vw, 0.9rem);
    outline: none;
    min-height: 44px;
    background: #fff;
}
.bet-place-input:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}
.bet-place-quick-amounts { display: flex; gap: 4px; flex-wrap: wrap; }
.bet-quick-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 2px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 40px;
}
.bet-quick-btn:hover { border-color: #16a34a; background: rgba(22, 163, 74, 0.06); color: #16a34a; }
.bet-place-hint {
    display: block;
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    color: var(--color-text-muted);
    margin-top: 6px;
    font-style: italic;
}
.bet-place-status {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    margin: 10px 0;
    font-weight: 600;
}
.bet-place-status.success { background: #d4edda; color: #155724; border: 2px solid #c3e6cb; }
.bet-place-status.error { background: #f8d7da; color: #721c24; border: 2px solid #f5c6cb; }
.bet-place-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.bet-place-confirm-btn,
.bet-place-cancel-btn {
    padding: clamp(10px, 1.2vh, 13px) clamp(14px, 1.5vw, 20px);
    border-radius: 8px;
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
}
.bet-place-confirm-btn {
    background: #16a34a;
    color: #fff;
    border: 2px solid #15803d;
}
.bet-place-confirm-btn:hover { background: #22c55e; transform: translateY(-1px); }
.bet-place-confirm-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.bet-place-cancel-btn {
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    border: 2px solid var(--color-border);
}
.bet-place-cancel-btn:hover { background: #e2e6ea; color: var(--color-text); }

.bet-matchmaking-section {
    text-align: center;
    padding: 20px;
    background: var(--color-bg-alt);
    border-radius: 10px;
    border: 2px dashed var(--color-border);
}
.bet-matchmaking-spinner {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.bet-spinner {
    width: 48px; height: 48px;
    border: 4px solid var(--color-border);
    border-top-color: #16a34a;
    border-radius: 50%;
    animation: betSpin 0.9s linear infinite;
}
@keyframes betSpin {
    to { transform: rotate(360deg); }
}
.bet-matchmaking-text {
    font-size: clamp(0.75rem, 0.9vw, 0.9rem);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}
.bet-matchmaking-time {
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    color: var(--color-text-muted);
    margin-bottom: 12px;
}
.bet-cancel-match-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid var(--color-border);
    background: #fff;
    color: var(--color-text-muted);
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 38px;
}
.bet-cancel-match-btn:hover { border-color: #dc2626; color: #dc2626; }

.bet-company-summary {
    background: var(--color-bg-alt);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bet-trade-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    color: var(--color-text-muted);
}
.bet-trade-row span:last-child { font-weight: 700; color: var(--color-text); }
.bet-trade-row.total-row {
    border-top: 2px solid var(--color-border);
    padding-top: 8px;
    margin-top: 4px;
    font-size: clamp(0.75rem, 0.95vw, 0.9rem);
}
.bet-trade-row.total-row span:last-child {
    font-weight: 900;
    color: #16a34a;
    font-size: 1.1em;
}

.bet-game-hero {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.08), rgba(21, 128, 61, 0.12));
    border-radius: 12px;
    margin-bottom: 16px;
}
.bet-game-icon { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 8px; }
.bet-game-name {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 4px;
}
.bet-game-desc {
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    color: var(--color-text-muted);
    margin: 0;
}
.bet-game-opponents {
    display: flex;
    gap: 8px;
}
.bet-opponent-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    border: 2px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.bet-opponent-btn:hover { border-color: #16a34a; color: #16a34a; }
.bet-opponent-btn.active {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
    font-weight: 800;
}
.bet-game-link-section { margin-bottom: 16px; }
.bet-game-link-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.bet-game-link-row input { flex: 1; }
.bet-copy-btn {
    padding: 10px 16px;
    border-radius: 8px;
    background: #16a34a;
    color: #fff;
    border: 2px solid #15803d;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.bet-copy-btn:hover { background: #22c55e; }

/* ================================================================
   47. BET HISTORY MODAL
   ================================================================ */
.bet-history-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2700;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
}
.bet-history-modal.active { display: flex; }
.bet-portfolio-container {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 700px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: entSlideIn 0.3s ease;
}
.bet-portfolio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px);
    background: linear-gradient(135deg, #166534 0%, #15803d 100%);
    color: #fff;
    flex-shrink: 0;
    border-radius: var(--radius) var(--radius) 0 0;
}
.bet-portfolio-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(0.9rem, 1.2vw, 1.15rem);
    font-weight: 800;
    color: #fff;
}
.bet-portfolio-title i { color: #fbbf24; }
.bet-portfolio-body {
    flex: 1;
    overflow-y: auto;
    padding: clamp(14px, 2vw, 22px);
    background: var(--color-bg-alt);
}
.bet-portfolio-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.bet-portfolio-stat {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    padding: clamp(12px, 1.5vw, 16px);
    text-align: center;
}
.bet-portfolio-stat-label {
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}
.bet-portfolio-stat-value {
    font-size: clamp(0.85rem, 1.15vw, 1.05rem);
    font-weight: 900;
    color: #16a34a;
    display: block;
}
.bet-portfolio-holdings { display: flex; flex-direction: column; gap: 8px; }
.bet-my-bets-list { display: flex; flex-direction: column; gap: 8px; }

/* ================================================================
   48. AGRICULTURE HUB MODAL
   ================================================================ */
.agriculture-modal,
.agriculture-item-modal,
.agriculture-cart-modal,
.agri-post-modal,
.agri-listing-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2500;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ag-text);
    box-sizing: border-box;
}
.agriculture-modal.active,
.agriculture-item-modal.active,
.agriculture-cart-modal.active,
.agri-post-modal.active,
.agri-listing-modal.active { display: flex; }

.agriculture-modal *,
.agriculture-modal *::before,
.agriculture-modal *::after,
.agri-post-modal *,
.agri-post-modal *::before,
.agri-post-modal *::after,
.agri-listing-modal *,
.agri-listing-modal *::before,
.agri-listing-modal *::after,
.agriculture-item-modal *,
.agriculture-item-modal *::before,
.agriculture-item-modal *::after,
.agriculture-cart-modal *,
.agriculture-cart-modal *::before,
.agriculture-cart-modal *::after { box-sizing: border-box; }

.agriculture-container {
    background: var(--ag-surface);
    border-radius: var(--radius, 12px);
    border: 2px solid var(--color-border, #b0b8c0);
    width: 100%;
    max-width: 1200px;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--ag-shadow-lg);
    animation: entSlideIn 0.3s ease;
}
.agriculture-item-container {
    background: var(--ag-surface);
    border-radius: var(--radius, 12px);
    border: 2px solid var(--color-border, #b0b8c0);
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--ag-shadow-lg);
    animation: entSlideIn 0.3s ease;
}
.agriculture-cart-container {
    background: var(--ag-surface);
    border-radius: var(--radius, 12px);
    border: 2px solid var(--color-border, #b0b8c0);
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--ag-shadow-lg);
    animation: entSlideIn 0.3s ease;
}
.agri-post-container {
    background: var(--ag-surface);
    border-radius: var(--radius, 12px);
    border: 2px solid var(--color-border, #b0b8c0);
    width: 100%;
    max-width: 720px;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--ag-shadow-lg);
    animation: entSlideIn 0.3s ease;
}
.agri-listing-container {
    background: var(--ag-surface);
    border-radius: var(--radius, 12px);
    border: 2px solid var(--color-border, #b0b8c0);
    width: 100%;
    max-width: 620px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--ag-shadow-lg);
    animation: entSlideIn 0.3s ease;
}

.agriculture-header,
.agriculture-item-header,
.agriculture-cart-header,
.agri-post-header,
.agri-listing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(12px, 1.8vw, 20px) clamp(14px, 2vw, 24px);
    background: linear-gradient(135deg, var(--ag-primary) 0%, var(--ag-primary-light) 100%);
    color: #ffffff;
    flex-shrink: 0;
    border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
    position: relative;
    overflow: hidden;
}
.agriculture-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 20%, rgba(255,255,255,0.10) 0%, transparent 45%),
        radial-gradient(circle at 88% 80%, rgba(255,255,255,0.06) 0%, transparent 50%);
    pointer-events: none;
}
.agriculture-header-title,
.agriculture-item-title,
.agriculture-cart-title,
.agri-post-title,
.agri-listing-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(0.95rem, 1.5vw, 1.3rem);
    font-weight: 800;
    color: #ffffff;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.agriculture-header-title i { color: var(--ag-gold); font-size: 1.1em; }
.agriculture-header-title > span:first-of-type {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agriculture-header .window-close-btn,
.agriculture-item-header .window-close-btn,
.agriculture-cart-header .window-close-btn,
.agri-post-header .window-close-btn,
.agri-listing-header .window-close-btn {
    color: #ffffff !important;
    background: rgba(255,255,255,0.10) !important;
    border: 2px solid transparent !important;
    width: clamp(32px, 3.2vw, 40px);
    height: clamp(32px, 3.2vw, 40px);
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    font-size: clamp(1.1rem, 1.5vw, 1.5rem);
    font-weight: 400;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}
.agriculture-header .window-close-btn:hover,
.agriculture-item-header .window-close-btn:hover,
.agriculture-cart-header .window-close-btn:hover,
.agri-post-header .window-close-btn:hover,
.agri-listing-header .window-close-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    transform: scale(1.08);
}
.agriculture-header .window-close-btn:active,
.agriculture-item-header .window-close-btn:active,
.agriculture-cart-header .window-close-btn:active,
.agri-post-header .window-close-btn:active,
.agri-listing-header .window-close-btn:active { transform: scale(0.92); }
.agriculture-header .window-close-btn:focus-visible,
.agriculture-item-header .window-close-btn:focus-visible,
.agriculture-cart-header .window-close-btn:focus-visible,
.agri-post-header .window-close-btn:focus-visible,
.agri-listing-header .window-close-btn:focus-visible {
    outline: 3px solid #fde047 !important;
    outline-offset: 2px;
}

.agriculture-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(0.5rem, 0.65vw, 0.68rem);
    background: rgba(239, 68, 68, 0.22);
    color: #fecaca;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.7px;
    border: 1px solid rgba(239, 68, 68, 0.5);
    text-transform: uppercase;
    flex-shrink: 0;
}
.agri-post-badge {
    font-size: clamp(0.5rem, 0.65vw, 0.68rem);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    flex-shrink: 0;
    background: rgba(255,255,255,0.20);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.35);
}
.agri-post-badge.admin {
    background: rgba(251, 191, 36, 0.30);
    border-color: rgba(251, 191, 36, 0.6);
    color: #fef3c7;
}

.agriculture-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: clamp(10px, 1.4vw, 16px) clamp(14px, 2vw, 24px);
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-bottom: 1px solid var(--ag-border);
    flex-shrink: 0;
}
.agriculture-banner-icon {
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    line-height: 1;
    flex-shrink: 0;
}
.agriculture-banner-text { min-width: 0; flex: 1; }
.agriculture-banner-text h3 {
    font-size: clamp(0.82rem, 1.05vw, 1rem);
    font-weight: 800;
    color: var(--ag-text);
    margin: 0 0 3px;
    line-height: 1.25;
}
.agriculture-banner-text p {
    font-size: clamp(0.6rem, 0.78vw, 0.78rem);
    color: var(--ag-muted);
    margin: 0;
    line-height: 1.45;
}

.agriculture-actions {
    display: flex;
    gap: 10px;
    padding: clamp(10px, 1.2vw, 14px) clamp(14px, 2vw, 24px);
    border-bottom: 1px solid var(--ag-border);
    background: var(--ag-surface);
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: stretch;
}
.agriculture-search-box {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 2px solid var(--ag-border);
    border-radius: var(--ag-radius-sm);
    background: var(--ag-surface-2);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.agriculture-search-box:focus-within {
    border-color: var(--ag-primary-light);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}
.agriculture-search-box i { color: var(--ag-muted); font-size: 0.9rem; flex-shrink: 0; }
.agriculture-search-box input {
    flex: 1;
    min-width: 0;
    padding: 11px 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: clamp(0.72rem, 0.85vw, 0.85rem);
    color: var(--ag-text);
    min-height: 40px;
}
.agriculture-search-box input::placeholder { color: #94a3b8; }
.agriculture-cart-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--ag-radius-sm);
    background: linear-gradient(135deg, var(--ag-primary-light), #22c55e);
    color: #ffffff;
    border: 2px solid var(--ag-primary);
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(0.66rem, 0.82vw, 0.82rem);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 42px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.28);
}
.agriculture-cart-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(22, 163, 74, 0.38);
}
.agriculture-cart-badge {
    background: #ffffff;
    color: var(--ag-primary-light);
    font-weight: 900;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.7rem;
    min-width: 20px;
    text-align: center;
}

.agri-live-bar {
    display: flex;
    gap: 12px;
    padding: clamp(10px, 1.2vw, 14px) clamp(14px, 2vw, 24px);
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-bottom: 1px solid var(--ag-border);
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}
.agri-live-location {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(0.68rem, 0.82vw, 0.82rem);
    color: var(--ag-text);
    min-width: 0;
}
.agri-live-location > i { color: var(--ag-primary-light); font-size: 1rem; flex-shrink: 0; }
.agri-live-location > span {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agri-loc-btn {
    padding: 6px 12px;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ag-primary-light);
    border: 2px solid var(--ag-primary-light);
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(0.6rem, 0.72vw, 0.72rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 34px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.agri-loc-btn:hover {
    background: var(--ag-primary-light);
    color: #ffffff;
}
.agri-loc-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.agri-live-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.agri-post-btn {
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--ag-primary-light);
    color: #ffffff;
    border: 2px solid var(--ag-primary);
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(0.62rem, 0.78vw, 0.78rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}
.agri-post-btn:hover {
    background: #22c55e;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35);
}
.agri-post-btn.agri-post-admin {
    background: var(--ag-text);
    border-color: #000000;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
}
.agri-post-btn.agri-post-admin:hover {
    background: #1e293b;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.4);
}

.agriculture-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: clamp(14px, 1.8vw, 24px);
    background: var(--ag-bg);
    min-height: 260px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.agriculture-content::-webkit-scrollbar { width: 8px; }
.agriculture-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 2px solid var(--ag-bg);
}

.agri-live-section { margin-bottom: 20px; }
.agri-live-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.agri-live-header h4 {
    font-size: clamp(0.82rem, 1vw, 0.95rem);
    font-weight: 800;
    color: var(--ag-text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.agri-live-header h4 i { color: var(--ag-primary-light); }
.agri-live-count {
    font-size: clamp(0.6rem, 0.75vw, 0.72rem);
    font-weight: 800;
    background: var(--ag-primary-light);
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 999px;
    min-width: 26px;
    text-align: center;
}
.agri-live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
}
.agri-live-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 20px;
    text-align: center;
    color: var(--ag-muted);
}
.agri-live-empty.show { display: flex; }
.agri-live-empty i {
    font-size: 3rem;
    opacity: 0.25;
    color: var(--ag-primary-light);
}
.agri-live-empty p {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
}
.agri-live-empty small {
    font-size: 0.72rem;
    opacity: 0.75;
}

.agri-listing-card {
    background: var(--ag-surface);
    border: 2px solid var(--ag-border);
    border-radius: var(--ag-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    position: relative;
}
.agri-listing-card:hover {
    transform: translateY(-4px);
    border-color: var(--ag-primary-light);
    box-shadow: 0 14px 34px rgba(22, 163, 74, 0.18);
}
.agri-listing-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 2px solid var(--ag-border);
}
.agri-listing-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.agri-listing-icon {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}
.agri-listing-source {
    position: absolute;
    top: 8px; right: 8px;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #ffffff;
    z-index: 2;
}
.agri-listing-source.user { background: #2563eb; }
.agri-listing-source.admin { background: var(--ag-primary-light); }
.agri-listing-body {
    padding: clamp(10px, 1.2vw, 14px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.agri-listing-name {
    font-size: clamp(0.82rem, 0.98vw, 0.95rem);
    font-weight: 800;
    color: var(--ag-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.agri-listing-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: clamp(0.58rem, 0.72vw, 0.72rem);
    color: var(--ag-muted);
}
.agri-listing-cat {
    background: var(--ag-surface-2);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    text-transform: capitalize;
}
.agri-listing-distance {
    color: var(--ag-primary-light);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.agri-listing-loc {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--ag-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}
.agri-listing-loc i { color: var(--ag-primary-light); }
.agri-listing-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    margin-top: auto;
}
.agri-listing-price {
    font-size: clamp(0.85rem, 1.05vw, 1rem);
    font-weight: 900;
    color: var(--ag-primary-light);
}
.agri-listing-price small {
    font-size: 0.7em;
    font-weight: 700;
    color: var(--ag-muted);
    margin-left: 2px;
}
.agri-listing-qty {
    font-size: clamp(0.55rem, 0.68vw, 0.68rem);
    color: var(--ag-muted);
    font-weight: 700;
}

.agri-static-section { margin-top: 20px; }
.agri-static-header { margin-bottom: 12px; }
.agri-static-header h4 {
    font-size: clamp(0.82rem, 1vw, 0.95rem);
    font-weight: 800;
    color: var(--ag-text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.agri-static-header h4 i { color: var(--ag-primary-light); }
.agriculture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
}
.agri-category-card {
    background: var(--ag-surface);
    border: 2px solid var(--ag-border);
    border-radius: var(--ag-radius);
    padding: clamp(14px, 1.4vw, 18px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.agri-category-card:hover {
    transform: translateY(-4px);
    border-color: var(--ag-primary-light);
    box-shadow: 0 14px 34px rgba(22, 163, 74, 0.18);
}
.agri-category-icon { font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1; }
.agri-category-name {
    font-size: clamp(0.9rem, 1.05vw, 1.05rem);
    font-weight: 800;
    color: var(--ag-text);
}
.agri-category-desc {
    font-size: clamp(0.62rem, 0.76vw, 0.76rem);
    color: var(--ag-muted);
    line-height: 1.45;
    flex: 1;
}
.agri-category-count {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--ag-primary-light);
    padding-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.agriculture-footer,
.agriculture-item-actions,
.agriculture-cart-footer,
.agri-post-actions,
.agri-listing-actions {
    padding: clamp(10px, 1.2vh, 14px) clamp(14px, 2vw, 24px);
    border-top: 1px solid var(--ag-border);
    background: var(--ag-surface-2);
    text-align: center;
    flex-shrink: 0;
}
.agriculture-footer-note {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--ag-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 1.5;
}
.agriculture-footer-note i { color: var(--ag-primary-light); }

.agri-post-body {
    padding: clamp(14px, 1.8vw, 22px);
    overflow-y: auto;
    flex: 1 1 auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.agri-post-body::-webkit-scrollbar { width: 8px; }
.agri-post-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
.agri-post-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(0.7rem, 0.88vw, 0.88rem);
    font-weight: 800;
    color: var(--ag-primary);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--ag-border);
    margin: clamp(12px, 1.5vw, 18px) 0 clamp(10px, 1.2vw, 14px);
}
.agri-post-section-title:first-of-type { margin-top: 0; }
.agri-post-section-title i { color: var(--ag-primary-light); }

.agri-post-body .form-group { margin-bottom: 12px; }
.agri-post-body .form-group label {
    display: block;
    font-size: clamp(0.62rem, 0.76vw, 0.76rem);
    font-weight: 700;
    color: var(--ag-text-2);
    margin-bottom: 5px;
}
.agri-post-body .form-group input,
.agri-post-body .form-group select,
.agri-post-body .form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--ag-border);
    border-radius: var(--ag-radius-sm);
    font-family: inherit;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    color: var(--ag-text);
    background: #ffffff;
    outline: none;
    min-height: 42px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.agri-post-body .form-group input:focus,
.agri-post-body .form-group select:focus,
.agri-post-body .form-group textarea:focus {
    border-color: var(--ag-primary-light);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}
.agri-post-body .form-group textarea {
    resize: vertical;
    min-height: 70px;
}
.agri-post-body .form-hint {
    font-size: clamp(0.55rem, 0.68vw, 0.68rem);
    color: var(--ag-muted);
    font-style: italic;
    display: block;
    margin-top: 4px;
}
.agri-post-body .form-hint code {
    background: var(--ag-surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
    color: var(--ag-primary);
}
.agri-post-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.agri-post-row.three {
    grid-template-columns: 1fr 1fr 1fr;
}
.agri-post-geo-wrap {
    display: flex;
    align-items: flex-end;
}
.agri-post-geo-wrap .agri-btn { width: 100%; }
.agri-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: clamp(0.62rem, 0.76vw, 0.76rem);
    color: var(--ag-text-2);
    cursor: pointer;
    line-height: 1.4;
}
.agri-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    min-width: 18px;
    margin-top: 1px;
    cursor: pointer;
    flex-shrink: 0;
}
.agri-post-status {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    margin: 8px 0;
    font-weight: 600;
}
.agri-post-status.success {
    background: #d4edda;
    color: #155724;
    border: 2px solid #c3e6cb;
}
.agri-post-status.error {
    background: #f8d7da;
    color: #721c24;
    border: 2px solid #f5c6cb;
}
.agri-post-actions {
    display: flex;
    gap: 8px;
    text-align: left;
}
.agri-post-actions .agri-btn { flex: 1; }

.agri-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--ag-radius-sm);
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    border: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}
.agri-btn-primary {
    background: var(--ag-primary-light);
    color: #ffffff;
    border-color: var(--ag-primary);
}
.agri-btn-primary:hover {
    background: #22c55e;
    transform: translateY(-1px);
}
.agri-btn-primary:disabled {
    background: #cbd5e1;
    border-color: #94a3b8;
    cursor: not-allowed;
    transform: none;
}
.agri-btn-ghost {
    background: var(--ag-surface-2);
    color: var(--ag-muted);
    border-color: var(--ag-border);
}
.agri-btn-ghost:hover {
    background: #e2e8f0;
    color: var(--ag-text);
}
.agri-btn-block { width: 100%; }

.agri-listing-body {
    padding: clamp(14px, 1.8vw, 22px);
    overflow-y: auto;
    flex: 1 1 auto;
}
.agri-listing-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.agri-listing-price-lg {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 900;
    color: var(--ag-primary-light);
}
.agri-listing-price-lg small {
    font-size: 0.55em;
    font-weight: 700;
    color: var(--ag-muted);
}
.agri-listing-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.agri-tag {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    font-weight: 700;
    background: var(--ag-surface-2);
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--ag-text-2);
    text-transform: capitalize;
}
.agri-tag.admin { background: #dcfce7; color: var(--ag-primary); }
.agri-tag.user { background: #dbeafe; color: #1d4ed8; }
.agri-listing-desc {
    font-size: clamp(0.72rem, 0.88vw, 0.88rem);
    color: var(--ag-text-2);
    line-height: 1.55;
    margin: 0;
}
.agri-listing-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ag-border);
}
.agri-listing-fields > div {
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    color: var(--ag-text-2);
    display: flex;
    align-items: center;
    gap: 8px;
}
.agri-listing-fields > div i {
    color: var(--ag-primary-light);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.agri-listing-actions {
    display: flex;
    gap: 8px;
}
.agri-listing-actions .agri-btn { flex: 1; }

.agriculture-cart-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    background: var(--ag-bg);
}
.agri-cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #ffffff;
    border: 2px solid var(--ag-border);
    border-radius: 10px;
    margin-bottom: 8px;
}
.agri-cart-item-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.agri-cart-item-name { font-size: 0.85rem; font-weight: 800; color: var(--ag-text); }
.agri-cart-item-price { font-size: 0.7rem; color: var(--ag-muted); }
.agri-cart-item-qty { display: flex; align-items: center; gap: 6px; }
.agri-cart-item-qty button {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--ag-primary-light);
    background: #ffffff;
    color: var(--ag-primary-light);
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.agri-cart-item-qty button:hover { background: var(--ag-primary-light); color: #ffffff; }
.agri-cart-item-qty span { min-width: 24px; text-align: center; font-weight: 800; font-size: 0.85rem; }
.agri-cart-item-remove {
    background: transparent;
    border: none;
    color: #dc2626;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}
.agri-cart-item-remove:hover { background: rgba(220,38,38,0.1); }
.agri-cart-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--ag-muted);
    margin-bottom: 6px;
}
.agri-cart-total {
    border-top: 2px solid var(--ag-border);
    padding-top: 8px;
    margin-top: 4px;
    font-size: 1rem;
    font-weight: 900;
    color: var(--ag-primary-light);
}
.agriculture-cart-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

/* ================================================================
   48b. AGRICULTURE PERMIT BUTTON
   ================================================================ */
.agriculture-permit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--ag-radius-sm);
    background: linear-gradient(135deg, #ffffff, #f0fdf4);
    color: var(--ag-primary);
    border: 2px solid var(--ag-primary-light);
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(0.66rem, 0.82vw, 0.82rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 42px;
    white-space: nowrap;
}
.agriculture-permit-btn:hover {
    background: #dcfce7;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.2);
}

/* ================================================================
   49. ANIMAL ACQUISITION, TRAVEL & CLEARANCE PERMIT MODAL
   ================================================================ */
.agri-permit-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 20, 30, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ag-text, #0f172a);
    box-sizing: border-box;
}
.agri-permit-modal[hidden] { display: none !important; }
.agri-permit-modal * { box-sizing: border-box; }

.agri-permit-container {
    width: min(1280px, 100%);
    margin: auto;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.agri-permit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(12px, 1.8vw, 20px) clamp(14px, 2vw, 24px);
    background: linear-gradient(135deg, var(--ag-primary, #15803d) 0%, var(--ag-primary-light, #16a34a) 100%);
    color: #ffffff;
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
}
.agri-permit-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(0.9rem, 1.35vw, 1.2rem);
    font-weight: 800;
    color: #ffffff;
    min-width: 0;
}
.agri-permit-title i { color: var(--ag-gold, #fde047); font-size: 1.1em; flex-shrink: 0; }
.agri-permit-title span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agri-permit-badge {
    font-size: clamp(0.5rem, 0.65vw, 0.68rem);
    background: rgba(255,255,255,0.20);
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.7px;
    border: 1px solid rgba(255,255,255,0.35);
    flex-shrink: 0;
}
.agri-permit-header .window-close-btn {
    color: #ffffff !important;
    background: rgba(255,255,255,0.12) !important;
    border: 2px solid transparent !important;
    width: clamp(32px, 3.2vw, 40px);
    height: clamp(32px, 3.2vw, 40px);
    min-width: 32px;
    min-height: 32px;
    flex-shrink: 0;
    font-size: clamp(1.1rem, 1.5vw, 1.5rem);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}
.agri-permit-header .window-close-btn:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    transform: scale(1.08);
}

.agri-permit-letterhead {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
    padding: clamp(12px, 1.6vw, 20px) clamp(14px, 2vw, 24px);
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-bottom: 2px solid var(--ag-border, #e2e8f0);
    flex: 0 0 auto;
}
.agri-permit-letterhead-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.agri-permit-logo {
    width: clamp(48px, 5vw, 64px);
    height: clamp(48px, 5vw, 64px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ag-primary, #15803d), var(--ag-primary-light, #16a34a));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: clamp(0.9rem, 1.2vw, 1.15rem);
    letter-spacing: 1px;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.25);
    flex-shrink: 0;
}
.agri-permit-letterhead-text { display: flex; flex-direction: column; min-width: 0; }
.agri-permit-letterhead-text strong {
    font-size: clamp(0.78rem, 1vw, 0.95rem);
    font-weight: 800;
    color: var(--ag-primary, #15803d);
    line-height: 1.2;
}
.agri-permit-letterhead-text small {
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    color: var(--ag-text-2, #334155);
    line-height: 1.3;
    margin-top: 2px;
}
.agri-permit-letterhead-text em {
    font-size: clamp(0.5rem, 0.62vw, 0.62rem);
    color: var(--ag-primary-light, #16a34a);
    font-weight: 700;
    font-style: normal;
    margin-top: 2px;
}
.agri-permit-letterhead-right {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    color: var(--ag-text-2, #334155);
    text-align: right;
    line-height: 1.4;
}
.agri-permit-letterhead-right strong { color: var(--ag-primary, #15803d); }

#agriPermitForm {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.agri-permit-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: clamp(14px, 1.8vw, 22px);
    background: #ffffff;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 transparent;
}
.agri-permit-body::-webkit-scrollbar { width: 10px; }
.agri-permit-body::-webkit-scrollbar-track { background: #f1f5f9; }
.agri-permit-body::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 999px;
    border: 2px solid #f1f5f9;
}

.agri-permit-section { margin-bottom: 22px; }
.agri-permit-section:last-child { margin-bottom: 0; }
.agri-permit-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(0.72rem, 0.9vw, 0.9rem);
    font-weight: 800;
    color: var(--ag-primary, #15803d);
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--ag-border, #e2e8f0);
}
.agri-permit-section-title i { color: var(--ag-primary-light, #16a34a); }

.agri-permit-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}
.agri-permit-route-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.agri-permit-route-item label {
    font-size: clamp(0.6rem, 0.74vw, 0.74rem);
    font-weight: 700;
    color: var(--ag-text-2, #334155);
}
.agri-permit-route-item input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--ag-border, #e2e8f0);
    border-radius: var(--ag-radius-sm, 10px);
    font-family: inherit;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    color: var(--ag-text, #0f172a);
    background: #ffffff;
    outline: none;
    min-height: 42px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.agri-permit-route-item input:focus {
    border-color: var(--ag-primary-light, #16a34a);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}
.agri-permit-route-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ag-primary, #15803d), var(--ag-primary-light, #16a34a));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    margin-bottom: 1px;
}

.agri-permit-table-wrap {
    overflow-x: auto;
    border-radius: var(--ag-radius-sm, 10px);
    border: 2px solid var(--ag-border, #e2e8f0);
    background: #ffffff;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.agri-permit-table-wrap::-webkit-scrollbar { height: 8px; }
.agri-permit-table-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
.agri-permit-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1100px;
    font-size: clamp(0.55rem, 0.7vw, 0.72rem);
}
.agri-permit-table th {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: var(--ag-primary, #15803d);
    padding: 10px 8px;
    text-align: left;
    font-size: clamp(0.5rem, 0.62vw, 0.62rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid var(--ag-primary-light, #16a34a);
    border-right: 1px solid rgba(22, 163, 74, 0.2);
    white-space: nowrap;
}
.agri-permit-table th:last-child { border-right: none; }
.agri-permit-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--ag-border, #e2e8f0);
    border-right: 1px solid rgba(15, 23, 42, 0.05);
    vertical-align: middle;
    background: #ffffff;
}
.agri-permit-table td:last-child { border-right: none; }
.agri-permit-table tbody tr:last-child td { border-bottom: none; }
.agri-permit-table tbody tr:hover td { background: #f0fdf4; }
.agri-permit-sn {
    text-align: center;
    font-weight: 800;
    color: var(--ag-primary, #15803d);
    background: #f0fdf4 !important;
    width: 40px;
}
.agri-permit-role {
    font-weight: 800;
    color: var(--ag-primary, #15803d);
    background: #f0fdf4 !important;
    white-space: nowrap;
    font-size: clamp(0.55rem, 0.68vw, 0.68rem);
    padding: 8px 10px;
}
.agri-permit-table td input {
    width: 100%;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: clamp(0.62rem, 0.75vw, 0.75rem);
    background: transparent;
    outline: none;
    color: var(--ag-text, #0f172a);
    min-height: 34px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.agri-permit-table td input:focus {
    border-color: var(--ag-primary-light, #16a34a);
    background: #f0fdf4;
}

.agri-permit-add-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 2px dashed var(--ag-primary-light, #16a34a);
    background: #f0fdf4;
    color: var(--ag-primary, #15803d);
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(0.62rem, 0.75vw, 0.75rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
}
.agri-permit-add-row:hover {
    background: #dcfce7;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.15);
}

.agri-permit-rep-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.agri-permit-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.agri-permit-field label {
    font-size: clamp(0.6rem, 0.74vw, 0.74rem);
    font-weight: 700;
    color: var(--ag-text-2, #334155);
}
.agri-permit-field input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--ag-border, #e2e8f0);
    border-radius: var(--ag-radius-sm, 10px);
    font-family: inherit;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    color: var(--ag-text, #0f172a);
    background: #ffffff;
    outline: none;
    min-height: 42px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.agri-permit-field input:focus {
    border-color: var(--ag-primary-light, #16a34a);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}

.agri-permit-status {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    margin-top: 14px;
    font-weight: 600;
    text-align: center;
}
.agri-permit-status.success {
    background: #d4edda;
    color: #155724;
    border: 2px solid #c3e6cb;
}
.agri-permit-status.error {
    background: #f8d7da;
    color: #721c24;
    border: 2px solid #f5c6cb;
}

.agri-permit-actions {
    display: flex;
    gap: 8px;
    padding: clamp(12px, 1.5vw, 16px) clamp(14px, 2vw, 22px);
    border-top: 2px solid var(--ag-border, #e2e8f0);
    background: var(--ag-surface-2, #f1f5f9);
    flex: 0 0 auto;
    flex-wrap: wrap;
}
.agri-permit-actions .agri-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--ag-radius-sm, 10px);
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    border: 2px solid transparent;
    white-space: nowrap;
}
.agri-permit-actions .agri-btn-primary {
    flex: 1;
    background: var(--ag-primary-light, #16a34a);
    color: #ffffff;
    border-color: var(--ag-primary, #15803d);
}
.agri-permit-actions .agri-btn-primary:hover {
    background: #22c55e;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.3);
}
.agri-permit-actions .agri-btn-ghost {
    background: #ffffff;
    color: var(--ag-primary, #15803d);
    border-color: var(--ag-border, #e2e8f0);
}
.agri-permit-actions .agri-btn-ghost:hover {
    background: #f0fdf4;
    border-color: var(--ag-primary-light, #16a34a);
}

.agri-permit-code-cell { min-width: 120px; }
.agri-permit-code-badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.68rem;
    font-weight: 700;
    background: #f0fdf4;
    color: #14532d;
    border: 1px dashed #86efac;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.agri-permit-code-badge.pending {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #cbd5e1;
}

.agri-permit-photo-cell {
    min-width: 90px;
    text-align: center;
}
.agri-permit-photo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}
.agri-permit-photo-btn:hover { background: #e2e8f0; color: #1f7a3d; }
.agri-permit-photo-btn.has-photo {
    background: #f0fdf4;
    color: #14532d;
    border-color: #86efac;
}
.agri-permit-photo-preview {
    margin-top: 4px;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    display: inline-block;
}
.agri-permit-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.agri-permit-confirm-cell {
    min-width: 150px;
    text-align: center;
}
.agri-permit-confirm-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    white-space: nowrap;
}
.agri-permit-confirm-badge[data-state="waiting"] {
    background: #fef9c3;
    color: #854d0e;
    border-color: #fde047;
}
.agri-permit-confirm-badge[data-state="confirmed"] {
    background: #dcfce7;
    color: #14532d;
    border-color: #86efac;
}
.agri-permit-confirm-badge[data-state="declined"] {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}
.agri-permit-confirm-badge .spinner-mini {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: apSpin 0.8s linear infinite;
}
@keyframes apSpin { to { transform: rotate(360deg); } }

.agri-permit-notify-seller-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    padding: 5px 10px;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.agri-permit-notify-seller-btn:hover { background: #e2e8f0; color: #1f7a3d; }
.agri-permit-notify-seller-btn:disabled { opacity: 0.7; cursor: wait; }
.agri-permit-notify-seller-btn.sent {
    background: #dbeafe;
    color: #1e40af;
    border-color: #93c5fd;
}

.agri-permit-awareness-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.agri-permit-awareness-btn:hover { background: #e2e8f0; }
.agri-permit-awareness-btn[data-state="aware"] {
    background: #dcfce7;
    color: #14532d;
    border-color: #86efac;
}
.agri-permit-awareness-btn[data-state="ignorant"] {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.agri-permit-notify-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.agri-permit-notify-btn:hover { background: #e2e8f0; color: #1f7a3d; }
.agri-permit-notify-btn.sent {
    background: #dbeafe;
    color: #1e40af;
    border-color: #93c5fd;
}
.agri-permit-notify-btn:disabled { opacity: 0.7; cursor: wait; }

.agri-permit-animal-cell { min-width: 180px; position: relative; }
.livestock-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}
.livestock-input-wrap input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
    flex: 1;
    min-width: 0;
    cursor: text;
}
.livestock-toggle-btn {
    flex: 0 0 auto;
    border: 1px solid #cbd5e1;
    border-left: none;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    padding: 0 8px;
    cursor: pointer;
    font-size: 0.7rem;
    transition: background 0.15s ease;
}
.livestock-toggle-btn:hover { background: #e2e8f0; color: #1f7a3d; }

.livestock-dropdown {
    position: fixed;
    z-index: 10050;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 0.78rem;
}
.livestock-dropdown[hidden] { display: none !important; }

.livestock-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    flex: 0 0 auto;
}
.livestock-search i { color: #94a3b8; font-size: 0.75rem; }
.livestock-search input {
    border: none;
    background: transparent;
    padding: 2px 0;
    font-size: 0.78rem;
    outline: none;
    width: 100%;
    box-shadow: none;
}

.livestock-list {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
    max-height: 240px;
}
.livestock-list::-webkit-scrollbar { width: 8px; }
.livestock-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

.livestock-group-label {
    padding: 6px 12px 4px;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    font-weight: 700;
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 1;
}
.livestock-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    color: #1b2430;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.livestock-option:hover,
.livestock-option.active {
    background: #f0fdf4;
    color: #14532d;
}
.livestock-option .option-emoji { flex: 0 0 auto; }
.livestock-empty {
    padding: 14px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.75rem;
}

.agri-permit-camera-modal {
    position: fixed;
    inset: 0;
    z-index: 10060;
    background: rgba(10, 20, 30, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.agri-permit-camera-modal[hidden] { display: none !important; }

.agri-permit-camera-container {
    background: #0f172a;
    color: #fff;
    border-radius: 14px;
    padding: 18px;
    width: min(560px, 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: entSlideIn 0.3s ease;
}
.agri-permit-camera-container h3 {
    margin: 0 0 12px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.agri-permit-camera-container .fin-video-wrapper {
    position: relative;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.agri-permit-camera-container video,
.agri-permit-camera-container canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.agri-permit-camera-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.agri-permit-camera-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 9px;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.agri-permit-cam-capture { background: #16a34a; color: #fff; }
.agri-permit-cam-capture:hover { background: #15803d; }
.agri-permit-cam-switch { background: #334155; color: #fff; }
.agri-permit-cam-switch:hover { background: #475569; }
.agri-permit-cam-cancel { background: #7f1d1d; color: #fff; }
.agri-permit-cam-cancel:hover { background: #991b1b; }

@media (max-width: 900px) {
    .agri-permit-letterhead { grid-template-columns: 1fr; }
    .agri-permit-letterhead-right { text-align: left; }
    .agri-permit-route { grid-template-columns: 1fr; }
    .agri-permit-route-arrow { transform: rotate(90deg); justify-self: center; }
    .agri-permit-rep-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .agri-permit-modal { padding: 0; }
    .agri-permit-container {
        width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        margin: 0;
    }
    .agri-permit-body { padding: 14px; }
    .agri-permit-actions { padding: 12px 14px; }
    .agri-permit-actions .agri-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 480px) {
    .agri-permit-container { max-width: 100%; max-height: 96vh; }
    .agri-permit-rep-row { grid-template-columns: 1fr; }
    .agri-permit-actions { flex-direction: column; }
    .agri-permit-actions .agri-btn { width: 100%; }
    .agri-permit-actions .agri-btn-primary { flex: none; }
    .agri-permit-add-row { width: 100%; justify-content: center; }
    .agri-permit-letterhead { padding: 12px; }
    .agri-permit-letterhead-left { flex-direction: column; align-items: flex-start; }
}

@media print {
    .agri-permit-header,
    .agri-permit-actions,
    .agri-permit-add-row { display: none !important; }
    .agri-permit-modal {
        position: static;
        background: #fff;
        padding: 0;
    }
    .agri-permit-container {
        border: none;
        box-shadow: none;
        max-height: none;
        max-width: 100%;
    }
    .agri-permit-letterhead { background: #fff; border-bottom: 2px solid #000; }
    .agri-permit-table th { background: #f0f0f0; color: #000; border-bottom: 2px solid #000; }
}

/* ================================================================
   50. ADVERTISEMENT HUB MODAL
   ================================================================ */

/* ---------- 50.1 Main hub modal ---------- */
.advert-hub-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2500;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-text);
    box-sizing: border-box;
}
.advert-hub-modal.active,
.advert-hub-modal:not([hidden]) { display: flex; }

.advert-hub-modal *,
.advert-hub-modal *::before,
.advert-hub-modal *::after { box-sizing: border-box; }

.advert-hub-container {
    background: #ffffff;
    border-radius: var(--radius, 12px);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 1150px;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    animation: entSlideIn 0.3s ease;
}

/* ---------- 50.2 Header ---------- */
.advert-hub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(12px, 1.8vw, 20px) clamp(14px, 2vw, 24px);
    background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%);
    color: #ffffff;
    flex-shrink: 0;
    border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
    position: relative;
    overflow: hidden;
}
.advert-hub-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 20%, rgba(255,255,255,0.12) 0%, transparent 45%),
        radial-gradient(circle at 88% 80%, rgba(255,255,255,0.08) 0%, transparent 50%);
    pointer-events: none;
}
.advert-hub-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(0.95rem, 1.5vw, 1.3rem);
    font-weight: 800;
    color: #ffffff;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.advert-hub-header-title i { font-size: 1.15em; }
.advert-hub-header-title > span:first-of-type {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.advert-hub-badge {
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: clamp(0.5rem, 0.65vw, 0.68rem);
    font-weight: 800;
    letter-spacing: 0.7px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    flex-shrink: 0;
}
.advert-hub-header .window-close-btn {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 2px solid transparent !important;
    width: clamp(32px, 3.2vw, 40px);
    height: clamp(32px, 3.2vw, 40px);
    min-width: 32px;
    min-height: 32px;
    font-size: clamp(1.1rem, 1.5vw, 1.5rem);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}
.advert-hub-header .window-close-btn:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    transform: scale(1.08);
}

/* ---------- 50.3 Banner ---------- */
.advert-hub-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: clamp(10px, 1.4vw, 16px) clamp(14px, 2vw, 24px);
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border-bottom: 1px solid #fed7aa;
    flex-shrink: 0;
}
.advert-hub-banner-icon {
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    line-height: 1;
    flex-shrink: 0;
}
.advert-hub-banner-text { min-width: 0; flex: 1; }
.advert-hub-banner-text h3 {
    font-size: clamp(0.82rem, 1.05vw, 1rem);
    font-weight: 800;
    color: #7c2d12;
    margin: 0 0 3px;
    line-height: 1.25;
}
.advert-hub-banner-text p {
    font-size: clamp(0.6rem, 0.78vw, 0.78rem);
    color: #9a3412;
    margin: 0;
    line-height: 1.45;
}

/* ---------- 50.4 Tabs ---------- */
.advert-hub-tabs {
    display: flex;
    gap: 4px;
    padding: clamp(8px, 1vw, 12px) clamp(10px, 1.4vw, 16px) 0;
    background: #ffffff;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.advert-hub-tabs::-webkit-scrollbar { display: none; }
.advert-hub-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: clamp(9px, 1.1vw, 12px) clamp(12px, 1.5vw, 18px);
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: clamp(0.65rem, 0.85vw, 0.85rem);
    font-weight: 700;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.advert-hub-tab:hover { color: #ea580c; }
.advert-hub-tab.active {
    color: #ea580c;
    border-bottom-color: #ea580c;
}
.advert-hub-tab-count {
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: clamp(0.5rem, 0.65vw, 0.65rem);
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 800;
    min-width: 22px;
    text-align: center;
}
.advert-hub-tab.active .advert-hub-tab-count {
    background: #ffedd5;
    color: #ea580c;
}

/* ---------- 50.5 Actions bar ---------- */
.advert-hub-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: clamp(10px, 1.2vw, 14px) clamp(14px, 2vw, 24px);
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.advert-hub-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 220px;
    min-width: 180px;
    padding: 0 14px;
    background: #ffffff;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    transition: all 0.2s ease;
}
.advert-hub-search-box:focus-within {
    border-color: #ea580c;
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.12);
}
.advert-hub-search-box i {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.advert-hub-search-box input {
    flex: 1;
    min-width: 0;
    padding: 11px 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: clamp(0.72rem, 0.85vw, 0.85rem);
    color: var(--color-text);
    min-height: 40px;
}
.advert-hub-select {
    padding: 10px 12px;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--color-text);
    font-family: inherit;
    font-size: clamp(0.68rem, 0.82vw, 0.82rem);
    cursor: pointer;
    outline: none;
    min-height: 42px;
    transition: all 0.2s ease;
}
.advert-hub-select:focus {
    border-color: #ea580c;
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.12);
}

/* ---------- 50.6 Content + panels ---------- */
.advert-hub-content {
    flex: 1;
    overflow-y: auto;
    padding: clamp(14px, 1.8vw, 22px);
    background: var(--color-bg-alt);
    min-height: 300px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.advert-hub-content::-webkit-scrollbar { width: 8px; }
.advert-hub-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
.advert-hub-panel { display: none; }
.advert-hub-panel.active { display: block; }

.advert-hub-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    gap: 8px;
    flex-wrap: wrap;
}
.advert-hub-results-head h4 {
    margin: 0;
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.advert-hub-results-count {
    background: #fff7ed;
    color: #c2410c;
    font-size: clamp(0.6rem, 0.72vw, 0.72rem);
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

/* ---------- 50.7 Ad cards grid ---------- */
.advert-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
}
.advert-hub-card {
    background: #ffffff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius, 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    cursor: pointer;
}
.advert-hub-card:hover {
    transform: translateY(-4px);
    border-color: #ea580c;
    box-shadow: 0 14px 34px rgba(234, 88, 12, 0.18);
}
.advert-hub-card:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}
.advert-hub-card.featured {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}
.advert-hub-card.featured::before {
    content: '★ FEATURED';
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.4);
}
.advert-hub-card-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #ffedd5, #fed7aa);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ea580c;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    overflow: hidden;
    position: relative;
}
.advert-hub-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s;
}
.advert-hub-card:hover .advert-hub-card-img img { transform: scale(1.06); }
.advert-hub-card-media-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #94a3b8;
    font-size: 2.2rem;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
}
.advert-hub-card-tier-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
}
.advert-hub-card-tier-badge.free   { background: #e2e8f0; color: #475569; }
.advert-hub-card-tier-badge.bronze { background: #fed7aa; color: #7c2d12; }
.advert-hub-card-tier-badge.silver { background: #e2e8f0; color: #1e293b; }
.advert-hub-card-tier-badge.gold   { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #713f12; }
.advert-hub-card-body {
    padding: clamp(10px, 1.2vw, 14px);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.advert-hub-card-cat {
    display: inline-block;
    padding: 2px 10px;
    font-size: clamp(0.5rem, 0.6vw, 0.6rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #ffedd5;
    color: #9a3412;
    border-radius: 999px;
    align-self: flex-start;
}
.advert-hub-card-title {
    font-size: clamp(0.78rem, 0.92vw, 0.92rem);
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.advert-hub-card-desc {
    font-size: clamp(0.6rem, 0.74vw, 0.74rem);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.advert-hub-card-loc {
    font-size: clamp(0.55rem, 0.7vw, 0.72rem);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.advert-hub-card-foot,
.advert-hub-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text-muted);
    gap: 8px;
}
.advert-hub-card-meta span { display: inline-flex; align-items: center; gap: 3px; }
.advert-hub-card-price {
    font-weight: 900;
    color: #ea580c;
    font-size: clamp(0.72rem, 0.88vw, 0.88rem);
    white-space: nowrap;
}
.advert-hub-card-price small {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.7rem;
}
.advert-hub-card-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
    z-index: 4;
}
.advert-hub-card-fav:hover { color: #ef4444; transform: scale(1.1); }
.advert-hub-card-fav.active { color: #ef4444; }
.advert-hub-card-fav:focus-visible {
    outline: 3px solid #ea580c;
    outline-offset: 2px;
}

/* ---------- 50.8 Pricing grid ---------- */
.advert-hub-pricing-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 12px;
}
.advert-hub-price-card {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.advert-hub-price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
}
.advert-hub-price-card.featured-plan {
    border-color: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
    transform: scale(1.03);
}
.advert-hub-price-card.featured-plan::after {
    content: 'MOST POPULAR';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.advert-hub-price-tier {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.advert-hub-price-card.tier-free   .advert-hub-price-tier { color: #64748b; }
.advert-hub-price-card.tier-bronze .advert-hub-price-tier { color: #c2410c; }
.advert-hub-price-card.tier-silver .advert-hub-price-tier { color: #334155; }
.advert-hub-price-card.tier-gold   .advert-hub-price-tier { color: #b45309; }
.advert-hub-price-amount {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}
.advert-hub-price-amount small {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 4px;
    letter-spacing: 0.02em;
}
.advert-hub-price-features {
    list-style: none;
    padding: 0;
    margin: 8px 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.advert-hub-price-features li {
    font-size: 0.82rem;
    color: #334155;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.advert-hub-price-features li i { color: #16a34a; margin-top: 3px; flex: 0 0 auto; }
.advert-hub-price-features li.no { color: #94a3b8; text-decoration: line-through; }
.advert-hub-price-features li.no i { color: #cbd5e1; }
.advert-hub-price-btn {
    margin-top: auto;
    padding: 11px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.advert-hub-price-btn.primary {
    background: linear-gradient(135deg, #ea580c, #f59e0b);
    color: #fff;
}
.advert-hub-price-btn.primary:hover { filter: brightness(1.08); }
.advert-hub-price-btn.outline {
    background: #fff;
    color: #334155;
    border-color: #cbd5e1;
}
.advert-hub-price-btn.outline:hover { background: #f8fafc; }

/* ---------- 50.9 My Ads / dashboard ---------- */
.advert-hub-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.advert-hub-stat-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
}
.advert-hub-stat-card p {
    margin: 0;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.advert-hub-stat-card strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    margin-top: 4px;
    color: #0f172a;
}
.advert-hub-my-ads { display: flex; flex-direction: column; gap: 10px; }
.advert-hub-my-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    background: #fff;
    flex-wrap: wrap;
    align-items: flex-start;
}
.advert-hub-my-row h4 {
    margin: 0 0 4px;
    font-size: 0.95rem;
    color: #0f172a;
}
.advert-hub-my-row p {
    margin: 0;
    font-size: 0.8rem;
    color: #64748b;
}
.advert-hub-my-row .meta {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 6px;
}
.advert-hub-my-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.advert-hub-status-pill {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.advert-hub-status-pill.active   { background: #d1fae5; color: #047857; }
.advert-hub-status-pill.pending  { background: #fef3c7; color: #b45309; }
.advert-hub-status-pill.expired  { background: #f1f5f9; color: #475569; }
.advert-hub-status-pill.rejected { background: #fee2e2; color: #b91c1c; }

/* ---------- 50.10 Legacy inline Post Ad form ---------- */
#advPostForm {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #ffffff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius, 12px);
    padding: clamp(14px, 1.8vw, 22px);
    max-width: 780px;
    margin: 0 auto;
}
.advert-hub-modal .form-group { margin-bottom: 12px; }
.advert-hub-modal .form-group label {
    display: block;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 5px;
}
.advert-hub-modal .form-group label .req { color: #dc2626; margin-left: 2px; }
.advert-hub-modal .form-group input,
.advert-hub-modal .form-group select,
.advert-hub-modal .form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    color: var(--color-text);
    background: #ffffff;
    outline: none;
    min-height: 42px;
    transition: all 0.2s ease;
}
.advert-hub-modal .form-group textarea { resize: vertical; min-height: 80px; }
.advert-hub-modal .form-group input:focus,
.advert-hub-modal .form-group select:focus,
.advert-hub-modal .form-group textarea:focus {
    border-color: #ea580c;
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.12);
}
.advert-hub-modal .form-group input.field-error,
.advert-hub-modal .form-group select.field-error,
.advert-hub-modal .form-group textarea.field-error {
    border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
}
.advert-hub-modal .form-group small {
    color: #94a3b8;
    font-size: 0.72rem;
    display: block;
    margin-top: 4px;
}
.advert-hub-modal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.advert-hub-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 2px solid var(--color-border);
}

/* ---------- 50.11 Shared advert buttons ---------- */
.advert-hub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    border: 2px solid transparent;
    font-family: inherit;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    text-decoration: none;
    white-space: nowrap;
}
.advert-hub-btn:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}
.advert-hub-btn-primary {
    background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%);
    color: #ffffff;
    border-color: #c2410c;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.3);
    flex: 1;
}
.advert-hub-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(234, 88, 12, 0.45);
    filter: brightness(1.08);
}
.advert-hub-btn-outline {
    background: #ffffff;
    color: var(--color-text-muted);
    border-color: var(--color-border);
}
.advert-hub-btn-outline:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
    border-color: #ea580c;
}
.advert-hub-btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
}
.advert-hub-btn-ghost:hover { background: #f1f5f9; color: var(--color-text); }
.advert-hub-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.advert-hub-btn:active { transform: scale(0.97); }
.advert-hub-btn-block { width: 100%; }

/* ---------- 50.12 Empty + status ---------- */
.advert-hub-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 7vw, 80px) 20px;
    text-align: center;
    color: var(--color-text-muted);
    gap: 14px;
}
.advert-hub-empty[hidden] { display: none !important; }
.advert-hub-empty.show,
.advert-hub-empty:not(.show):not([hidden]) { display: flex; }
.advert-hub-empty i {
    font-size: clamp(2.4rem, 5vw, 3.5rem);
    opacity: 0.25;
    color: #ea580c;
    margin-bottom: 10px;
    display: block;
}
.advert-hub-empty p {
    margin: 0;
    font-weight: 700;
    font-size: clamp(0.75rem, 0.95vw, 0.95rem);
    color: var(--color-text);
}
.advert-hub-empty small {
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    opacity: 0.75;
}
.advert-hub-status {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    font-weight: 600;
}
.advert-hub-status[hidden] { display: none !important; }
.advert-hub-status.success { background: #d1fae5; color: #047857; border: 2px solid #6ee7b7; }
.advert-hub-status.error   { background: #fee2e2; color: #b91c1c; border: 2px solid #fca5a5; }
.advert-hub-status.info    { background: #dbeafe; color: #1e40af; border: 2px solid #93c5fd; }

/* ---------- 50.13 Footer ---------- */
.advert-hub-footer {
    padding: clamp(8px, 1.1vh, 12px) clamp(14px, 2vw, 24px);
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-card);
    text-align: center;
    flex-shrink: 0;
}
.advert-hub-footer-note {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.advert-hub-footer-note i { color: #ea580c; }

/* ================================================================
   50.14 CREATE AD MODAL
   ================================================================ */
.advert-hub-create-modal {
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: rgba(10, 20, 30, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.advert-hub-create-modal[hidden] { display: none; }
.advert-hub-create-modal.active { display: flex; }
.advert-hub-create-modal *,
.advert-hub-create-modal *::before,
.advert-hub-create-modal *::after { box-sizing: border-box; }

.advert-hub-create-container {
    width: min(820px, 100%);
    margin: auto;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.advert-hub-create-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: linear-gradient(135deg, #7c2d12 0%, #ea580c 100%);
    color: #fff;
    flex: 0 0 auto;
}
.advert-hub-create-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 700;
}
.advert-hub-create-header .window-close-btn {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: none;
    font-size: 1.3rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    display: grid;
    place-items: center;
}
.advert-hub-create-header .window-close-btn:hover { background: rgba(255, 255, 255, 0.32); }

.advert-hub-steps {
    display: flex;
    justify-content: space-between;
    padding: 14px 22px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex: 0 0 auto;
    gap: 8px;
}
.advert-hub-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    flex: 1;
}
.advert-hub-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex: 0 0 auto;
    transition: all 0.2s;
}
.advert-hub-step.active { color: #ea580c; }
.advert-hub-step.active .advert-hub-step-num {
    background: #ea580c;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.15);
}
.advert-hub-step.done { color: #16a34a; }
.advert-hub-step.done .advert-hub-step-num { background: #16a34a; color: #fff; }

.advert-hub-create-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 22px;
}
.advert-hub-create-body::-webkit-scrollbar { width: 10px; }
.advert-hub-create-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

.advert-hub-create-actions {
    padding: 14px 22px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}
.advert-hub-create-actions .advert-hub-btn { flex: 1; }

.advert-hub-form-row {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 12px;
}
.advert-hub-form-row.three { grid-template-columns: 1fr 1fr 1fr; }
.advert-hub-form-group { display: flex; flex-direction: column; gap: 5px; }
.advert-hub-form-group.full { grid-column: 1 / -1; }
.advert-hub-form-group label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
}
.advert-hub-form-group label .req { color: #dc2626; margin-left: 2px; }
.advert-hub-form-group input,
.advert-hub-form-group select,
.advert-hub-form-group textarea {
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    font-size: 0.85rem;
    outline: none;
    background: #fff;
    width: 100%;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.advert-hub-form-group input:focus,
.advert-hub-form-group select:focus,
.advert-hub-form-group textarea:focus {
    border-color: #ea580c;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
}
.advert-hub-form-group textarea { resize: vertical; min-height: 80px; }
.advert-hub-form-group small { color: #94a3b8; font-size: 0.72rem; }
.advert-hub-char-count {
    align-self: flex-end;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: -2px;
}

.advert-hub-image-picker {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.advert-hub-image-drop {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    background: #f8fafc;
    transition: all 0.15s ease;
}
.advert-hub-image-drop:hover,
.advert-hub-image-drop.dragging {
    border-color: #ea580c;
    background: #fff7ed;
}
.advert-hub-image-drop i {
    font-size: 2rem;
    color: #94a3b8;
    display: block;
    margin-bottom: 8px;
}
.advert-hub-image-drop.dragging i,
.advert-hub-image-drop:hover i { color: #ea580c; }
.advert-hub-image-drop p {
    margin: 0 0 4px;
    color: #334155;
    font-weight: 600;
    font-size: 0.88rem;
}
.advert-hub-image-drop small { color: #94a3b8; font-size: 0.75rem; }
.advert-hub-image-preview {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    aspect-ratio: 16 / 10;
}
.advert-hub-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.advert-hub-image-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    color: #fff;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.advert-hub-image-remove:hover { background: #dc2626; }

.advert-hub-preview-head {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #1e40af;
    margin-bottom: 14px;
    line-height: 1.55;
}
.advert-hub-preview-head strong { font-weight: 800; }

.advert-hub-tier-select {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.advert-hub-tier-option {
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    background: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: inherit;
}
.advert-hub-tier-option:hover {
    border-color: #fdba74;
    transform: translateY(-2px);
}
.advert-hub-tier-option.selected {
    border-color: #ea580c;
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.12);
}
.advert-hub-tier-option .tier-name {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}
.advert-hub-tier-option.selected .tier-name { color: #ea580c; }
.advert-hub-tier-option .tier-price {
    font-size: 1.7rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}
.advert-hub-tier-option .tier-price small {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: #64748b;
    margin-top: 2px;
}
.advert-hub-tier-option .tier-duration {
    font-size: 0.76rem;
    color: #64748b;
    font-weight: 600;
}
.advert-hub-tier-option .tier-bullets {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.76rem;
    color: #475569;
}
.advert-hub-tier-option .tier-bullets li { display: flex; align-items: center; gap: 6px; }
.advert-hub-tier-option .tier-bullets i { color: #16a34a; font-size: 0.7rem; }

.advert-hub-review {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}
.advert-hub-review-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 0.85rem;
    gap: 12px;
}
.advert-hub-review-row:last-child { border-bottom: none; }
.advert-hub-review-row span:first-child { color: #64748b; }
.advert-hub-review-row span:last-child {
    font-weight: 700;
    color: #0f172a;
    text-align: right;
    word-break: break-word;
}
.advert-hub-review-row.total {
    border-top: 2px solid #e2e8f0;
    margin-top: 6px;
    padding-top: 12px;
    font-size: 1rem;
}
.advert-hub-review-row.total span:last-child { color: #c2410c; font-size: 1.15rem; }

.advert-hub-pay-methods {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-top: 8px;
    margin-bottom: 14px;
}
.advert-hub-pay-method {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}
.advert-hub-pay-method:hover { border-color: #fdba74; }
.advert-hub-pay-method.selected {
    border-color: #ea580c;
    background: #fff7ed;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.advert-hub-pay-method-logo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
}
.advert-hub-pay-method-logo.airtel { background: #e11d48; }
.advert-hub-pay-method-logo.mtn    { background: #facc15; color: #713f12; }
.advert-hub-pay-method-logo.zamtel { background: #16a34a; }
.advert-hub-pay-method-logo.bank   { background: #1e40af; }
.advert-hub-pay-method-logo.card   { background: #0f172a; }

.advert-hub-success {
    text-align: center;
    padding: 32px 20px;
}
.advert-hub-success .check {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    font-size: 2.2rem;
    animation: advertHubPop 0.35s ease-out;
}
@keyframes advertHubPop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
.advert-hub-success h3 {
    margin: 0 0 6px;
    font-size: 1.2rem;
    color: #0f172a;
}
.advert-hub-success p {
    margin: 0 0 6px;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}
.advert-hub-success .ref {
    display: inline-block;
    margin-top: 10px;
    background: #f1f5f9;
    color: #334155;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.82rem;
    padding: 6px 14px;
    border-radius: 8px;
    letter-spacing: 0.04em;
}

/* ================================================================
   50.15 DETAIL MODAL
   ================================================================ */
.advert-hub-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(10, 20, 30, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.advert-hub-detail-modal[hidden] { display: none; }
.advert-hub-detail-modal.active { display: flex; }
.advert-hub-detail-modal *,
.advert-hub-detail-modal *::before,
.advert-hub-detail-modal *::after { box-sizing: border-box; }

.advert-hub-detail-container {
    width: min(760px, 100%);
    margin: auto;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.advert-hub-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    flex: 0 0 auto;
}
.advert-hub-detail-back {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 0.95rem;
}
.advert-hub-detail-back:hover { background: #f1f5f9; }
.advert-hub-detail-header-text { flex: 1; min-width: 0; }
.advert-hub-detail-cat {
    font-size: 0.68rem;
    font-weight: 800;
    color: #ea580c;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.advert-hub-detail-header-text h2 {
    margin: 2px 0 0;
    font-size: 1.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.advert-hub-detail-header .window-close-btn {
    background: #f1f5f9;
    border: none;
    font-size: 1.4rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    color: #64748b;
    line-height: 1;
    display: grid;
    place-items: center;
}
.advert-hub-detail-header .window-close-btn:hover { background: #e2e8f0; }

.advert-hub-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 22px 22px;
}
.advert-hub-detail-body::-webkit-scrollbar { width: 10px; }
.advert-hub-detail-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

.advert-hub-detail-hero {
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #f1f5f9;
    margin: 16px 0;
    position: relative;
}
.advert-hub-detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.advert-hub-detail-hero-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #94a3b8;
    font-size: 3rem;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
}
.advert-hub-detail-price-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.advert-hub-detail-price {
    font-size: 1.8rem;
    font-weight: 800;
    color: #c2410c;
}
.advert-hub-detail-price small {
    font-size: 0.9rem;
    font-weight: 500;
    color: #64748b;
}
.advert-hub-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}
.advert-hub-chip {
    background: #f1f5f9;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    color: #334155;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.advert-hub-detail-section { margin-bottom: 18px; }
.advert-hub-detail-section h3 {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.advert-hub-detail-section h3 i { color: #ea580c; }
.advert-hub-detail-desc {
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.65;
    white-space: pre-line;
    margin: 0;
}
.advert-hub-detail-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.advert-hub-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    padding: 11px 14px;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
    font-size: 0.88rem;
}
.advert-hub-contact-row i { color: #ea580c; width: 18px; }
.advert-hub-contact-row a { color: #1e40af; text-decoration: none; }
.advert-hub-contact-row a:hover { text-decoration: underline; }

.advert-hub-detail-actions {
    padding: 14px 22px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}
.advert-hub-detail-actions .advert-hub-btn { flex: 1; }

/* ================================================================
   50.16 Advert toast (independent of the global #toast)
   ================================================================ */
#advert-hub-toast,
#advert-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    padding: 12px 20px;
    border-radius: 10px;
    background: #0f172a;
    color: #fff;
    font-size: 0.85rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    z-index: 100090;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
}
#advert-hub-toast.show,
#advert-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
#advert-hub-toast.success,
#advert-toast.success { background: #047857; }
#advert-hub-toast.error,
#advert-toast.error   { background: #b91c1c; }
#advert-hub-toast.warning,
#advert-toast.warning { background: #b45309; }

/* ================================================================
   50.17 Phone full-bleed
   ================================================================ */
@media (max-width: 640px) {
    .advert-hub-modal,
    .advert-hub-create-modal,
    .advert-hub-detail-modal { padding: 0; }
    .advert-hub-container,
    .advert-hub-create-container,
    .advert-hub-detail-container {
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        width: 100%;
        margin: 0;
    }
    .advert-hub-content,
    .advert-hub-create-body,
    .advert-hub-detail-body { padding: 14px; }
    .advert-hub-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   51. CONSTRUCTION & SURVEY HUB MODAL
   ================================================================ */
.construction-modal,
.construction-form-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2500;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--con-text);
    box-sizing: border-box;
}
.construction-modal.active,
.construction-form-modal.active { display: flex; }
.construction-modal *,
.construction-modal *::before,
.construction-modal *::after,
.construction-form-modal *,
.construction-form-modal *::before,
.construction-form-modal *::after { box-sizing: border-box; }

.construction-container {
    background: var(--con-card);
    border-radius: var(--radius, 12px);
    border: 2px solid var(--color-border, #b0b8c0);
    width: 100%;
    max-width: 1250px;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: entSlideIn 0.3s ease;
}
.construction-form-container {
    background: var(--con-card);
    border-radius: var(--radius, 12px);
    border: 2px solid var(--color-border, #b0b8c0);
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: entSlideIn 0.3s ease;
}

.construction-header,
.construction-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(12px, 1.8vw, 20px) clamp(14px, 2vw, 24px);
    background: linear-gradient(135deg, var(--con-primary) 0%, var(--con-primary-dark) 100%);
    color: #ffffff;
    flex-shrink: 0;
    border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
    position: relative;
    overflow: hidden;
}
.construction-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 20%, rgba(255,255,255,0.10) 0%, transparent 45%),
        radial-gradient(circle at 88% 80%, rgba(255,255,255,0.06) 0%, transparent 50%);
    pointer-events: none;
}
.construction-header-title,
.construction-form-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(0.95rem, 1.5vw, 1.3rem);
    font-weight: 800;
    color: #ffffff;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.construction-header-title i { color: var(--con-accent); font-size: 1.1em; }
.construction-header-title > span:first-of-type {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.construction-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(0.5rem, 0.65vw, 0.68rem);
    background: rgba(16, 185, 129, 0.22);
    color: #a7f3d0;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.7px;
    border: 1px solid rgba(16, 185, 129, 0.55);
    text-transform: uppercase;
    flex-shrink: 0;
}
.construction-header .window-close-btn,
.construction-form-header .window-close-btn {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border: 2px solid transparent !important;
    width: clamp(32px, 3.2vw, 40px);
    height: clamp(32px, 3.2vw, 40px);
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    font-size: clamp(1.1rem, 1.5vw, 1.5rem);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}
.construction-header .window-close-btn:hover,
.construction-form-header .window-close-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    transform: scale(1.08);
}

.construction-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: clamp(10px, 1.4vw, 16px) clamp(14px, 2vw, 24px);
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-bottom: 1px solid var(--con-border);
    flex-shrink: 0;
}
.construction-banner-icon {
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    line-height: 1;
    flex-shrink: 0;
}
.construction-banner-text { min-width: 0; flex: 1; }
.construction-banner-text h3 {
    font-size: clamp(0.82rem, 1.05vw, 1rem);
    font-weight: 800;
    color: var(--con-text);
    margin: 0 0 3px;
    line-height: 1.25;
}
.construction-banner-text p {
    font-size: clamp(0.6rem, 0.78vw, 0.78rem);
    color: var(--con-muted);
    margin: 0;
    line-height: 1.45;
}

.construction-actions {
    display: flex;
    gap: 10px;
    padding: clamp(10px, 1.2vw, 14px) clamp(14px, 2vw, 24px);
    border-bottom: 1px solid var(--con-border);
    background: var(--con-card);
    flex-shrink: 0;
}
.construction-search-box {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 2px solid var(--con-border);
    border-radius: 10px;
    background: #f3f4f6;
    transition: all 0.2s ease;
}
.construction-search-box:focus-within {
    border-color: var(--con-primary);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.12);
}
.construction-search-box i { color: var(--con-muted); font-size: 0.9rem; flex-shrink: 0; }
.construction-search-box input {
    flex: 1;
    min-width: 0;
    padding: 11px 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: clamp(0.72rem, 0.85vw, 0.85rem);
    color: var(--con-text);
    min-height: 40px;
}

.construction-tabs {
    display: flex;
    border-bottom: 2px solid var(--con-border);
    background: var(--con-card);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.construction-tabs::-webkit-scrollbar { display: none; }
.construction-tab {
    flex: 1;
    min-width: 120px;
    padding: clamp(10px, 1.3vw, 14px) clamp(12px, 1.5vw, 18px);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.65rem, 0.85vw, 0.85rem);
    color: var(--con-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.construction-tab:hover { background: rgba(30, 58, 138, 0.06); color: var(--con-primary); }
.construction-tab.active {
    color: var(--con-primary);
    border-bottom-color: var(--con-primary);
    background: #ffffff;
}

.construction-content {
    flex: 1;
    overflow-y: auto;
    padding: clamp(14px, 2vw, 24px);
    background: var(--con-bg);
    min-height: 300px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.construction-content::-webkit-scrollbar { width: 8px; }
.construction-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
.construction-panel { display: none; }
.construction-panel.active { display: block; }

.construction-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.construction-select,
.construction-input,
.construction-input-sm {
    padding: 9px 12px;
    border: 2px solid var(--con-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    background: #ffffff;
    color: var(--con-text);
    outline: none;
    min-height: 40px;
    transition: all 0.2s ease;
}
.construction-select:focus,
.construction-input:focus,
.construction-input-sm:focus {
    border-color: var(--con-primary);
    box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.12);
}
.construction-input { flex: 1; min-width: 180px; }
.construction-input-sm { width: 90px; }

.construction-bucket {
    background: var(--con-card);
    border: 2px solid var(--con-border);
    border-radius: var(--radius, 12px);
    margin-bottom: 14px;
    overflow: hidden;
}
.construction-bucket-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #f3f4f6;
    cursor: pointer;
    font-weight: 800;
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    color: var(--con-primary);
    transition: background 0.2s ease;
}
.construction-bucket-head:hover { background: #e5e7eb; }
.construction-bucket-head .count {
    font-size: 0.8em;
    color: var(--con-muted);
    font-weight: 600;
    margin-left: 6px;
}
.construction-bucket-body { display: none; }
.construction-bucket.open .construction-bucket-body { display: block; }
.construction-service-table {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(0.7rem, 0.82vw, 0.82rem);
}
.construction-service-table th,
.construction-service-table td {
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--con-border);
}
.construction-service-table th {
    background: #fafafa;
    font-weight: 700;
    font-size: 0.75em;
    color: var(--con-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.construction-service-table tr:hover td { background: #f9fafb; }
.construction-code {
    font-family: monospace;
    font-weight: 800;
    color: var(--con-primary);
    white-space: nowrap;
}
.construction-rate {
    font-weight: 800;
    color: var(--con-success);
    white-space: nowrap;
}
.construction-book-btn {
    background: var(--con-primary);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.construction-book-btn:hover { background: var(--con-primary-dark); transform: translateY(-1px); }

.construction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.construction-company-card {
    background: var(--con-card);
    border: 2px solid var(--con-border);
    border-radius: var(--radius, 12px);
    padding: 16px;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.construction-company-card:hover {
    transform: translateY(-3px);
    border-color: var(--con-primary);
    box-shadow: 0 12px 28px rgba(30, 58, 138, 0.15);
}
.construction-company-card h3 {
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    font-weight: 800;
    color: var(--con-text);
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}
.construction-badge {
    font-size: 0.6rem;
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 800;
    white-space: nowrap;
}
.construction-badge-verified { background: #d1fae5; color: #065f46; }
.construction-badge-country  { background: #dbeafe; color: #1e40af; }
.construction-company-meta {
    font-size: clamp(0.65rem, 0.78vw, 0.78rem);
    color: var(--con-muted);
    line-height: 1.6;
}
.construction-stars { color: var(--con-accent); font-size: 0.9rem; }

.construction-calc-box {
    background: var(--con-card);
    border: 2px solid var(--con-border);
    border-radius: var(--radius, 12px);
    padding: clamp(14px, 1.8vw, 22px);
}
.construction-calc-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.construction-calc-row .construction-select { flex: 3; min-width: 240px; }
.construction-calc-row .construction-input-sm { flex: 1; min-width: 80px; }
.construction-calc-add {
    background: var(--con-success);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: inherit;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    transition: all 0.2s ease;
}
.construction-calc-add:hover { background: #059669; transform: translateY(-1px); }
.construction-calc-items { margin: 16px 0; }
.construction-calc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: clamp(0.7rem, 0.82vw, 0.82rem);
    flex-wrap: wrap;
}
.construction-calc-item .remove {
    background: none;
    color: var(--con-danger);
    font-weight: 800;
    font-size: 1rem;
    font-family: inherit;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.construction-calc-item .remove:hover { background: rgba(239, 68, 68, 0.1); }
.construction-calc-total {
    display: flex;
    justify-content: space-between;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: 800;
    padding: 16px 0;
    border-top: 2px solid var(--con-border);
    border-bottom: 2px solid var(--con-border);
    margin-bottom: 16px;
    color: var(--con-primary);
}
.construction-calc-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.construction-calc-actions .construction-btn { flex: 1; min-width: 140px; }

.construction-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    border: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}
.construction-btn-primary {
    background: var(--con-primary);
    color: #ffffff;
    border-color: var(--con-primary-dark);
}
.construction-btn-primary:hover { background: var(--con-primary-dark); transform: translateY(-1px); }
.construction-btn-outline {
    background: #ffffff;
    color: var(--con-primary);
    border-color: var(--con-primary);
}
.construction-btn-outline:hover { background: rgba(30, 58, 138, 0.06); }

.construction-footer {
    padding: clamp(8px, 1.1vh, 12px) clamp(14px, 2vw, 24px);
    border-top: 1px solid var(--con-border);
    background: #f3f4f6;
    text-align: center;
    flex-shrink: 0;
}
.construction-footer-note {
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    color: var(--con-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.construction-footer-note i { color: var(--con-primary); }

.construction-form-body {
    padding: clamp(14px, 1.8vw, 22px);
    overflow-y: auto;
    flex: 1 1 auto;
}
.construction-form-body label {
    display: block;
    font-size: clamp(0.62rem, 0.76vw, 0.76rem);
    font-weight: 700;
    color: #334155;
    margin-bottom: 5px;
    margin-top: 12px;
}
.construction-form-body label:first-child { margin-top: 0; }
.construction-form-body input,
.construction-form-body select,
.construction-form-body textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--con-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    color: var(--con-text);
    background: #ffffff;
    outline: none;
    min-height: 42px;
    transition: all 0.2s ease;
}
.construction-form-body textarea { resize: vertical; min-height: 80px; }
.construction-form-body input:focus,
.construction-form-body select:focus,
.construction-form-body textarea:focus {
    border-color: var(--con-primary);
    box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.12);
}
.construction-form-actions {
    display: flex;
    gap: 8px;
    padding: clamp(12px, 1.5vw, 16px) clamp(14px, 2vw, 22px);
    border-top: 2px solid var(--con-border);
    background: #f3f4f6;
    flex-shrink: 0;
}
.construction-form-actions .construction-btn { flex: 1; }

@media (max-width: 768px) {
    .construction-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
    .construction-service-table th:nth-child(3),
    .construction-service-table td:nth-child(3) { display: none; }
}
@media (max-width: 480px) {
    .construction-container,
    .construction-form-container { max-width: 100%; max-height: 96vh; }
    .construction-grid { grid-template-columns: 1fr; }
    .construction-calc-row { flex-direction: column; }
    .construction-calc-row .construction-select,
    .construction-calc-row .construction-input-sm { width: 100%; min-width: 0; }
    .construction-calc-add { width: 100%; justify-content: center; }
    .construction-tab { min-width: 90px; font-size: 0.62rem; padding: 10px 8px; }
    .construction-service-table th:nth-child(3),
    .construction-service-table td:nth-child(3) { display: none; }
    .construction-form-actions { flex-direction: column; }
}

/* ================================================================
   52. ADVERTISE / RENTAL BUTTONS — RESPONSIVE OVERRIDES
   ================================================================ */
@media (max-width: 900px) {
    .advertise-header-btn,
    .rental-header-btn {
        animation: none !important;
    }
}

@media (max-width: 720px) {
    .floating-header .advertise-header-btn,
    .floating-user-info .advertise-header-btn,
    .advertise-header-btn,
    .floating-header .rental-header-btn,
    .floating-user-info .rental-header-btn,
    .rental-header-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        padding: 0 !important;
        margin: 0 4px 0 0 !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 50% !important;
        gap: 0 !important;
        flex: 0 0 42px !important;
        box-sizing: border-box !important;
        animation: none !important;
    }
    .floating-header .advertise-header-btn > span,
    .floating-header .rental-header-btn > span,
    .advertise-header-btn > span,
    .rental-header-btn > span {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    .floating-header .advertise-header-btn > i,
    .advertise-header-btn > i,
    .floating-header .rental-header-btn > i,
    .rental-header-btn > i {
        font-size: 1.05rem !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    .floating-header .login-btn,
    .floating-user-info .login-btn {
        padding: 7px 11px !important;
        font-size: 0.75rem !important;
        min-height: 32px !important;
        margin: 0 2px !important;
    }
    .floating-user-info {
        gap: 4px !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }
    .floating-header-inner { padding: 4px 8px !important; gap: 6px !important; }

    .hero-cta-row {
        margin-top: 20px !important;
        padding: 0 16px !important;
        gap: 10px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .hero-cta-advertise,
    .hero-cta-rentals {
        width: 100% !important;
        max-width: 100% !important;
        align-items: center !important;
        text-align: center !important;
        padding: 12px 18px !important;
        box-sizing: border-box !important;
    }
    .hero-cta-advertise::before,
    .hero-cta-rentals::before { display: none !important; }
    .hero-cta-label { justify-content: center !important; width: 100% !important; }
    .hero-cta-sub { text-align: center !important; width: 100% !important; }
    .hero-cta-advertise > i,
    .hero-cta-rentals > i { display: none !important; }

    .service-item.advert-hub-featured {
        gap: 8px !important;
        padding: 11px 13px !important;
        min-width: 0 !important;
    }
    .advert-hub-featured-icon { font-size: 1.25rem !important; }
    .advert-hub-featured-text { min-width: 0 !important; overflow: hidden !important; }
    .advert-hub-featured-text small {
        font-size: 0.66rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }
    .advert-hub-featured-badge {
        font-size: 0.58rem !important;
        padding: 3px 7px !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 480px) {
    .advertise-header-btn,
    .rental-header-btn,
    .floating-header .advertise-header-btn,
    .floating-header .rental-header-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        flex: 0 0 38px !important;
        margin-right: 3px !important;
    }
    .advertise-header-btn > i,
    .rental-header-btn > i { font-size: 0.92rem !important; }

    .floating-header .login-btn {
        padding: 6px 9px !important;
        font-size: 0.7rem !important;
        min-height: 30px !important;
    }
    .floating-header-inner {
        padding: 4px 6px !important;
        gap: 4px !important;
    }

    .advertise-fab {
        position: fixed !important;
        bottom: 82px !important;
        right: 12px !important;
        left: auto !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 50% !important;
        gap: 0 !important;
        animation: none !important;
        box-sizing: border-box !important;
    }
    .advertise-fab > i { font-size: 1.2rem !important; margin: 0 !important; }
    .advertise-fab::after { display: none !important; }
    .advertise-fab-label { display: none !important; }

    .rental-fab {
        bottom: 144px !important;
        right: 12px !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 50% !important;
        animation: none !important;
        box-sizing: border-box !important;
    }
    .rental-fab > i { font-size: 1.2rem !important; margin: 0 !important; }
    .rental-fab::after { display: none !important; }
    .rental-fab-label { display: none !important; }

    .hero-cta-row { padding: 0 12px !important; margin-top: 16px !important; }
    .hero-cta-advertise,
    .hero-cta-rentals {
        padding: 11px 14px !important;
        border-radius: 13px !important;
        gap: 4px !important;
    }
    .hero-cta-label { font-size: 0.95rem !important; }
    .hero-cta-label i { font-size: 1rem !important; }
    .hero-cta-sub { font-size: 0.72rem !important; }

    .service-item.advert-hub-featured { padding: 10px 11px !important; gap: 7px !important; }
    .advert-hub-featured-icon { font-size: 1.15rem !important; }
    .advert-hub-featured-text small { -webkit-line-clamp: 1 !important; }
    .advert-hub-featured-badge { font-size: 0.55rem !important; padding: 2px 6px !important; }
}

@media (max-width: 420px) {
    .advertise-header-btn,
    .rental-header-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        flex: 0 0 36px !important;
    }
    .advertise-header-btn > i,
    .rental-header-btn > i { font-size: 0.88rem !important; }

    .advertise-fab,
    .rental-fab {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
    }
    .advertise-fab > i,
    .rental-fab > i { font-size: 1.1rem !important; }
    .advertise-fab { bottom: 76px !important; }
    .rental-fab   { bottom: 132px !important; }

    .advert-hub-featured-text small { display: none !important; }
}

@media (hover: none), (pointer: coarse) {
    .advertise-header-btn,
    .advertise-fab,
    .rental-header-btn,
    .rental-fab,
    .hero-cta-advertise,
    .hero-cta-rentals,
    .service-item.advert-hub-featured {
        -webkit-tap-highlight-color: transparent !important;
        animation: none !important;
        transition-duration: 0.05s !important;
    }
    .advertise-header-btn:hover,
    .advertise-fab:hover,
    .rental-header-btn:hover,
    .rental-fab:hover,
    .hero-cta-advertise:hover,
    .hero-cta-rentals:hover,
    .service-item.advert-hub-featured:hover {
        transform: none !important;
    }
    .advertise-fab::after,
    .rental-fab::after,
    .hero-cta-advertise::before,
    .hero-cta-rentals::before { display: none !important; }

    .advertise-header-btn:active,
    .rental-header-btn:active { transform: scale(0.92) !important; }
    .advertise-fab:active,
    .rental-fab:active { transform: scale(0.94) !important; }
    .hero-cta-advertise:active,
    .hero-cta-rentals:active { transform: scale(0.98) !important; }
    .service-item.advert-hub-featured:active { transform: scale(0.99) !important; }
}

/* ================================================================
   53. RESPONSIVE BREAKPOINTS (layout-level)
   ================================================================ */
@media (max-width: 380px) {
    .search-actions .search-submit-btn .submit-label { display: none; }
    .search-actions .search-submit-btn {
        min-width: clamp(36px, 8vw, 46px);
        padding: 0;
        border-radius: 50%;
    }
    .footer-search-btn .footer-search-badge {
        font-size: 0;
        min-width: 12px;
        height: 12px;
        padding: 0;
        border-radius: 50%;
        top: -2px;                  
        right: -2px;
    }
    .footer-search-btn .footer-search-badge::after {
        content: '';
        position: absolute;
        inset: 3px;
        background: #1a1a1a;
        border-radius: 50%;
    }
}

@media (max-width: 480px) {
    .company-tagline { display: none; }
    .hero-tags { flex-direction: column; align-items: center; }
    .hero-tags span { width: 100%; }
    .category-grid { grid-template-columns: 1fr; }
    .category-card .service-list { flex-direction: column; }
    .category-card .service-item { width: 100%; justify-content: center; }
    .service-item-hub + .service-item:not(.service-item-hub) {
        margin-left: 0;
        margin-top: 10px;
    }
    .service-item-hub + .service-item:not(.service-item-hub)::before {
        left: 0;
        top: -5px;
        width: 100%;
        height: 1px;
    }
    .share-form-row { grid-template-columns: 1fr; }
    .share-form-row .form-group.half { grid-column: 1 / -1; }
    .footer-menu-actions { grid-template-columns: 1fr 1fr; }
    .ent-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .ent-tab { font-size: 0.65rem; padding: 10px 8px; min-width: 80px; }
    .ent-actions { padding: 10px; }
    .ent-upload-btn { font-size: 0.6rem; padding: 8px 10px; }
    .upload-actions { flex-direction: column; }
    .ai-chatbot-container { right: 6px; }
    .ai-chatbot-btn { width: 40px; height: 40px; min-height: 40px; min-width: 40px; }
    .ai-chatbot-btn .ai-badge { font-size: 0.25rem; padding: 1px 4px; top: -3px; right: -3px; }
    .ai-chatbot-btn .drag-handle { font-size: 0.25rem; padding: 1px 4px; bottom: -4px; }
    .ai-chatbot-container .ai-drag-label { font-size: 0.2rem; }
    .ai-chatbot-modal { width: 95vw; max-width: 95vw; height: 80vh; max-height: 80vh; }
    .ai-chatbot-modal .chat-title .chat-logo { width: 24px; height: 24px; }
    .ai-chatbot-modal .chat-messages .message { font-size: 0.6rem; padding: 6px 10px; }
    .ai-chatbot-modal .ai-suggestions .suggestion { font-size: 0.35rem; padding: 2px 6px; min-height: 22px; }
    .ai-chatbot-modal .chat-input input { font-size: 0.6rem; min-height: 32px; }
    .ai-chatbot-modal .chat-input .send-btn { width: 32px; height: 32px; min-height: 32px; min-width: 32px; }
    .window-close-btn { width: 24px; height: 24px; min-width: 24px; min-height: 24px; font-size: 0.95rem; }
    .profile-close-btn { top: 4px; right: 4px; }
    .search-actions { gap: 1px; padding: 3px 4px; }
    .search-actions .search-voice-btn,
    .search-actions .search-camera-btn,
    .search-actions .search-upload-btn { width: 28px; height: 28px; min-width: 28px; min-height: 28px; font-size: 0.55rem; }
    .search-actions .divider-line { height: 16px; margin: 0 1px; }
    .search-actions .search-submit-btn { min-height: 30px; min-width: 50px; font-size: 0.55rem; padding: 3px 8px; }
    .partner-btn { min-width: 160px; min-height: 44px; padding: 8px 16px; gap: 6px; }
    .partner-btn-img { width: 22px; height: 22px; }
    .partner-btn-text { font-size: 0.7rem; }
    .keys-list-horizontal { flex-direction: column; align-items: flex-start; gap: 4px; }
    .keys-list-horizontal .key-divider { display: none; }
    .edu-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .edu-tab { font-size: 0.6rem; padding: 10px 6px; min-width: 90px; }
    .edu-actions { padding: 10px; }
    .edu-tutor-btn { font-size: 0.6rem; padding: 8px 10px; }
    .tutor-actions { flex-direction: column; }
    .app-form-row.two,
    .app-form-row.three { grid-template-columns: 1fr; }
    .app-form-checkbox-grid { grid-template-columns: 1fr 1fr; }
    .app-form-actions { flex-direction: column; }
    .edu-record-table { min-width: 400px; }
    .etf-wallet-bar { flex-direction: column; align-items: stretch; }
    .etf-wallet-stats { justify-content: space-between; width: 100%; }
    .etf-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .etf-companies-grid,
    .etf-companies-list { grid-template-columns: 1fr; }
    .etf-portfolio-stats { grid-template-columns: 1fr; }
    .etf-trade-actions { flex-direction: column; }
    .etf-holding-row { flex-direction: column; align-items: stretch; }
    .etf-holding-right { justify-content: space-between; }
    .etf-detail-container,
    .etf-portfolio-container { max-width: 100%; }
    .bet-wallet-bar { flex-direction: column; align-items: stretch; }
    .bet-wallet-stats { justify-content: space-between; width: 100%; }
    .bet-tab { font-size: 0.6rem; padding: 10px 6px; min-width: 90px; }
    .bet-event-row { flex-direction: column; align-items: stretch; }
    .bet-event-right { justify-content: space-between; }
    .bet-games-grid { grid-template-columns: 1fr 1fr; }
    .bet-place-amount-row { flex-direction: column; }
    .bet-place-actions { flex-direction: column; }
    .bet-game-opponents { flex-direction: column; }
    .bet-portfolio-stats { grid-template-columns: 1fr; }
    .bet-matchmaking-section { padding: 14px; }
    .bet-spinner { width: 36px; height: 36px; }
    .footer-notification-btn .notification-count { top: -5px; right: -5px; min-width: 14px; height: 14px; font-size: 0.4rem; }
    .footer-notification-btn .notification-dot { top: 3px; right: 3px; width: 7px; height: 7px; }
    .footer-menu-btn .footer-menu-badge { min-width: 16px; height: 16px; font-size: 0.5rem; bottom: -3px; right: -3px; }
    .footer-search-btn .footer-search-badge {
        top: -5px;                   
        right: -6px;                    
        font-size: 0.35rem;
        padding: 1px 5px;
    }
    .footer-notification-btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; font-size: 0.9rem; }
    .footer-menu-btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
    .footer-search-btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; font-size: 0.9rem; }
    .brokerage-arrows { width: 60px; height: 60px; opacity: 0.7; }
    .brokerage-arrow { font-size: 0.7rem; }
    .agriculture-container,
    .agri-post-container,
    .agri-listing-container,
    .agriculture-item-container,
    .agriculture-cart-container { max-width: 100%; max-height: 96vh; }
    .agri-live-grid,
    .agriculture-grid { grid-template-columns: 1fr; }
    .agriculture-actions { padding: 10px; }
    .agriculture-cart-btn { width: 100%; justify-content: center; }
    .agri-live-actions { width: 100%; }
    .agri-post-btn { flex: 1; justify-content: center; }
    .agriculture-banner { flex-direction: column; text-align: center; }
    .agriculture-banner-text h3 { font-size: 0.9rem; }
    .agriculture-banner-text p { font-size: 0.7rem; }
    .agri-post-row,
    .agri-post-row.three { grid-template-columns: 1fr; }
    .agri-post-actions { flex-direction: column; }
    .agri-listing-actions { flex-direction: column; }
    .agriculture-cart-footer { text-align: left; }

    .advert-hub-container { max-width: 100%; max-height: 96vh; }
    .advert-hub-grid { grid-template-columns: 1fr; }
    .advert-hub-actions { padding: 10px; }
    .advert-hub-search-box { flex-basis: 100%; }
    .advert-hub-select { flex: 1; min-width: 0; }
    .advert-hub-form-actions { flex-direction: column; }
    .advert-hub-btn { width: 100%; }
    .advert-hub-tab { font-size: 0.62rem; padding: 8px 10px; min-width: 80px; }
    .advert-hub-banner { flex-direction: column; text-align: center; }
    .advert-hub-modal .form-row { grid-template-columns: 1fr; }
    .advert-hub-stats-row { grid-template-columns: repeat(2, 1fr); }
    .advert-hub-form-row,
    .advert-hub-form-row.three { grid-template-columns: 1fr; }
    .advert-hub-create-actions,
    .advert-hub-detail-actions { flex-wrap: wrap; }
    .advert-hub-create-actions .advert-hub-btn,
    .advert-hub-detail-actions .advert-hub-btn { flex: 1 1 100%; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .hero-tags { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .category-grid { grid-template-columns: 1fr 1fr; }
    .about-vision-mission { grid-template-columns: 1fr 1fr; }
    .motto-box { grid-column: 1 / -1; }
    .ai-chatbot-container { right: 10px; }
    .ai-chatbot-btn { width: 48px; height: 48px; min-height: 44px; min-width: 44px; }
    .ai-chatbot-btn .ai-badge { font-size: 0.35rem; }
    .ai-chatbot-modal { width: 85vw; max-width: 85vw; height: 70vh; }
    .search-actions .search-voice-btn,
    .search-actions .search-camera-btn,
    .search-actions .search-upload-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
    .search-actions .search-submit-btn { min-height: 36px; min-width: 68px; }
    .edu-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .edu-tab { font-size: 0.68rem; }
    .etf-companies-grid,
    .etf-companies-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .bet-games-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .agriculture-container { max-width: 100%; }
    .agri-live-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .agri-post-row.three { grid-template-columns: 1fr 1fr; }
    .agri-post-row.three .form-group:last-child { grid-column: 1 / -1; }

    .advert-hub-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (min-width: 769px) and (max-width: 1024px) {
    body { padding-top: 64px; padding-bottom: 64px; }
    :root { --header-height: 64px; --footer-height: 64px; }
    .floating-header { height: 64px; padding: 6px 16px; }
    .floating-footer { height: 64px; padding: 6px 16px; }
    .adverts-banner { top: 64px; }
    .category-grid { grid-template-columns: 1fr 1fr 1fr; }
    .trustees-grid { grid-template-columns: repeat(4, 1fr); }
    .about-vision-mission { grid-template-columns: 1fr 1fr 1fr; }
    .ai-chatbot-container { right: 14px; }
    .ai-chatbot-btn { width: 54px; height: 54px; }
    .ai-chatbot-modal { width: 400px; max-width: 80vw; height: 500px; }
    .search-actions .search-voice-btn,
    .search-actions .search-camera-btn,
    .search-actions .search-upload-btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
    .search-actions .search-submit-btn { min-height: 40px; min-width: 80px; }
    .edu-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .etf-companies-grid,
    .etf-companies-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    body { padding-top: 72px; padding-bottom: 72px; }
    :root { --header-height: 72px; --footer-height: 72px; }
    .floating-header { height: 72px; padding: 8px 24px; }
    .floating-footer { height: 72px; padding: 8px 24px; }
    .adverts-banner { top: 72px; }
    .category-grid { grid-template-columns: 1fr 1fr 1fr; }
    .trustees-grid { grid-template-columns: repeat(4, 1fr); }
    .search-actions .search-voice-btn,
    .search-actions .search-camera-btn,
    .search-actions .search-upload-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
    .search-actions .search-submit-btn { min-height: 42px; min-width: 88px; }
}

@media (min-width: 1441px) and (max-width: 1920px) {
    body { padding-top: 80px; padding-bottom: 80px; }
    :root { --header-height: 80px; --footer-height: 80px; --max-width: 1400px; }
    .floating-header { height: 80px; padding: 10px 32px; }
    .floating-footer { height: 80px; padding: 10px 32px; }
    .adverts-banner { top: 80px; }
    .hero-section h1 { font-size: 2.5rem; }
    .section-title { font-size: 1.8rem; }
    .category-grid { grid-template-columns: 1fr 1fr 1fr; }
    .ent-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .ai-chatbot-btn { width: 64px; height: 64px; }
    .ai-chatbot-btn .ai-badge { font-size: 0.55rem; padding: 3px 10px; }
    .ai-chatbot-modal { width: 480px; height: 580px; }
    .partner-btn { min-width: 260px; min-height: 56px; }
    .partner-btn-img { width: 36px; height: 36px; }
    .partner-btn-text { font-size: 1.05rem; }
    .search-actions { gap: 6px; padding: 6px 12px; }
    .search-actions .search-voice-btn,
    .search-actions .search-camera-btn,
    .search-actions .search-upload-btn { width: 46px; height: 46px; min-width: 46px; min-height: 46px; font-size: 0.95rem; }
    .search-actions .divider-line { height: 28px; margin: 0 8px; }
    .search-actions .search-submit-btn { min-height: 48px; min-width: 100px; font-size: 0.9rem; padding: 8px 20px; }
    .window-close-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 1.5rem; }
    .edu-container { max-width: 1300px; }
    .edu-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
    .about-inst-container { max-width: 860px; }
    .about-inst-icon-wrap { width: 90px; height: 90px; font-size: 2.5rem; }
    .etf-container { max-width: 1350px; }
    .etf-companies-grid,
    .etf-companies-list { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
    .bet-container { max-width: 1300px; }
    .bet-games-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .footer-search-btn { width: 50px; height: 50px; min-width: 50px; min-height: 50px; font-size: 1.2rem; }
    .footer-search-btn i { font-size: 1.2rem; }
    .agriculture-container { max-width: 1300px; }
    .agri-live-grid,
    .agriculture-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
    .agriculture-header .window-close-btn,
    .agriculture-item-header .window-close-btn,
    .agriculture-cart-header .window-close-btn,
    .agri-post-header .window-close-btn,
    .agri-listing-header .window-close-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.6rem;
    }

    .advert-hub-container { max-width: 1300px; }
    .advert-hub-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media (min-width: 1921px) {
    body { padding-top: 96px; padding-bottom: 96px; }
    :root { --header-height: 96px; --footer-height: 96px; --max-width: 1600px; }
    .floating-header { height: 96px; padding: 12px 40px; }
    .floating-footer { height: 96px; padding: 12px 40px; }
    .adverts-banner { top: 96px; }
    .hero-section h1 { font-size: 3.2rem; }
    .section-title { font-size: 2.2rem; }
    .category-grid { grid-template-columns: 1fr 1fr 1fr; }
    .trustees-grid { grid-template-columns: repeat(7, 1fr); }
    .btn-primary, .btn-secondary { padding: 1rem 2rem; font-size: 1.1rem; }
    .ent-container { max-width: 1400px; }
    .ent-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
    .ai-chatbot-container { right: 40px; }
    .ai-chatbot-btn { width: 76px; height: 76px; min-height: 60px; min-width: 60px; }
    .ai-chatbot-btn .ai-badge { font-size: 0.65rem; padding: 4px 12px; }
    .ai-chatbot-container .ai-drag-label { font-size: 0.55rem; }
    .ai-chatbot-modal { width: 550px; height: 650px; }
    .ai-chatbot-modal .chat-title .chat-logo { width: 44px; height: 44px; }
    .partner-btn { min-width: 300px; min-height: 64px; padding: 14px 36px; }
    .partner-btn-img { width: 44px; height: 44px; }
    .partner-btn-text { font-size: 1.2rem; }
    .search-actions { gap: 8px; padding: 8px 16px; }
    .search-actions .search-voice-btn,
    .search-actions .search-camera-btn,
    .search-actions .search-upload-btn { width: 52px; height: 52px; min-width: 52px; min-height: 52px; font-size: 1.1rem; border-width: 2.5px; }
    .search-actions .divider-line { height: 34px; margin: 0 10px; width: 2px; }
    .search-actions .search-submit-btn { min-height: 54px; min-width: 120px; font-size: 1rem; padding: 10px 24px; border-radius: 10px; border-width: 3px; }
    .search-actions .search-submit-btn i { font-size: 1rem; }
    .window-close-btn { width: 48px; height: 48px; min-width: 48px; min-height: 48px; font-size: 1.8rem; }
    .edu-container { max-width: 1500px; }
    .edu-header-title { font-size: 1.6rem; }
    .edu-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
    .edu-card-title { font-size: 1rem; }
    .edu-card-desc { font-size: 0.78rem; }
    .edu-tab { font-size: 0.95rem; padding: 20px 24px; }
    .about-inst-container { max-width: 980px; }
    .about-inst-icon-wrap { width: 100px; height: 100px; font-size: 2.8rem; }
    .about-inst-name { font-size: 1.7rem; }
    .etf-container { max-width: 1500px; }
    .etf-companies-grid,
    .etf-companies-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    .etf-detail-container { max-width: 780px; }
    .etf-portfolio-container { max-width: 800px; }
    .bet-container { max-width: 1500px; }
    .bet-games-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .bet-portfolio-container { max-width: 800px; }
    .footer-search-btn { width: 60px; height: 60px; min-width: 60px; min-height: 60px; font-size: 1.4rem; }
    .footer-search-btn i { font-size: 1.4rem; }
    .footer-search-btn .footer-search-badge { font-size: 0.6rem; padding: 3px 10px; bottom: -12px; right: 10px; }
    .footer-notification-btn { width: 60px; height: 60px; min-width: 60px; min-height: 60px; font-size: 1.4rem; }
    .footer-menu-btn { width: 60px; height: 60px; min-width: 60px; min-height: 60px; }
    .footer-menu-btn .footer-menu-logo-img { width: 36px; height: 36px; }
    .footer-menu-btn .footer-menu-badge { min-width: 26px; height: 26px; font-size: 0.85rem; }
    .agriculture-container { max-width: 1500px; }
    .agriculture-header .window-close-btn,
    .agriculture-item-header .window-close-btn,
    .agriculture-cart-header .window-close-btn,
    .agri-post-header .window-close-btn,
    .agri-listing-header .window-close-btn {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
        font-size: 1.9rem;
    }

    .advert-hub-container { max-width: 1500px; }
    .advert-hub-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    .advert-hub-header .window-close-btn {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
        font-size: 1.9rem;
    }
}

/* ================================================================
   54. UTILITY + ACCESSIBILITY
   ================================================================ */
.hidden { display: none !important; }
button:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.pay-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    pointer-events: none;
}
:focus-visible {
    outline: 3px solid var(--color-text);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ================================================================
   55. REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .rental-header-btn,
    .rental-fab::after { animation: none !important; }
    .rental-header-btn:hover,
    .rental-fab:hover,
    .hero-cta-rentals:hover { transform: none !important; }

    .advertise-header-btn,
    .advertise-fab::after,
    .hero-cta-advertise::before { animation: none !important; }
    .advertise-header-btn:hover,
    .advertise-fab:hover,
    .hero-cta-advertise:hover { transform: none !important; }

    .partner-star-center .star-ring { animation: none !important; }
    .partner-star-center .star-ring::before { animation: none !important; }
    .partner-star-center .star-ring.ring-green { border-color: rgba(34, 197, 94, 0.75); }
    .partner-star-center .star-ring.ring-red   { border-color: rgba(239, 68, 68, 0.75); }
    .partner-star-center .star-ring.ring-blue  { border-color: rgba(59, 130, 246, 0.75); }

    .window-close-btn:hover,
    .window-close-btn:active { transform: none; }

    .edu-container,
    .edu-panel,
    .edu-card,
    .edu-card-thumb img,
    .edu-card-thumb .edu-type-icon,
    .edu-tab,
    .edu-tab i,
    .edu-tutor-btn,
    .edu-lib-filter { animation: none !important; transition: none !important; transform: none !important; }

    .live-dot { animation: none !important; }

    .brokerage-arrow,
    .brokerage-arrows::before { animation: none !important; }
    .brokerage-arrows {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: auto;
        height: auto;
    }
    .brokerage-arrow {
        position: static;
        transform: none !important;
    }

    .footer-notification-btn .notification-count,
    .footer-notification-btn .notification-dot,
    .footer-menu-btn .footer-menu-badge,
    .footer-menu-btn .footer-menu-badge::after,
    .footer-search-btn .footer-search-badge {
        animation: none !important;
    }
    .footer-search-btn,
    .footer-search-btn i {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    .bet-spinner { animation: none !important; }
    .bet-live-badge { animation: none !important; }

    .agriculture-container,
    .agri-post-container,
    .agri-listing-container,
    .agriculture-item-container,
    .agriculture-cart-container,
    .agri-listing-card { animation: none !important; transition: none !important; transform: none !important; }
    .agriculture-header .window-close-btn,
    .agriculture-item-header .window-close-btn,
    .agriculture-cart-header .window-close-btn,
    .agri-post-header .window-close-btn,
    .agri-listing-header .window-close-btn {
        transition: none !important;
        transform: none !important;
    }
    .sidebar-services-chevron,
    .footer-services-chevron { transition: none !important; }

    .advert-hub-container,
    .advert-hub-card,
    .advert-hub-create-container,
    .advert-hub-detail-container { animation: none !important; transition: none !important; transform: none !important; }
    .service-item.advert-hub-featured { transition: none !important; }
    .service-item.advert-hub-featured:hover { transform: none !important; }
    .advert-hub-success .check { animation: none !important; }
}

/* ================================================================
   56. PRINT
   ================================================================ */
@media print {
    .floating-header, .floating-footer, .sidebar, .sidebar-overlay,
    .ai-chatbot-btn, .toast, .login-modal, .search-overlay,
    .ai-chatbot-modal, .adverts-banner, .entertainment-modal,
    .ent-upload-modal, .education-modal, .tutor-modal,
    .about-inst-modal, .fee-modal, .app-form-modal,
    .etf-modal, .etf-detail-modal, .etf-portfolio-modal,
    .bet-modal, .bet-place-modal, .bet-company-modal,
    .bet-game-modal, .bet-history-modal,
    .market-modal, .market-shop-modal, .market-auth-modal,
    .agriculture-modal, .agriculture-item-modal, .agriculture-cart-modal,
    .agri-post-modal, .agri-listing-modal,
    .advert-hub-modal, .advert-hub-create-modal, .advert-hub-detail-modal,
    .construction-modal, .construction-form-modal,
    .advertise-header-btn, .advertise-fab, .hero-cta-row,
    .rental-header-btn, .rental-fab {
        display: none !important;
    }
    body { padding: 0 !important; }
    .main-content-wrapper { max-width: 100% !important; }
}

/* ==========================================================================
   SECTION 57 — UTILITIES + TOKENS
   ========================================================================== */

/* ---------- 57a. Critical global utilities ---------------------------- */
[hidden] { display: none !important; }

.field-error {
    border-color: #991b1b !important;
    box-shadow: 0 0 0 3px rgba(153, 27, 27, 0.15) !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ---------- 57b. ZBS design tokens (folded into :root §01) ------------ */
/* (Moved into §01 :root — nothing to declare here) */

/* ---------- 57c. Profile dropdown (folded into §06) ------------------- */
/* (Nothing to declare here — already in §06) */

/* ---------- 57d. Advert-Hub phone full-bleed (folded into §50.17) ----- */
/* (Nothing to declare here — already in §50.17) */

/* ---------- 57e. Share application form utilities --------------------- */
#shareAmount {
    background: #f5f5f5;
    font-weight: 600;
}

.share-terms-row {
    margin-top: 10px;
}

/* ---------- 57f. Market Hub utilities --------------------------------- */
.market-delivery-group {
    margin-top: 10px;
}

.market-delivery-heading {
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.market-place-order-btn {
    margin-top: 10px;
}

/* ---------- 57g. Agriculture seller-confirmation modal ---------------- */
.agri-seller-confirm-container {
    background: #fff;
    color: #1b2430;
}

.agri-seller-confirm-title {
    color: var(--zbs-green-dark);
}

.agri-seller-confirm-box {
    background: var(--zbs-slate-50);
    border: 1px solid var(--zbs-slate-200);
    border-radius: 10px;
    padding: 14px;
    font-size: 0.85rem;
    line-height: 1.55;
}

.agri-seller-confirm-p {
    margin: 0 0 10px;
}

.agri-seller-confirm-note {
    margin: 0;
    color: var(--zbs-slate-600);
    font-size: 0.78rem;
}

.agri-seller-confirm-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ================================================================
   57h. SIDEBAR — SHARE APPLICATION FLASH HIGHLIGHT
   ================================================================ */
.ZBS-Stocks-wrapper.share-app-flash {
    animation: shareAppFlash 1.4s ease-out;
    border-radius: var(--radius, 12px);
}
@keyframes shareAppFlash {
    0%   { box-shadow: 0 0 0 0 rgba(230, 180, 44, 0.7); }
    40%  { box-shadow: 0 0 0 8px rgba(230, 180, 44, 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(230, 180, 44, 0); }
}

/* ================================================================
   58. SOCIAL MEDIA HUB (shub-*)
   ================================================================ */

/* ---------- 58.1 FAB ---------- */
.shub-fab{
    position: fixed;
    left: 20px;
    bottom: 110px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 1200;
    color: #fff;
    background: linear-gradient(140deg, #8b5cff 0%, #6d4bff 45%, #22d3ee 130%);
    box-shadow: 0 14px 32px rgba(109,75,255,.5),
                0 4px 12px rgba(0,0,0,.4),
                inset 0 1px 0 rgba(255,255,255,.28);
    display: grid;
    place-items: center;
    transition: transform .35s cubic-bezier(.2,.9,.3,1.35), box-shadow .3s;
    font-family: var(--font-family);
}
.shub-fab::before{
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(124,92,255,.5);
    animation: shub-ring 2.6s ease-out infinite;
    pointer-events: none;
}
@keyframes shub-ring{
    0%   { transform: scale(.9); opacity: .75; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { opacity: 0; }
}
.shub-fab:hover  { transform: scale(1.08); }
.shub-fab:active { transform: scale(.94); }
.shub-fab.open   { transform: rotate(90deg) scale(.92); }
.shub-fab svg    { width: 28px; height: 28px; position: absolute; }
.shub-fab .shub-ico-x { display: none; }
.shub-fab.open .shub-ico-hub { display: none; }
.shub-fab.open .shub-ico-x   { display: block; }

.shub-fab-badge{
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: linear-gradient(140deg, #ff5c7a, #ff3d6e);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center;
    border: 2.5px solid #0a0e18;
    transform: scale(0);
    transition: transform .3s cubic-bezier(.2,.9,.3,1.5);
    font-family: var(--font-family);
}
.shub-fab-badge.show { transform: scale(1); }
.shub-fab.open .shub-fab-badge { opacity: 0; transform: scale(0); }

/* ---------- 58.2 Panel ---------- */
.shub-panel{
    position: fixed;
    left: 20px;
    bottom: 184px;
    z-index: 1199;
    width: 400px;
    height: min(680px, calc(100vh - 260px));
    height: min(680px, calc(100dvh - 260px));
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(24,30,48,.97), rgba(12,16,27,.98));
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 24px;
    box-shadow: 0 34px 90px rgba(0,0,0,.7),
                0 0 0 1px rgba(255,255,255,.02) inset,
                0 1px 0 rgba(255,255,255,.07) inset;
    transform-origin: bottom left;
    transform: translateY(24px) scale(.9);
    opacity: 0;
    pointer-events: none;
    transition: transform .38s cubic-bezier(.2,.9,.25,1.06), opacity .28s ease;
    overflow: hidden;
    font-family: var(--font-family);
    color: #e9edf7;
    box-sizing: border-box;
}
.shub-panel *,
.shub-panel *::before,
.shub-panel *::after { box-sizing: border-box; }
.shub-panel.open { transform: none; opacity: 1; pointer-events: auto; }

/* ---------- 58.3 Header ---------- */
.shub-head{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    flex-shrink: 0;
}
.shub-logo{
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(140deg, #8b5cff, #22d3ee);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 6px 18px rgba(109,75,255,.42),
                inset 0 1px 0 rgba(255,255,255,.3);
}
.shub-logo svg { width: 20px; height: 20px; }
.shub-title   { flex: 1; min-width: 0; }
.shub-title h3{ margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.shub-title p {
    margin: 2px 0 0;
    font-size: 11px;
    color: #8b95ad;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shub-icon-btn{
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.04);
    color: #8b95ad;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: all .18s ease;
    font-family: inherit;
}
.shub-icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; transform: translateY(-1px); }
.shub-icon-btn.sm    { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }

/* ---------- 58.4 Tabs ---------- */
.shub-tabs{ display: flex; gap: 6px; padding: 10px 12px 6px; flex-shrink: 0; }
.shub-tabs button{
    flex: 1;
    padding: 8px 10px;
    border-radius: 11px;
    border: 1px solid transparent;
    background: transparent;
    color: #8b95ad;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all .2s ease;
    font-family: inherit;
}
.shub-tabs button:hover { background: rgba(255,255,255,.05); color: #cdd5e6; }
.shub-tabs button.active{
    background: linear-gradient(140deg, rgba(124,92,255,.24), rgba(34,211,238,.14));
    border-color: rgba(124,92,255,.42);
    color: #fff;
    box-shadow: 0 4px 14px rgba(124,92,255,.18);
}
.shub-tab-pill{
    background: #ff5c7a;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 9px;
    min-width: 17px;
    text-align: center;
}

/* ---------- 58.5 Body ---------- */
.shub-body{
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 12px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.11) transparent;
}
.shub-body::-webkit-scrollbar { width: 7px; }
.shub-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.11); border-radius: 9px; }
.shub-view { display: none; animation: shub-fade .28s ease; }
.shub-view.active { display: block; }
@keyframes shub-fade {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- 58.6 Filter chips ---------- */
.shub-chips{
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 6px 2px 10px;
    scrollbar-width: none;
}
.shub-chips::-webkit-scrollbar { display: none; }
.shub-chip{
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.03);
    color: #8b95ad;
    cursor: pointer;
    transition: all .18s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.shub-chip:hover       { color: #dbe2f0; background: rgba(255,255,255,.07); }
.shub-chip.active      { background: rgba(124,92,255,.2); border-color: rgba(124,92,255,.5); color: #fff; }
.shub-chip .shub-dot   { width: 7px; height: 7px; border-radius: 50%; background: var(--c, #7c5cff); flex-shrink: 0; }

/* ---------- 58.7 Messages ---------- */
.shub-msg{
    position: relative;
    display: flex;
    gap: 10px;
    padding: 11px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.022);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all .2s ease;
}
.shub-msg:hover{
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.09);
    transform: translateY(-1px);
}
.shub-msg.sel{
    background: linear-gradient(140deg, rgba(124,92,255,.17), rgba(34,211,238,.08));
    border-color: rgba(124,92,255,.55);
    box-shadow: 0 6px 20px rgba(124,92,255,.16);
}
.shub-msg.unread::after{
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(#8b5cff, #22d3ee);
}
.shub-msg-check{
    width: 21px;
    height: 21px;
    border-radius: 7px;
    flex-shrink: 0;
    margin-top: 3px;
    border: 1.6px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.03);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .18s ease;
    font-family: inherit;
}
.shub-msg.sel .shub-msg-check{
    background: linear-gradient(140deg, #8b5cff, #22d3ee);
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(124,92,255,.45);
}
.shub-msg-main { flex: 1; min-width: 0; }
.shub-msg-top  { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }

.shub-avatar{
    width: 29px;
    height: 29px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(140deg,
        var(--c, #7c5cff),
        color-mix(in srgb, var(--c, #7c5cff) 45%, #000));
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--c, #7c5cff) 40%, transparent);
    letter-spacing: -.4px;
}
.shub-who      { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.shub-who b    { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shub-who span { font-size: 10.5px; color: #8b95ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shub-time     { font-size: 10px; color: #8b95ad; flex-shrink: 0; font-weight: 600; }

.shub-text{
    margin: 0 0 7px;
    font-size: 12.5px;
    line-height: 1.55;
    color:#c6cee0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shub-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.shub-plat-tag{
    font-size: 9.6px;
    font-weight: 800;
    padding: 2.5px 8px;
    border-radius: 7px;
    letter-spacing: .03em;
    background: color-mix(in srgb, var(--c, #7c5cff) 22%, transparent);
    color: color-mix(in srgb, var(--c, #7c5cff) 72%, #fff);
    border: 1px solid color-mix(in srgb, var(--c, #7c5cff) 38%, transparent);
}
.shub-count{
    font-size: 9.6px;
    font-weight: 700;
    padding: 2.5px 8px;
    border-radius: 7px;
    background: rgba(255,255,255,.07);
    color: #8b95ad;
}

/* ---------- 58.8 Accounts ---------- */
.shub-acc{
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.022);
    margin-bottom: 8px;
    transition: all .2s ease;
}
.shub-acc:hover { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.09); }
.shub-acc .shub-avatar { width: 36px; height: 36px; font-size: 12px; }
.shub-acc-info      { flex: 1; min-width: 0; }
.shub-acc-info b    { display: block; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shub-acc-info span { font-size: 10.8px; color: #8b95ad; }
.shub-acc-live{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    color: #34d399;
    font-weight: 700;
    margin-top: 3px;
}
.shub-acc-live i{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 7px #34d399;
    animation: shub-pd 2s infinite;
}
@keyframes shub-pd{
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}
.shub-acc-remove{
    width: 29px;
    height: 29px;
    border-radius: 9px;
    border: 1px solid rgba(255,92,122,.22);
    background: rgba(255,92,122,.1);
    color: #ff8fa5;
    cursor: pointer;
    font-size: 13px;
    display: grid;
    place-items: center;
    transition: all .18s ease;
    flex-shrink: 0;
    font-family: inherit;
}
.shub-acc-remove:hover { background: rgba(255,92,122,.24); color: #fff; transform: scale(1.07); }

.shub-add-acc{
    width: 100%;
    padding: 13px;
    border-radius: 15px;
    border: 1.6px dashed rgba(124,92,255,.4);
    background: rgba(124,92,255,.07);
    color: #b3a3ff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
    margin-top: 4px;
    font-family: inherit;
}
.shub-add-acc:hover { background: rgba(124,92,255,.16); border-color: rgba(124,92,255,.75); color: #fff; }

.shub-empty        { text-align: center; padding: 44px 20px; color: #8b95ad; }
.shub-empty .shub-big { font-size: 34px; margin-bottom: 12px; opacity: .55; }
.shub-empty p      { font-size: 12.5px; margin: 0; line-height: 1.6; }

/* ---------- 58.9 Composer ---------- */
.shub-composer{
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,.055);
    background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008));
    padding: 9px 11px 10px;
    position: relative;
}
.shub-targets-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; min-height: 26px; }
.shub-targets{
    display: flex;
    gap: 5px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    padding: 1px 0;
}
.shub-targets::-webkit-scrollbar { display: none; }
.shub-target-chip{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 5px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    background: color-mix(in srgb, var(--c, #7c5cff) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, #7c5cff) 40%, transparent);
    color: #e2e7f5;
    cursor: pointer;
    transition: all .18s ease;
    font-family: inherit;
}
.shub-target-chip:hover          { filter: brightness(1.25); }
.shub-target-chip .shub-avatar   { width: 16px; height: 16px; font-size: 7.5px; box-shadow: none; }
.shub-target-chip .shub-rm       { color: rgba(255,255,255,.45); font-size: 11px; margin-left: 1px; }
.shub-target-chip:hover .shub-rm { color: #ff8fa5; }
.shub-no-target                  { font-size: 11px; color: #ff5c7a; font-weight: 600; }

.shub-attach-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.shub-attach-row:empty { display: none; }
.shub-attach{
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border-radius: 11px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.09);
    max-width: 100%;
    position: relative;
}
.shub-attach-thumb{
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #000;
    display: block;
}
.shub-attach-ico{
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 14px;
    background: rgba(124,92,255,.18);
    flex-shrink: 0;
}
.shub-attach-meta      { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; max-width: 130px; }
.shub-attach-meta b    { font-size: 10.8px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shub-attach-meta small{ font-size: 9.3px; color: #8b95ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shub-attach-x{
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: none;
    background: rgba(255,92,122,.22);
    color: #ff9db0;
    font-size: 9px;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-family: inherit;
    line-height: 1;
}
.shub-attach-x:hover { background: #ff5c7a; color: #fff; }

.shub-rec-strip{
    display: none;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 13px;
    background: rgba(255,92,122,.1);
    border: 1px solid rgba(255,92,122,.3);
    margin-bottom: 8px;
}
.shub-rec-strip.on { display: flex; animation: shub-fade .25s ease; }
.shub-rec-dot{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff3d6e;
    box-shadow: 0 0 12px #ff3d6e;
    animation: shub-pd .9s infinite;
}
.shub-rec-strip span   { font-size: 11.5px; font-weight: 700; color: #ffb3c2; flex: 1; }
.shub-rec-strip button{
    padding: 5px 12px;
    border-radius: 9px;
    border: none;
    background: #ff5c7a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.shub-input-row { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 8px; }
.shub-input-row textarea{
    flex: 1;
    resize: none;
    max-height: 118px;
    min-height: 38px;
    padding: 10px 13px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.045);
    color: #e9edf7;
    font-size: 12.5px;
    line-height: 1.5;
    font-family: inherit;
    outline: none;
    transition: all .2s ease;
}
.shub-input-row textarea::placeholder { color: #66708a; }
.shub-input-row textarea:focus{
    border-color: rgba(124,92,255,.6);
    background: rgba(124,92,255,.08);
    box-shadow: 0 0 0 3px rgba(124,92,255,.13);
}

.shub-send-btn{
    width: 40px;
    height: 40px;
    border-radius: 13px;
    border: none;
    flex-shrink: 0;
    cursor: pointer;
    background: linear-gradient(140deg, #8b5cff, #22d3ee);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 16px;
    box-shadow: 0 6px 18px rgba(124,92,255,.4),
                inset 0 1px 0 rgba(255,255,255,.3);
    transition: all .2s ease;
}
.shub-send-btn:hover     { transform: translateY(-2px) scale(1.04); }
.shub-send-btn:disabled  { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }
.shub-send-btn.sending   { animation: shub-spin .9s linear infinite; }
@keyframes shub-spin { to { transform: rotate(360deg); } }

.shub-toolbar{ display: flex; align-items: center; gap: 3px; }
.shub-toolbar button{
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #8b95ad;
    font-size: 15px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .18s ease;
    flex-shrink: 0;
    font-family: inherit;
}
.shub-toolbar button:hover   { background: rgba(255,255,255,.09); color: #fff; transform: translateY(-1px); }
.shub-toolbar button.rec-on  { background: rgba(255,92,122,.2); color: #ff8fa5; }
.shub-toolbar .spacer        { flex: 1; }
.shub-charcount{
    font-size: 10px;
    color: #8b95ad;
    font-weight: 700;
    padding-right: 4px;
    font-variant-numeric: tabular-nums;
}
.shub-charcount.warn { color: #ffb84d; }
.shub-charcount.over { color: #ff5c7a; }

.shub-emoji-pop{
    position: absolute;
    bottom: 104px;
    left: 12px;
    right: 12px;
    z-index: 5;
    background: rgba(18,23,38,.98);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 17px;
    padding: 10px;
    display: none;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
    box-shadow: 0 20px 50px rgba(0,0,0,.6);
    max-height: 190px;
    overflow-y: auto;
}
.shub-emoji-pop.on { display: grid; animation: shub-fade .2s ease; }
.shub-emoji-pop button{
    border: none;
    background: transparent;
    font-size: 19px;
    cursor: pointer;
    border-radius: 8px;
    padding: 3px;
    transition: all .13s ease;
    line-height: 1;
    font-family: inherit;
}
.shub-emoji-pop button:hover { background: rgba(255,255,255,.12); transform: scale(1.22); }

/* ---------- 58.10 Modals ---------- */
.shub-modal-wrap{
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(4,6,12,.78);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    padding: 20px;
    box-sizing: border-box;
}
.shub-modal-wrap.on { display: flex; animation: shub-fade .2s ease; }
.shub-modal{
    width: 100%;
    max-width: 400px;
    max-height: 86vh;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(26,32,50,.99), rgba(15,19,31,.99));
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,.7);
    animation: shub-pop .3s cubic-bezier(.2,.9,.3,1.15);
    color: #e9edf7;
    font-family: var(--font-family);
    box-sizing: border-box;
}
.shub-modal *,
.shub-modal *::before,
.shub-modal *::after { box-sizing: border-box; }
@keyframes shub-pop{
    from { opacity: 0; transform: scale(.93) translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.shub-modal h3 { margin: 0 0 16px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.shub-modal label{ display: block; font-size: 11.5px; font-weight: 600; color: #8b95ad; margin-bottom: 12px; }
.shub-modal input,
.shub-modal select,
.shub-modal textarea{
    width: 100%;
    margin-top: 6px;
    padding: 10px 13px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.05);
    color: #e9edf7;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: all .2s ease;
    box-sizing: border-box;
}
.shub-modal input:focus,
.shub-modal select:focus,
.shub-modal textarea:focus{
    border-color: rgba(124,92,255,.65);
    box-shadow: 0 0 0 3px rgba(124,92,255,.14);
}
.shub-modal-actions { display: flex; gap: 9px; margin-top: 18px; }
.shub-btn{
    flex: 1;
    padding: 11px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.09);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
    background: rgba(255,255,255,.05);
    color: #e9edf7;
}
.shub-btn:hover { background: rgba(255,255,255,.11); transform: translateY(-1px); }
.shub-btn.primary{
    background: linear-gradient(140deg, #8b5cff, #22d3ee);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(124,92,255,.36);
}
.shub-btn.primary:hover { box-shadow: 0 9px 24px rgba(124,92,255,.5); }
.shub-btn.primary:disabled{ opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }

.shub-plat-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.shub-plat-pick{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 11px 5px;
    border-radius: 14px;
    border: 1.5px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.025);
    color: #8b95ad;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
}
.shub-plat-pick .shub-avatar { width: 32px; height: 32px; font-size: 11px; }
.shub-plat-pick:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateY(-2px); }
.shub-plat-pick.sel{
    border-color: rgba(124,92,255,.8);
    background: rgba(124,92,255,.18);
    color: #fff;
    box-shadow: 0 6px 18px rgba(124,92,255,.22);
}

.shub-cam-view{
    width: 100%;
    border-radius: 16px;
    background: #000;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.shub-cam-bar{ display: flex; gap: 9px; margin-top: 14px; align-items: center; }
.shub-cam-mode{ display: flex; gap: 5px; background: rgba(255,255,255,.05); padding: 3px; border-radius: 11px; flex: 1; }
.shub-cam-mode button{
    flex: 1;
    padding: 7px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: #8b95ad;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s ease;
    font-family: inherit;
}
.shub-cam-mode button.active { background: rgba(124,92,255,.32); color: #fff; }
.shub-shutter{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3.5px solid rgba(255,255,255,.85);
    background: rgba(255,255,255,.14);
    cursor: pointer;
    transition: all .18s ease;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-family: inherit;
}
.shub-shutter:hover { background: rgba(255,255,255,.3); transform: scale(1.06); }
.shub-shutter.rec{
    background: #ff3d6e;
    border-color: #ff3d6e;
    box-shadow: 0 0 24px rgba(255,61,110,.7);
}
.shub-shutter.rec::after{
    content: '';
    width: 17px;
    height: 17px;
    border-radius: 4px;
    background: #fff;
}

/* ---------- 58.11 Toasts ---------- */
.shub-toast-wrap{
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2300;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
}
.shub-toast{
    padding: 11px 20px;
    border-radius: 14px;
    font-size: 12.5px;
    font-weight: 600;
    background: rgba(24,30,48,.97);
    border: 1px solid rgba(255,255,255,.09);
    color: #e9edf7;
    box-shadow: 0 14px 40px rgba(0,0,0,.55);
    animation: shub-tIn .32s cubic-bezier(.2,.9,.3,1.2);
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 88vw;
    font-family: var(--font-family);
}
.shub-toast.out { animation: shub-tOut .3s ease forwards; }
.shub-toast .shub-tdot{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 9px #34d399;
    flex-shrink: 0;
}
.shub-toast.err .shub-tdot { background: #ff5c7a; box-shadow: 0 0 9px #ff5c7a; }
@keyframes shub-tIn {
    from { opacity: 0; transform: translateY(-16px) scale(.94); }
    to   { opacity: 1; transform: none; }
}
@keyframes shub-tOut {
    to { opacity: 0; transform: translateY(-14px) scale(.94); }
}

/* ---------- 58.12 Responsive — mobile full-bleed ---------- */
@media (max-width: 600px){
    .shub-fab{
        left: 14px;
        bottom: 90px;
        width: 56px;
        height: 56px;
    }
    .shub-panel{
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
        transform-origin: bottom center;
    }
    .shub-emoji-pop { bottom: 98px; }
    .shub-toast     { font-size: 12px; padding: 10px 16px; }
    .shub-modal     { max-width: 100%; border-radius: 18px; }
}

/* ---------- 58.13 Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
    .shub-fab,
    .shub-panel,
    .shub-fab::before,
    .shub-rec-dot,
    .shub-acc-live i,
    .shub-send-btn.sending {
        animation: none !important;
        transition: none !important;
    }
    .shub-fab:hover,
    .shub-fab:active,
    .shub-fab.open { transform: none; }
    .shub-msg:hover{ transform: none; }
    .shub-toolbar button:hover,
    .shub-send-btn:hover,
    .shub-attach-x:hover,
    .shub-acc-remove:hover,
    .shub-add-acc:hover,
    .shub-btn:hover,
    .shub-plat-pick:hover,
    .shub-target-chip:hover,
    .shub-shutter:hover { transform: none; }
}

/* ---------- 58.14 Print ---------- */
@media print{
    .shub-fab,
    .shub-panel,
    .shub-modal-wrap,
    .shub-toast-wrap { display: none !important; }
}

/* ================================================================
   59. PARTNER DETAIL MODAL — container + content layout
   ================================================================ */

/* ---- 59.1 Overlay (dim backdrop + centering) ---- */
.partner-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2vw, 32px);
    background: rgba(15, 23, 42, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.partner-modal-overlay[hidden] { display: none !important; }
.partner-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
body.partner-modal-open { overflow: hidden; }

/* ---- 59.2 The card / container ---- */
.partner-modal {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh  - 48px);
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 18px;
    border: 2px solid var(--color-border);
    box-shadow:
        0 32px 80px rgba(15, 23, 42, 0.28),
        0 8px 24px  rgba(15, 23, 42, 0.12);
    overflow: hidden;
    transform: translateY(16px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.05);
    font-family: var(--font-family);
    color: var(--color-text);
    box-sizing: border-box;
}
.partner-modal *,
.partner-modal *::before,
.partner-modal *::after { box-sizing: border-box; }
.partner-modal-overlay.is-open .partner-modal {
    transform: translateY(0) scale(1);
}

/* Category accent bar across the top */
.partner-modal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    z-index: 1;
}
.partner-modal[data-category="financial"]::before {
    background: linear-gradient(90deg, #2b6cb0, #4299e1);
}
.partner-modal[data-category="agricultural"]::before {
    background: linear-gradient(90deg, #15803d, #22c55e);
}
.partner-modal[data-category="technology"]::before {
    background: linear-gradient(90deg, #6d4bff, #22d3ee);
}

/* ---- 59.3 Close X ---- */
.partner-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: none;
    background: rgba(15, 23, 42, 0.06);
    color: var(--color-text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    padding: 0;
}
.partner-modal-close:hover {
    background: rgba(15, 23, 42, 0.12);
    color: var(--color-text);
    transform: rotate(90deg);
}
.partner-modal-close:active { transform: scale(0.9) rotate(90deg); }
.partner-modal-close:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---- 59.4 Header (avatar + heading) ---- */
.partner-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 64px 18px 22px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: linear-gradient(180deg, #fafbfc, #ffffff);
    flex-shrink: 0;
    min-width: 0;
}
.partner-modal-avatar {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #ffffff;
    border: 2px solid var(--color-border);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.partner-modal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}
.partner-modal-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.partner-modal-code {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(230, 180, 44, 0.15);
    color: var(--color-primary-dark);
    border: 1px solid rgba(230, 180, 44, 0.35);
    white-space: nowrap;
}
.partner-modal[data-category="financial"] .partner-modal-code {
    background: rgba(43, 108, 176, 0.12);
    color: #1e40af;
    border-color: rgba(43, 108, 176, 0.3);
}
.partner-modal[data-category="agricultural"] .partner-modal-code {
    background: rgba(22, 163, 74, 0.12);
    color: #14532d;
    border-color: rgba(22, 163, 74, 0.3);
}
.partner-modal[data-category="technology"] .partner-modal-code {
    background: rgba(109, 75, 255, 0.12);
    color: #4c1d95;
    border-color: rgba(109, 75, 255, 0.3);
}
.partner-modal-title {
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text);
    word-break: break-word;
}
.partner-modal-category {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---- 59.5 Body (scrollable) ---- */
.partner-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.2) transparent;
}
.partner-modal-body::-webkit-scrollbar { width: 8px; }
.partner-modal-body::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: 999px;
    border: 2px solid #ffffff;
}

.partner-modal-desc {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* ---- 59.6 Meta panel ---- */
.partner-modal-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.06);
}
.partner-modal-meta > span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.partner-modal-meta > span i {
    color: var(--color-primary-dark);
    font-size: 0.85rem;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}
.partner-modal[data-category="financial"]    .partner-modal-meta > span i { color: #2b6cb0; }
.partner-modal[data-category="agricultural"] .partner-modal-meta > span i { color: #16a34a; }
.partner-modal[data-category="technology"]   .partner-modal-meta > span i { color: #6d4bff; }

/* ---- 59.7 Services list ---- */
.partner-modal-subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text);
}
.partner-modal-subtitle i { color: var(--color-primary-dark); font-size: 0.9rem; }
.partner-modal[data-category="financial"]    .partner-modal-subtitle i { color: #2b6cb0; }
.partner-modal[data-category="agricultural"] .partner-modal-subtitle i { color: #16a34a; }
.partner-modal[data-category="technology"]   .partner-modal-subtitle i { color: #6d4bff; }

.partner-modal-services {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px;
}
.partner-modal-services li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 9px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    transition: all 0.18s ease;
}
.partner-modal-services li:hover {
    border-color: var(--color-primary);
    background: rgba(230, 180, 44, 0.05);
    transform: translateX(2px);
}
.partner-modal[data-category="financial"] .partner-modal-services li:hover {
    border-color: #4299e1;
    background: rgba(43, 108, 176, 0.06);
}
.partner-modal[data-category="agricultural"] .partner-modal-services li:hover {
    border-color: #22c55e;
    background: rgba(22, 163, 74, 0.06);
}
.partner-modal[data-category="technology"] .partner-modal-services li:hover {
    border-color: #6d4bff;
    background: rgba(109, 75, 255, 0.06);
}
.partner-modal-services li i {
    color: #16a34a;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.partner-modal[data-category="financial"]    .partner-modal-services li i { color: #2b6cb0; }
.partner-modal[data-category="agricultural"] .partner-modal-services li i { color: #15803d; }
.partner-modal[data-category="technology"]   .partner-modal-services li i { color: #6d4bff; }

/* ---- 59.8 Footer actions ---- */
.partner-modal-actions {
    display: flex;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #fafbfc;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.partner-apply-btn,
.partner-details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 20px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    white-space: nowrap;
    flex: 1;
    min-width: 120px;
}
.partner-apply-btn {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: var(--color-text);
    border-color: var(--color-primary-dark);
    box-shadow: 0 4px 14px rgba(230, 180, 44, 0.3);
}
.partner-apply-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(230, 180, 44, 0.45);
    filter: brightness(1.05);
}
.partner-apply-btn:active { transform: translateY(0) scale(0.98); }
.partner-modal[data-category="financial"] .partner-apply-btn {
    background: linear-gradient(135deg, #2b6cb0, #4299e1);
    color: #ffffff;
    border-color: #1e4d7a;
    box-shadow: 0 4px 14px rgba(43, 108, 176, 0.35);
}
.partner-modal[data-category="agricultural"] .partner-apply-btn {
    background: linear-gradient(135deg, #15803d, #22c55e);
    color: #ffffff;
    border-color: #14532d;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
}
.partner-modal[data-category="technology"] .partner-apply-btn {
    background: linear-gradient(135deg, #6d4bff, #22d3ee);
    color: #ffffff;
    border-color: #4c1d95;
    box-shadow: 0 4px 14px rgba(109, 75, 255, 0.35);
}
.partner-details-btn {
    background: #ffffff;
    color: var(--color-text-muted);
    border-color: var(--color-border);
    flex: 0 1 auto;
    min-width: 100px;
}
.partner-details-btn:hover {
    background: #f1f5f9;
    color: var(--color-text);
    border-color: var(--color-text-muted);
}
.partner-apply-btn:focus-visible,
.partner-details-btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---- 59.9 Application form ---- */
.partner-apply-form {
    padding: 20px 22px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
    animation: partnerFormIn 0.3s ease;
}
.partner-apply-form[hidden] { display: none !important; }
@keyframes partnerFormIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.partner-apply-form h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.partner-apply-form h4 i,
.partner-apply-form h4 span { color: var(--color-primary-dark); }

.partner-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.pfield {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.pfield label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pfield input,
.pfield select,
.pfield textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--color-border);
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--color-text);
    background: #ffffff;
    outline: none;
    min-height: 42px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pfield textarea {
    resize: vertical;
    min-height: 72px;
}
.pfield input:focus,
.pfield select:focus,
.pfield textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(230, 180, 44, 0.15);
}
.partner-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.partner-form-actions .partner-apply-btn   { flex: 1; }
.partner-form-actions .partner-details-btn { flex: 0 1 auto; min-width: 100px; }

.partner-form-status {
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.5;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #6ee7b7;
}
.partner-form-status.error {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fca5a5;
}
.partner-form-status[hidden] { display: none !important; }

/* ---- 59.10 Toasts stay above the modal ---- */
.toast { z-index: 20000; }

/* ---- 59.11 Mobile: bottom sheet ---- */
@media (max-width: 600px) {
    .partner-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .partner-modal {
        max-width: 100%;
        max-height: 94vh;
        max-height: 94dvh;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        transform: translateY(100%) !important;
    }
    .partner-modal-overlay.is-open .partner-modal {
        transform: translateY(0) !important;
    }
    .partner-modal-header {
        padding: 18px 56px 16px 18px;
        gap: 12px;
    }
    .partner-modal-avatar { width: 52px; height: 52px; border-radius: 13px; }
    .partner-modal-title  { font-size: 1.05rem; }
    .partner-modal-body   { padding: 16px 18px; gap: 14px; }
    .partner-modal-services { grid-template-columns: 1fr; }
    .partner-modal-actions  { padding: 14px 18px; }
    .partner-apply-form     { padding: 16px 18px; }
    .partner-form-row       { grid-template-columns: 1fr; }
    .partner-form-actions   { flex-direction: column; }
    .partner-form-actions .partner-apply-btn,
    .partner-form-actions .partner-details-btn {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* ---- 59.12 Short landscape phones ---- */
@media (max-height: 500px) and (orientation: landscape) {
    .partner-modal-overlay { align-items: flex-start; padding: 8px; }
    .partner-modal         { max-height: calc(100vh - 16px); }
    .partner-modal-header  { padding: 12px 56px 12px 16px; }
    .partner-modal-avatar  { width: 44px; height: 44px; }
}

/* ---- 59.13 Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .partner-modal-overlay,
    .partner-modal,
    .partner-apply-form { animation: none !important; transition: none !important; }
    .partner-modal { transform: none !important; }
    .partner-modal-overlay.is-open .partner-modal { transform: none !important; }
    .partner-modal-close:hover { transform: none; }
    .partner-modal-services li:hover { transform: none; }
}

/* ================================================================
   59. PARTNER MODAL — always above every partner card / ring / slot
   ================================================================ */
.partner-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 15000;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.partner-modal {
    position: relative;
    z-index: 1;
}
.toast {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--radius);
    z-index: 20000;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
}

/* ================================================================
   60. BECOME A PARTNER — registration form
   ================================================================ */

.partner-modal.partner-modal--form {
    max-width: 720px;
}

.partner-modal--form .partner-modal-body {
    padding: 20px 22px 4px;
    gap: 10px;
}

.bp-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bp-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 -2px;
    padding-bottom: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    border-bottom: 1px dashed rgba(15, 23, 42, 0.1);
}
.bp-section-title i {
    color: var(--color-primary-dark);
    font-size: 0.8rem;
}
.partner-modal--form[data-category="financial"]    .bp-section-title i { color: #2b6cb0; }
.partner-modal--form[data-category="agricultural"] .bp-section-title i { color: #16a34a; }
.partner-modal--form[data-category="technology"]   .bp-section-title i { color: #6d4bff; }

.bp-optional {
    font-weight: 500;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.7;
    margin-left: 2px;
}

.bp-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    margin-top: 4px;
}
.bp-terms:hover { border-color: var(--color-primary); background: rgba(230, 180, 44, 0.05); }
.bp-terms input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--color-primary-dark);
    flex-shrink: 0;
}

.bp-status {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.5;
}
.bp-status[hidden] { display: none !important; }
.bp-status.success {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #6ee7b7;
}
.bp-status.error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.bp-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px 8px;
    gap: 8px;
}
.bp-success .bp-check {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    display: grid;
    place-items: center;
    font-size: 2rem;
    margin-bottom: 8px;
    animation: bpPop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
@keyframes bpPop {
    from { transform: scale(0.3); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.bp-success h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-text);
}
.bp-success p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    max-width: 42ch;
}
.bp-success .bp-ref {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    background: #f1f5f9;
    color: var(--color-text);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

@media (max-width: 600px) {
    .partner-modal--form .partner-modal-body {
        padding: 16px 18px 4px;
    }
    .partner-modal--form .partner-form-row {
        grid-template-columns: 1fr;
    }
    .partner-modal--form .partner-form-actions {
        flex-direction: column;
    }
    .partner-modal--form .partner-form-actions .partner-apply-btn,
    .partner-modal--form .partner-form-actions .partner-details-btn {
        flex: 1 1 100%;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bp-success .bp-check { animation: none !important; }
}

/* ================================================================
   62. FINANCIAL HUB — layout refresh (grid services + T&C + form)
   ================================================================ */

.fin-section {
    margin-bottom: 18px;
}
.fin-section:last-child {
    margin-bottom: 0;
}

.financial-content[data-panel="services"] .financial-grid {
    display: block;
}
.financial-content[data-panel="services"] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.financial-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.financial-service-grid .financial-service-item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 16px;
    min-height: 108px;
    border-radius: 12px;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}
.financial-service-grid .financial-service-item:hover {
    transform: translateY(-3px);
    border-color: var(--fin-primary, #1e5b8a);
    box-shadow: 0 10px 24px rgba(30, 91, 138, 0.15);
}
.financial-service-grid .financial-service-item.active {
    border-color: var(--fin-primary, #1e5b8a);
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(30, 91, 138, 0.15);
}
.financial-service-grid .financial-service-item.active::after {
    content: '✓ Selected';
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--fin-primary, #1e5b8a);
    text-transform: uppercase;
}
.financial-service-grid .financial-service-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e0f2fe, #dbeafe);
    color: var(--fin-primary, #1e5b8a);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.financial-service-grid .financial-service-text {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}
.financial-service-grid .financial-service-text small {
    font-size: 0.72rem;
    font-weight: 500;
    color: #64748b;
    line-height: 1.4;
}

.fin-terms-intro {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0 0 14px;
    line-height: 1.55;
}
.fin-terms-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fin-terms-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fin-terms-item[open] {
    border-color: var(--fin-primary, #1e5b8a);
    box-shadow: 0 4px 14px rgba(30, 91, 138, 0.10);
}
.fin-terms-item.highlight {
    animation: finTermsFlash 1.6s ease-out;
}
@keyframes finTermsFlash {
    0%   { box-shadow: 0 0 0 0 rgba(30, 91, 138, 0.55); }
    40%  { box-shadow: 0 0 0 8px rgba(30, 91, 138, 0.20); }
    100% { box-shadow: 0 0 0 0 rgba(30, 91, 138, 0); }
}
.fin-terms-item summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    background: #f8fafc;
    list-style: none;
    user-select: none;
    transition: background 0.2s ease;
}
.fin-terms-item summary::-webkit-details-marker { display: none; }
.fin-terms-item summary i {
    color: var(--fin-primary, #1e5b8a);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.fin-terms-item summary::after {
    content: '▾';
    margin-left: auto;
    font-size: 0.85rem;
    color: #64748b;
    transition: transform 0.25s ease;
}
.fin-terms-item[open] summary {
    background: #eff6ff;
    color: var(--fin-primary, #1e5b8a);
}
.fin-terms-item[open] summary::after {
    transform: rotate(180deg);
    color: var(--fin-primary, #1e5b8a);
}
.fin-terms-item ul {
    margin: 0;
    padding: 14px 18px 16px 36px;
    background: #ffffff;
}
.fin-terms-item ul li {
    font-size: 0.82rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 6px;
}
.fin-terms-item ul li:last-child {
    margin-bottom: 0;
}
.fin-terms-item ul li strong {
    color: #0f172a;
    font-weight: 700;
}

@media (max-width: 640px) {
    .financial-service-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
    .financial-service-grid .financial-service-item {
        padding: 12px;
        min-height: 96px;
    }
    .financial-service-grid .financial-service-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    .financial-service-grid .financial-service-text {
        font-size: 0.8rem;
    }
    .fin-terms-item summary {
        padding: 10px 14px;
        font-size: 0.8rem;
    }
    .fin-terms-item ul {
        padding: 12px 14px 14px 30px;
    }
    .fin-terms-item ul li {
        font-size: 0.76rem;
    }
}

/* ================================================================
   ADVERT BANNER — FULLY RESPONSIVE
   ================================================================ */

.adverts-banner {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    padding: clamp(6px, 1.4vw, 14px) 0;
    height: auto !important;
    min-height: clamp(44px, 8vw, 68px);
    display: flex;
    align-items: center;
}

.adverts-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    width: max-content;
    min-width: 100%;
    padding: 0 clamp(10px, 2vw, 24px);
    box-sizing: border-box;
    will-change: transform;
}

.adverts-track > * {
    flex: 0 0 auto;
    box-sizing: border-box;
    max-width: 90vw;
    white-space: nowrap;
}

.adverts-track img,
.adverts-track .advert-img,
.adverts-track picture {
    display: block;
    width: auto;
    height: auto;
    max-height: clamp(32px, 6vw, 56px);
    max-width: min(70vw, 320px);
    object-fit: contain;
    border-radius: clamp(4px, 1vw, 10px);
}

.adverts-track .advert-item,
.adverts-track a,
.adverts-track button {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 1vw, 12px);
    padding: clamp(4px, 1vw, 10px) clamp(8px, 1.6vw, 16px);
    font-size: clamp(11px, 1.35vw, 15px);
    line-height: 1.25;
    border-radius: clamp(6px, 1.2vw, 12px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media (max-width: 600px) {
    .adverts-banner {
        padding: 6px 0;
        min-height: 46px;
    }
    .adverts-track {
        gap: 12px;
        padding: 0 12px;
    }
    .adverts-track img,
    .adverts-track .advert-img,
    .adverts-track picture {
        max-height: 34px;
        max-width: 60vw;
    }
    .adverts-track .advert-item,
    .adverts-track a,
    .adverts-track button {
        padding: 4px 10px;
        font-size: 12px;
        max-width: 80vw;
    }
}

@media (max-width: 380px) {
    .adverts-track {
        gap: 10px;
        padding: 0 10px;
    }
    .adverts-track .advert-item,
    .adverts-track a,
    .adverts-track button {
        font-size: 11px;
        padding: 3px 8px;
    }
    .adverts-track img,
    .adverts-track .advert-img {
        max-height: 30px;
    }
}

@media (min-width: 1400px) {
    .adverts-banner {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .adverts-track,
    .adverts-track * {
        animation: none !important;
        transition: none !important;
    }
}
/* ================================================================
   64. ZBS-STOCKS — FLOATING WINDOW (opens from sidebar)
   ----------------------------------------------------------------
   • Collapsed: hidden, takes zero space in the sidebar.
   • When .active: becomes a fixed centred floating card with a
     dimmed blurred backdrop — floats above everything.
   Overrides §16 (.ZBS-Stocks-wrapper max-height: 0 → 3000px).
   ================================================================ */

/* ---------- 64.1 Collapsed — hidden, no inline flow ---------- */
.ZBS-Stocks-wrapper {
    display: none !important;
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
}

/* ---------- 64.2 Active — fixed floating window ---------- */
.ZBS-Stocks-wrapper.active {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 13010;                       /* above sidebar (10000) */

    background: rgba(15, 23, 42, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);

    align-items: flex-start;
    justify-content: center;
    padding: clamp(12px, 3vw, 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;

    animation: zbsBackdropIn 0.25s ease;
}

@keyframes zbsBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- 64.3 The floating card ---------- */
.ZBS-Stocks-wrapper.active .ZBS-Stocks-container {
    position: relative;
    width: min(640px, 100%);
    max-width: 100%;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    margin: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding: clamp(16px, 2vw, 24px);
    background: #ffffff;
    border: 2px solid var(--color-border, #b0b8c0);
    border-radius: clamp(12px, 1.6vmin, 18px);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45),
        0 8px 24px rgba(0, 0, 0, 0.18);
    animation: zbsCardIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}

@keyframes zbsCardIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 64.4 Scrollbar polish ---------- */
.ZBS-Stocks-wrapper.active .ZBS-Stocks-container::-webkit-scrollbar {
    width: 10px;
}
.ZBS-Stocks-wrapper.active .ZBS-Stocks-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 2px solid #ffffff;
}

/* ---------- 64.5 Card header ---------- */
.ZBS-Stocks-wrapper.active .ZBS-Stocks-header {
    margin-bottom: clamp(10px, 1.4vw, 16px);
    padding-bottom: clamp(8px, 1vw, 12px);
    border-bottom: 2px solid var(--color-border, #b0b8c0);
}
.ZBS-Stocks-wrapper.active .ZBS-Stocks-header h2 {
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 800;
    color: var(--color-primary-dark, #c99a1e);
    margin: 0 0 4px;
}
.ZBS-Stocks-wrapper.active .ZBS-Stocks-header p {
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    color: var(--color-text-muted, #4a4a4a);
    margin: 0;
}

/* ---------- 64.6 Form grid — stays two-column, fluid ---------- */
.ZBS-Stocks-wrapper.active .share-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 1.2vmin, 14px);
}
.ZBS-Stocks-wrapper.active .share-form-row .form-group.full { grid-column: 1 / -1; }
.ZBS-Stocks-wrapper.active .share-form-row .form-group.half { grid-column: span 1; }

@media (max-width: 560px) {
    .ZBS-Stocks-wrapper.active .share-form-row {
        grid-template-columns: 1fr;
    }
    .ZBS-Stocks-wrapper.active .share-form-row .form-group.half {
        grid-column: 1 / -1;
    }
}

/* ---------- 64.7 Sticky action row at the bottom ---------- */
.ZBS-Stocks-wrapper.active .share-form-actions {
    position: sticky;
    bottom: 0;
    background: #ffffff;
    padding-top: 12px;
    margin-top: 14px;
    border-top: 2px solid var(--color-border, #b0b8c0);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 2;
}
.ZBS-Stocks-wrapper.active .share-form-actions .share-submit-btn { flex: 1; min-width: 140px; }
.ZBS-Stocks-wrapper.active .share-form-actions .share-cancel-btn { flex: 0 1 auto; min-width: 100px; }

/* ---------- 64.8 Phone full-bleed ---------- */
@media (max-width: 600px) {
    .ZBS-Stocks-wrapper.active {
        padding: 0;
        align-items: stretch;
    }
    .ZBS-Stocks-wrapper.active .ZBS-Stocks-container {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
        margin: 0;
    }
    .ZBS-Stocks-wrapper.active .share-form-actions {
        padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    }
}

/* ---------- 64.9 Focus ring stays inside the card ---------- */
.ZBS-Stocks-wrapper.active .ZBS-Stocks-container:focus-visible {
    outline: 3px solid var(--color-primary, #e6b42c);
    outline-offset: 2px;
}

/* ---------- 64.10 Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .ZBS-Stocks-wrapper.active,
    .ZBS-Stocks-wrapper.active .ZBS-Stocks-container {
        animation: none !important;
        transition: none !important;
    }
}
  <!-- ============================================================
         INLINE STYLES — Permit upgrades (ZBS Rep photo, brand-mark,
         veterinary video) + live-image sizing polish
         ============================================================ -->
    /* --- ZBS Rep photo (Part C) --- */
    .agri-permit-rep-row{
        display:grid;
        grid-template-columns:160px 1.4fr 1fr 1fr;
        gap:14px;
        align-items:end;
    }
    @media(max-width:820px){ .agri-permit-rep-row{ grid-template-columns:1fr 1fr; } }
    .agri-permit-rep-photo-field{ display:flex; flex-direction:column; gap:6px; }
    .agri-permit-rep-photo{
        position:relative;
        width:120px;height:120px;
        border:2px dashed #b8c2cc;border-radius:10px;
        display:flex;align-items:center;justify-content:center;
        background:#f8fafc;overflow:hidden;
    }
    .agri-permit-rep-photo .agri-permit-photo-btn{
        width:100%;height:100%;border:0;background:transparent;cursor:pointer;
        font-size:28px;color:#1f7a3d;
    }
    .agri-permit-rep-photo .agri-permit-photo-preview{
        position:absolute;inset:0;background-size:cover;background-position:center;
    }

    /* --- Brand mark under animal photo --- */
    .agri-permit-brandmark-wrap{
        margin-top:8px;
        display:flex;flex-direction:column;gap:4px;
        min-width:120px;
    }
    .agri-permit-brandmark-label{
        font-size:10px;font-weight:700;letter-spacing:.05em;
        text-transform:uppercase;color:#6b7280;
    }
    .agri-permit-brandmark-row{ display:flex;gap:4px; }
    .agri-permit-brandmark-input{
        flex:1;min-width:0;padding:4px 6px;font-size:11px;
        border:1px solid #cbd5e1;border-radius:6px;
    }
    .agri-permit-brandmark-btn{
        width:26px;height:26px;border:1px solid #cbd5e1;border-radius:6px;
        background:#fff;color:#1f7a3d;cursor:pointer;font-size:11px;
    }
    .agri-permit-brandmark-preview{
        width:100%;height:38px;margin-top:4px;border-radius:6px;
        background-size:cover;background-position:center;
        border:1px solid #cbd5e1;
    }

    /* --- Veterinary video (Part B2) --- */
    .agri-permit-video-hint{ margin:0 0 12px;font-size:13px;color:#4b5563; }
    .agri-permit-video-upload{
        display:flex;flex-direction:column;gap:10px;
        padding:14px;border:2px dashed #b8c2cc;border-radius:10px;background:#f8fafc;
    }
    .agri-permit-video-btn{
        align-self:flex-start;
        padding:10px 18px;border:0;border-radius:8px;cursor:pointer;
        background:#1f7a3d;color:#fff;font-weight:600;
    }
    .agri-permit-video-preview{
        position:relative;display:flex;flex-direction:column;gap:6px;max-width:420px;
    }
    .agri-permit-video-preview video{ width:100%;border-radius:8px;background:#000; }
    .agri-permit-video-meta{
        display:flex;justify-content:space-between;font-size:12px;color:#6b7280;
    }
    .agri-permit-video-remove{
        position:absolute;top:-8px;right:-8px;
        width:26px;height:26px;border-radius:50%;
        border:0;background:#dc2626;color:#fff;cursor:pointer;
        font-size:16px;line-height:1;
    }
    .agri-permit-video-note{ font-size:11px;color:#6b7280; }
    .agri-permit-video-note-wrap{
        margin-top:12px;display:flex;flex-direction:column;gap:4px;
    }
    .agri-permit-video-note-wrap textarea{
        width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;
        font-family:inherit;font-size:13px;resize:vertical;
    }

    /* --- Live logo / photo polish --- */
    .advert-img{ object-fit:contain; background:#fff; border-radius:4px; }
    .partner-logo-img{ object-fit:contain; background:#fff; border-radius:6px; padding:4px; }
    .cat-icon-wrapper img{ object-fit:cover; border-radius:12px; }