.wrapper {
    animation: fadeIn 0.4s ease-in;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: #0f0f0f;
    background-image: url('/image.png');
    background-size: cover;
    background-position: center;
    color: #eee;
}

.wrapper {
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

h2 {
    color: #39ff14;
    text-shadow: 0 0 5px #39ff14, 0 0 10px #39ff14;
    font-weight: bold;
    font-size: 20px;
}

.table-container {
    margin: 15px auto;
    overflow-x: auto;
    width: fit-content;
    min-width: 100%;
    max-width: 400px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

th, td {
    border: 1px solid #00ff00;
    text-align: left;
    padding: 6px 8px;
}

td:first-child, th:first-child {
    padding-left: 4px;
    padding-right: 4px;
    white-space: nowrap;
}

th {
    background-color: #111;
    color: #00ff00;
    font-weight: bold;
}

tr:nth-child(even) {
    background-color: #0a0a0a;
}

tr:hover {
    background-color: #1a1a1a;
    cursor: default;
}

td a {
    color: #00ff00 !important;
    text-decoration: none;
    white-space: nowrap;
}

td a:hover {
    text-decoration: underline;
}

.active {
    color: #39ff14;
    font-weight: bold;
}

.dead {
    color: red;
    font-weight: bold;
}

.ad-row {
    position: relative;
    background: linear-gradient(45deg, #1a0033, #330066, #1a0033, #660099) !important;
    background-size: 400% 400%;
    animation: gradientShift 3s ease infinite;
    overflow: hidden;
}

.ad-row td {
    border: 2px solid transparent !important;
    background: linear-gradient(45deg, #ff0080, #00ff80, #8000ff, #ff8000, #ff0080) border-box;
    background-size: 300% 300%;
    animation: borderRun 2s linear infinite;
    color: #fff !important;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    position: relative;
    max-width: 0;
    overflow: hidden;
    word-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
}

tr.gold-row {
    animation: goldPulse 2.5s ease-in-out infinite, borderGold 2.5s ease-in-out infinite;
}

.ad-row td:first-child {
    width: 50%;
    padding-left: 4px;
    padding-right: 4px;
}

.ad-row td:last-child {
    width: 50%;
    padding-left: 4px;
    padding-right: 4px;
}

.ad-row:hover {
    background: linear-gradient(45deg, #2a0044, #440088, #2a0044, #7700bb) !important;
    transform: scale(1.01);
    transition: transform 0.3s ease;
}

.ad-text {
    font-size: 13px !important;
    letter-spacing: 0.5px;
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShimmer 2.5s ease-in-out infinite;
    display: inline-block;
}

.premium-badge {
    display: inline-block;
    background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
    color: #000;
    padding: 1px 4px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: bold;
    margin-left: 3px;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    animation: pulse 2s infinite;
}

.contact-link {
    color: #ff69b4 !important;
    text-decoration: underline;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 105, 180, 0.8);
    font-size: 12px;
}

.contact-link:hover {
    color: #ff1493 !important;
    text-shadow: 0 0 10px rgba(255, 20, 147, 1);
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes borderRun {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

@keyframes textShimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.footer {
    margin-top: 30px;
    font-size: 14px;
    color: #fff;
}

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

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes glowText {
    from {
        text-shadow: 0 0 5px #39ff14, 0 0 10px #39ff14;
    }
    to {
        text-shadow: 0 0 15px #39ff14, 0 0 30px #39ff14;
    }
}

.country-btn {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #00ff00;
    border-radius: 8px;
    color: #00ff00;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.country-btn:hover {
    background: rgba(0, 255, 0, 0.1);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
    transform: translateY(-2px);
}

.country-btn.selected {
    background: #39ff14;
    color: #000;
    border-color: #39ff14;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.6);
}

#countryGrid::-webkit-scrollbar {
    width: 8px;
}

#countryGrid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

#countryGrid::-webkit-scrollbar-thumb {
    background: #00ff00;
    border-radius: 4px;
}

#countryGrid::-webkit-scrollbar-thumb:hover {
    background: #39ff14;
}

/* ===== Main navigation cards (2x2 grid) ===== */
.nav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 460px;
    margin: 32px auto;
}

.nav-card {
    --accent: #39ff14;
    --accent-rgb: 57, 255, 20;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    min-height: 92px;
    padding: 20px 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
        linear-gradient(160deg, rgba(20, 20, 22, 0.95), rgba(8, 8, 10, 0.98));
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    border-radius: 16px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.55),
        0 0 14px rgba(var(--accent-rgb), 0.35),
        inset 0 0 12px rgba(var(--accent-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: navCardGlow 2.8s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
}

@keyframes navCardGlow {
    0%, 100% {
        box-shadow:
            0 6px 20px rgba(0, 0, 0, 0.55),
            0 0 12px rgba(var(--accent-rgb), 0.3),
            inset 0 0 10px rgba(var(--accent-rgb), 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    50% {
        box-shadow:
            0 6px 20px rgba(0, 0, 0, 0.55),
            0 0 22px rgba(var(--accent-rgb), 0.55),
            inset 0 0 16px rgba(var(--accent-rgb), 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
}

/* Accent bar on the left edge */
.nav-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.7);
    opacity: 0.85;
}

.nav-card__title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--accent);
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.45);
}

.nav-card__sub {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: #8a8a90;
    text-transform: uppercase;
}

.nav-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--accent-rgb), 0.9);
    animation-play-state: paused;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.6),
        0 0 22px rgba(var(--accent-rgb), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-card:active {
    transform: translateY(-1px);
}

.nav-card--green {
    --accent: #39ff14;
    --accent-rgb: 57, 255, 20;
}

.nav-card--gold {
    --accent: #ffd24a;
    --accent-rgb: 255, 210, 74;
}

.nav-card--purple {
    --accent: #c08bff;
    --accent-rgb: 192, 139, 255;
}

.nav-card--amber {
    --accent: #ffb347;
    --accent-rgb: 255, 179, 71;
}

/* ===== Latgale Verified card (matches .nav-card style) ===== */
.latgale-heading {
    margin: 0 0 1px;
}

.latgale-card {
    --accent-rgb: 0, 255, 224;
    display: none; /* shown via JS only for Latvia */
    position: relative;
    max-width: 460px;
    margin: 0 auto 0;
    text-align: center;
}

.latgale-card__img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.65));
    animation: latgaleGlow 2.6s ease-in-out infinite;
}

