/* =============================================================
   WISESEVA — PREMIUM LIGHT MODE DESIGN SYSTEM v5.0
   Clean Intelligence Platform × Premium Light
   Logo Palette: Navy #1A3568 · Royal Blue #1565C0 · Emerald #0E7C66
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* =============================================
   DESIGN TOKENS — PREMIUM LIGHT MODE
   ============================================= */
:root {
    /* ── Backgrounds ── */
    --ws-bg:              #F8FAFC;
    --ws-bg-warm:         #FAFBFC;
    --ws-bg-card:         #FFFFFF;
    --ws-bg-card-hover:   #F0F9FF;
    --ws-bg-section:      #F1F5F9;
    --ws-bg-dark:         #0F172A;
    --ws-bg-dark-2:       #1E293B;
    --ws-bg-elevated:     #FFFFFF;
    --ws-bg-input:        #FFFFFF;

    /* ── Primary: Royal Blue (logo) ── */
    --ws-blue:            #1565C0;
    --ws-blue-light:      #1976D2;
    --ws-blue-bright:     #2196F3;
    --ws-blue-dark:       #0D47A1;
    --ws-blue-navy:       #1A237E;
    --ws-blue-glow:       rgba(21,101,192,0.15);
    --ws-blue-pale:       rgba(21,101,192,0.07);

    /* ── Secondary: Emerald (logo) ── */
    --ws-emerald:         #0E7C66;
    --ws-emerald-light:   #10B981;
    --ws-emerald-bright:  #34D399;
    --ws-emerald-dark:    #065F46;
    --ws-emerald-glow:    rgba(14,124,102,0.15);
    --ws-green:           #16A34A;
    --ws-green-light:     #22C55E;
    --ws-green-pale:      rgba(14,124,102,0.07);

    /* ── Warm Accent ── */
    --ws-gold:            #D97706;
    --ws-gold-light:      #F59E0B;
    --ws-gold-dark:       #B45309;
    --ws-gold-glow:       rgba(217,119,6,0.12);
    --ws-saffron:         #EA580C;
    --ws-teal:            #0891B2;
    --ws-purple:          #7C3AED;
    --ws-pink:            #DB2777;

    /* ── Gradient System ── */
    --ws-grad-hero:       linear-gradient(135deg, #F0F9FF 0%, #FAFBFC 50%, #F0FFF4 100%);
    --ws-grad-logo:       linear-gradient(135deg, #0D47A1 0%, #1565C0 35%, #0E7C66 65%, #065F46 100%);
    --ws-grad-primary:    linear-gradient(135deg, #0E7C66 0%, #10B981 50%, #34D399 100%);
    --ws-grad-green:      linear-gradient(135deg, #065F46 0%, #0E7C66 50%, #10B981 100%);
    --ws-grad-gold:       linear-gradient(135deg, #B45309 0%, #D97706 50%, #F59E0B 100%);
    --ws-grad-blue:       linear-gradient(135deg, #0D47A1 0%, #1565C0 50%, #2196F3 100%);
    --ws-grad-card:       linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
    --ws-grad-glass:      linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
    --ws-grad-text-gold:  linear-gradient(135deg, #0E7C66 0%, #1565C0 100%);
    --ws-grad-text-white: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    --ws-grad-text-blue:  linear-gradient(135deg, #1565C0 0%, #0E7C66 100%);
    --ws-grad-text-green: linear-gradient(135deg, #065F46 0%, #0E7C66 100%);
    --ws-grad-section:    linear-gradient(180deg, #FAFBFC 0%, #F1F5F9 50%, #FAFBFC 100%);
    --ws-grad-dark-hero:  linear-gradient(135deg, #0F172A 0%, #1A3568 50%, #0F172A 100%);

    /* ── Text Hierarchy ── */
    --ws-text:            #0F172A;
    --ws-text-secondary:  #1E293B;
    --ws-text-muted:      #64748B;
    --ws-text-light:      #94A3B8;
    --ws-text-white:      #FFFFFF;
    --ws-text-gold:       #1565C0;
    --ws-text-dim:        #CBD5E1;

    /* ── Glass System (light mode frosted) ── */
    --ws-glass-bg:        rgba(255,255,255,0.80);
    --ws-glass-border:    rgba(226,232,240,0.90);
    --ws-glass-shadow:    0 8px 32px rgba(15,23,42,0.10);
    --ws-glass-heavy:     rgba(255,255,255,0.95);

    /* ── Border System ── */
    --ws-border:          #E2E8F0;
    --ws-border-gold:     rgba(14,124,102,0.30);
    --ws-border-emerald:  rgba(14,124,102,0.35);
    --ws-border-hover:    rgba(21,101,192,0.35);

    /* ── Shadow System (soft, professional) ── */
    --ws-shadow-sm:       0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.05);
    --ws-shadow-md:       0 4px 16px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06);
    --ws-shadow-lg:       0 10px 40px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.06);
    --ws-shadow-xl:       0 24px 80px rgba(15,23,42,0.14);
    --ws-shadow-card:     0 2px 12px rgba(15,23,42,0.07), 0 1px 3px rgba(15,23,42,0.05);
    --ws-shadow-hover:    0 8px 32px rgba(14,124,102,0.16), 0 2px 8px rgba(15,23,42,0.08);
    --ws-shadow-gold:     0 4px 20px rgba(14,124,102,0.18);
    --ws-shadow-emerald:  0 4px 20px rgba(14,124,102,0.20);
    --ws-shadow-glow:     0 0 32px rgba(14,124,102,0.14);

    /* ── Typography ── */
    --ws-font-heading:    'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --ws-font-body:       'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
    --ws-font-display:    'Plus Jakarta Sans', system-ui, sans-serif;
    --ws-font-mono:       'JetBrains Mono', 'Fira Code', monospace;

    /* Fluid Font Sizes */
    --ws-text-xs:         clamp(0.7rem,  1.5vw, 0.75rem);
    --ws-text-sm:         clamp(0.8rem,  1.8vw, 0.875rem);
    --ws-text-base:       clamp(0.9rem,  2vw,   1rem);
    --ws-text-lg:         clamp(1rem,    2.2vw, 1.125rem);
    --ws-text-xl:         clamp(1.1rem,  2.5vw, 1.25rem);
    --ws-text-2xl:        clamp(1.25rem, 3vw,   1.5rem);
    --ws-text-3xl:        clamp(1.5rem,  4vw,   2rem);
    --ws-text-4xl:        clamp(1.875rem,5vw,   2.5rem);
    --ws-text-5xl:        clamp(2.25rem, 6vw,   3.5rem);
    --ws-text-hero:       clamp(2.8rem,  8vw,   5.5rem);

    /* Spacing Scale */
    --ws-space-1:  4px;   --ws-space-2:  8px;   --ws-space-3:  12px;
    --ws-space-4:  16px;  --ws-space-5:  20px;  --ws-space-6:  24px;
    --ws-space-8:  32px;  --ws-space-10: 40px;  --ws-space-12: 48px;
    --ws-space-16: 64px;  --ws-space-20: 80px;  --ws-space-24: 96px;

    /* Radius */
    --ws-radius-sm:   8px;   --ws-radius-md:   16px;
    --ws-radius-lg:   24px;  --ws-radius-xl:   32px;
    --ws-radius-full: 999px;

    /* Transitions */
    --ws-transition:        all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --ws-transition-slow:   all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --ws-transition-fast:   all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --ws-transition-spring: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --ws-header-height:   68px;
    --ws-topbar-height:   36px;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--ws-font-body);
    font-size: var(--ws-text-base);
    color: var(--ws-text);
    background: var(--ws-bg);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--ws-bg-section); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1565C0 0%, #0E7C66 100%);
    border-radius: 3px;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--ws-blue); text-decoration: none; transition: var(--ws-transition); }
a:hover { color: var(--ws-emerald); }
a:focus-visible { outline: 2px solid var(--ws-blue); outline-offset: 2px; border-radius: 2px; }
button:focus-visible { outline: 2px solid var(--ws-blue); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ws-font-heading);
    font-weight: 800;
    line-height: 1.2;
    color: var(--ws-text);
    letter-spacing: -0.02em;
}
h1 { font-size: var(--ws-text-5xl); }
h2 { font-size: var(--ws-text-4xl); }
h3 { font-size: var(--ws-text-2xl); }
h4 { font-size: var(--ws-text-xl); }
h5 { font-size: var(--ws-text-lg); }
h6 { font-size: var(--ws-text-base); }

p { margin-bottom: var(--ws-space-4); }
p:last-child { margin-bottom: 0; }
hr { border: none; height: 1px; background: var(--ws-border); margin: var(--ws-space-8) 0; }

/* =============================================
   SKIP LINK
   ============================================= */
.ws-skip-link {
    position: absolute; top: -100%; left: var(--ws-space-4);
    background: var(--ws-blue); color: #fff;
    padding: var(--ws-space-2) var(--ws-space-4);
    border-radius: 0 0 var(--ws-radius-sm) var(--ws-radius-sm);
    font-weight: 700; z-index: 9999; transition: top 0.2s;
}
.ws-skip-link:focus { top: 0; }

/* =============================================
   LAYOUT
   ============================================= */
.ws-container {
    width: 100%; max-width: 1300px;
    margin: 0 auto; padding: 0 var(--ws-space-5);
}
@media (min-width: 768px)  { .ws-container { padding: 0 var(--ws-space-8); } }
@media (min-width: 1280px) { .ws-container { padding: 0 var(--ws-space-12); } }

.ws-section    { padding: var(--ws-space-16) 0; }
.ws-section--sm{ padding: var(--ws-space-12) 0; }
.ws-section--lg{ padding: var(--ws-space-24) 0; }
.ws-section--xs{ padding: var(--ws-space-8) 0; }

.ws-grid { display: grid; gap: var(--ws-space-6); }
.ws-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px,100%),1fr)); }
.ws-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px,100%),1fr)); }
.ws-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px,100%),1fr)); }

.ws-flex { display: flex; }
.ws-flex--center  { justify-content: center; align-items: center; }
.ws-flex--between { justify-content: space-between; align-items: center; }
.ws-flex--gap     { gap: var(--ws-space-4); }

/* =============================================
   TOP BAR — Clean Data Ticker
   ============================================= */
.ws-topbar {
    background: var(--ws-bg-dark);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    height: var(--ws-topbar-height);
    position: fixed; top: 0; width: 100%; z-index: 1002;
    display: flex; align-items: center;
}

.ws-topbar__inner {
    display: flex; align-items: center;
    justify-content: space-between; gap: var(--ws-space-4); height: 100%;
}

.ws-topbar__ticker {
    display: flex; align-items: center;
    gap: var(--ws-space-3); flex: 1; overflow: hidden;
}

.ws-topbar__ticker-label {
    background: var(--ws-grad-blue);
    color: #fff; font-size: 10px; font-weight: 800;
    letter-spacing: 0.1em; padding: 3px 10px;
    border-radius: 4px; flex-shrink: 0;
    font-family: var(--ws-font-mono);
}

.ws-topbar__ticker-track {
    display: flex; gap: var(--ws-space-8);
    animation: tickerScroll 40s linear infinite; white-space: nowrap;
}

.ws-topbar__ticker-item a {
    color: rgba(255,255,255,0.65);
    font-size: var(--ws-text-xs); font-weight: 500;
    transition: var(--ws-transition-fast);
    font-family: var(--ws-font-mono);
}
.ws-topbar__ticker-item a:hover { color: #F59E0B; }

.ws-topbar__actions {
    display: flex; align-items: center;
    gap: var(--ws-space-4); flex-shrink: 0;
}

.ws-topbar__date {
    font-size: var(--ws-text-xs);
    color: rgba(255,255,255,0.4);
    font-family: var(--ws-font-mono);
}

.ws-topbar__subscribe {
    font-size: var(--ws-text-xs); font-weight: 700;
    color: #34D399 !important;
    border: 1px solid rgba(52,211,153,0.35);
    padding: 3px 12px; border-radius: var(--ws-radius-full);
    transition: var(--ws-transition);
}
.ws-topbar__subscribe:hover {
    background: var(--ws-emerald); color: #fff !important;
    border-color: transparent;
}

@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =============================================
   HEADER — Frosted Glass Light
   ============================================= */
.ws-header {
    position: fixed; top: var(--ws-topbar-height); left: 0; right: 0;
    z-index: 1001;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--ws-border);
    height: var(--ws-header-height);
    transition: var(--ws-transition);
}

.ws-header.is-scrolled {
    background: rgba(255,255,255,0.97);
    box-shadow: var(--ws-shadow-md);
}

.ws-header__inner {
    display: flex; align-items: center;
    justify-content: space-between; height: 100%; gap: var(--ws-space-6);
}

.ws-header__logo {
    display: flex; align-items: center;
    flex-shrink: 0; text-decoration: none;
}
.ws-header__logo img, .ws-header__logo .custom-logo {
    height: 44px; width: auto; transition: var(--ws-transition);
}
.ws-header__logo:hover img { transform: scale(1.03); }

/* Desktop Nav */
.ws-nav { display: none; }
@media (min-width: 1024px) { .ws-nav { display: flex; } }

.ws-nav__list {
    display: flex; align-items: center;
    gap: 2px; list-style: none; padding: 0; margin: 0;
}

.ws-nav__link {
    display: flex; align-items: center; gap: 5px;
    color: var(--ws-text-muted); font-size: var(--ws-text-sm);
    font-weight: 600; padding: var(--ws-space-2) var(--ws-space-3);
    border-radius: var(--ws-radius-sm); transition: var(--ws-transition-fast);
    white-space: nowrap; position: relative;
}
.ws-nav__link::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 0; height: 2px;
    background: var(--ws-grad-logo); border-radius: 2px;
    transition: width 0.25s ease;
}
.ws-nav__link:hover  { color: var(--ws-text); background: var(--ws-bg-section); }
.ws-nav__link:hover::after { width: 70%; }
.ws-nav__item--active .ws-nav__link { color: var(--ws-blue); font-weight: 700; }
.ws-nav__item--active .ws-nav__link::after { width: 70%; }

.ws-nav__icon { font-size: 0.9em; }
.ws-nav__arrow { font-size: 0.7em; opacity: 0.5; }

