/**
 * TSR Job Manager Pro – Frontend CSS v10.0
 * Advanced Homepage + All Component Styles
 * FIX: Added !important for dark theme compatibility.
 * FIX: Better contrast ratios on all elements.
 */

/* ─── Reset & Base ─── */
.tsr-wrap * {
        box-sizing: border-box;
}

.tsr-homepage {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 16px;
}

/* ═══════════════════════════════════════════════════
 * HERO SECTION
 * ═══════════════════════════════════════════════════ */
.tsr-hero {
        position: relative;
        background: linear-gradient(135deg, #1a237e 0%, #283593 40%, #3949ab 100%);
        color: #fff !important;
        padding: 50px 20px 40px;
        margin: -16px -16px 0;
        overflow: hidden;
        text-align: center;
}
.tsr-hero-bg {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background:
                radial-gradient(circle at 20% 80%, rgba(255,255,255,0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 70%);
        pointer-events: none;
}
.tsr-hero-content {
        position: relative;
        z-index: 1;
        max-width: 900px;
        margin: 0 auto;
}
.tsr-hero-title {
        font-size: 32px !important;
        font-weight: 800 !important;
        margin: 0 0 8px !important;
        color: #fff !important;
        letter-spacing: -0.5px;
        text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.tsr-hero-tagline {
        font-size: 17px !important;
        opacity: 0.9;
        margin: 0 0 8px !important;
        color: #fff !important;
}
.tsr-hero-count {
        font-size: 14px !important;
        opacity: 0.8;
        margin: 0 0 24px !important;
        color: #fff !important;
}
.tsr-hero-count::before {
        content: '';
        display: inline-block;
        width: 8px; height: 8px;
        background: #4caf50;
        border-radius: 50%;
        margin-right: 6px;
        animation: tsr-pulse 1.5s infinite;
}

@keyframes tsr-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(1.3); }
}

/* Hero Search Form */
.tsr-hero-search {
        margin-bottom: 20px;
}
.tsr-search-form {
        background: #fff !important;
        border-radius: 16px;
        padding: 12px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.tsr-search-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
}
.tsr-search-field {
        flex: 1 1 200px;
        display: flex;
        align-items: center;
        background: #f5f5f5 !important;
        border-radius: 10px;
        padding: 0 12px;
        min-height: 44px;
}
.tsr-search-field .dashicons {
        color: #1a237e !important;
        font-size: 18px;
        width: 18px;
        height: 18px;
        margin-right: 8px;
        flex-shrink: 0;
}
.tsr-search-field input[type="text"] {
        border: none !important;
        background: transparent !important;
        font-size: 15px !important;
        color: #333 !important;
        width: 100%;
        padding: 10px 0;
        outline: none !important;
        box-shadow: none !important;
}
.tsr-search-select select {
        border: none !important;
        background: transparent !important;
        font-size: 14px !important;
        color: #333 !important;
        width: 100%;
        padding: 10px 0;
        cursor: pointer;
        outline: none !important;
        box-shadow: none !important;
        -webkit-appearance: none;
}
.tsr-search-btn {
        flex: 0 0 auto;
        background: linear-gradient(135deg, #1a237e, #3949ab) !important;
        color: #fff !important;
        border: none;
        border-radius: 10px;
        padding: 12px 24px;
        font-size: 15px !important;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        transition: transform 0.2s, box-shadow 0.2s;
}
.tsr-search-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(26,35,126,0.4);
}
.tsr-search-btn .dashicons {
        color: #fff !important;
}

/* Hero Quick Links */
.tsr-hero-quick {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
}
.tsr-hero-link {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: rgba(255,255,255,0.9) !important;
        text-decoration: none !important;
        font-size: 14px !important;
        padding: 6px 14px;
        border-radius: 20px;
        background: rgba(255,255,255,0.12) !important;
        transition: background 0.2s;
}
.tsr-hero-link:hover {
        background: rgba(255,255,255,0.25) !important;
        color: #fff !important;
}
.tsr-hero-link .dashicons {
        font-size: 16px;
        width: 16px;
        height: 16px;
}

/* ═══════════════════════════════════════════════════
 * STATS BAR
 * ═══════════════════════════════════════════════════ */
.tsr-stats-bar {
        background: #fff !important;
        border-bottom: 2px solid #e8eaf6 !important;
        padding: 0;
        margin: 0 -16px 0;
}
.tsr-stats-inner {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
}
.tsr-stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 18px 10px;
        border-right: 1px solid #f0f0f0 !important;
        text-align: center;
}
.tsr-stat-item:last-child {
        border-right: none;
}
.tsr-stat-icon {
        color: #1a237e !important;
        margin-bottom: 4px;
}
.tsr-stat-icon .dashicons {
        font-size: 22px;
        width: 22px;
        height: 22px;
}
.tsr-stat-number {
        font-size: 24px !important;
        font-weight: 800 !important;
        color: #1a237e !important;
        line-height: 1.2;
}
.tsr-stat-label {
        font-size: 12px !important;
        color: #666 !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 2px;
}