@keyframes latgaleGlow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.45)); }
    50%      { filter: drop-shadow(0 0 20px rgba(var(--accent-rgb), 0.85)); }
}

/* ===== Jobs Section page ===== */
.jobs-head {
    text-align: center;
    margin-bottom: 24px;
}

.jobs-title {
    color: #39ff14;
    text-shadow: 0 0 14px rgba(57, 255, 20, 0.5);
    font-size: 26px;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.jobs-subtitle {
    color: #8a8a90;
    font-size: 13px;
    line-height: 1.5;
    max-width: 440px;
    margin: 0 auto;
}

.jobs-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 460px;
    margin: 0 auto 22px;
}

/* Segmented toggle tabs (scoped to beat global .job-btn rules) */
#jobsPage .jobs-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 12px;
    background: linear-gradient(160deg, rgba(20, 20, 22, 0.95), rgba(8, 8, 10, 0.98));
    border: 1px solid rgba(57, 255, 20, 0.25);
    border-radius: 12px;
    color: #cfcfd4;
    text-shadow: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#jobsPage .jobs-tab__label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

#jobsPage .jobs-tab__hint {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #777;
    text-transform: uppercase;
}

#jobsPage .jobs-tab:hover {
    background: linear-gradient(160deg, rgba(28, 34, 26, 0.95), rgba(10, 14, 10, 0.98));
    border-color: rgba(57, 255, 20, 0.6);
    color: #fff;
    transform: none;
}

#jobsPage .jobs-tab.active {
    background: linear-gradient(160deg, rgba(57, 255, 20, 0.16), rgba(57, 255, 20, 0.05));
    border-color: #39ff14;
    color: #fff;
    box-shadow: 0 0 18px rgba(57, 255, 20, 0.35), inset 0 0 12px rgba(57, 255, 20, 0.12);
    transform: none;
}

#jobsPage .jobs-tab.active .jobs-tab__label {
    color: #39ff14;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}

#jobsPage .jobs-tab.active .jobs-tab__hint {
    color: #7cfc00;
}