/* Dropdown */
.ws-nav__item--dropdown { position: relative; }
.ws-nav__dropdown {
    position: absolute; top: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: #FFFFFF; border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-md); padding: var(--ws-space-2);
    list-style: none; min-width: 220px;
    opacity: 0; visibility: hidden; transition: var(--ws-transition);
    box-shadow: var(--ws-shadow-lg); z-index: 100;
}
.ws-nav__dropdown::before {
    content: ''; position: absolute; top: -5px; left: 50%;
    width: 10px; height: 10px; background: #FFFFFF;
    border-left: 1px solid var(--ws-border); border-top: 1px solid var(--ws-border);
    transform: translateX(-50%) rotate(45deg);
}
.ws-nav__item--dropdown:hover .ws-nav__dropdown {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.ws-nav__dropdown a {
    display: block; color: var(--ws-text-muted);
    font-size: var(--ws-text-sm); font-weight: 500;
    padding: var(--ws-space-2) var(--ws-space-3);
    border-radius: var(--ws-radius-sm); transition: var(--ws-transition-fast);
}
.ws-nav__dropdown a:hover {
    color: var(--ws-blue); background: var(--ws-blue-pale);
}

/* Header Actions */
.ws-header__actions {
    display: flex; align-items: center; gap: var(--ws-space-3);
}

.ws-header__search-btn {
    background: transparent; border: 1px solid var(--ws-border);
    color: var(--ws-text-muted); width: 36px; height: 36px;
    border-radius: var(--ws-radius-sm); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--ws-transition-fast);
}
.ws-header__search-btn:hover {
    border-color: var(--ws-blue); color: var(--ws-blue);
    background: var(--ws-blue-pale);
}

.ws-header__state-selector select {
    background: var(--ws-bg-section); border: 1px solid var(--ws-border);
    color: var(--ws-text); padding: var(--ws-space-2) var(--ws-space-3);
    border-radius: var(--ws-radius-sm); font-size: var(--ws-text-xs);
    font-family: var(--ws-font-body); cursor: pointer;
    transition: var(--ws-transition-fast); max-width: 160px;
}
.ws-header__state-selector select:hover { border-color: var(--ws-blue); }
.ws-header__state-selector select:focus { outline: none; border-color: var(--ws-blue); }

/* Mobile Menu Toggle */
.ws-header__menu-btn {
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; gap: 5px; width: 40px; height: 40px;
    background: transparent; border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-sm); cursor: pointer;
    transition: var(--ws-transition-fast);
}
@media (min-width: 1024px) { .ws-header__menu-btn { display: none; } }
.ws-header__menu-btn span {
    display: block; width: 20px; height: 2px;
    background: var(--ws-text-muted); border-radius: 2px;
    transition: var(--ws-transition);
}
.ws-header__menu-btn:hover { border-color: var(--ws-blue); }
.ws-header__menu-btn:hover span { background: var(--ws-blue); }
.ws-header__menu-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ws-header__menu-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ws-header__menu-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Search Overlay */
.ws-search-overlay {
    position: fixed; top: 0; left: 0; right: 0;
    background: rgba(15,23,42,0.6); backdrop-filter: blur(8px);
    z-index: 2000; padding: var(--ws-space-8) var(--ws-space-5);
    opacity: 0; visibility: hidden; transition: var(--ws-transition);
}
.ws-search-overlay.is-open { opacity: 1; visibility: visible; }

.ws-search-overlay__inner {
    max-width: 700px; margin: 0 auto;
    display: flex; align-items: center; gap: var(--ws-space-3);
}

.ws-search-form {
    flex: 1; display: flex; align-items: center;
    background: #fff; border: 2px solid var(--ws-blue);
    border-radius: var(--ws-radius-full); overflow: hidden;
    box-shadow: var(--ws-shadow-xl);
}

.ws-search-form__input {
    flex: 1; padding: var(--ws-space-3) var(--ws-space-5);
    border: none; outline: none; font-size: var(--ws-text-base);
    font-family: var(--ws-font-body); color: var(--ws-text);
    background: transparent;
}

.ws-search-form__btn {
    padding: var(--ws-space-3) var(--ws-space-5);
    background: var(--ws-blue); color: #fff; border: none;
    cursor: pointer; display: flex; align-items: center;
    transition: var(--ws-transition-fast);
}
.ws-search-form__btn:hover { background: var(--ws-blue-dark); }

.ws-search-overlay__close {
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
    color: #fff; width: 40px; height: 40px; border-radius: var(--ws-radius-full);
    cursor: pointer; font-size: 1.2rem; transition: var(--ws-transition-fast);
}
.ws-search-overlay__close:hover { background: rgba(255,255,255,0.3); }

/* =============================================
   MOBILE MENU — Slide Panel
   ============================================= */
.ws-mobile-menu {
    position: fixed; top: 0; left: 0; bottom: 0; right: 0;
    z-index: 1500; pointer-events: none;
}
.ws-mobile-menu.is-open { pointer-events: all; }

.ws-mobile-menu__overlay {
    position: absolute; inset: 0;
    background: rgba(15,23,42,0.5); backdrop-filter: blur(4px);
    opacity: 0; transition: var(--ws-transition);
}
.ws-mobile-menu.is-open .ws-mobile-menu__overlay { opacity: 1; }

.ws-mobile-menu__nav {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: min(340px, 88vw); background: #fff;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--ws-shadow-xl);
}
.ws-mobile-menu.is-open .ws-mobile-menu__nav {
    transform: translateX(0);
}

.ws-mobile-menu__header {
    display: flex; align-items: center;
    justify-content: space-between; padding: var(--ws-space-5) var(--ws-space-6);
    border-bottom: 1px solid var(--ws-border);
    background: var(--ws-bg-section);
}

.ws-mobile-menu__close {
    background: transparent; border: 1px solid var(--ws-border);
    color: var(--ws-text-muted); width: 36px; height: 36px;
    border-radius: var(--ws-radius-sm); cursor: pointer; font-size: 1rem;
}

.ws-mobile-menu__state {
    padding: var(--ws-space-4) var(--ws-space-6);
    border-bottom: 1px solid var(--ws-border);
}
.ws-mobile-menu__state label { font-size: var(--ws-text-sm); font-weight: 600; color: var(--ws-text-muted); display: block; margin-bottom: 6px; }
.ws-mobile-menu__state select {
    width: 100%; padding: var(--ws-space-2) var(--ws-space-3);
    border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm);
    font-size: var(--ws-text-sm); color: var(--ws-text); background: var(--ws-bg);
}

.ws-mobile-menu__list {
    list-style: none; padding: var(--ws-space-2) 0;
}
.ws-mobile-menu__list li a {
    display: block; padding: var(--ws-space-3) var(--ws-space-6);
    color: var(--ws-text); font-weight: 500; font-size: var(--ws-text-base);
    transition: var(--ws-transition-fast);
}
.ws-mobile-menu__list li a:hover {
    color: var(--ws-blue); background: var(--ws-blue-pale);
}
.ws-mobile-menu__divider {
    padding: var(--ws-space-3) var(--ws-space-6) var(--ws-space-1);
    font-size: var(--ws-text-xs); font-weight: 700; color: var(--ws-text-light);
    text-transform: uppercase; letter-spacing: 0.08em;
    border-top: 1px solid var(--ws-border); margin-top: var(--ws-space-2);
}

.ws-mobile-menu__subscribe {
    padding: var(--ws-space-6);
    border-top: 1px solid var(--ws-border);
    text-align: center;
}
.ws-mobile-menu__subscribe p {
    font-size: var(--ws-text-sm); color: var(--ws-text-muted); margin-bottom: var(--ws-space-3);
}

/* =============================================
   PAGE WRAPPER
   ============================================= */
.ws-page-wrapper {
    padding-top: calc(var(--ws-topbar-height) + var(--ws-header-height));
}

/* =============================================
   HERO SECTION — Dark with Mesh Gradient
   ============================================= */
.ws-hero {
    position: relative; min-height: 92vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--ws-grad-dark-hero);
    overflow: hidden; text-align: center;
}

/* Animated mesh gradient background */
.ws-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 20% 20%, rgba(21,101,192,0.25) 0%, transparent 60%),
                radial-gradient(ellipse 60% 80% at 80% 80%, rgba(14,124,102,0.20) 0%, transparent 60%),
                radial-gradient(ellipse 40% 50% at 50% 50%, rgba(217,119,6,0.08) 0%, transparent 70%);
    animation: meshPulse 8s ease-in-out infinite alternate;
}

@keyframes meshPulse {
    0%   { opacity: 0.6; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.05); }
}

/* Canvas (hero-animation.js) */
#heroCanvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none;
}

/* Decorative orbs */
.ws-orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ws-orb {
    position: absolute; border-radius: 50%;
    filter: blur(60px); animation: orbFloat 12s ease-in-out infinite;
}
.ws-orb:nth-child(1) {
    width: 500px; height: 500px; top: -10%; left: -10%;
    background: radial-gradient(circle, rgba(21,101,192,0.15) 0%, transparent 70%);
    animation-delay: 0s;
}
.ws-orb:nth-child(2) {
    width: 400px; height: 400px; bottom: -10%; right: -5%;
    background: radial-gradient(circle, rgba(14,124,102,0.15) 0%, transparent 70%);
    animation-delay: -4s;
}
.ws-orb:nth-child(3) {
    width: 300px; height: 300px; top: 40%; left: 40%;
    background: radial-gradient(circle, rgba(217,119,6,0.10) 0%, transparent 70%);
    animation-delay: -8s;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(30px, -20px) scale(1.05); }
    66%  { transform: translate(-20px, 15px) scale(0.95); }
}

/* Floating data badges */
.ws-hero__floaters { position: absolute; inset: 0; pointer-events: none; }
.ws-hero__float-badge {
    position: absolute; background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85); padding: 6px 14px;
    border-radius: var(--ws-radius-full); font-size: var(--ws-text-xs);
    font-weight: 600; font-family: var(--ws-font-mono);
    white-space: nowrap; animation: badgeFloat 6s ease-in-out infinite;
}
.ws-hero__float-badge:nth-child(1)  { top: 20%; left: 5%;   animation-delay: 0s;   }
.ws-hero__float-badge:nth-child(2)  { top: 30%; right: 6%;  animation-delay: -1s;  }
.ws-hero__float-badge:nth-child(3)  { top: 65%; left: 8%;   animation-delay: -2s;  }
.ws-hero__float-badge:nth-child(4)  { top: 70%; right: 5%;  animation-delay: -3s;  }
.ws-hero__float-badge:nth-child(5)  { top: 15%; right: 20%; animation-delay: -4s;  }
.ws-hero__float-badge:nth-child(6)  { top: 75%; left: 30%;  animation-delay: -5s;  }
@media (max-width: 768px) { .ws-hero__floaters { display: none; } }

@keyframes badgeFloat {
    0%, 100% { transform: translateY(0); opacity: 0.8; }
    50%       { transform: translateY(-12px); opacity: 1; }
}

/* Hero content */
.ws-hero__content {
    position: relative; z-index: 2;
    max-width: 900px; margin: 0 auto; padding: var(--ws-space-12) var(--ws-space-5);
}

.ws-hero__logo {
    display: flex; justify-content: center; margin-bottom: var(--ws-space-8);
}
.ws-hero__logo img {
    height: 70px; width: auto;
    filter: drop-shadow(0 0 30px rgba(21,101,192,0.4));
    animation: logoGlow 3s ease-in-out infinite alternate;
}
@keyframes logoGlow {
    from { filter: drop-shadow(0 0 20px rgba(21,101,192,0.3)); }
    to   { filter: drop-shadow(0 0 40px rgba(14,124,102,0.5)); }
}

.ws-hero__tagline-pill {
    display: inline-flex; align-items: center; gap: var(--ws-space-2);
    background: rgba(255,255,255,0.10); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.20);
    color: rgba(255,255,255,0.90); padding: 6px 18px;
    border-radius: var(--ws-radius-full); font-size: var(--ws-text-sm);
    font-weight: 600; margin-bottom: var(--ws-space-6);
    letter-spacing: 0.03em;
}

.ws-status-dot {
    display: inline-block; width: 7px; height: 7px;
    border-radius: 50%; background: #34D399;
}
.ws-status-dot--live {
    animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52,211,153,0.5); }
    50%  { opacity: 0.8; box-shadow: 0 0 0 5px rgba(52,211,153,0); }
}

.ws-hero__title {
    font-size: var(--ws-text-hero); font-weight: 900;
    color: #fff; line-height: 1.05; margin-bottom: var(--ws-space-6);
    letter-spacing: -0.03em;
}

.ws-hero__title-accent {
    background: var(--ws-grad-logo);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; display: inline-block;
}

.ws-hero__subtitle {
    font-size: var(--ws-text-xl); color: rgba(255,255,255,0.72);
    max-width: 680px; margin: 0 auto var(--ws-space-10);
    line-height: 1.6;
}

.ws-hero__cta {
    display: flex; justify-content: center; gap: var(--ws-space-4);
    flex-wrap: wrap; margin-bottom: var(--ws-space-12);
}

.ws-hero__stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--ws-space-6); max-width: 640px; margin: 0 auto;
}
@media (max-width: 600px) {
    .ws-hero__stats { grid-template-columns: repeat(2, 1fr); }
}

.ws-hero__stat { text-align: center; }
.ws-hero__stat-value {
    font-size: var(--ws-text-3xl); font-weight: 900;
    color: #fff; display: block; font-family: var(--ws-font-heading);
}
.ws-hero__stat-label {
    font-size: var(--ws-text-xs); color: rgba(255,255,255,0.55);
    font-weight: 500; letter-spacing: 0.05em;
}