/* ═══════════════════════════════════════════════════
 * SECTION STYLES (shared)
 * ═══════════════════════════════════════════════════ */
.tsr-section {
        margin: 36px 0;
}
.tsr-section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid #e8eaf6 !important;
}
.tsr-section-title-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
}
.tsr-section-icon .dashicons {
        font-size: 24px;
        width: 24px;
        height: 24px;
        color: #1a237e !important;
}
.tsr-urgent-icon .dashicons {
        color: #e53935 !important;
}
.tsr-section-title {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #1a237e !important;
        margin: 0 !important;
}
.tsr-section-badge {
        background: linear-gradient(135deg, #1a237e, #3949ab) !important;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
}
.tsr-badge-urgent {
        background: linear-gradient(135deg, #c62828, #e53935) !important;
}
.tsr-badge-hot {
        background: linear-gradient(135deg, #e65100, #ff9800) !important;
}
.tsr-view-all {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: #1a237e !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 600;
        transition: color 0.2s;
}
.tsr-view-all:hover {
        color: #3949ab !important;
}
.tsr-view-all .dashicons {
        font-size: 16px;
        width: 16px;
        height: 16px;
}

/* ═══════════════════════════════════════════════════
 * CATEGORY GRID
 * ═══════════════════════════════════════════════════ */
.tsr-category-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
}
.tsr-cat-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 18px 10px;
        background: #fff !important;
        border: 2px solid #e8eaf6 !important;
        border-radius: 12px;
        text-decoration: none !important;
        transition: all 0.25s;
        text-align: center;
}
.tsr-cat-card:hover {
        border-color: #1a237e !important;
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(26,35,126,0.12);
}
.tsr-cat-icon .dashicons {
        font-size: 28px;
        width: 28px;
        height: 28px;
        color: #1a237e !important;
        margin-bottom: 6px;
}
.tsr-cat-name {
        font-size: 14px !important;
        font-weight: 600;
        color: #333 !important;
        margin-bottom: 2px;
}
.tsr-cat-count {
        font-size: 12px !important;
        color: #888 !important;
}

/* ═══════════════════════════════════════════════════
 * QUALIFICATION TABS
 * ═══════════════════════════════════════════════════ */
.tsr-qual-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 18px;
}
.tsr-qual-tab {
        background: #f5f5f5 !important;
        border: 2px solid transparent !important;
        border-radius: 20px;
        padding: 8px 16px;
        font-size: 14px !important;
        font-weight: 500;
        cursor: pointer;
        color: #444 !important;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;
}
.tsr-qual-tab:hover {
        background: #e8eaf6 !important;
        color: #1a237e !important;
}
.tsr-qual-tab-active {
        background: #1a237e !important;
        color: #fff !important;
        border-color: #1a237e !important;
}
.tsr-qual-tab-active .tsr-qual-count {
        background: rgba(255,255,255,0.25) !important;
        color: #fff !important;
}
.tsr-qual-count {
        background: #e0e0e0 !important;
        color: #666 !important;
        font-size: 11px !important;
        padding: 1px 7px;
        border-radius: 10px;
        font-weight: 600;
}
.tsr-qual-panel {
        display: none;
}
.tsr-qual-panel-active {
        display: block;
}
.tsr-qual-viewall {
        text-align: center;
        margin-top: 16px;
        padding-top: 12px;
}