/* Listings panel */
#jobsPage .jobs-panel {
    max-width: 600px;
    margin: 0 auto;
    background: linear-gradient(160deg, rgba(18, 18, 20, 0.9), rgba(8, 8, 10, 0.95));
    border: 1px solid rgba(57, 255, 20, 0.2);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.4s ease-in;
}

#jobsPage .jobs-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(57, 255, 20, 0.15);
}

#jobsPage .jobs-panel__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #39ff14;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
}

#jobsPage .jobs-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #9fe88a;
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid rgba(57, 255, 20, 0.3);
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
}

/* Listings table */
/* Listings rendered as cards (mobile-friendly) */
#jobsPage .jobs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#jobsPage .job-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(57, 255, 20, 0.18);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

#jobsPage .job-card:hover {
    background: rgba(57, 255, 20, 0.05);
    border-color: rgba(57, 255, 20, 0.4);
}

#jobsPage .job-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

#jobsPage .job-card__contact {
    color: #39ff14;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    text-shadow: 0 0 6px rgba(57, 255, 20, 0.35);
    word-break: break-all;
}

#jobsPage .job-card__contact:hover {
    text-decoration: underline;
}

#jobsPage .job-card__price {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: #ffd24a;
    background: rgba(255, 210, 74, 0.1);
    border: 1px solid rgba(255, 210, 74, 0.35);
    border-radius: 8px;
    padding: 4px 10px;
    white-space: nowrap;
}

#jobsPage .job-card__desc {
    margin: 0;
    color: #d6d6da;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

#jobsPage .jobs-empty {
    text-align: center;
    color: #777;
    font-size: 14px;
    padding: 34px 16px;
}

/* Submit CTA */
#jobsPage .jobs-cta {
    text-align: center;
    margin-top: 18px;
}

#jobsPage .jobs-cta__hint {
    color: #888;
    font-size: 12.5px;
    margin-bottom: 12px;
}

#jobsPage .jobs-submit {
    width: 100%;
    max-width: 320px;
    padding: 14px 24px;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.job-btn {
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #39ff14;
    border-radius: 10px;
    color: #39ff14;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    text-shadow: 0 0 5px #39ff14;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}

.job-btn:hover {
    background: #39ff14;
    color: #000;
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.6);
}

.job-btn.active {
    background: #39ff14;
    color: #000;
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.8);
}

.submit-job-btn {
    padding: 12px 30px;
    background: linear-gradient(45deg, #39ff14, #00ff00);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
}

.blue-pulse-row {
    position: relative;
    animation: bluePulseGlow 2s ease-in-out infinite;
}

.blue-pulse-row td {
    border: 2px solid #0099ff !important;
    box-shadow: 0 0 10px rgba(0, 153, 255, 0.5);
}

@keyframes bluePulseGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 153, 255, 0.3), 0 0 10px rgba(0, 153, 255, 0.3), inset 0 0 10px rgba(0, 153, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 15px rgba(0, 153, 255, 0.8), 0 0 25px rgba(0, 153, 255, 0.6), inset 0 0 15px rgba(0, 153, 255, 0.2);
    }
}

.blue-pulse-row:hover {
    background-color: rgba(0, 153, 255, 0.1) !important;
}

.white-pulse-row {
    position: relative;
    z-index: 5;
    animation: whitePulseGlow 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.white-pulse-row td {
    border: 2px solid #ffffff !important;
}

@keyframes whitePulseGlow {
    0%, 100% {
        box-shadow: 0 -5px 10px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 0 -10px 20px rgba(255, 255, 255, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.2);
    }
}

.white-pulse-row:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.submit-job-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.8);
}

#jobTableContainer {
    animation: fadeIn 0.5s ease-in;
}

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

/* ============================================
   CATALOG PAGE STYLES
   ============================================ */

#catalogPage {
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(20, 20, 20, 0.95));
    animation: fadeIn 0.5s ease-in;
}

#catalogGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 10px;
    max-width: 900px;
    margin: 0 auto;
    animation: catalogSlideIn 0.6s ease-out;
}