.ws-hero__scroll {
    position: absolute; bottom: var(--ws-space-8); left: 50%;
    transform: translateX(-50%); display: flex; flex-direction: column;
    align-items: center; gap: 6px; color: rgba(255,255,255,0.4);
    font-size: var(--ws-text-xs); animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

/* Typewriter */
.ws-typewriter { display: inline-block; }

/* =============================================
   TRUST BAR
   ============================================= */
.ws-trust-bar {
    display: flex; align-items: center; justify-content: center;
    gap: var(--ws-space-6); padding: var(--ws-space-4) var(--ws-space-5);
    background: linear-gradient(135deg, #0F172A 0%, #1A3568 100%);
    flex-wrap: wrap;
}

.ws-trust-item {
    color: rgba(255,255,255,0.80); font-size: var(--ws-text-sm);
    font-weight: 600; white-space: nowrap;
}

/* =============================================
   SECTION HEADER
   ============================================= */
.ws-section-header {
    text-align: center; max-width: 680px; margin: 0 auto var(--ws-space-12);
}
.ws-section-header h2 {
    margin-bottom: var(--ws-space-4);
}
.ws-section-header p {
    color: var(--ws-text-muted); font-size: var(--ws-text-lg);
}

.ws-section-header__badge {
    display: inline-block; background: var(--ws-blue-pale);
    color: var(--ws-blue); border: 1px solid rgba(21,101,192,0.20);
    padding: 5px 16px; border-radius: var(--ws-radius-full);
    font-size: var(--ws-text-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: var(--ws-space-4);
}

/* =============================================
   BUTTONS
   ============================================= */
.ws-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--ws-space-2); padding: var(--ws-space-3) var(--ws-space-6);
    border-radius: var(--ws-radius-md); font-weight: 700;
    font-size: var(--ws-text-sm); font-family: var(--ws-font-body);
    cursor: pointer; border: none; transition: var(--ws-transition);
    text-decoration: none; white-space: nowrap;
}

.ws-btn--primary {
    background: var(--ws-blue); color: #fff;
    box-shadow: 0 4px 14px rgba(21,101,192,0.25);
}
.ws-btn--primary:hover {
    background: var(--ws-blue-dark); color: #fff;
    transform: translateY(-2px); box-shadow: 0 8px 24px rgba(21,101,192,0.35);
}

.ws-btn--green, .ws-btn--emerald {
    background: var(--ws-emerald); color: #fff;
    box-shadow: 0 4px 14px rgba(14,124,102,0.25);
}
.ws-btn--green:hover, .ws-btn--emerald:hover {
    background: var(--ws-emerald-dark); color: #fff;
    transform: translateY(-2px); box-shadow: 0 8px 24px rgba(14,124,102,0.35);
}

.ws-btn--gold {
    background: var(--ws-grad-gold); color: #fff;
    box-shadow: 0 4px 14px rgba(217,119,6,0.25);
}
.ws-btn--gold:hover {
    transform: translateY(-2px); box-shadow: 0 8px 24px rgba(217,119,6,0.35);
    color: #fff;
}

.ws-btn--glass {
    background: rgba(255,255,255,0.12); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25); color: #fff;
}
.ws-btn--glass:hover {
    background: rgba(255,255,255,0.20); color: #fff;
    transform: translateY(-2px);
}

.ws-btn--outline {
    background: transparent; border: 2px solid var(--ws-border);
    color: var(--ws-text-muted);
}
.ws-btn--outline:hover {
    border-color: var(--ws-blue); color: var(--ws-blue);
    background: var(--ws-blue-pale);
}

.ws-btn--ghost {
    background: transparent; border: 1px solid var(--ws-border);
    color: var(--ws-text-muted);
}
.ws-btn--ghost:hover {
    background: var(--ws-bg-section); color: var(--ws-text);
}

.ws-btn--sm {
    padding: var(--ws-space-2) var(--ws-space-4);
    font-size: var(--ws-text-xs); border-radius: var(--ws-radius-sm);
}
.ws-btn--lg {
    padding: var(--ws-space-4) var(--ws-space-10);
    font-size: var(--ws-text-base); border-radius: var(--ws-radius-full);
}

/* =============================================
   CARDS — Premium Light
   ============================================= */
.ws-card {
    background: var(--ws-bg-card);
    border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-lg);
    padding: var(--ws-space-6);
    box-shadow: var(--ws-shadow-card);
    transition: var(--ws-transition);
    overflow: hidden;
}
.ws-card:hover {
    box-shadow: var(--ws-shadow-hover);
    border-color: var(--ws-border-hover);
    transform: translateY(-3px);
}

.ws-card__header {
    display: flex; align-items: center; gap: var(--ws-space-3);
    margin-bottom: var(--ws-space-4);
}

.ws-card__icon {
    width: 44px; height: 44px; border-radius: var(--ws-radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
    background: var(--ws-bg-section);
}
.ws-card__icon--gold    { background: rgba(217,119,6,0.10); }
.ws-card__icon--green   { background: rgba(14,124,102,0.10); }
.ws-card__icon--blue    { background: rgba(21,101,192,0.10); }
.ws-card__icon--orange  { background: rgba(234,88,12,0.10); }
.ws-card__icon--purple  { background: rgba(124,58,237,0.10); }

.ws-card__title {
    font-size: var(--ws-text-sm); font-weight: 600;
    color: var(--ws-text-muted); margin: 0;
}

.ws-card__body { margin-bottom: var(--ws-space-4); }

.ws-card__value {
    font-size: var(--ws-text-3xl); font-weight: 800;
    color: var(--ws-text); font-family: var(--ws-font-heading);
    font-variant-numeric: tabular-nums;
}

.ws-card__change {
    font-size: var(--ws-text-sm); font-weight: 600;
    display: inline-flex; align-items: center; gap: 3px;
    margin-top: var(--ws-space-1);
}
.ws-card__change--up   { color: var(--ws-green); }
.ws-card__change--down { color: #EF4444; }

.ws-card__footer {
    display: flex; justify-content: space-between;
    font-size: var(--ws-text-xs); color: var(--ws-text-light);
    padding-top: var(--ws-space-3);
    border-top: 1px solid var(--ws-border);
}

.ws-card__badge {
    display: inline-block; background: var(--ws-green-pale);
    color: var(--ws-emerald); padding: 2px 10px;
    border-radius: var(--ws-radius-full); font-size: var(--ws-text-xs);
    font-weight: 700; margin-top: var(--ws-space-3);
}

/* Shimmer card hover effect */
.ws-card-shimmer {
    position: relative; overflow: hidden;
}
.ws-card-shimmer::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.6) 50%, transparent 60%);
    transform: translateX(-100%); transition: transform 0.5s ease;
}
.ws-card-shimmer:hover::after { transform: translateX(100%); }

/* Feature Card */
.ws-feature-card {
    background: var(--ws-bg-card); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-lg); padding: var(--ws-space-6);
    box-shadow: var(--ws-shadow-card); transition: var(--ws-transition);
    display: block; text-decoration: none;
}
.ws-feature-card:hover {
    transform: translateY(-4px); box-shadow: var(--ws-shadow-hover);
    border-color: var(--ws-border-emerald);
}
.ws-feature-card__icon {
    width: 56px; height: 56px; border-radius: var(--ws-radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: var(--ws-space-4);
}
.ws-feature-card h3 {
    font-size: var(--ws-text-xl); color: var(--ws-text);
    margin-bottom: var(--ws-space-3);
}
.ws-feature-card p {
    font-size: var(--ws-text-sm); color: var(--ws-text-muted);
    line-height: 1.6; margin-bottom: var(--ws-space-3);
}

/* Article Card */
.ws-article-card {
    background: var(--ws-bg-card); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-lg); overflow: hidden;
    box-shadow: var(--ws-shadow-card); transition: var(--ws-transition);
}
.ws-article-card:hover {
    transform: translateY(-3px); box-shadow: var(--ws-shadow-hover);
}
.ws-article-card__thumb {
    height: 200px; overflow: hidden; position: relative;
}
.ws-article-card__thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}
.ws-article-card:hover .ws-article-card__thumb img {
    transform: scale(1.05);
}
.ws-article-card__category {
    position: absolute; top: var(--ws-space-3); left: var(--ws-space-3);
    background: var(--ws-blue); color: #fff;
    padding: 3px 12px; border-radius: var(--ws-radius-full);
    font-size: var(--ws-text-xs); font-weight: 700;
}
.ws-article-card__body { padding: var(--ws-space-5); }
.ws-article-card__title {
    font-size: var(--ws-text-lg); margin-bottom: var(--ws-space-3);
    line-height: 1.4;
}
.ws-article-card__title a { color: var(--ws-text); }
.ws-article-card__title a:hover { color: var(--ws-blue); }
.ws-article-card__excerpt {
    font-size: var(--ws-text-sm); color: var(--ws-text-muted);
    margin-bottom: var(--ws-space-3); line-height: 1.6;
}
.ws-article-card__meta {
    display: flex; gap: var(--ws-space-4);
    font-size: var(--ws-text-xs); color: var(--ws-text-light);
}

/* =============================================
   BADGES
   ============================================= */
.ws-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--ws-radius-full);
    font-size: var(--ws-text-xs); font-weight: 700;
}
.ws-badge--live  { background: rgba(52,211,153,0.15); color: #059669; }
.ws-badge--green { background: var(--ws-green-pale); color: var(--ws-emerald); }
.ws-badge--blue  { background: var(--ws-blue-pale); color: var(--ws-blue); }
.ws-badge--gold  { background: rgba(217,119,6,0.10); color: var(--ws-gold); }
.ws-badge--red   { background: rgba(239,68,68,0.10); color: #DC2626; }
.ws-badge--gray  { background: var(--ws-bg-section); color: var(--ws-text-muted); }

/* =============================================
   LIVE WIDGET (Mandi Preview)
   ============================================= */
.ws-live-widget {
    background: var(--ws-bg-card); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-lg); overflow: hidden;
    box-shadow: var(--ws-shadow-card);
}

.ws-live-widget__header {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--ws-space-4) var(--ws-space-6);
    background: var(--ws-bg-section); border-bottom: 1px solid var(--ws-border);
}

.ws-live-widget__title {
    font-weight: 700; color: var(--ws-text);
    display: flex; align-items: center; gap: var(--ws-space-2);
    font-size: var(--ws-text-sm);
}

.ws-live-widget__updated { font-size: var(--ws-text-xs); color: var(--ws-text-light); }

.ws-live-widget__item {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--ws-space-4) var(--ws-space-6);
    border-bottom: 1px solid var(--ws-border); transition: var(--ws-transition-fast);
}
.ws-live-widget__item:last-child { border-bottom: none; }
.ws-live-widget__item:hover { background: var(--ws-blue-pale); }

.ws-live-widget__name {
    font-size: var(--ws-text-sm); font-weight: 600; color: var(--ws-text);
}
.ws-live-widget__name small { font-weight: 400; color: var(--ws-text-light); }

.ws-live-widget__price {
    font-size: var(--ws-text-base); font-weight: 800;
    color: var(--ws-emerald); font-family: var(--ws-font-mono);
}

/* =============================================
   NOTICE / ALERTS
   ============================================= */
.ws-notice {
    padding: var(--ws-space-4) var(--ws-space-5);
    border-radius: var(--ws-radius-md); font-size: var(--ws-text-sm);
    border-left: 4px solid transparent;
}
.ws-notice--info    { background: var(--ws-blue-pale); border-color: var(--ws-blue); color: var(--ws-blue-dark); }
.ws-notice--success { background: var(--ws-green-pale); border-color: var(--ws-emerald); color: var(--ws-emerald-dark); }
.ws-notice--warning { background: rgba(217,119,6,0.08); border-color: var(--ws-gold); color: var(--ws-gold-dark); }
.ws-notice--error   { background: rgba(239,68,68,0.08); border-color: #EF4444; color: #DC2626; }

/* =============================================
   DISCLAIMER
   ============================================= */
.ws-disclaimer {
    background: var(--ws-bg-section); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-md); padding: var(--ws-space-5);
    font-size: var(--ws-text-sm); color: var(--ws-text-muted);
    line-height: 1.6; margin: var(--ws-space-8) 0;
}

/* =============================================
   SKELETON LOADERS
   ============================================= */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.ws-skeleton {
    display: inline-block; border-radius: var(--ws-radius-sm);
    background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
    background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite;
}
.ws-skeleton--text   { height: 1em; width: 100%; }
.ws-skeleton--short  { width: 60%; }
.ws-skeleton--price  { height: 1.8em; width: 8rem; }
.ws-skeleton--chart  { height: 80px; width: 100%; }

/* =============================================
   DATA TABLES (Premium)
   ============================================= */
.ws-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--ws-radius-lg); border: 1px solid var(--ws-border);
    box-shadow: var(--ws-shadow-card);
}

.ws-table {
    width: 100%; border-collapse: collapse;
    font-size: var(--ws-text-sm);
}

.ws-table thead {
    background: var(--ws-bg-section);
    border-bottom: 2px solid var(--ws-border);
}
.ws-table th {
    padding: var(--ws-space-3) var(--ws-space-4);
    text-align: left; font-weight: 700; color: var(--ws-text-muted);
    font-size: var(--ws-text-xs); text-transform: uppercase; letter-spacing: 0.05em;
    white-space: nowrap;
}
.ws-table td {
    padding: var(--ws-space-3) var(--ws-space-4);
    border-bottom: 1px solid var(--ws-border); color: var(--ws-text);
    vertical-align: middle; white-space: nowrap;
}
.ws-table tbody tr:hover { background: var(--ws-blue-pale); }
.ws-table tbody tr:last-child td { border-bottom: none; }

/* =============================================
   FORMS / FILTERS
   ============================================= */
.ws-filter-bar {
    display: flex; gap: var(--ws-space-4); flex-wrap: wrap;
    align-items: flex-end; margin-bottom: var(--ws-space-8);
}

.ws-form-group { display: flex; flex-direction: column; gap: var(--ws-space-2); }
.ws-form-label { font-size: var(--ws-text-sm); font-weight: 600; color: var(--ws-text-muted); }

.ws-input, .ws-select {
    background: var(--ws-bg-card); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-md); padding: var(--ws-space-3) var(--ws-space-4);
    font-size: var(--ws-text-sm); font-family: var(--ws-font-body);
    color: var(--ws-text); transition: var(--ws-transition-fast);
    min-width: 180px;
}
.ws-input:focus, .ws-select:focus {
    outline: none; border-color: var(--ws-blue);
    box-shadow: 0 0 0 3px var(--ws-blue-pale);
}

/* =============================================
   PAGINATION
   ============================================= */