/* ═══════════════════════════════════════════════════
 * STATE GRID
 * ═══════════════════════════════════════════════════ */
.tsr-state-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 10px;
}
.tsr-state-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: #fff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 10px;
        text-decoration: none !important;
        transition: all 0.2s;
}
.tsr-state-card:hover {
        border-color: #1a237e !important;
        background: #f8f9ff !important;
        transform: translateY(-2px);
        box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}
.tsr-state-name {
        font-size: 14px !important;
        font-weight: 600;
        color: #333 !important;
}
.tsr-state-count {
        font-size: 12px !important;
        color: #1a237e !important;
        font-weight: 600;
        background: #e8eaf6 !important;
        padding: 2px 8px;
        border-radius: 10px;
}

/* ═══════════════════════════════════════════════════
 * CTA SECTION
 * ═══════════════════════════════════════════════════ */
.tsr-cta-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 16px;
}
.tsr-cta-card {
        background: #fff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 14px;
        padding: 24px;
        text-align: center;
        color: #333 !important;
        transition: transform 0.2s, box-shadow 0.2s;
}
.tsr-cta-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.tsr-cta-icon .dashicons {
        font-size: 36px;
        width: 36px;
        height: 36px;
        margin-bottom: 10px;
}
.tsr-cta-wallet .tsr-cta-icon .dashicons { color: #2e7d32 !important; }
.tsr-cta-referral .tsr-cta-icon .dashicons { color: #1a237e !important; }
.tsr-cta-alerts .tsr-cta-icon .dashicons { color: #e65100 !important; }
.tsr-cta-saved .tsr-cta-icon .dashicons { color: #c62828 !important; }

.tsr-cta-card h3 {
        font-size: 18px !important;
        font-weight: 700;
        color: #1a237e !important;
        margin: 0 0 8px !important;
}
.tsr-cta-card p {
        font-size: 14px !important;
        color: #555 !important;
        line-height: 1.6;
        margin: 0 0 16px !important;
}

/* Push Banner */
.tsr-push-banner {
        display: flex;
        align-items: center;
        gap: 16px;
        background: linear-gradient(135deg, #e8eaf6, #c5cae9) !important;
        border-radius: 12px;
        padding: 20px 24px;
        margin-top: 24px;
        color: #1a237e !important;
}
.tsr-push-banner .dashicons {
        font-size: 32px;
        width: 32px;
        height: 32px;
        color: #1a237e !important;
        flex-shrink: 0;
}
.tsr-push-banner h4 {
        margin: 0 0 4px !important;
        font-size: 16px !important;
        color: #1a237e !important;
}
.tsr-push-banner p {
        margin: 0 !important;
        font-size: 13px !important;
        color: #333 !important;
}

/* ═══════════════════════════════════════════════════
 * NO POSTS / LOADING
 * ═══════════════════════════════════════════════════ */
.tsr-no-posts {
        padding: 30px 20px;
        text-align: center;
        color: #444 !important;
        background: #f9f9f9 !important;
        border: 1px solid #ddd !important;
        border-radius: 8px;
        font-size: 15px;
        margin: 15px 0;
}

.tsr-loading {
        text-align: center;
        padding: 20px;
        color: #333 !important;
        font-size: 14px;
}

/* ═══════════════════════════════════════════════════
 * BUTTONS
 * ═══════════════════════════════════════════════════ */
.tsr-btn {
        display: inline-block;
        padding: 8px 16px;
        border-radius: 6px;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 500;
        cursor: pointer;
        border: none;
        transition: background 0.2s, transform 0.1s;
        margin: 2px;
}
.tsr-btn:hover {
        opacity: 0.9;
        transform: translateY(-1px);
}
.tsr-btn-primary {
        background: #1a237e !important;
        color: #fff !important;
}
.tsr-btn-success {
        background: #2e7d32 !important;
        color: #fff !important;
}
.tsr-btn-danger {
        background: #c62828 !important;
        color: #fff !important;
}
.tsr-btn-outline {
        background: transparent !important;
        border: 2px solid #1a237e !important;
        color: #1a237e !important;
}
.tsr-btn-save {
        background: #fff !important;
        border: 1px solid #ccc !important;
        color: #333 !important;
}

/* ═══════════════════════════════════════════════════
 * JOB CARD
 * ═══════════════════════════════════════════════════ */
.tsr-job-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 16px;
        margin: 15px 0;
}

.tsr-job-card {
        background: #fff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 10px;
        padding: 18px;
        transition: box-shadow 0.2s, transform 0.2s;
        display: flex;
        flex-direction: column;
        gap: 10px;
        color: #333 !important;
        position: relative;
        overflow: hidden;
}
.tsr-job-card:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        transform: translateY(-2px);
}

.tsr-job-card.tsr-card-expired {
        opacity: 0.65;
        border-left: 4px solid #e53935 !important;
}

.tsr-job-card-header h3 {
        margin: 0 0 4px;
        font-size: 17px;
        line-height: 1.3;
        color: #1a237e !important;
}
.tsr-job-card-header h3 a {
        color: #1a237e !important;
        text-decoration: none !important;
}
.tsr-job-card-header h3 a:hover {
        color: #303f9f !important;
        text-decoration: underline !important;
}

.tsr-job-card-header .tsr-company {
        color: #555 !important;
        font-size: 14px;
        font-weight: 500;
}

.tsr-job-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        font-size: 13px;
        color: #444 !important;
}
.tsr-job-card-meta .dashicons {
        font-size: 16px;
        width: 16px;
        height: 16px;
        vertical-align: text-bottom;
        color: #666 !important;
}

.tsr-job-card-dates {
        font-size: 13px;
        color: #333 !important;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
}
.tsr-job-card-dates strong {
        color: #1a237e !important;
}
.tsr-date-last strong {
        color: #c62828 !important;
}

.tsr-job-card-tax {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 12px;
}
.tsr-job-card-tax .tsr-tax-item {
        background: #e8eaf6 !important;
        color: #283593 !important;
        padding: 2px 8px;
        border-radius: 12px;
}
.tsr-job-card-tax .tsr-tax-item a {
        color: #283593 !important;
        text-decoration: none !important;
}

.tsr-job-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: auto;
        padding-top: 8px;
        border-top: 1px solid #f0f0f0 !important;
}

/* ═══════════════════════════════════════════════════
 * WALLET
 * ═══════════════════════════════════════════════════ */
.tsr-wallet-balance {
        background: linear-gradient(135deg, #1a237e, #283593) !important;
        color: #fff !important;
        border-radius: 12px;
        padding: 24px;
        text-align: center;
        margin-bottom: 20px;
}
.tsr-wallet-balance .tsr-balance-amount {
        font-size: 36px;
        font-weight: 700;
        margin: 8px 0;
        color: #fff !important;
}
.tsr-wallet-balance .tsr-balance-label {
        font-size: 14px;
        opacity: 0.9;
        color: #fff !important;
}

.tsr-wallet-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 20px;
}
.tsr-wallet-stat {
        background: #f5f5f5 !important;
        padding: 16px;
        border-radius: 8px;
        text-align: center;
        color: #333 !important;
}
.tsr-wallet-stat .tsr-stat-val {
        font-size: 22px;
        font-weight: 600;
        color: #1a237e !important;
}
.tsr-wallet-stat .tsr-stat-lbl {
        font-size: 13px;
        color: #666 !important;
        margin-top: 4px;
}

/* ═══════════════════════════════════════════════════
 * TRANSACTIONS TABLE
 * ═══════════════════════════════════════════════════ */
.tsr-transactions-table {
        width: 100%;
        border-collapse: collapse;
        margin: 15px 0;
        font-size: 14px;
        background: #fff !important;
}
.tsr-transactions-table th,
.tsr-transactions-table td {
        padding: 10px 12px;
        text-align: left;
        border-bottom: 1px solid #e0e0e0 !important;
        color: #444 !important;
}
.tsr-transactions-table th {
        background: #f5f5f5 !important;
        color: #333 !important;
        font-weight: 600;
}
.tsr-credit {
        color: #2e7d32 !important;
        font-weight: 600;
}
.tsr-debit {
        color: #c62828 !important;
        font-weight: 600;
}

.tsr-status {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
}
.tsr-status-pending { background: #fff3e0 !important; color: #e65100 !important; }
.tsr-status-approved { background: #e8f5e9 !important; color: #2e7d32 !important; }
.tsr-status-rejected { background: #ffebee !important; color: #c62828 !important; }

/* ═══════════════════════════════════════════════════
 * LOGIN / REGISTER FORMS
 * ═══════════════════════════════════════════════════ */
.tsr-auth-form {
        max-width: 420px;
        margin: 30px auto;
        padding: 30px;
        background: #fff !important;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        color: #333 !important;
}
.tsr-auth-form h2 {
        text-align: center;
        color: #1a237e !important;
        margin: 0 0 20px;
}

.tsr-form-group {
        margin-bottom: 16px;
}
.tsr-form-group label {
        display: block;
        margin-bottom: 6px;
        color: #333 !important;
        font-weight: 500;
        font-size: 14px;
}
.tsr-form-group input[type="text"],
.tsr-form-group input[type="email"],
.tsr-form-group input[type="password"],
.tsr-form-group input[type="number"],
.tsr-form-group input[type="tel"],
.tsr-form-group input[type="url"],
.tsr-form-group select {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #ccc !important;
        border-radius: 6px;
        font-size: 15px;
        background: #fff !important;
        color: #333 !important;
}
.tsr-form-group input:focus,
.tsr-form-group select:focus {
        border-color: #1a237e !important;
        outline: none;
        box-shadow: 0 0 0 2px rgba(26,35,126,0.15);
}

.tsr-auth-links {
        text-align: center;
        margin-top: 16px;
        font-size: 14px;
        color: #555 !important;
}
.tsr-auth-links a {
        color: #1a237e !important;
}

.tsr-otp-row {
        display: flex;
        gap: 8px;
}
.tsr-otp-row input {
        flex: 1;
}
.tsr-otp-row button {
        white-space: nowrap;
}

/* Google Login */
.tsr-google-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 10px;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 6px;
        font-size: 15px;
        cursor: pointer;
        color: #333 !important;
        transition: background 0.2s;
}
.tsr-google-btn:hover {
        background: #f5f5f5 !important;
}

.tsr-divider {
        display: flex;
        align-items: center;
        margin: 16px 0;
        color: #999 !important;
        font-size: 13px;
}
.tsr-divider::before,
.tsr-divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #ddd !important;
}
.tsr-divider span {
        padding: 0 10px;
}

/* ═══════════════════════════════════════════════════
 * REFERRAL
 * ═══════════════════════════════════════════════════ */
.tsr-referral-box {
        background: #fff !important;
        border: 2px dashed #1a237e !important;
        border-radius: 12px;
        padding: 24px;
        text-align: center;
        margin: 20px 0;
}
.tsr-referral-box .tsr-referral-url {
        background: #f5f5f5 !important;
        padding: 12px;
        border-radius: 6px;
        word-break: break-all;
        color: #1a237e !important;
        font-weight: 600;
        font-size: 14px;
        margin: 12px 0;
}

/* ═══════════════════════════════════════════════════
 * NOTIFICATIONS
 * ═══════════════════════════════════════════════════ */
.tsr-notif-list {
        list-style: none;
        padding: 0;
        margin: 0;
}
.tsr-notif-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
        border-bottom: 1px solid #eee !important;
        background: #fff !important;
        color: #333 !important;
        transition: background 0.2s;
}
.tsr-notif-item:hover {
        background: #f8f9ff !important;
}
.tsr-notif-item.tsr-unread {
        background: #e8eaf6 !important;
        border-left: 3px solid #1a237e !important;
}
.tsr-notif-icon {
        font-size: 20px;
        flex-shrink: 0;
}
.tsr-notif-content {
        flex: 1;
}
.tsr-notif-title {
        font-weight: 600;
        color: #222 !important;
        margin-bottom: 2px;
}
.tsr-notif-msg {
        color: #555 !important;
        font-size: 13px;
}
.tsr-notif-time {
        font-size: 12px;
        color: #888 !important;
        margin-top: 4px;
}

/* ═══════════════════════════════════════════════════
 * DASHBOARD
 * ═══════════════════════════════════════════════════ */
.tsr-dashboard-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 14px;
        margin: 20px 0;
}
.tsr-dash-card {
        background: #fff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 10px;
        padding: 18px;
        text-align: center;
        color: #333 !important;
}
.tsr-dash-card .tsr-dash-num {
        font-size: 28px;
        font-weight: 700;
        color: #1a237e !important;
}
.tsr-dash-card .tsr-dash-label {
        font-size: 13px;
        color: #666 !important;
        margin-top: 4px;
}