@keyframes catalogSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Catalog Item Card */
.catalog-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.4s ease;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.4),
                0 0 40px rgba(57, 255, 20, 0.2),
                inset 0 0 20px rgba(57, 255, 20, 0.1);
    border: 2px solid #39ff14;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.catalog-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(57, 255, 20, 0.1),
        transparent
    );
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.catalog-item:hover::before {
    opacity: 1;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.catalog-item:hover {
    transform: scale(1.08) translateY(-8px);
    box-shadow: 0 0 35px rgba(57, 255, 20, 0.7),
                0 0 60px rgba(57, 255, 20, 0.4),
                0 10px 40px rgba(0, 0, 0, 0.5),
                inset 0 0 30px rgba(57, 255, 20, 0.2);
    border-color: #00ff00;
    z-index: 10;
}

.catalog-item:active {
    transform: scale(1.05) translateY(-5px);
}

/* GIF Container */
.catalog-gif-container {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, 
                rgba(57, 255, 20, 0.15), 
                rgba(0, 255, 0, 0.08),
                rgba(57, 255, 20, 0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.catalog-gif-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
                transparent 0%, 
                rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
}

.catalog-gif-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.catalog-item:hover .catalog-gif-container img {
    transform: scale(1.1);
}

/* Fallback icon when GIF fails to load */
.catalog-gif-fallback {
    font-size: 64px;
    color: #39ff14;
    text-shadow: 0 0 20px #39ff14, 0 0 40px #39ff14;
    animation: pulse 2s infinite, rotate3d 4s ease-in-out infinite;
}

@keyframes rotate3d {
    0%, 100% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
}

/* Catalog Item Title */
.catalog-item-title {
    padding: 18px 15px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    text-align: center;
    border-top: 2px solid rgba(57, 255, 20, 0.3);
    transition: all 0.3s ease;
}

.catalog-item:hover .catalog-item-title {
    background: rgba(0, 0, 0, 0.95);
    border-top-color: #39ff14;
}

.catalog-item-title h3 {
    color: #39ff14;
    text-shadow: 0 0 10px #39ff14, 0 0 20px rgba(57, 255, 20, 0.5);
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.catalog-item:hover .catalog-item-title h3 {
    text-shadow: 0 0 15px #39ff14, 
                 0 0 30px #39ff14, 
                 0 0 45px rgba(57, 255, 20, 0.8);
    transform: scale(1.05);
    letter-spacing: 1px;
}

/* Catalog Page Title */
#catalogPage h2 {
    color: #ffd700;
    text-align: center;
    text-shadow: 0 0 15px #ffd700, 0 0 30px rgba(255, 215, 0, 0.6);
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 35px;
    animation: glowPulse 2s ease-in-out infinite;
    letter-spacing: 2px;
    text-transform: uppercase;
}

@keyframes glowPulse {
    0%, 100% {
        text-shadow: 0 0 15px #ffd700, 0 0 30px rgba(255, 215, 0, 0.6);
    }
    50% {
        text-shadow: 0 0 25px #ffd700, 0 0 50px rgba(255, 215, 0, 0.9), 0 0 70px rgba(255, 215, 0, 0.5);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #catalogGrid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 10px 5px;
    }
    
    #catalogPage {
        padding: 15px 10px;
    }
    
    #catalogPage h2 {
        font-size: 26px;
        margin-bottom: 25px;
    }
    
    .catalog-gif-container {
        height: 200px;
    }
    
    .catalog-item {
        max-width: 100%;
    }
    
    .catalog-item:hover {
        transform: scale(1.05) translateY(-5px);
    }
}

@media (max-width: 480px) {
    .catalog-gif-container {
        height: 180px;
    }
    
    .catalog-item-title h3 {
        font-size: 16px;
    }
    
    #catalogPage h2 {
        font-size: 22px;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    #catalogGrid {
        max-width: 750px;
        gap: 18px;
    }
}

/* Large screens */
@media (min-width: 1400px) {
    #catalogGrid {
        max-width: 1100px;
        gap: 25px;
    }
    
    .catalog-gif-container {
        height: 250px;
    }
}

/* Smooth scrolling for catalog */
#catalogPage {
    overflow-y: auto;
    scroll-behavior: smooth;
}

#catalogPage::-webkit-scrollbar {
    width: 10px;
}

#catalogPage::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

#catalogPage::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #39ff14, #00ff00);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
}

#catalogPage::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00ff00, #39ff14);
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.8);
}