.ws-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: var(--ws-space-2); padding: var(--ws-space-6) 0;
    flex-wrap: wrap;
}
.ws-pagination button, .ws-page-btn {
    min-width: 40px; height: 40px; padding: 0 var(--ws-space-3);
    border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm);
    background: var(--ws-bg-card); color: var(--ws-text-muted);
    font-size: var(--ws-text-sm); font-weight: 500; cursor: pointer;
    transition: var(--ws-transition-fast);
}
.ws-pagination button:hover, .ws-page-btn:hover {
    border-color: var(--ws-blue); color: var(--ws-blue); background: var(--ws-blue-pale);
}
.ws-pagination button.is-active, .ws-page-btn--active {
    background: var(--ws-blue); color: #fff; border-color: var(--ws-blue);
}

/* =============================================
   AD SLOTS
   ============================================= */
.ws-ad-slot {
    padding: var(--ws-space-4) 0; text-align: center;
    background: var(--ws-bg-section);
}

/* =============================================
   BACK TO TOP
   ============================================= */
.ws-back-top {
    position: fixed; bottom: var(--ws-space-8); right: var(--ws-space-6);
    width: 44px; height: 44px; background: var(--ws-blue); color: #fff;
    border: none; border-radius: var(--ws-radius-full); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--ws-shadow-lg); transition: var(--ws-transition);
    opacity: 0; visibility: hidden; z-index: 100;
    font-size: 1.2rem;
}
.ws-back-top.is-visible { opacity: 1; visibility: visible; }
.ws-back-top:hover { background: var(--ws-blue-dark); transform: translateY(-3px); }

/* =============================================
   FOOTER
   ============================================= */
.ws-footer {
    background: var(--ws-bg-dark);
    color: rgba(255,255,255,0.70);
    padding: var(--ws-space-16) 0 var(--ws-space-8);
}

.ws-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: var(--ws-space-12);
    margin-bottom: var(--ws-space-12);
}
@media (max-width: 768px) {
    .ws-footer__grid { grid-template-columns: 1fr; gap: var(--ws-space-8); }
}

.ws-footer__brand p {
    color: rgba(255,255,255,0.55); font-size: var(--ws-text-sm); margin-top: var(--ws-space-4);
    line-height: 1.7; max-width: 300px;
}

.ws-footer__title {
    font-size: var(--ws-text-sm); font-weight: 800; color: #fff;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: var(--ws-space-5);
}

.ws-footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--ws-space-2); }
.ws-footer__links a {
    color: rgba(255,255,255,0.55); font-size: var(--ws-text-sm);
    transition: var(--ws-transition-fast);
}
.ws-footer__links a:hover { color: var(--ws-emerald-bright); }

.ws-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.10);
    padding-top: var(--ws-space-8);
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: var(--ws-space-4);
    font-size: var(--ws-text-sm); color: rgba(255,255,255,0.40);
}
.ws-footer__bottom a { color: rgba(255,255,255,0.55); }
.ws-footer__bottom a:hover { color: var(--ws-emerald-bright); }

/* =============================================
   ── PREMIUM PAGE TEMPLATES (wsp-*) ──
   Used by page-gold-silver.php etc.
   ============================================= */

/* Page Hero (content pages) */
.wsp-hero {
    position: relative; padding: var(--ws-space-20) 0;
    background: var(--ws-grad-dark-hero);
    overflow: hidden; color: #fff;
}
.wsp-hero__orbs { position: absolute; inset: 0; pointer-events: none; }
.wsp-hero__orb {
    position: absolute; border-radius: 50%; filter: blur(80px);
}
.wsp-hero__orb--1 {
    width: 600px; height: 600px; top: -20%; left: -10%;
    background: radial-gradient(circle, rgba(21,101,192,0.20) 0%, transparent 70%);
    animation: orbFloat 12s ease-in-out infinite;
}
.wsp-hero__orb--2 {
    width: 400px; height: 400px; bottom: -15%; right: -5%;
    background: radial-gradient(circle, rgba(14,124,102,0.18) 0%, transparent 70%);
    animation: orbFloat 10s ease-in-out infinite; animation-delay: -5s;
}
.wsp-hero__orb--3 {
    width: 300px; height: 300px; top: 30%; right: 20%;
    background: radial-gradient(circle, rgba(217,119,6,0.12) 0%, transparent 70%);
    animation: orbFloat 14s ease-in-out infinite; animation-delay: -8s;
}
.wsp-hero__grid-lines {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

.wsp-hero__eyebrow {
    display: inline-flex; align-items: center; gap: var(--ws-space-2);
    background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
    padding: 5px 16px; border-radius: var(--ws-radius-full);
    font-size: var(--ws-text-xs); font-weight: 600; letter-spacing: 0.05em;
    margin-bottom: var(--ws-space-6);
}

.wsp-live-dot {
    display: inline-block; width: 7px; height: 7px;
    border-radius: 50%; background: #34D399;
    animation: livePulse 2s ease-in-out infinite;
}

.wsp-hero__title {
    font-size: var(--ws-text-hero); font-weight: 900; color: #fff;
    line-height: 1.05; margin-bottom: var(--ws-space-6);
    letter-spacing: -0.03em;
}
.wsp-hero__title-accent {
    background: var(--ws-grad-logo);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wsp-hero__subtitle {
    font-size: var(--ws-text-xl); color: rgba(255,255,255,0.70);
    max-width: 720px; line-height: 1.65; margin-bottom: var(--ws-space-10);
}

/* Stat Cards in hero */
.wsp-stat-cards {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--ws-space-5); margin-top: var(--ws-space-10);
}
@media (max-width: 900px)  { .wsp-stat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .wsp-stat-cards { grid-template-columns: 1fr; } }

.wsp-stat-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--ws-radius-lg); padding: var(--ws-space-6);
    text-align: center;
    animation: cardFloat1 6s ease-in-out infinite;
}
@keyframes cardFloat1 {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}
@keyframes cardFloat2 {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}

.wsp-stat-card__icon { font-size: 2rem; margin-bottom: var(--ws-space-3); }
.wsp-stat-card__value {
    font-size: var(--ws-text-2xl); font-weight: 900; color: #fff;
    font-family: var(--ws-font-mono); margin-bottom: 4px;
}
.wsp-stat-card__label {
    font-size: var(--ws-text-sm); color: rgba(255,255,255,0.65); font-weight: 600;
}
.wsp-stat-card__sub { font-size: var(--ws-text-xs); color: rgba(255,255,255,0.40); margin-top: 2px; }

/* Filter Card */
.wsp-filter-card {
    background: var(--ws-bg-card); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-lg); padding: var(--ws-space-6);
    box-shadow: var(--ws-shadow-card); margin-bottom: var(--ws-space-6);
}
.wsp-filter-card__row {
    display: flex; gap: var(--ws-space-4); flex-wrap: wrap; align-items: flex-end;
}
.wsp-filter-card__group { flex: 1; min-width: 160px; }
.wsp-filter-card__label {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--ws-text-sm); font-weight: 600; color: var(--ws-text-muted);
    margin-bottom: var(--ws-space-2);
}
.wsp-filter-card__actions {
    display: flex; gap: var(--ws-space-3); align-items: center; flex-wrap: wrap;
}

.wsp-select, .wsp-input {
    width: 100%; background: var(--ws-bg-section);
    border: 1px solid var(--ws-border); border-radius: var(--ws-radius-md);
    padding: var(--ws-space-3) var(--ws-space-4); font-size: var(--ws-text-sm);
    font-family: var(--ws-font-body); color: var(--ws-text);
    transition: var(--ws-transition-fast);
}
.wsp-select:focus, .wsp-input:focus {
    outline: none; border-color: var(--ws-blue);
    box-shadow: 0 0 0 3px var(--ws-blue-pale);
    background: var(--ws-bg-card);
}

/* Chips */
.wsp-chip-row {
    display: flex; gap: var(--ws-space-2); flex-wrap: wrap;
    margin-top: var(--ws-space-4); padding-top: var(--ws-space-4);
    border-top: 1px solid var(--ws-border);
}
.wsp-chip {
    background: var(--ws-bg-section); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-full); padding: 4px 14px;
    font-size: var(--ws-text-xs); font-weight: 600; color: var(--ws-text-muted);
    cursor: pointer; transition: var(--ws-transition-fast);
}
.wsp-chip:hover, .wsp-chip.is-active {
    background: var(--ws-blue); color: #fff; border-color: var(--ws-blue);
}

/* Tabs */
.wsp-tabs {
    display: flex; gap: var(--ws-space-2); flex-wrap: wrap;
    background: var(--ws-bg-section); padding: var(--ws-space-2);
    border-radius: var(--ws-radius-lg); width: fit-content;
    margin-bottom: var(--ws-space-6);
}
.wsp-tab {
    background: transparent; border: none; cursor: pointer;
    padding: var(--ws-space-2) var(--ws-space-5);
    border-radius: var(--ws-radius-md); font-size: var(--ws-text-sm);
    font-weight: 600; color: var(--ws-text-muted);
    transition: var(--ws-transition-fast);
}
.wsp-tab--active, .wsp-tab:hover {
    background: var(--ws-bg-card); color: var(--ws-blue);
    box-shadow: var(--ws-shadow-sm);
}
.wsp-tab--active { color: var(--ws-blue) !important; }

/* Layout (main + sidebar) */
.wsp-layout { display: grid; gap: var(--ws-space-8); }
@media (min-width: 1024px) { .wsp-layout { grid-template-columns: 1fr 300px; } }

.wsp-layout__main { min-width: 0; }

/* Table controls */
.wsp-table-controls {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--ws-space-4); flex-wrap: wrap; gap: var(--ws-space-4);
}
.wsp-table-controls__left, .wsp-table-controls__right {
    display: flex; align-items: center; gap: var(--ws-space-3);
}
.wsp-table-title {
    font-size: var(--ws-text-xl); font-weight: 800; color: var(--ws-text);
    display: flex; align-items: center; gap: var(--ws-space-3);
}
.wsp-live-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(52,211,153,0.12); color: #059669;
    border: 1px solid rgba(52,211,153,0.25);
    padding: 3px 10px; border-radius: var(--ws-radius-full);
    font-size: var(--ws-text-xs); font-weight: 700;
}
.wsp-table-count {
    font-size: var(--ws-text-sm); color: var(--ws-text-muted);
}
.wsp-ctrl-btn {
    display: inline-flex; align-items: center; gap: var(--ws-space-2);
    background: var(--ws-bg-card); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-sm); padding: var(--ws-space-2) var(--ws-space-4);
    font-size: var(--ws-text-xs); font-weight: 600; color: var(--ws-text-muted);
    cursor: pointer; transition: var(--ws-transition-fast);
}
.wsp-ctrl-btn:hover { border-color: var(--ws-blue); color: var(--ws-blue); background: var(--ws-blue-pale); }

/* Premium Table */
.wsp-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--ws-radius-lg); border: 1px solid var(--ws-border);
    box-shadow: var(--ws-shadow-card);
}
.wsp-table {
    width: 100%; border-collapse: collapse; font-size: var(--ws-text-sm);
    background: var(--ws-bg-card);
}
.wsp-table thead { background: var(--ws-bg-section); }
.wsp-th {
    padding: var(--ws-space-3) var(--ws-space-4); text-align: left;
    font-weight: 700; color: var(--ws-text-muted);
    font-size: var(--ws-text-xs); text-transform: uppercase;
    letter-spacing: 0.05em; white-space: nowrap;
    border-bottom: 2px solid var(--ws-border);
}
.wsp-table tbody tr { border-bottom: 1px solid var(--ws-border); }
.wsp-table tbody tr:last-child { border-bottom: none; }
.wsp-table tbody tr:hover { background: var(--ws-blue-pale); }
.wsp-table td {
    padding: var(--ws-space-3) var(--ws-space-4);
    color: var(--ws-text); vertical-align: middle; white-space: nowrap;
}
.ws-skeleton-row td { padding: var(--ws-space-4); }
.wsp-th--modal { font-weight: 900; color: var(--ws-blue); }

/* Pagination */
.wsp-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: var(--ws-space-2); padding: var(--ws-space-5) 0; flex-wrap: wrap;
}

/* Sidebar Cards */
.wsp-sidebar-card {
    background: var(--ws-bg-card); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-lg); padding: var(--ws-space-5);
    box-shadow: var(--ws-shadow-card); margin-bottom: var(--ws-space-5);
}
.wsp-sidebar-card__title {
    font-size: var(--ws-text-sm); font-weight: 800; color: var(--ws-text);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: var(--ws-space-4); padding-bottom: var(--ws-space-3);
    border-bottom: 2px solid var(--ws-border);
}
.wsp-city-list { list-style: none; }
.wsp-city-list li { border-bottom: 1px solid var(--ws-border); }
.wsp-city-list li:last-child { border-bottom: none; }
.wsp-crop-btn {
    display: block; padding: var(--ws-space-2) 0;
    font-size: var(--ws-text-sm); color: var(--ws-text-muted);
    font-weight: 500; transition: var(--ws-transition-fast);
    cursor: pointer; background: none; border: none; width: 100%; text-align: left;
}
.wsp-crop-btn:hover { color: var(--ws-blue); }

.wsp-source-link {
    display: block; font-size: var(--ws-text-sm);
    color: var(--ws-blue); padding: var(--ws-space-1) 0;
    transition: var(--ws-transition-fast);
}
.wsp-source-link:hover { color: var(--ws-emerald); }

/* Mini Chart */
.ws-gold-mini-chart {
    height: 80px; background: var(--ws-bg-section);
    border-radius: var(--ws-radius-sm); overflow: hidden;
}

/* Info Section */
.wsp-info-section {
    padding: var(--ws-space-16) 0;
    background: var(--ws-bg-section);
}
.wsp-info-grid {
    display: grid; gap: var(--ws-space-8);
}
@media (min-width: 1024px) { .wsp-info-grid { grid-template-columns: 2fr 1fr; } }

.wsp-info-article h2 { margin-bottom: var(--ws-space-6); }
.wsp-info-article h3 { font-size: var(--ws-text-xl); margin: var(--ws-space-6) 0 var(--ws-space-3); }
.wsp-info-article p { color: var(--ws-text-muted); line-height: 1.75; }