/* ═══════════════════════════════════════════════════
 * SAVED JOBS
 * ═══════════════════════════════════════════════════ */
.tsr-saved-jobs-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 14px;
}

/* ═══════════════════════════════════════════════════
 * JOB ALERTS
 * ═══════════════════════════════════════════════════ */
.tsr-alert-form {
        background: #fff !important;
        padding: 20px;
        border-radius: 10px;
        border: 1px solid #e0e0e0 !important;
        margin-bottom: 20px;
}
.tsr-alert-list {
        list-style: none;
        padding: 0;
}
.tsr-alert-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        border-bottom: 1px solid #eee !important;
        color: #333 !important;
}

/* ═══════════════════════════════════════════════════
 * SOCIAL SHARE BUTTONS
 * ═══════════════════════════════════════════════════ */
.tsr-share-buttons {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
}
.tsr-share-btn {
        padding: 6px 12px;
        border-radius: 4px;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 13px;
        font-weight: 500;
}
.tsr-share-whatsapp { background: #25d366 !important; }
.tsr-share-telegram { background: #0088cc !important; }
.tsr-share-facebook { background: #1877f2 !important; }
.tsr-share-twitter { background: #1da1f2 !important; }
.tsr-share-linkedin { background: #0077b5 !important; }

/* ═══════════════════════════════════════════════════
 * WITHDRAWAL FORM
 * ═══════════════════════════════════════════════════ */
.tsr-withdrawal-form {
        max-width: 480px;
        background: #fff !important;
        padding: 24px;
        border-radius: 10px;
        border: 1px solid #e0e0e0 !important;
        margin: 20px 0;
}

/* ═══════════════════════════════════════════════════
 * RESPONSIVE
 * ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
        .tsr-hero {
                padding: 35px 16px 30px;
        }
        .tsr-hero-title {
                font-size: 24px !important;
        }
        .tsr-hero-tagline {
                font-size: 15px !important;
        }
        .tsr-search-row {
                flex-direction: column;
        }
        .tsr-search-field {
                flex: 1 1 100%;
        }
        .tsr-search-btn {
                width: 100%;
                justify-content: center;
        }
        .tsr-stats-inner {
                grid-template-columns: repeat(3, 1fr);
        }
        .tsr-stat-item {
                padding: 12px 8px;
        }
        .tsr-stat-number {
                font-size: 20px !important;
        }
        .tsr-cta-grid {
                grid-template-columns: 1fr;
        }
        .tsr-push-banner {
                flex-direction: column;
                text-align: center;
        }
        .tsr-category-grid {
                grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        }
        .tsr-state-grid {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (max-width: 600px) {
        .tsr-job-list {
                grid-template-columns: 1fr;
        }
        .tsr-wallet-stats {
                grid-template-columns: 1fr;
        }
        .tsr-dashboard-grid {
                grid-template-columns: 1fr 1fr;
        }
        .tsr-auth-form {
                margin: 15px 10px;
                padding: 20px;
        }
        .tsr-qual-tabs {
                gap: 4px;
        }
        .tsr-qual-tab {
                padding: 6px 12px;
                font-size: 13px !important;
        }
        .tsr-stats-inner {
                grid-template-columns: repeat(2, 1fr);
        }
        .tsr-section-title {
                font-size: 18px !important;
        }
}