/* Link styling inside catalog */
.catalog-item a {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

.catalog-item a:focus {
    outline: 3px solid #39ff14;
    outline-offset: 3px;
}

/* Loading animation for catalog */
@keyframes catalogItemLoad {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


.catalog-item {
    animation: catalogItemLoad 0.5s ease-out forwards;
}

.catalog-item:nth-child(1) { animation-delay: 0.1s; }
.catalog-item:nth-child(2) { animation-delay: 0.15s; }
.catalog-item:nth-child(3) { animation-delay: 0.2s; }
.catalog-item:nth-child(4) { animation-delay: 0.25s; }
.catalog-item:nth-child(5) { animation-delay: 0.3s; }
.catalog-item:nth-child(6) { animation-delay: 0.35s; }
.catalog-item:nth-child(7) { animation-delay: 0.4s; }
.catalog-item:nth-child(8) { animation-delay: 0.45s; }
.catalog-item:nth-child(9) { animation-delay: 0.5s; }
.catalog-item:nth-child(10) { animation-delay: 0.55s; }

/* VIP Detail Page */
#vipDetailPage {
    min-height: 100vh;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(20, 20, 20, 0.95));
    animation: fadeIn 0.5s ease-in;
}

#vipDetailPage::-webkit-scrollbar {
    width: 10px;
}

#vipDetailPage::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

#vipDetailPage::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ffd700, #ff8c00);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

#reviewsContainer {
    max-width: 800px;
    margin: 0 auto;
}

/* VIP Dashboard */
#vipDashboard {
    min-height: 100vh;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(20, 20, 20, 0.95));
    animation: fadeIn 0.5s ease-in;
}

#vipDashboard::-webkit-scrollbar {
    width: 10px;
}

#vipDashboard::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

#vipDashboard::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ffd700, #ff8c00);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* File Input Styling */
input[type="file"] {
    cursor: pointer;
    transition: all 0.3s ease;
}

input[type="file"]:hover {
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
}

input[type="file"]:focus {
    outline: 2px solid #39ff14;
    outline-offset: 2px;
}

/* Review Images */
#reviewsContainer img,
#vipReviewsContainer img {
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

#reviewsContainer img:hover,
#vipReviewsContainer img:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 25px rgba(57, 255, 20, 0.4);
}

/* VIP Buttons Container (I AM VIP / BECOME VIP) */
.vip-buttons-container {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    padding: 0 10px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap; /* для мобильных */
}

.vip-buttons-container button {
    flex: 1;
    min-width: 150px; /* минимальная ширина */
    padding: 15px 20px;
    font-size: 16px;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

/* Золотая кнопка */
.vip-buttons-container button:first-child {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: 2px solid #ffd700;
    color: #000;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

/* Зеленая кнопка */
.vip-buttons-container button:last-child {
    background: linear-gradient(135deg, #39ff14, #00ff00);
    border: 2px solid #39ff14;
    color: #000;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
}

@media (max-width: 480px) {
    .vip-buttons-container {
        flex-direction: column;
    }
    
    .vip-buttons-container button {
        width: 100%;
    }
}

/* Select dropdown styling */
select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    padding-right: 40px;
}

select:focus {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    outline: none;
}

/* Password input styling */
input[type="password"],
input[type="text"] {
    transition: all 0.3s ease;
}

input[type="password"]:focus,
input[type="text"]:focus {
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

/* Modal animations */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(10px);
    }
}

@keyframes modalSlideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Apply animations to modals */
div[style*="position: fixed"][style*="z-index: 3000"] {
    animation: modalFadeIn 0.3s ease-out;
}

div[style*="position: fixed"][style*="z-index: 3000"] > div {
    animation: modalSlideUp 0.4s ease-out;
}

/* Button hover effects - enhance existing buttons */
button {
    position: relative;
    overflow: hidden;
}

button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

button:active::after {
    width: 300px;
    height: 300px;
}

/* Delete button specific styling */
button[onclick*="deleteReview"] {
    transition: all 0.3s ease;
}

button[onclick*="deleteReview"]:hover {
    background: rgba(255, 0, 0, 0.3) !important;
    transform: scale(1.05);
}

button[onclick*="deleteReview"]:active {
    transform: scale(0.95);
}

/* Review container animations */
#vipReviewsContainer > div {
    animation: catalogItemLoad 0.5s ease-out forwards;
}