.wsp-fact-list { list-style: none; }
.wsp-fact-list li {
    padding: var(--ws-space-3) 0; border-bottom: 1px solid var(--ws-border);
    font-size: var(--ws-text-sm); color: var(--ws-text-muted);
}
.wsp-fact-list li:last-child { border-bottom: none; }
.wsp-fact-list strong { color: var(--ws-text); }

/* =============================================
   ── DATA TABLE COMPONENTS (generated by data-loader.js)
   ============================================= */

/* Trend badges */
.wsp-trend {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: var(--ws-text-xs); font-weight: 700;
    padding: 2px 7px; border-radius: var(--ws-radius-full);
}
.wsp-trend--up    { background: rgba(14,124,102,0.10); color: var(--ws-emerald); }
.wsp-trend--down  { background: rgba(239,68,68,0.10);  color: #DC2626; }
.wsp-trend--flat  { background: var(--ws-bg-section);  color: var(--ws-text-muted); }

/* Empty state */
.wsp-empty-row { padding: var(--ws-space-10) !important; text-align: center; }
.wsp-empty-state {
    display: flex; flex-direction: column; align-items: center; gap: var(--ws-space-3);
    padding: var(--ws-space-10); color: var(--ws-text-muted);
}
.wsp-empty-state__icon { font-size: 2.5rem; }
.wsp-empty-state h3 { font-size: var(--ws-text-lg); color: var(--ws-text); margin: 0; }
.wsp-empty-state p  { font-size: var(--ws-text-sm); max-width: 380px; text-align: center; }

/* Table rows and cells */
.wsp-tr { border-bottom: 1px solid var(--ws-border); }
.wsp-tr:last-child { border-bottom: none; }
.wsp-tr:hover { background: var(--ws-blue-pale); }
.wsp-skeleton-row td { opacity: 0.5; }

.wsp-td {
    padding: var(--ws-space-3) var(--ws-space-4);
    vertical-align: middle; color: var(--ws-text); font-size: var(--ws-text-sm);
}
.wsp-td--muted   { color: var(--ws-text-muted); font-size: var(--ws-text-xs); }
.wsp-td--num     { font-family: var(--ws-font-mono); text-align: right; }
.wsp-td--modal   { font-family: var(--ws-font-mono); font-weight: 700; }
.wsp-td--date    { font-size: var(--ws-text-xs); color: var(--ws-text-muted); }
.wsp-td--commodity { min-width: 140px; }

/* Cell content */
.wsp-commodity-name { font-weight: 600; color: var(--ws-text); }
.wsp-market-name    { font-weight: 500; color: var(--ws-text); display: block; }
.wsp-district       { font-size: var(--ws-text-xs); color: var(--ws-text-muted); display: block; }
.wsp-city-name      { font-weight: 600; color: var(--ws-text); }
.wsp-date           { font-size: var(--ws-text-xs); color: var(--ws-text-muted); display: block; }

/* Price highlights */
.wsp-modal-price   { font-weight: 900; color: var(--ws-blue); font-family: var(--ws-font-mono); }
.wsp-gold-price    { font-weight: 900; color: var(--ws-gold-dark); font-family: var(--ws-font-mono); }
.wsp-gold-price--22k { color: var(--ws-text); }
.wsp-fuel-price    { font-weight: 900; color: var(--ws-emerald); font-family: var(--ws-font-mono); }

/* Sortable column headers */
.wsp-th[data-sort] { cursor: pointer; user-select: none; }
.wsp-th[data-sort]:hover { color: var(--ws-blue); }
.wsp-th--sort-asc::after  { content: ' ▲'; color: var(--ws-blue); }
.wsp-th--sort-desc::after { content: ' ▼'; color: var(--ws-blue); }

/* Pagination */
.wsp-page-btn {
    padding: var(--ws-space-2) var(--ws-space-3); border-radius: var(--ws-radius-sm);
    background: var(--ws-bg-card); border: 1px solid var(--ws-border);
    font-size: var(--ws-text-sm); font-weight: 600; color: var(--ws-text-muted);
    cursor: pointer; transition: var(--ws-transition-fast);
}
.wsp-page-btn:hover        { border-color: var(--ws-blue); color: var(--ws-blue); background: var(--ws-blue-pale); }
.wsp-page-btn--active      { background: var(--ws-blue); color: #fff; border-color: var(--ws-blue); }
.wsp-page-info             { font-size: var(--ws-text-sm); color: var(--ws-text-muted); margin-left: var(--ws-space-2); }

/* Quick commodity chips */
.wsp-quick-chip {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    padding: 4px 12px; border-radius: var(--ws-radius-full);
    background: var(--ws-bg-section); border: 1px solid var(--ws-border);
    font-size: var(--ws-text-xs); font-weight: 600; color: var(--ws-text-muted);
    transition: var(--ws-transition-fast);
}
.wsp-quick-chip:hover { background: var(--ws-blue); color: #fff; border-color: var(--ws-blue); }

/* =============================================
   ── MISSING WSP COMPONENTS (mandi / hero variants)
   ============================================= */

/* Live pulse dot (animated ring) — distinct from wsp-live-dot */
.wsp-live-pulse {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #34D399; position: relative;
}
.wsp-live-pulse::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid #34D399; opacity: 0;
    animation: livePulse 2s ease-in-out infinite;
}

/* Chip color variants */
.wsp-chip--green  { background: rgba(14,124,102,0.12); color: var(--ws-emerald);    border-color: rgba(14,124,102,0.25); }
.wsp-chip--blue   { background: rgba(21,101,192,0.12); color: var(--ws-blue);       border-color: rgba(21,101,192,0.25); }
.wsp-chip--purple { background: rgba(124,58,237,0.12); color: #7C3AED;              border-color: rgba(124,58,237,0.25); }
.wsp-chip--gold   { background: rgba(217,119,6,0.12);  color: var(--ws-gold-dark);  border-color: rgba(217,119,6,0.25); }
.wsp-chip--green:hover, .wsp-chip--green.is-active   { background: var(--ws-emerald); color: #fff; border-color: var(--ws-emerald); }
.wsp-chip--blue:hover,  .wsp-chip--blue.is-active    { background: var(--ws-blue);    color: #fff; border-color: var(--ws-blue); }
.wsp-chip--purple:hover,.wsp-chip--purple.is-active  { background: #7C3AED;           color: #fff; border-color: #7C3AED; }
.wsp-chip--gold:hover,  .wsp-chip--gold.is-active    { background: var(--ws-gold);    color: #fff; border-color: var(--ws-gold); }

/* Hero two-column layout (mandi style) */
.wsp-hero__inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--ws-space-12); align-items: center;
    position: relative; z-index: 2;
}
@media (max-width: 900px) { .wsp-hero__inner { grid-template-columns: 1fr; } }

.wsp-hero__text { }
.wsp-hero__cards {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--ws-space-4);
}
@media (max-width: 600px) { .wsp-hero__cards { grid-template-columns: 1fr; } }

.wsp-hero__badges {
    display: flex; flex-wrap: wrap; gap: var(--ws-space-2);
    margin-top: var(--ws-space-6);
}

/* wsp-hero__grid — identical to wsp-hero__grid-lines */
.wsp-hero__grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Hero color variants */
.wsp-hero--green .wsp-hero__orb--1 {
    background: radial-gradient(circle, rgba(14,124,102,0.22) 0%, transparent 70%);
}
.wsp-hero--green .wsp-hero__orb--2 {
    background: radial-gradient(circle, rgba(21,101,192,0.18) 0%, transparent 70%);
}

/* Stat card float variants */
.wsp-stat-card--float1 { animation-name: cardFloat1; }
.wsp-stat-card--float2 { animation-name: cardFloat2; }
.wsp-stat-card--float3 { animation: cardFloat1 7s ease-in-out infinite; animation-delay: -2s; }
.wsp-stat-card--float4 { animation: cardFloat2 9s ease-in-out infinite; animation-delay: -4s; }

/* Stat card data layout (mandi-style) */
.wsp-stat-card__data {
    display: flex; flex-direction: column; gap: 2px; flex: 1;
}
.wsp-stat-card__unit {
    font-size: var(--ws-text-xs); color: rgba(255,255,255,0.45);
}

/* Stat card glow accents */
.wsp-stat-card__glow {
    position: absolute; bottom: -20px; right: -20px;
    width: 80px; height: 80px; border-radius: 50%;
    background: radial-gradient(circle, rgba(21,101,192,0.30) 0%, transparent 70%);
    pointer-events: none;
}
.wsp-stat-card { position: relative; overflow: hidden; }
.wsp-stat-card__glow--blue   { background: radial-gradient(circle, rgba(66,165,245,0.35) 0%, transparent 70%); }
.wsp-stat-card__glow--gold   { background: radial-gradient(circle, rgba(249,168,37,0.35) 0%, transparent 70%); }
.wsp-stat-card__glow--emerald { background: radial-gradient(circle, rgba(14,124,102,0.35) 0%, transparent 70%); }

/* Scroll hint */
.wsp-scroll-hint {
    position: absolute; bottom: var(--ws-space-6); left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: var(--ws-space-2);
    color: rgba(255,255,255,0.40); font-size: var(--ws-text-xs); font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    animation: bounce 2s ease-in-out infinite;
}
.wsp-scroll-hint__arrow {
    width: 20px; height: 20px; border-right: 2px solid rgba(255,255,255,0.40);
    border-bottom: 2px solid rgba(255,255,255,0.40); transform: rotate(45deg);
}
@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

/* Filter section wrapper */
.wsp-filter-section {
    background: var(--ws-bg-section); padding: var(--ws-space-6) 0;
}

/* Filter card (mandi style — header + body) */
.wsp-filter-card__header {
    display: flex; align-items: center; gap: var(--ws-space-3);
    font-size: var(--ws-text-base); font-weight: 700; color: var(--ws-text);
    margin-bottom: var(--ws-space-5); padding-bottom: var(--ws-space-4);
    border-bottom: 1px solid var(--ws-border);
}
.wsp-filter-card__live {
    margin-left: auto; display: flex; align-items: center; gap: 6px;
    font-size: var(--ws-text-xs); font-weight: 700; color: #059669;
}
.wsp-filter-card__body {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--ws-space-4);
}

/* Form field components */
.wsp-field { display: flex; flex-direction: column; gap: var(--ws-space-2); }
.wsp-field__label {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--ws-text-sm); font-weight: 600; color: var(--ws-text-muted);
}
.wsp-field__control { position: relative; }
.wsp-field__icon {
    position: absolute; right: var(--ws-space-3); top: 50%;
    transform: translateY(-50%); color: var(--ws-text-muted);
    pointer-events: none;
}
.wsp-field__control .wsp-select { padding-right: var(--ws-space-8); }

/* =============================================
   ── NOTICE BAR
   ============================================= */
.wsp-notice-bar {
    background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--ws-radius-md); padding: var(--ws-space-3) var(--ws-space-5);
    font-size: var(--ws-text-sm); color: rgba(255,255,255,0.80);
    display: flex; align-items: center; gap: var(--ws-space-3);
    margin-top: var(--ws-space-6); max-width: 600px;
}

/* =============================================
   ── JOB CARDS
   ============================================= */
.wsp-jobs-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--ws-space-6);
}
@media (max-width: 768px) { .wsp-jobs-grid { grid-template-columns: 1fr; } }

.wsp-job-card {
    background: var(--ws-bg-card); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-lg); padding: var(--ws-space-6);
    box-shadow: var(--ws-shadow-card); display: flex; flex-direction: column;
    transition: var(--ws-transition-base);
}
.wsp-job-card:hover { box-shadow: var(--ws-shadow-lg); transform: translateY(-2px); border-color: var(--ws-blue-light); }
.wsp-job-card--urgent { border-color: #EF4444; border-left: 4px solid #EF4444; }

.wsp-job-card__header {
    display: flex; align-items: flex-start; gap: var(--ws-space-3);
    margin-bottom: var(--ws-space-4);
}
.wsp-job-card__icon { font-size: 2rem; flex-shrink: 0; }
.wsp-job-card__badges { display: flex; flex-wrap: wrap; gap: var(--ws-space-2); flex: 1; }

.wsp-job-card__title {
    font-size: var(--ws-text-lg); font-weight: 700; color: var(--ws-text);
    margin-bottom: var(--ws-space-3); line-height: 1.3;
}
.wsp-job-card__title a { color: inherit; text-decoration: none; }
.wsp-job-card__title a:hover { color: var(--ws-blue); }

.wsp-job-card__org {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--ws-text-sm); color: var(--ws-text-muted);
    margin-bottom: var(--ws-space-4);
}

.wsp-job-card__meta {
    display: flex; flex-direction: column; gap: var(--ws-space-2);
    margin-bottom: var(--ws-space-5); flex: 1;
}
.wsp-job-card__meta-item {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--ws-text-sm); color: var(--ws-text-muted);
}
.wsp-job-card__deadline { color: var(--ws-text-muted); }
.wsp-job-card__deadline--urgent { color: #DC2626; font-weight: 600; }

.wsp-job-card__footer {
    display: flex; gap: var(--ws-space-3); flex-wrap: wrap;
    padding-top: var(--ws-space-4); border-top: 1px solid var(--ws-border);
    margin-top: auto;
}

/* =============================================
   ── SCHEME CARDS
   ============================================= */
.wsp-schemes-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--ws-space-6);
}
@media (max-width: 768px) { .wsp-schemes-grid { grid-template-columns: 1fr; } }

.wsp-scheme-card {
    background: var(--ws-bg-card); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-lg); padding: var(--ws-space-6);
    box-shadow: var(--ws-shadow-card); display: flex; flex-direction: column;
    transition: var(--ws-transition-base);
}
.wsp-scheme-card:hover { box-shadow: var(--ws-shadow-lg); transform: translateY(-2px); border-color: var(--ws-emerald); }

.wsp-scheme-card__header {
    display: flex; align-items: flex-start; gap: var(--ws-space-3);
    margin-bottom: var(--ws-space-4);
}
.wsp-scheme-card__icon { font-size: 2rem; flex-shrink: 0; }
.wsp-scheme-card__badges { display: flex; flex-wrap: wrap; gap: var(--ws-space-2); flex: 1; }

.wsp-scheme-card__title {
    font-size: var(--ws-text-lg); font-weight: 700; color: var(--ws-text);
    margin-bottom: var(--ws-space-4); line-height: 1.3; flex: 1;
}
.wsp-scheme-card__title a { color: inherit; text-decoration: none; }
.wsp-scheme-card__title a:hover { color: var(--ws-emerald); }

.wsp-scheme-card__eligibility {
    background: var(--ws-bg-section); border-radius: var(--ws-radius-sm);
    padding: var(--ws-space-3) var(--ws-space-4); margin-bottom: var(--ws-space-4);
}
.wsp-scheme-card__eligibility-label {
    font-size: var(--ws-text-xs); font-weight: 700; color: var(--ws-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em; display: block;
    margin-bottom: var(--ws-space-2);
}
.wsp-scheme-card__eligibility p {
    font-size: var(--ws-text-sm); color: var(--ws-text); margin: 0;
}

.wsp-scheme-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--ws-space-3); flex-wrap: wrap;
    padding-top: var(--ws-space-4); border-top: 1px solid var(--ws-border);
    margin-top: auto;
}
.wsp-scheme-card__date { font-size: var(--ws-text-xs); color: var(--ws-text-muted); }
.wsp-scheme-card__actions { display: flex; gap: var(--ws-space-2); flex-wrap: wrap; }

/* =============================================
   ── BADGE PILLS
   ============================================= */
.wsp-badge-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--ws-radius-full);
    font-size: var(--ws-text-xs); font-weight: 700;
    background: var(--ws-bg-section); color: var(--ws-text-muted);
    border: 1px solid var(--ws-border);
}
.wsp-badge-pill--urgent   { background: rgba(239,68,68,0.10);  color: #DC2626; border-color: rgba(239,68,68,0.30); }
.wsp-badge-pill--verified { background: rgba(14,124,102,0.10); color: var(--ws-emerald); border-color: rgba(14,124,102,0.25); }
.wsp-badge-pill--ssc,
.wsp-badge-pill--railway,
.wsp-badge-pill--banking,
.wsp-badge-pill--psc,
.wsp-badge-pill--defence,
.wsp-badge-pill--teaching { background: rgba(21,101,192,0.10); color: var(--ws-blue); border-color: rgba(21,101,192,0.20); }
.wsp-badge-pill--farmer,
.wsp-badge-pill--agriculture { background: rgba(14,124,102,0.10); color: var(--ws-emerald); border-color: rgba(14,124,102,0.20); }
.wsp-badge-pill--student,
.wsp-badge-pill--education { background: rgba(124,58,237,0.10); color: #7C3AED; border-color: rgba(124,58,237,0.20); }
.wsp-badge-pill--medical,
.wsp-badge-pill--health    { background: rgba(239,68,68,0.10);  color: #DC2626; border-color: rgba(239,68,68,0.20); }
.wsp-badge-pill--msme,
.wsp-badge-pill--business  { background: rgba(217,119,6,0.10);  color: var(--ws-gold-dark); border-color: rgba(217,119,6,0.20); }
.wsp-badge-pill--women,
.wsp-badge-pill--girl-child{ background: rgba(236,72,153,0.10); color: #DB2777; border-color: rgba(236,72,153,0.20); }
.wsp-badge-pill--housing   { background: rgba(21,101,192,0.10); color: var(--ws-blue); border-color: rgba(21,101,192,0.20); }

/* =============================================
   ── SCHEME / JOB BUTTONS
   ============================================= */
.wsp-scheme-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: var(--ws-space-2) var(--ws-space-4);
    border-radius: var(--ws-radius-md); font-size: var(--ws-text-sm); font-weight: 600;
    text-decoration: none; transition: var(--ws-transition-fast);
    border: 1px solid transparent;
}
.wsp-scheme-btn--detail {
    background: var(--ws-blue-pale); color: var(--ws-blue); border-color: rgba(21,101,192,0.20);
}
.wsp-scheme-btn--detail:hover { background: var(--ws-blue); color: #fff; }
.wsp-scheme-btn--apply,
.wsp-scheme-btn--official {
    background: var(--ws-emerald); color: #fff;
}
.wsp-scheme-btn--apply:hover,
.wsp-scheme-btn--official:hover { background: var(--ws-emerald-dark); color: #fff; }

/* =============================================
   ── AD SLOTS
   ============================================= */
.ws-ad-slot { text-align: center; }
.ws-ad-slot--leaderboard { padding: var(--ws-space-4) 0; background: var(--ws-bg-section); }

/* =============================================
   ── WORDPRESS PAGINATION (paginate_links)
   ============================================= */
.wsp-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 var(--ws-space-3);
    border-radius: var(--ws-radius-sm); font-size: var(--ws-text-sm); font-weight: 600;
    background: var(--ws-bg-card); border: 1px solid var(--ws-border);
    color: var(--ws-text-muted); text-decoration: none;
    transition: var(--ws-transition-fast);
}
.wsp-pagination .page-numbers:hover { border-color: var(--ws-blue); color: var(--ws-blue); background: var(--ws-blue-pale); }
.wsp-pagination .page-numbers.current { background: var(--ws-blue); color: #fff; border-color: var(--ws-blue); }
.wsp-pagination .page-numbers.dots { border: none; background: none; }

/* =============================================
   ── WEATHER CARDS
   ============================================= */
.wsp-weather-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--ws-space-5);
}
@media (max-width: 600px) { .wsp-weather-grid { grid-template-columns: repeat(2, 1fr); } }

.wsp-weather-card {
    background: var(--ws-bg-card); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-lg); padding: var(--ws-space-5);
    box-shadow: var(--ws-shadow-card); transition: var(--ws-transition-base);
}
.wsp-weather-card:hover { box-shadow: var(--ws-shadow-lg); transform: translateY(-2px); }
.ws-skeleton-card { pointer-events: none; }

.wsp-weather-card__header {
    display: flex; align-items: center; gap: var(--ws-space-3);
    margin-bottom: var(--ws-space-4);
}
.wsp-weather-card__icon  { font-size: 2rem; flex-shrink: 0; }
.wsp-weather-card__city  { font-weight: 700; color: var(--ws-text); font-size: var(--ws-text-base); }
.wsp-weather-card__state { font-size: var(--ws-text-xs); color: var(--ws-text-muted); }

.wsp-weather-card__temp {
    font-size: 2.6rem; font-weight: 900; color: var(--ws-text);
    font-family: var(--ws-font-mono); line-height: 1;
    margin-bottom: var(--ws-space-2);
}
.wsp-weather-card__temp span { font-size: 1.4rem; }
.wsp-weather-card__cond  { font-size: var(--ws-text-sm); font-weight: 600; color: var(--ws-text-muted); margin-bottom: 2px; }
.wsp-weather-card__feel  { font-size: var(--ws-text-xs); color: var(--ws-text-muted); margin-bottom: var(--ws-space-4); }

.wsp-weather-card__details {
    display: flex; gap: var(--ws-space-3); flex-wrap: wrap;
    padding-top: var(--ws-space-3); border-top: 1px solid var(--ws-border);
}
.wsp-wx-detail { font-size: var(--ws-text-xs); color: var(--ws-text-muted); }

/* =============================================
   ── PRICE VARIANTS (fuel/lpg)
   ============================================= */
.wsp-fuel-price--diesel { color: var(--ws-blue); }
.wsp-lpg-price          { font-weight: 900; color: #2563EB; font-family: var(--ws-font-mono); }

/* =============================================
   ── EXTRA COMPONENT VARIANTS
   ============================================= */

/* Stat card badge (weather page) */
.wsp-stat-card__badge {
    display: inline-block; font-size: var(--ws-text-xs);
    background: rgba(255,255,255,0.12); border-radius: var(--ws-radius-full);
    padding: 2px 10px; color: rgba(255,255,255,0.70); margin-top: 4px;
}

/* Stat cards 4-col variant (explicit) */
.wsp-stat-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .wsp-stat-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .wsp-stat-cards--4 { grid-template-columns: 1fr; } }

/* Info sidebar */
.wsp-info-sidebar { }
.wsp-info-sidebar .wsp-sidebar-card + .wsp-sidebar-card { margin-top: var(--ws-space-4); }

/* Countdown timer */
.ws-countdown {
    font-size: var(--ws-text-xs); font-weight: 700; color: #DC2626;
    background: rgba(239,68,68,0.10); border-radius: var(--ws-radius-full);
    padding: 1px 7px; margin-left: 4px;
}

/* =============================================
   TRUST BAR (data quality) — inline PHP styles override
   ============================================= */
.ws-trust-bar--live    { background: var(--ws-blue-pale); color: var(--ws-blue-dark); border-left: 4px solid var(--ws-blue); }
.ws-trust-bar--verified { background: var(--ws-green-pale); color: var(--ws-emerald-dark); border-left: 4px solid var(--ws-emerald); }
.ws-trust-bar--fallback { background: rgba(217,119,6,0.08); color: var(--ws-gold-dark); border-left: 4px solid var(--ws-gold); }
.ws-trust-bar--missing  { background: rgba(239,68,68,0.08); color: #DC2626; border-left: 4px solid #EF4444; }
.ws-trust-icon { font-size: 1rem; flex-shrink: 0; }
.ws-trust-text { flex: 1; }
.ws-trust-sources { font-size: .78rem; opacity: .85; }
.ws-trust-sources a { color: inherit; margin-left: 6px; text-decoration: underline; }

/* =============================================
   MEDIA QUERIES — RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
    .ws-hero__title { font-size: clamp(2rem, 7vw, 4rem); }
    .wsp-hero__title { font-size: clamp(2rem, 7vw, 4rem); }
}

@media (max-width: 768px) {
    .ws-section     { padding: var(--ws-space-10) 0; }
    .ws-section--sm { padding: var(--ws-space-8) 0; }
    .ws-hero        { min-height: 80vh; }

    .ws-grid--4, .ws-grid--3 {
        grid-template-columns: repeat(auto-fit, minmax(min(280px,100%),1fr));
    }

    .wsp-stat-cards { grid-template-columns: 1fr 1fr; }
    .wsp-filter-card__row { flex-direction: column; }
    .wsp-filter-card__group { min-width: unset; }
    .wsp-layout { grid-template-columns: 1fr; }

    .ws-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .ws-footer__grid { grid-template-columns: 1fr; }
    .ws-hero__cta { flex-direction: column; }
    .wsp-stat-cards { grid-template-columns: 1fr; }
}

/* =============================================
   UTILITIES
   ============================================= */
.ws-text-gradient {
    background: var(--ws-grad-logo);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ws-text-emerald { color: var(--ws-emerald); }
.ws-text-blue    { color: var(--ws-blue); }
.ws-text-gold    { color: var(--ws-gold); }
.ws-text-muted   { color: var(--ws-text-muted); }

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

/* Page-specific dark sections */
[style*="background:var(--ws-bg-section)"],
[style*="background: var(--ws-bg-section)"] {
    background: var(--ws-bg-section) !important;
}

/* =============================================
   NEWSLETTER BANNER
   ============================================= */
.ws-newsletter-banner {
    background: var(--ws-grad-logo); padding: var(--ws-space-12) 0;
}
.ws-newsletter-banner__content {
    display: flex; align-items: center; gap: var(--ws-space-10);
    flex-wrap: wrap; justify-content: space-between;
}
.ws-newsletter-banner__text h2 {
    color: #fff; font-size: var(--ws-text-3xl); margin-bottom: var(--ws-space-3);
}
.ws-newsletter-banner__text p {
    color: rgba(255,255,255,0.80); font-size: var(--ws-text-base); max-width: 480px;
}
.ws-newsletter-form {
    display: flex; gap: var(--ws-space-3); flex-wrap: wrap; flex-shrink: 0;
}
.ws-newsletter-form__input {
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35);
    border-radius: var(--ws-radius-md); padding: var(--ws-space-3) var(--ws-space-5);
    color: #fff; font-size: var(--ws-text-base); font-family: var(--ws-font-body);
    min-width: 280px;
}
.ws-newsletter-form__input::placeholder { color: rgba(255,255,255,0.60); }
.ws-newsletter-form__input:focus {
    outline: none; border-color: rgba(255,255,255,0.70);
    background: rgba(255,255,255,0.22);
}

/* =============================================
   FOOTER — Full structure matching footer.php
   ============================================= */
.ws-footer {
    background: var(--ws-bg-dark);
    color: rgba(255,255,255,0.70);
    padding: var(--ws-space-16) 0 0;
}

.ws-footer__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--ws-space-16);
    padding-bottom: var(--ws-space-12);
}
@media (max-width: 900px) { .ws-footer__top { grid-template-columns: 1fr; gap: var(--ws-space-8); } }

.ws-footer__brand img { height: 48px; width: auto; margin-bottom: var(--ws-space-4); }
.ws-footer__tagline {
    font-weight: 700; color: rgba(255,255,255,0.50);
    font-size: var(--ws-text-sm); text-transform: uppercase;
    letter-spacing: 0.08em; margin-bottom: var(--ws-space-4);
}
.ws-footer__desc {
    color: rgba(255,255,255,0.50); font-size: var(--ws-text-sm);
    line-height: 1.75; max-width: 340px; margin-bottom: var(--ws-space-6);
}

.ws-footer__social {
    display: flex; gap: var(--ws-space-3); flex-wrap: wrap;
}
.ws-footer__social a {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--ws-radius-sm);
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.60); transition: var(--ws-transition-fast);
}
.ws-footer__social a:hover {
    background: var(--ws-emerald); color: #fff; border-color: transparent;
}

.ws-footer__links {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--ws-space-8);
}
@media (max-width: 900px) { .ws-footer__links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ws-footer__links { grid-template-columns: 1fr 1fr; } }

.ws-footer__col h3 {
    font-size: var(--ws-text-sm); font-weight: 800; color: rgba(255,255,255,0.90);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: var(--ws-space-4); padding-bottom: var(--ws-space-3);
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.ws-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: var(--ws-space-2); }
.ws-footer__col a {
    color: rgba(255,255,255,0.52); font-size: var(--ws-text-sm);
    transition: var(--ws-transition-fast);
}
.ws-footer__col a:hover { color: var(--ws-emerald-bright); }