#vipReviewsContainer > div:nth-child(1) { animation-delay: 0.1s; }
#vipReviewsContainer > div:nth-child(2) { animation-delay: 0.15s; }
#vipReviewsContainer > div:nth-child(3) { animation-delay: 0.2s; }
#vipReviewsContainer > div:nth-child(4) { animation-delay: 0.25s; }
#vipReviewsContainer > div:nth-child(5) { animation-delay: 0.3s; }

/* Success message animation */
@keyframes successPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

div[style*="font-size: 60px"] {
    animation: successPulse 1s infinite;
}

/* Responsive adjustments for VIP pages */
@media (max-width: 768px) {
    .vip-buttons-container {
        flex-direction: column;
        padding: 0 20px;
    }
    
    #vipDetailPage,
    #vipDashboard {
        padding: 15px 10px;
    }
    
    #reviewsContainer,
    #vipReviewsContainer {
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    div[style*="max-width: 400px"],
    div[style*="max-width: 450px"] {
        max-width: 95% !important;
    }
    
    select,
    input[type="password"],
    input[type="file"] {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* Smooth transitions for all interactive elements */
a, button, input, select, textarea {
    transition: all 0.3s ease;
}

/* Focus visible for accessibility */
*:focus-visible {
    outline: 2px solid #39ff14;
    outline-offset: 2px;
}

/* Loading state for images */
img[src*="base64"] {
    background: linear-gradient(
        90deg,
        rgba(57, 255, 20, 0.1) 0%,
        rgba(57, 255, 20, 0.2) 50%,
        rgba(57, 255, 20, 0.1) 100%
    );
    background-size: 200% 100%;
    animation: shimmerLoading 1.5s infinite;
}

@keyframes shimmerLoading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Gold VIP theme accent */
.vip-gold-accent {
    border-color: #ffd700 !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4) !important;
}

.vip-gold-accent:hover {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6) !important;
}

/* Green theme accent (for regular elements) */
.vip-green-accent {
    border-color: #39ff14 !important;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.4) !important;
}

.vip-green-accent:hover {
    box-shadow: 0 0 30px rgba(57, 255, 20, 0.6) !important;
}

.vip-buttons-container button:hover {
    transform: scale(1.05);
}

.vip-buttons-container button:first-child:hover {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
}

.vip-buttons-container button:last-child:hover {
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.8);
}

/* ── Animated blue-purple border for crypto banner ── */
@keyframes cryptoBorderRotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.crypto-border-card {
    position: relative;
    border-radius: 14px;
    padding: 3px;
    overflow: hidden;
    display: block;
}

.crypto-border-card::before {
    content: '';
    position: absolute;
    inset: -60%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        #7b2fff 80deg,
        #3b82f6 160deg,
        #00c3ff 220deg,
        #9d4edd 280deg,
        transparent 340deg,
        transparent 360deg
    );
    animation: cryptoBorderRotate 3s linear infinite;
    z-index: 0;
}

.crypto-border-card > .crypto-border-inner {
    position: relative;
    z-index: 2;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    background: #0a0a0a;
}

/* Teal-green variant of the rotating crypto border */
.crypto-border-card.crypto-border-card--teal::before {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        #00ffc3 80deg,
        #00e676 160deg,
        #2dd4bf 220deg,
        #1de9b6 280deg,
        transparent 340deg,
        transparent 360deg
    );
}

/* ── end crypto border ── */

/* ── Acid-yellow ALPHALAND SHOP joiners row ── */
/* Static glowing border + a shimmer gradient that sweeps INSIDE the
   fill (same effect as the "Marketplaces & Services" button). */
@keyframes alphaShimmer {
    0%   { background-position: -150% 0; }
    100% { background-position: 250% 0; }
}

/* This table uses separated borders so position:relative rows render
   correctly (collapsed borders + relative <tr> is a Chrome layout bug).
   The 1px grid is rebuilt manually to match the collapsed look. */
table.alpha-table {
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid #00ff00;
    border-left: 1px solid #00ff00;
}

table.alpha-table th,
table.alpha-table td {
    border: none;
    border-right: 1px solid #00ff00;
    border-bottom: 1px solid #00ff00;
}

/* The row is the positioning context for the overlay.
   NOTE: pseudo-elements with content on a <tr> become anonymous table
   cells and shift the columns — so the overlay is a real <span> inside a
   cell, absolutely positioned to cover the whole row. */