.ws-footer__ad { padding: var(--ws-space-6) 0; text-align: center; }

.ws-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: var(--ws-space-8) 0;
    background: rgba(0,0,0,0.2);
}
.ws-footer__copyright {
    font-size: var(--ws-text-sm); color: rgba(255,255,255,0.50);
    margin-bottom: var(--ws-space-3);
}
.ws-footer__copyright a { color: var(--ws-emerald-bright); }
.ws-footer__copyright strong { color: rgba(255,255,255,0.80); }

.ws-footer__disclaimer {
    font-size: var(--ws-text-xs); color: rgba(255,255,255,0.35);
    line-height: 1.6; margin-bottom: var(--ws-space-3);
}

.ws-footer__sources {
    font-size: var(--ws-text-xs); color: rgba(255,255,255,0.30);
}
.ws-footer__sources a { color: rgba(255,255,255,0.45); margin: 0 3px; }
.ws-footer__sources a:hover { color: var(--ws-emerald-bright); }

/* =========================================================
   WISESEVA PREMIUM DESIGN SYSTEM v5.0
   3D effects · Glassmorphism · Vivid gradients · Eye-catching
   ========================================================= */

/* ── Google Fonts (Poppins + Nunito) ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Nunito:wght@400;600;700;800&display=swap');

/* ── CSS Variables upgrade ── */
:root {
  --ws-premium-gold:     #f59e0b;
  --ws-premium-gold-dk:  #d97706;
  --ws-premium-emerald:  #10b981;
  --ws-premium-blue:     #3b82f6;
  --ws-premium-purple:   #8b5cf6;
  --ws-premium-rose:     #f43f5e;
  --ws-premium-orange:   #f97316;
  --ws-premium-cyan:     #06b6d4;
  --ws-font-display:     'Poppins', 'Nunito', system-ui, sans-serif;
  --ws-3d-shadow:        0 20px 60px rgba(0,0,0,.14), 0 6px 20px rgba(0,0,0,.08);
  --ws-3d-hover:         0 28px 80px rgba(0,0,0,.18), 0 8px 28px rgba(0,0,0,.10);
  --ws-radius-xl:        20px;
  --ws-radius-2xl:       28px;
}

/* =========================================================
   PREMIUM TABLE (Gold, Mandi, any .wsp-table)
   ========================================================= */
.wsp-table-wrap {
  background: #fff;
  border-radius: var(--ws-radius-xl);
  box-shadow: var(--ws-3d-shadow);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8);
  position: relative;
  transition: box-shadow .3s ease, transform .3s ease;
}
.wsp-table-wrap:hover {
  box-shadow: var(--ws-3d-hover);
  transform: translateY(-2px);
}

/* Table head — deep navy gradient */
.wsp-table thead {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 55%, #1d4ed8 100%) !important;
}
.wsp-table thead th, .wsp-th {
  color: #fff !important;
  font-family: var(--ws-font-display) !important;
  font-weight: 700 !important;
  font-size: .78rem !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  padding: 16px 14px !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.3) !important;
  white-space: nowrap;
  border-bottom: none !important;
  position: relative;
}
.wsp-table thead th:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: rgba(255,255,255,.15);
}