tr.alpha-border-row {
    position: relative;
}

/* row cells: transparent so the shimmer shows behind.
   Cells stay non-positioned so the overlay's containing block is the
   <tr> (covering the full row width), not a single cell. */
table.alpha-table tr.alpha-border-row td {
    border-color: transparent;
    background: transparent;
}

/* cell contents lifted above the shimmer overlay */
.alpha-fg {
    position: relative;
    z-index: 2;
}

/* restore the two green column dividers inside the row, above the shimmer.
   (the overlay lives in the last cell, so these two can be raised) */
table.alpha-table tr.alpha-border-row td:first-child,
table.alpha-table tr.alpha-border-row td:nth-child(2) {
    position: relative;
    z-index: 2;
    border-right-color: #00ff00;
}

/* glowing acid-yellow border + shimmer gradient sweeping across the fill.
   Square corners + negative top/left inset so the ring sits exactly on
   the table grid and covers the green header-bottom & table-left lines. */
.alpha-ring {
    position: absolute;
    inset: -1px 0 0 -1px;
    z-index: 1;
    pointer-events: none;
    border: 2px solid #e6ff00;
    background-color: rgba(60, 60, 0, 0.25);
    background-image: linear-gradient(
        100deg,
        rgba(230, 255, 0, 0.06) 0%,
        rgba(230, 255, 0, 0.06) 35%,
        rgba(250, 255, 180, 0.22) 47%,
        rgba(230, 255, 0, 0.42) 50%,
        rgba(250, 255, 180, 0.22) 53%,
        rgba(230, 255, 0, 0.06) 65%,
        rgba(230, 255, 0, 0.06) 100%
    );
    background-size: 250% 100%;
    background-position: -150% 0;
    animation: alphaShimmer 5s linear infinite;
    box-shadow: 0 0 10px rgba(230, 255, 0, 0.35);
}

/* Red "A" badge after the ALPHALAND SHOP name */
.alpha-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: linear-gradient(180deg, #f4524d, #d32f2f);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 0 4px rgba(211, 47, 47, 0.6);
    flex-shrink: 0;
}

/* ── end alpha border ── */

.vip-buttons-container button:active {
    transform: scale(0.98);
}

/* ===================== TRADE page (amber theme) ===================== */
#tradePage .jobs-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 12px;
    background: linear-gradient(160deg, rgba(20, 20, 22, 0.95), rgba(8, 8, 10, 0.98));
    border: 1px solid rgba(255, 174, 0, 0.25);
    border-radius: 12px;
    color: #cfcfd4;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#tradePage .jobs-tab__label { font-size: 15px; font-weight: 700; letter-spacing: 0.4px; }
#tradePage .jobs-tab__hint {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #777;
    text-transform: uppercase;
}

#tradePage .jobs-tab:hover {
    background: linear-gradient(160deg, rgba(40, 32, 12, 0.95), rgba(16, 12, 4, 0.98));
    border-color: rgba(255, 174, 0, 0.6);
    color: #fff;
}

#tradePage .jobs-tab.active {
    background: linear-gradient(160deg, rgba(255, 174, 0, 0.16), rgba(255, 174, 0, 0.05));
    border-color: #ffae00;
    color: #fff;
    box-shadow: 0 0 18px rgba(255, 174, 0, 0.35), inset 0 0 12px rgba(255, 174, 0, 0.12);
}

#tradePage .jobs-tab.active .jobs-tab__label { color: #ffc24d; text-shadow: 0 0 8px rgba(255, 174, 0, 0.5); }
#tradePage .jobs-tab.active .jobs-tab__hint { color: #ffd27a; }

#tradePage .jobs-panel {
    max-width: 600px;
    margin: 0 auto;
    background: linear-gradient(160deg, rgba(18, 18, 20, 0.9), rgba(8, 8, 10, 0.95));
    border: 1px solid rgba(255, 174, 0, 0.2);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.4s ease-in;
}

#tradePage .trade-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

#tradePage .trade-filter-select {
    flex: 1;
    min-width: 140px;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 174, 0, 0.35);
    border-radius: 8px;
    color: #ffe0a3;
    font-size: 13px;
}

/* Step 1: category picker — big touch-friendly cards */
#tradePage .trade-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