/* Table rows — alternating with hover glow */
.wsp-table tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background .15s ease, box-shadow .15s ease !important;
}
.wsp-table tbody tr:nth-child(even) {
  background: #f8faff !important;
}
.wsp-table tbody tr:hover {
  background: linear-gradient(90deg, #eff6ff 0%, #f0fdf4 100%) !important;
  box-shadow: inset 4px 0 0 #3b82f6 !important;
}

/* Table cells */
.wsp-table td {
  font-family: var(--ws-font-display) !important;
  font-size: .875rem !important;
  padding: 14px 14px !important;
  color: #1e293b !important;
  vertical-align: middle !important;
}

/* Modal price highlight — the star column */
.wsp-th--modal, td.ws-modal-cell {
  background: rgba(59,130,246,.06) !important;
}
.ws-modal-price {
  font-family: var(--ws-font-display) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  background: linear-gradient(135deg, #1d4ed8, #7c3aed) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Mandi price colour bands */
.ws-price--low  { color: #059669 !important; font-weight: 700; }
.ws-price--mid  { color: #d97706 !important; font-weight: 700; }
.ws-price--high { color: #dc2626 !important; font-weight: 700; }

/* Commodity pill */
.ws-commodity-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #eff6ff, #f0fdf4);
  border: 1px solid #dbeafe;
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--ws-font-display);
  font-weight: 700;
  font-size: .82rem;
  color: #1e40af;
}

/* Table controls heading */
.wsp-table-title {
  font-family: var(--ws-font-display) !important;
  font-weight: 800 !important;
  font-size: 1.35rem !important;
  background: linear-gradient(135deg, #0f172a, #1d4ed8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -.02em !important;
}

/* =========================================================
   PREMIUM WEATHER CARDS
   ========================================================= */
.wsw-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 20px !important;
  padding: 4px !important;
}

.wsw-card {
  background: linear-gradient(145deg, #ffffff 0%, #e0f2fe 100%) !important;
  border-radius: var(--ws-radius-xl) !important;
  padding: 20px !important;
  box-shadow: 0 8px 32px rgba(14,165,233,.12), 0 2px 8px rgba(0,0,0,.06) !important;
  border: 1px solid rgba(186,230,253,.6) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.wsw-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #06b6d4, #3b82f6, #8b5cf6);
}
.wsw-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 20px 50px rgba(14,165,233,.22), 0 4px 16px rgba(0,0,0,.08) !important;
}

.wsw-card__top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 10px !important;
}
.wsw-card__city {
  font-family: var(--ws-font-display) !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  color: #0c4a6e !important;
  letter-spacing: -.02em !important;
}
.wsw-card__state {
  font-family: var(--ws-font-display) !important;
  font-size: .72rem !important;
  color: #0369a1 !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}
.wsw-card__icon {
  font-size: 2.4rem !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)) !important;
}
.wsw-card__temp {
  font-family: var(--ws-font-display) !important;
  font-size: 3rem !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
  margin: 8px 0 4px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.10) !important;
}
.wsw-card__condition {
  font-family: var(--ws-font-display) !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: #0369a1 !important;
  margin-bottom: 10px !important;
}
.wsw-card__meta {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  font-family: var(--ws-font-display) !important;
  font-size: .75rem !important;
  color: #1e40af !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}
.wsw-forecast {
  display: flex !important;
  gap: 6px !important;
  border-top: 1px solid rgba(186,230,253,.7) !important;
  padding-top: 10px !important;
  overflow: hidden !important;
}
.wsw-day {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  font-family: var(--ws-font-display) !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  color: #0369a1 !important;
  flex: 1 !important;
}

/* Skeleton — updated */
.wsw-card--skeleton {
  background: linear-gradient(145deg, #f0f9ff, #e0f2fe) !important;
  animation: wsSkeletonPulse 1.6s ease-in-out infinite !important;
}
.wsw-skel-title { height: 16px; width: 70%; background: rgba(14,165,233,.15); border-radius: 8px; margin-bottom: 10px; }
.wsw-skel-temp  { height: 44px; width: 50%; background: rgba(14,165,233,.12); border-radius: 8px; margin-bottom: 10px; }
.wsw-skel-row   { height: 12px; width: 85%; background: rgba(14,165,233,.10); border-radius: 6px; margin-bottom: 8px; }
.wsw-skel-forecast { height: 40px; width: 100%; background: rgba(14,165,233,.08); border-radius: 6px; }
@keyframes wsSkeletonPulse {
  0%,100% { opacity: 1; } 50% { opacity: .5; }
}

/* =========================================================
   PREMIUM JOB CARDS
   ========================================================= */
.wsp-jobs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 24px !important;
}

.wsp-job-card {
  background: #fff !important;
  border-radius: var(--ws-radius-xl) !important;
  padding: 24px !important;
  box-shadow: 0 8px 32px rgba(37,99,235,.10), 0 2px 8px rgba(0,0,0,.05) !important;
  border: 1px solid #e0e7ff !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.wsp-job-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #ec4899 100%);
  border-radius: 4px 4px 0 0;
}
.wsp-job-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 60px rgba(37,99,235,.18), 0 4px 16px rgba(0,0,0,.08) !important;
  border-color: #a5b4fc !important;
}
.wsp-job-card--urgent {
  border-color: #fecaca !important;
  background: linear-gradient(145deg, #fff 0%, #fff5f5 100%) !important;
}
.wsp-job-card--urgent::before {
  background: linear-gradient(90deg, #ef4444, #f97316, #eab308);
}

.wsp-job-card__title {
  font-family: var(--ws-font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #1e1b4b !important;
  line-height: 1.35 !important;
  margin-bottom: 4px !important;
  letter-spacing: -.02em !important;
}
.wsp-job-card__org {
  font-family: var(--ws-font-display) !important;
  font-size: .78rem !important;
  color: #4338ca !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}
.wsp-job-card__icon { font-size: 2.2rem !important; }

.wsp-job-card__meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #f1f5f9 !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-family: var(--ws-font-display) !important;
  font-size: .76rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
}
.wsp-job-card__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 12px 0 !important;
}

.wsp-job-card__urgency {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
.wsp-job-card__countdown {
  font-family: var(--ws-font-display) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  color: #dc2626 !important;
}

/* Job footer buttons */
.wsp-scheme-btn--apply {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #fff !important;
  border: none !important;
  font-family: var(--ws-font-display) !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  font-size: .82rem !important;
  cursor: pointer !important;
  transition: opacity .2s, transform .2s !important;
  text-decoration: none !important;
  display: inline-block !important;
}
.wsp-scheme-btn--apply:hover {
  opacity: .9 !important;
  transform: scale(1.03) !important;
  color: #fff !important;
}
.wsp-scheme-btn--detail {
  background: #f1f5f9 !important;
  color: #1e40af !important;
  border: 1px solid #dbeafe !important;
  font-family: var(--ws-font-display) !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: .82rem !important;
  cursor: pointer !important;
  transition: background .2s !important;
  text-decoration: none !important;
  display: inline-block !important;
}
.wsp-scheme-btn--detail:hover {
  background: #dbeafe !important;
  color: #1e40af !important;
}

/* =========================================================
   PREMIUM SCHEME CARDS
   ========================================================= */
.wsp-schemes-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 24px !important;
}

.wsp-scheme-card {
  background: #fff !important;
  border-radius: var(--ws-radius-xl) !important;
  padding: 24px !important;
  box-shadow: 0 8px 32px rgba(5,150,105,.10), 0 2px 8px rgba(0,0,0,.05) !important;
  border: 1px solid #d1fae5 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.wsp-scheme-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #059669 0%, #10b981 50%, #34d399 100%);
}
.wsp-scheme-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 60px rgba(5,150,105,.18), 0 4px 16px rgba(0,0,0,.08) !important;
  border-color: #6ee7b7 !important;
}
.wsp-scheme-card__icon { font-size: 2.4rem !important; filter: drop-shadow(0 3px 6px rgba(0,0,0,.12)); }

.wsp-scheme-card__title {
  font-family: var(--ws-font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #064e3b !important;
  line-height: 1.35 !important;
  margin: 8px 0 !important;
  letter-spacing: -.02em !important;
}
.wsp-scheme-card__desc {
  font-family: var(--ws-font-display) !important;
  font-size: .84rem !important;
  color: #374151 !important;
  line-height: 1.65 !important;
}
.wsp-scheme-card__eligibility {
  background: #f0fdf4 !important;
  border-left: 3px solid #10b981 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 10px 14px !important;
  margin: 10px 0 !important;
}
.wsp-scheme-card__eligibility-label {
  font-family: var(--ws-font-display) !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #059669 !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.wsp-scheme-card__benefit {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-family: var(--ws-font-display) !important;
  font-size: .85rem !important;
}
.wsp-scheme-card__date {
  font-family: var(--ws-font-display) !important;
  font-size: .74rem !important;
  color: #059669 !important;
  font-weight: 600 !important;
}

/* Scheme official apply button */
.wsp-scheme-btn--official {
  background: linear-gradient(135deg, #059669, #0d9488) !important;
  color: #fff !important;
  border: none !important;
  font-family: var(--ws-font-display) !important;
  font-weight: 700 !important;
  padding: 9px 20px !important;
  border-radius: 10px !important;
  font-size: .82rem !important;
  cursor: pointer !important;
  transition: opacity .2s, transform .2s !important;
  text-decoration: none !important;
  display: inline-block !important;
}
.wsp-scheme-btn--official:hover {
  opacity: .9 !important; transform: scale(1.03) !important; color: #fff !important;
}

/* Badge pills upgrade */
.wsp-badge-pill {
  font-family: var(--ws-font-display) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.wsp-badge-pill--farmer   { background: #d1fae5; color: #065f46; }
.wsp-badge-pill--student  { background: #ede9fe; color: #4c1d95; }
.wsp-badge-pill--medical  { background: #fee2e2; color: #7f1d1d; }
.wsp-badge-pill--msme     { background: #ffedd5; color: #7c2d12; }
.wsp-badge-pill--women    { background: #fce7f3; color: #831843; }
.wsp-badge-pill--housing  { background: #dbeafe; color: #1e3a8a; }
.wsp-badge-pill--verified { background: linear-gradient(135deg,#ecfdf5,#d1fae5); color: #065f46; border: 1px solid #a7f3d0; }
.wsp-badge-pill--urgent   { background: linear-gradient(135deg,#fee2e2,#fecaca); color: #7f1d1d; border: 1px solid #fca5a5; }
.wsp-badge-pill--ssc      { background: #dbeafe; color: #1e3a8a; }
.wsp-badge-pill--banking  { background: #fef9c3; color: #713f12; }
.wsp-badge-pill--railway  { background: #fce7f3; color: #831843; }
.wsp-badge-pill--defence  { background: #dcfce7; color: #14532d; }
.wsp-badge-pill--teaching { background: #ede9fe; color: #4c1d95; }
.wsp-badge-pill--government { background: #f1f5f9; color: #1e293b; }
.wsp-badge-pill--graduate { background: #eff6ff; color: #1e40af; }

/* =========================================================
   IMPORT/EXPORT PREMIUM CARDS
   ========================================================= */
#iePolicyCards, #ieNotifCards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.ie-notif-card, .ie-policy-card {
  background: #fff;
  border-radius: var(--ws-radius-xl);
  padding: 22px;
  box-shadow: 0 8px 28px rgba(220,38,38,.08), 0 2px 8px rgba(0,0,0,.05);
  border: 1px solid #fee2e2;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ie-notif-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #dc2626 0%, #f97316 50%, #eab308 100%);
}
.ie-notif-card:hover, .ie-policy-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 50px rgba(220,38,38,.14);
}

.ie-notif-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ws-font-display);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.ie-notif-card__badge--live { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
.ie-notif-card__badge--ref  { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }

.ie-notif-card__title {
  font-family: var(--ws-font-display);
  font-weight: 800;
  font-size: 1rem;
  color: #1e1b4b;
  line-height: 1.4;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.ie-notif-card__date {
  font-family: var(--ws-font-display);
  font-size: .74rem;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 10px;
}
.ie-notif-card__desc {
  font-family: var(--ws-font-display);
  font-size: .83rem;
  color: #374151;
  line-height: 1.65;
  margin-bottom: 14px;
}
.ie-notif-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #dc2626, #ea580c);
  color: #fff;
  border-radius: 10px;
  padding: 8px 18px;
  font-family: var(--ws-font-display);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s, transform .2s;
}
.ie-notif-card__link:hover { opacity:.9; transform:scale(1.03); color:#fff; }

/* Import/Export table */
#ieTradeTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--ws-3d-shadow);
}
#ieTradeTable thead { background: linear-gradient(135deg,#7c2d12,#c2410c,#ea580c); }
#ieTradeTable thead th { color:#fff; font-family:var(--ws-font-display); font-weight:700; padding:14px 16px; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
#ieTradeTable tbody tr:nth-child(even) { background:#fff7ed; }
#ieTradeTable tbody td { font-family:var(--ws-font-display); padding:13px 16px; font-size:.85rem; }

/* =========================================================
   PREMIUM HERO HEADINGS
   ========================================================= */
.wsp-hero__title {
  font-family: var(--ws-font-display) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}
.wsp-hero__title-accent {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.wsp-hero__subtitle {
  font-family: var(--ws-font-display) !important;
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
}

/* Section headings */
.wsp-article h2, .wsp-info-article h2, .wsp-article__h2 {
  font-family: var(--ws-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* =========================================================
   STAT CARDS — HERO FLOATING CARDS
   ========================================================= */
.wsp-stat-card {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: var(--ws-radius-xl) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08) !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
}
.wsp-stat-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.18) !important;
}
.wsp-stat-card__value {
  font-family: var(--ws-font-display) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
/* Labels are on white card — must be dark text */
.wsp-stat-card__label {
  color: #374151 !important;
  font-weight: 700 !important;
}
.wsp-stat-card__sub {
  color: #6b7280 !important;
}
.wsp-stat-card__badge {
  color: #1e3a5f !important;
  background: rgba(30,58,95,0.08) !important;
  font-weight: 600 !important;
}

/* =========================================================
   FILTER CARD
   ========================================================= */
.wsp-filter-card {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(20px) !important;
  border-radius: var(--ws-radius-xl) !important;
  border: 1px solid rgba(59,130,246,.15) !important;
  box-shadow: 0 12px 40px rgba(37,99,235,.10), 0 2px 8px rgba(0,0,0,.06) !important;
}

/* =========================================================
   QUICK CHIPS
   ========================================================= */
.wsp-chip, .wsp-quick-chip {
  font-family: var(--ws-font-display) !important;
  font-weight: 700 !important;
  font-size: .8rem !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
  cursor: pointer !important;
  transition: background .2s, color .2s, transform .15s !important;
}
.wsp-chip:hover, .wsp-quick-chip:hover {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: scale(1.05) !important;
}

/* =========================================================
   EMPTY STATE UPGRADE
   ========================================================= */
.wsp-empty-state {
  text-align: center !important;
  padding: 60px 24px !important;
  background: linear-gradient(135deg, #f8faff, #f0fdf4) !important;
  border-radius: var(--ws-radius-2xl) !important;
  border: 2px dashed #dbeafe !important;
}
.wsp-empty-state__icon { font-size: 3.5rem !important; margin-bottom: 16px !important; }
.wsp-empty-state h3 {
  font-family: var(--ws-font-display) !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
  color: #1e293b !important;
  margin-bottom: 8px !important;
}

/* =========================================================
   SIDEBAR CARDS
   ========================================================= */
.wsp-sidebar-card {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.07) !important;
  border: 1px solid #f1f5f9 !important;
  transition: box-shadow .2s !important;
}
.wsp-sidebar-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.10) !important; }
.wsp-sidebar-card__title {
  font-family: var(--ws-font-display) !important;
  font-weight: 800 !important;
  font-size: .95rem !important;
  color: #0f172a !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* =========================================================
   LIVE DOT / BADGE
   ========================================================= */
.wsp-live-dot {
  width: 8px !important; height: 8px !important;
  background: #22c55e !important;
  border-radius: 50% !important;
  display: inline-block !important;
  animation: wsLivePulse 1.5s ease-in-out infinite !important;
  box-shadow: 0 0 0 0 rgba(34,197,94,.5) !important;
}
@keyframes wsLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* =========================================================
   TABS UPGRADE
   ========================================================= */
.wsp-tabs {
  display: flex !important;
  gap: 6px !important;
  background: #f1f5f9 !important;
  border-radius: 14px !important;
  padding: 5px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.wsp-tab {
  font-family: var(--ws-font-display) !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  border-radius: 10px !important;
  padding: 8px 18px !important;
  background: transparent !important;
  color: #64748b !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background .2s, color .2s !important;
}
.wsp-tab--active, .wsp-tab:hover {
  background: #fff !important;
  color: #1d4ed8 !important;
  box-shadow: 0 2px 8px rgba(29,78,216,.12) !important;
}

/* =========================================================
   RESPONSIVE GRID — MOBILE
   ========================================================= */
@media (max-width: 640px) {
  .wsp-jobs-grid, .wsp-schemes-grid {
    grid-template-columns: 1fr !important;
  }
  .wsw-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 12px !important;
  }
  .wsp-job-card, .wsp-scheme-card {
    padding: 18px !important;
  }
  .wsw-card__temp { font-size: 2.2rem !important; }
}

/* =========================================================
   PREMIUM OVERRIDES — Data-Loader class names
   These override the original simple definitions above
   ========================================================= */

/* Mandi modal price — vivid gradient text */
.wsp-modal-price {
  font-family: var(--ws-font-display, 'Poppins', system-ui) !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  background: linear-gradient(135deg, #1d4ed8, #7c3aed) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block !important;
}

/* Mandi price band classes (added by JS) */
.wsp-td--price-low .wsp-modal-price {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}
.wsp-td--price-mid .wsp-modal-price {
  background: linear-gradient(135deg, #d97706, #f97316) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}
.wsp-td--price-high .wsp-modal-price {
  background: linear-gradient(135deg, #dc2626, #f43f5e) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}

/* Gold price — shimmering gold */
.wsp-gold-price {
  font-family: var(--ws-font-display, 'Poppins', system-ui) !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  background: linear-gradient(135deg, #92400e, #d97706, #f59e0b) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block !important;
}
.wsp-gold-price--22k {
  background: linear-gradient(135deg, #78350f, #b45309) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}

/* Fuel price */
.wsp-fuel-price {
  font-family: var(--ws-font-display, 'Poppins', system-ui) !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  background: linear-gradient(135deg, #7f1d1d, #dc2626) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block !important;
}
.wsp-fuel-price--diesel {
  background: linear-gradient(135deg, #1e3a8a, #2563eb) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}

/* LPG price */
.wsp-lpg-price {
  font-family: var(--ws-font-display, 'Poppins', system-ui) !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  background: linear-gradient(135deg, #1e3a8a, #06b6d4) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block !important;
}

/* City / commodity / market names */
.wsp-city-name, .wsp-commodity-name {
  font-family: var(--ws-font-display, 'Poppins', system-ui) !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: .9rem !important;
}
.wsp-market-name {
  font-family: var(--ws-font-display, 'Poppins', system-ui) !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  font-size: .88rem !important;
}
.wsp-district {
  font-size: .72rem !important;
  color: #64748b !important;
  font-family: var(--ws-font-display, 'Poppins', system-ui) !important;
  display: block !important;
}

/* Trend badges */
.wsp-trend {
  font-family: var(--ws-font-display, 'Poppins', system-ui) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  margin-left: 6px !important;
}
.wsp-trend--up   { background: #dcfce7 !important; color: #15803d !important; }
.wsp-trend--down { background: #fee2e2 !important; color: #dc2626 !important; }
.wsp-trend--flat { background: #f1f5f9 !important; color: #64748b !important; }

/* Premium weather card (data-loader.js version) */
.wsp-weather-card {
  background: linear-gradient(145deg, #fff 0%, #e0f2fe 100%) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(186,230,253,.6) !important;
  box-shadow: 0 8px 28px rgba(14,165,233,.12) !important;
  transition: transform .25s, box-shadow .25s !important;
  position: relative !important;
  overflow: hidden !important;
}
.wsp-weather-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 4px !important;
  background: linear-gradient(90deg, #06b6d4, #3b82f6, #8b5cf6) !important;
}
.wsp-weather-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 50px rgba(14,165,233,.20) !important;
}
.wsp-weather-card__city {
  font-family: var(--ws-font-display, 'Poppins', system-ui) !important;
  font-weight: 800 !important;
  color: #0c4a6e !important;
}
.wsp-weather-card__temp {
  font-family: var(--ws-font-display, 'Poppins', system-ui) !important;
  font-weight: 900 !important;
  font-size: 2.8rem !important;
  letter-spacing: -.04em !important;
}

/* Mandi table row row-band for each category */
.wsp-tr { transition: background .15s, box-shadow .15s; }
.wsp-tr:hover {
  background: linear-gradient(90deg, #eff6ff, #f0fdf4) !important;
  box-shadow: inset 4px 0 0 #3b82f6;
}
.wsp-td--commodity { min-width: 110px; }
.wsp-td--modal { background: rgba(59,130,246,.04); }
.wsp-td--num { text-align: right !important; font-family: var(--ws-font-display, 'Poppins', system-ui) !important; font-size: .88rem !important; }

/* Fade-up entry animation */
@keyframes wsFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Import/export policy cards (orange-accented variant) */
.ie-policy-card::before {
  background: linear-gradient(90deg, #1d4ed8 0%, #7c3aed 50%, #06b6d4 100%) !important;
}
.ie-policy-card {
  border-color: #dbeafe !important;
  box-shadow: 0 8px 28px rgba(29,78,216,.08), 0 2px 8px rgba(0,0,0,.05) !important;
}
.ie-policy-card:hover {
  box-shadow: 0 18px 50px rgba(29,78,216,.15) !important;
}

/* =============================================
   MOBILE & TABLET RESPONSIVE FIXES
   Target: phones ≤768px, reduce page scale
   ============================================= */

/* ── Global mobile base ── */
@media (max-width: 768px) {
  html { font-size: 15px; }

  .ws-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* ── Hero section ── */
  .ws-hero {
    padding: 60px 0 40px !important;
    min-height: auto !important;
  }
  .ws-hero__title {
    font-size: clamp(1.7rem, 7vw, 2.4rem) !important;
    line-height: 1.2 !important;
  }
  .ws-hero__subtitle {
    font-size: .88rem !important;
    line-height: 1.6 !important;
  }
  .ws-hero__logo img {
    max-width: 240px !important;
    width: 80vw !important;
  }
  .ws-hero__stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .ws-hero__cta {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .ws-hero__cta .ws-btn {
    width: 100% !important;
    text-align: center !important;
  }
  .ws-hero__floaters { display: none !important; }

  /* ── Wsp hero (inner pages) ── */
  .wsp-hero { padding: 48px 0 32px !important; }
  .wsp-hero__title {
    font-size: clamp(1.6rem, 6vw, 2rem) !important;
    line-height: 1.25 !important;
  }
  .wsp-hero__inner {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .wsp-hero__cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .wsp-stat-card {
    padding: 14px !important;
  }

  /* ── Tables ── */
  .wsp-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .wsp-table {
    min-width: 580px !important;
    font-size: .78rem !important;
  }
  .wsp-th, .wsp-td {
    padding: 8px 8px !important;
  }

  /* ── Layout grids ── */
  .wsp-layout {
    flex-direction: column !important;
  }
  .wsp-layout__sidebar {
    width: 100% !important;
    order: 2 !important;
  }
  .wsp-info-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Filter cards ── */
  .wsp-filter-card__row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .wsp-filter-card__group { width: 100% !important; }
  .wsp-filter-card__actions {
    flex-direction: row !important;
    gap: 8px !important;
  }

  /* ── Tabs ── */
  .wsp-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
  }

  /* ── Chip rows ── */
  .wsp-chip-row {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Header ── */
  .ws-topbar { display: none !important; }
  .ws-header__nav { display: none !important; }

  /* ── Import-export SEO grid ── */
  .ws-container > div[style*="grid-template-columns:2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Scheme tabs scroll ── */
  #wsSchemeTabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
  }

  /* ── Section paddings ── */
  .ws-section { padding-top: 32px !important; padding-bottom: 32px !important; }
  .wsp-info-section { padding: 32px 0 !important; }

  /* ── Cards grid ── */
  .ws-card-grid,
  div[style*="grid-template-columns:repeat(auto-fill,minmax(300px"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns:repeat(auto-fit,minmax(200px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Pagination ── */
  .wsp-pagination { flex-wrap: wrap !important; gap: 4px !important; }

  /* ── Back to top ── */
  #wsBackTop { bottom: 16px !important; right: 16px !important; }
}

/* ── Very small phones ≤380px ── */
@media (max-width: 380px) {
  html { font-size: 14px; }
  .ws-hero__stats { grid-template-columns: 1fr 1fr !important; }
  .wsp-hero__cards { grid-template-columns: 1fr 1fr !important; }
  .wsp-stat-card { padding: 10px !important; }
  .wsp-stat-card__value { font-size: 1.1rem !important; }
}