#tradePage .trade-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    background: linear-gradient(160deg, rgba(255, 174, 0, 0.1), rgba(20, 20, 22, 0.95));
    border: 1px solid rgba(255, 174, 0, 0.35);
    border-radius: 16px;
    color: #ffe0a3;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#tradePage .trade-category-card:hover,
#tradePage .trade-category-card:active {
    transform: translateY(-2px);
    border-color: #ffae00;
    box-shadow: 0 0 20px rgba(255, 174, 0, 0.35);
}

#tradePage .trade-category-card__icon {
    font-size: 34px;
    line-height: 1;
}

#tradePage .trade-category-card__label {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 174, 0, 0.3);
}

#tradePage .trade-category-card__count {
    font-size: 12px;
    font-weight: 700;
    color: #000;
    background: #ffc24d;
    border-radius: 999px;
    padding: 2px 10px;
    min-width: 18px;
    text-align: center;
}

/* Step 2: back-to-categories button in the listing view header */
#tradePage .trade-back-btn {
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 174, 0, 0.35);
    border-radius: 999px;
    color: #ffc24d;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

#tradePage .trade-back-btn:hover {
    background: rgba(255, 174, 0, 0.1);
    border-color: #ffae00;
    color: #fff;
}

#tradePage .jobs-panel__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 174, 0, 0.15);
}

#tradePage .jobs-panel__title {
    order: 3;
    flex: 1 0 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #ffc24d;
    text-shadow: 0 0 8px rgba(255, 174, 0, 0.4);
}

#tradePage .jobs-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #ffe0a3;
    background: rgba(255, 174, 0, 0.1);
    border: 1px solid rgba(255, 174, 0, 0.3);
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
}

#tradePage .jobs-list { display: flex; flex-direction: column; gap: 10px; }

#tradePage .job-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 174, 0, 0.18);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

#tradePage .job-card:hover {
    background: rgba(255, 174, 0, 0.05);
    border-color: rgba(255, 174, 0, 0.4);
}

#tradePage .job-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

#tradePage .job-card__contact {
    color: #ffc24d;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    text-shadow: 0 0 6px rgba(255, 174, 0, 0.35);
    word-break: break-all;
}

/* Structured-listing title (service/brand names) — one line, truncated with ellipsis
   instead of wrapping so the price never gets pushed down the card. Full text is
   available in the detail popup opened on card click. */
#tradePage .trade-card__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    color: #ffc24d;
    font-size: 15px;
}

#tradePage .trade-card--clickable {
    cursor: pointer;
}

#tradePage .job-card__contact:hover { text-decoration: underline; }

#tradePage .job-card__price {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: #ffd24a;
    background: rgba(255, 210, 74, 0.1);
    border: 1px solid rgba(255, 210, 74, 0.35);
    border-radius: 8px;
    padding: 4px 10px;
    white-space: nowrap;
}

#tradePage .trade-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

#tradePage .trade-card__tag {
    font-size: 11.5px;
    font-weight: 600;
    color: #cdd6c2;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 2px 9px;
}

#tradePage .trade-card__tag--cat {
    color: #ffd27a;
    border-color: rgba(255, 174, 0, 0.35);
    background: rgba(255, 174, 0, 0.08);
}

#tradePage .job-card__desc {
    margin: 0;
    color: #d6d6da;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

#tradePage .trade-card__photos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

#tradePage .trade-card__photo {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid rgba(255, 174, 0, 0.4);
    border-radius: 8px;
    transition: transform 0.2s ease;
}

#tradePage .trade-card__photo:hover { transform: scale(1.05); }

#tradePage .jobs-empty { text-align: center; color: #777; font-size: 14px; padding: 34px 16px; }

#tradePage .jobs-cta { text-align: center; margin-top: 18px; }
#tradePage .jobs-cta__hint { color: #888; font-size: 12.5px; margin-bottom: 12px; }

#tradePage .jobs-submit {
    width: 100%;
    max-width: 320px;
    padding: 14px 24px;
    font-size: 15px;
    letter-spacing: 0.5px;
    background: linear-gradient(45deg, #ffae00, #ffc24d);
    color: #000;
    box-shadow: 0 0 15px rgba(255, 174, 0, 0.5);
}
/* ===================== /TRADE page ===================== */