/* ==========================================================================
   Solana & Aptos Gig Board — v5.0.0 Front-end styles
   Clean, modern, web3. Text-first gig cards. Solana gradient accents.
   ========================================================================== */

:root {
    --sac-sol-green:  #14F195;
    --sac-sol-purple: #9945FF;
    --sac-apt-blue:   #4B9FE6;
    --sac-apt-cyan:   #60D7FF;
    --sac-bg:         #0d0818;
    --sac-bg-2:       #1a1228;
    --sac-bg-3:       #221834;
    --sac-card:       #181027;
    --sac-card-hover: #221834;
    --sac-text:       #e8e8e8;
    --sac-text-mute:  #9a8fb8;
    --sac-text-dim:   #c0b8d0;
    --sac-border:     #2e2440;
    --sac-border-lit: #3d3052;
    --sac-radius:     10px;
    --sac-radius-sm:  6px;
    --sac-grad:       linear-gradient(135deg, #14F195 0%, #9945FF 100%);
    --sac-grad-soft:  linear-gradient(135deg, rgba(20,241,149,0.12) 0%, rgba(153,69,255,0.12) 100%);
    --sac-shadow:     0 4px 20px rgba(0, 0, 0, 0.3);
    --sac-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ----- Solana gradient text ----- */
.sac-solana-text {
    color: var(--sac-sol-green);
    font-weight: 700;
    letter-spacing: 0.2px;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .sac-solana-text {
        background: -webkit-linear-gradient(135deg, var(--sac-sol-green), var(--sac-sol-purple));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background: linear-gradient(135deg, var(--sac-sol-green), var(--sac-sol-purple));
        background-clip: text;
        color: transparent;
    }
}

/* ----- Shared elements ----- */
.sac-btn {
    background: var(--sac-grad); background-size: 200% 200%;
    animation: sacGradShift 4s ease infinite;
    color: #07030E; font-weight: 700; border: none;
    padding: 10px 18px; border-radius: var(--sac-radius-sm);
    cursor: pointer; font-size: 13px; font-family: var(--sac-font);
    transition: transform 0.18s, box-shadow 0.18s; display: inline-block;
    text-decoration: none;
}
.sac-btn:hover { transform: translateY(-1px); box-shadow: 0 0 20px rgba(20,241,149,0.35); color: #07030E; }
.sac-btn:active { transform: translateY(0); }
.sac-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.sac-btn-sm { padding: 6px 12px; font-size: 11px; }
.sac-btn-danger { background: linear-gradient(135deg, #dc3232, #992020); color: #fff; background-size: 100% 100%; animation: none; }
@keyframes sacGradShift {
    0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}

.sac-input {
    width: 100%; padding: 9px 12px; border-radius: var(--sac-radius-sm);
    border: 1px solid var(--sac-border); background: rgba(0,0,0,0.35);
    color: var(--sac-text); font-size: 13px; font-family: var(--sac-font);
    box-sizing: border-box; outline: none;
    transition: border 0.2s, box-shadow 0.2s;
}
.sac-input:focus {
    border-color: var(--sac-sol-green);
    box-shadow: 0 0 0 2px rgba(20,241,149,0.18);
}
.sac-input::placeholder { color: #666; }

textarea.sac-input {
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
}

.sac-label {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--sac-text-mute); text-transform: uppercase;
    letter-spacing: 0.5px; margin: 10px 0 4px;
}
.sac-label small { text-transform: none; font-weight: 400; color: var(--sac-text-mute); }

.sac-p { font-size: 13px; line-height: 1.5; color: var(--sac-text-dim); margin: 0; }
.sac-p-small { font-size: 11px; color: var(--sac-text-mute); }
.sac-link {
    color: var(--sac-sol-green); cursor: pointer; text-decoration: none;
    font-size: 12px; background: none; border: none; font-family: var(--sac-font);
}
.sac-link:hover { color: var(--sac-sol-purple); text-decoration: underline; }
.sac-error {
    color: #ff6b6b; background: rgba(255,0,0,0.10);
    padding: 8px 12px; border-radius: var(--sac-radius-sm);
    margin-top: 8px; font-size: 12px; font-weight: 600;
    border: 1px solid rgba(255,0,0,0.2); display: none;
}
.sac-error:not(:empty) { display: block; }
.sac-spinner {
    border: 2px solid rgba(255,255,255,0.1);
    width: 28px; height: 28px; border-radius: 50%;
    border-left-color: var(--sac-sol-green);
    animation: sacSpin 0.9s linear infinite; margin: 8px auto;
}
@keyframes sacSpin { to { transform: rotate(360deg); } }
.sac-countdown {
    font-size: clamp(22px, 5vw, 32px); font-weight: 700;
    color: var(--sac-sol-green);
    text-shadow: 0 0 14px rgba(20,241,149,0.4); margin: 4px 0;
}

/* Currency picker */
.sac-currency-picker { display: flex; gap: 6px; margin-bottom: 4px; }
.sac-currency-option { flex: 1; cursor: pointer; position: relative; }
.sac-currency-option input { position: absolute; opacity: 0; pointer-events: none; }
.sac-currency-pill {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 8px 10px; border-radius: var(--sac-radius-sm);
    border: 1px solid var(--sac-border); background: rgba(0,0,0,0.35);
    color: var(--sac-text-dim); font-weight: 600; font-size: 12px;
    letter-spacing: 0.4px; transition: all 0.2s;
}
.sac-currency-option.is-selected .sac-currency-pill {
    background: var(--sac-grad-soft); color: #fff;
    border-color: var(--sac-sol-green);
    box-shadow: 0 0 0 2px rgba(20,241,149,0.25);
}
.sac-currency-logo, .sac-wallet-logo, .sac-badge-logo {
    width: 14px; height: 14px; border-radius: 50%; object-fit: cover;
}

.sac-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px; font-size: 10px;
    font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
}
.sac-badge-sol {
    background: rgba(20, 241, 149, 0.12); color: var(--sac-sol-green);
    border: 1px solid rgba(20, 241, 149, 0.25);
}
.sac-badge-apt {
    background: rgba(75, 159, 230, 0.12); color: var(--sac-apt-cyan);
    border: 1px solid rgba(75, 159, 230, 0.25);
}

/* ==========================================================================
   GIG BOARD
   ========================================================================== */

.sac-gig-board {
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--sac-font);
    padding: 0 4px;
}

/* Hero header — centered, balanced vertical rhythm */
.sac-gb-hero {
    text-align: center;
    padding: 14px 20px;
    margin-bottom: 14px;
}
.sac-gb-hero-title {
    margin: 0 0 14px !important;
    padding: 0 !important;
    font-size: clamp(22px, 4vw, 30px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px;
    line-height: 1.2;
    display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap;
    text-transform: capitalize;
}
.sac-gb-hero-brand { color: #fff; }
/* Kill the theme's h1::after gradient divider that bleeds into the gig board */
.sac-gig-board h1::after,
.sac-gig-board h2::after,
.sac-gig-board h3::after,
.sac-gig-board .post-title-divider,
.sac-gig-board .sac-gb-hero-divider { display: none !important; }
.sac-gb-hero-icon {
    width: 32px !important; height: 32px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    border: none !important;
    background: none !important;
    background-image: none !important;
    display: inline-block;
    vertical-align: middle;
}
.sac-gb-hero-intro {
    max-width: 580px;
    margin: 0 auto 14px;
    font-size: clamp(12px, 1.4vw, 14px);
    line-height: 1.5;
    color: var(--sac-text-dim);
}
.sac-gb-hero-actions {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.sac-gb-hero-btn {
    background: var(--sac-grad); background-size: 200% 200%;
    animation: sacGradShift 4s ease infinite;
    color: #07030E; font-weight: 700; border: none;
    padding: 8px 20px; border-radius: 999px;
    cursor: pointer; font-size: 12px; font-family: var(--sac-font);
    transition: transform 0.18s, box-shadow 0.18s;
    text-decoration: none;
}
.sac-gb-hero-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(20, 241, 149, 0.3);
}

/* ----- User status bar ----- */
.sac-gb-user-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; margin: 0 0 16px;
    background: var(--sac-bg-2); border: 1px solid var(--sac-border);
    border-radius: var(--sac-radius-sm); font-size: 13px;
    position: relative;
}
/* Gradient left accent when user is signed in */
.sac-gb-user-bar:has(.sac-gb-user-ready),
.sac-gb-user-bar:has(.sac-gb-user-needs-wallet) {
    border-left: 3px solid var(--sac-sol-green);
    padding-left: 13px;
}
/* Fallback for browsers without :has() — use class-based approach */
.sac-gb-user-bar.is-signed-in {
    border-left: 3px solid var(--sac-sol-green);
    padding-left: 13px;
}
.sac-gb-user-info {
    display: flex; align-items: center; gap: 8px;
}
.sac-gb-user-email {
    color: var(--sac-text); font-weight: 600;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sac-gb-user-badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
}
.sac-gb-user-ready {
    background: rgba(20, 241, 149, 0.12); color: var(--sac-sol-green);
    border: 1px solid rgba(20, 241, 149, 0.25);
}
.sac-gb-user-needs-wallet {
    background: rgba(240, 184, 64, 0.12); color: #f0b840;
    border: 1px solid rgba(240, 184, 64, 0.25);
}
.sac-gb-user-guest {
    background: rgba(154, 143, 184, 0.12); color: var(--sac-text-mute);
    border: 1px solid rgba(154, 143, 184, 0.25);
}
.sac-gb-user-actions {
    display: flex; align-items: center; gap: 10px;
}
.sac-gb-user-account-link {
    color: var(--sac-text-mute); text-decoration: none; font-size: 12px;
    transition: color 0.2s;
}
.sac-gb-user-account-link:hover {
    color: var(--sac-sol-green);
}
.sac-gb-user-logout {
    background: none; border: none; color: var(--sac-text-mute);
    font-size: 12px; cursor: pointer; padding: 2px 6px;
    border-radius: 4px; transition: color 0.2s, background 0.2s;
}
.sac-gb-user-logout:hover {
    color: #dc3232; background: rgba(220, 50, 50, 0.08);
}

@media (max-width: 600px) {
    .sac-gb-user-bar {
        flex-direction: column; gap: 8px; align-items: flex-start;
    }
    .sac-gb-user-actions { flex-wrap: wrap; }
}

/* My active gigs section */
.sac-gb-my-gigs { margin-bottom: 12px; }
.sac-gb-section-title {
    font-size: 12px; color: var(--sac-text-mute); text-transform: uppercase;
    letter-spacing: 0.6px; margin: 0 0 10px; font-weight: 600;
}

/* Grid — 3 columns on desktop, 2 on tablet, 1 on mobile */
.sac-gb-grid, .sac-gb-my-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 900px) {
    .sac-gb-grid, .sac-gb-my-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .sac-gb-grid, .sac-gb-my-grid { grid-template-columns: 1fr; }
}

/* Gig card — premium blog-card aesthetic */
.sac-gb-card {
    background: var(--sac-card);
    border: 1px solid var(--sac-border);
    border-radius: 12px;
    padding: 18px;
    display: flex; flex-direction: column; gap: 10px;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
    position: relative;
    overflow: visible;
}
.sac-gb-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--sac-grad);
    opacity: 0; transition: opacity 0.2s;
}
.sac-gb-card:hover {
    transform: translateY(-3px);
    border-color: var(--sac-border-lit);
    background: var(--sac-card-hover);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.sac-gb-card:hover::before { opacity: 1; }
.sac-gb-card.is-featured {
    border-color: rgba(255, 200, 0, 0.35);
    background: linear-gradient(180deg, rgba(255, 200, 0, 0.04) 0%, var(--sac-card) 100%);
}
.sac-gb-card.is-featured::before { background: linear-gradient(90deg, #f0b840, #ff8c00); opacity: 1; }
.sac-gb-card.is-mine {
    border-color: rgba(20, 241, 149, 0.3);
}
.sac-gb-card.is-mine::before { opacity: 1; }

/* Status-dependent card styles */
.sac-gb-status-open      { border-left: 3px solid var(--sac-sol-green); }
.sac-gb-status-claimed   { border-left: 3px solid #f0b840; }
.sac-gb-status-completed { border-left: 3px solid var(--sac-apt-cyan); }
.sac-gb-status-approved  { border-left: 3px solid var(--sac-sol-purple); }
.sac-gb-status-paid      { border-left: 3px solid var(--sac-sol-green); opacity: 0.7; }
.sac-gb-status-rejected  { border-left: 3px solid #dc3232; opacity: 0.6; }
.sac-gb-status-expired   { opacity: 0.45; }
.sac-gb-status-waiting_payment { opacity: 0.5; }

/* Deep-link flash — when the user lands on the gig board via ?sac_gig_view=N,
   the matching card pulses so they can see which one was linked. */
.sac-gb-card.sac-gb-card-flash {
    animation: sacFlashCard 2.4s ease-out;
}
@keyframes sacFlashCard {
    0%, 100% { box-shadow: 0 0 0 0 rgba(20, 241, 149, 0); }
    20%      { box-shadow: 0 0 0 6px rgba(20, 241, 149, 0.35); border-color: var(--sac-sol-green); }
    60%      { box-shadow: 0 0 0 3px rgba(20, 241, 149, 0.18); }
}

/* Clickable cards — entire card is a link or button */
.sac-gb-card.is-clickable {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
a.sac-gb-card.is-clickable:hover {
    color: inherit;
    text-decoration: none;
}
a.sac-gb-card.is-clickable {
    -webkit-text-fill-color: initial !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
}

.sac-gb-card-top {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.sac-gb-card-type {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 2px 7px; border-radius: 8px;
}
.sac-gb-type-gig { background: rgba(20, 241, 149, 0.12); color: var(--sac-sol-green); }
.sac-gb-type-link { background: rgba(75, 159, 230, 0.12); color: var(--sac-apt-cyan); }
.sac-gb-card-status {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px;
}
.sac-gb-card-date { font-size: 10px; color: var(--sac-text-mute); }

/* Title row — icon + title side by side */
.sac-gb-card-title-row {
    display: flex; align-items: center; gap: 8px;
}
.sac-gb-card-icon {
    width: 20px !important; height: 20px !important;
    border-radius: 0 !important; border: none !important;
    box-shadow: none !important; background: none !important;
    flex-shrink: 0;
}
.sac-gb-card-title {
    margin: 0; font-size: 15px; font-weight: 700; color: #fff !important;
    line-height: 1.3; letter-spacing: -0.1px;
    text-transform: capitalize;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sac-gb-card-title a { color: #fff !important; -webkit-text-fill-color: #fff !important; text-decoration: none; background: none !important; }
.sac-gb-card-title a:hover { color: var(--sac-sol-green) !important; -webkit-text-fill-color: var(--sac-sol-green) !important; }

/* Gradient divider under the title */
.sac-gb-card-title-divider {
    width: 40px; height: 2px;
    background: var(--sac-grad);
    border-radius: 2px;
    margin: 6px 0 8px;
    opacity: 0.7;
}

.sac-gb-card-desc {
    font-size: 12px; color: #fff !important; line-height: 1.55;
    flex: 1; opacity: 0.85;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Payout display — gigs only, not shown on links */
.sac-gb-card-payout {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; background: var(--sac-grad-soft);
    border-radius: var(--sac-radius-sm); border: 1px solid rgba(20, 241, 149, 0.2);
}
.sac-gb-payout-logo { width: 18px; height: 18px; border-radius: 50%; }
.sac-gb-payout-amount { font-size: 13px; font-weight: 700; color: var(--sac-sol-green); letter-spacing: 0.3px; }
.sac-gb-payout-usd { font-size: 14px; font-weight: 700; color: #fff; margin-left: auto; }

/* Meta row */
.sac-gb-card-meta {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    font-size: 11px; color: var(--sac-text-mute);
    padding-top: 8px; border-top: 1px solid var(--sac-border);
}
.sac-gb-card-limit { color: var(--sac-text-dim); }
.sac-gb-card-time {
    background: rgba(240, 184, 64, 0.12); color: #f0b840;
    padding: 2px 7px; border-radius: 6px; font-weight: 600;
}
.sac-gig-time {
    background: rgba(240, 184, 64, 0.12); color: #f0b840;
    padding: 2px 7px; border-radius: 6px; font-weight: 600;
    font-size: 11px; display: inline-block;
}
.sac-gb-card-poster { color: var(--sac-text-mute); }
.sac-gb-card-rating { display: inline-flex; align-items: center; gap: 2px; color: #f0b840; margin-left: auto; }
.sac-gb-card-rating small { color: var(--sac-text-mute); font-size: 9px; }

.sac-gb-card-link {
    display: inline-block; color: var(--sac-sol-green);
    text-decoration: none; font-size: 12px; font-weight: 600;
}
.sac-gb-card-link:hover { color: var(--sac-sol-purple); }

.sac-gb-card-proof {
    font-size: 11px; padding: 6px 8px; background: rgba(96, 215, 255, 0.06);
    border-radius: var(--sac-radius-sm); border-left: 2px solid var(--sac-apt-cyan);
    color: var(--sac-text-dim);
}

.sac-gb-card-actions {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-top: 8px; border-top: 1px solid var(--sac-border);
}
.sac-gig-wallet-mismatch {
    font-size: 10px; color: #f0b840; font-style: italic;
}
.sac-gig-payout-notice {
    font-size: 10px; color: var(--sac-text-mute); font-style: italic;
    width: 100%;
}
.sac-gig-pending-icon {
    font-size: 32px; margin-bottom: 8px;
}
.sac-gb-broken-link {
    color: #dc3232; font-size: 11px; font-style: italic;
}

/* Stars */
.sac-stars { display: inline-flex; gap: 1px; }
.sac-star { color: #3d3052; font-size: 13px; line-height: 1; }
.sac-star.sac-star-filled { color: #f0b840; }
.sac-stars-interactive .sac-star { cursor: pointer; transition: color 0.1s; }
.sac-stars-interactive .sac-star:hover { color: #ffd700; }

/* Pagination */
.sac-gb-pagination { margin-top: 24px; text-align: center; }
.sac-gb-pagination .page-numbers {
    display: inline-block; padding: 5px 10px; margin: 0 2px;
    border-radius: 5px; color: var(--sac-text-dim); text-decoration: none;
    font-size: 12px; border: 1px solid var(--sac-border); transition: all 0.18s;
}
.sac-gb-pagination .page-numbers:hover { border-color: var(--sac-sol-green); color: var(--sac-sol-green); }
.sac-gb-pagination .page-numbers.current {
    background: var(--sac-grad); color: #07030E; border-color: transparent; font-weight: 700;
}

/* Empty state */
.sac-gb-empty {
    text-align: center; padding: 48px 20px 40px;
    color: var(--sac-text-mute);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.sac-gb-empty-illustration { position: relative; width: 120px; height: 80px; margin-bottom: 8px; }
.sac-gb-empty-orb {
    position: absolute; width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 24px rgba(20, 241, 149, 0.15);
    animation: sacGbFloat 4s ease-in-out infinite alternate;
}
.sac-gb-empty-orb img { width: 40px; height: 40px; border-radius: 50%; }
.sac-gb-empty-orb-sol { left: 8px; top: 12px; background: rgba(153, 69, 255, 0.12); border: 1px solid rgba(153, 69, 255, 0.3); }
.sac-gb-empty-orb-apt { right: 8px; top: 12px; background: rgba(75, 159, 230, 0.12); border: 1px solid rgba(75, 159, 230, 0.3); animation-delay: 1s; }
@keyframes sacGbFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-6px); } }
.sac-gb-empty-spark {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    color: var(--sac-sol-green); font-size: 20px;
    text-shadow: 0 0 12px rgba(20, 241, 149, 0.6);
    animation: sacGbSparkle 2s ease-in-out infinite;
}
@keyframes sacGbSparkle {
    0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.2); }
}
.sac-gb-empty-title { font-size: 18px; font-weight: 700; color: var(--sac-text); margin: 0; }
.sac-gb-empty-text { font-size: 13px; line-height: 1.6; max-width: 380px; margin: 0; }
.sac-gb-empty-cta { margin-top: 8px; }

/* ==========================================================================
   WIDGETS + MODALS (shared with payment flow)
   ========================================================================== */

.sac-widget {
    width: 100%; max-width: 560px; margin: 20px auto;
    background: linear-gradient(180deg, var(--sac-bg-3), var(--sac-bg-2));
    border-radius: var(--sac-radius); overflow: hidden;
    font-family: var(--sac-font); box-shadow: var(--sac-shadow);
    border: 1px solid var(--sac-border); color: var(--sac-text);
}
.sac-widget-header { padding: 16px 20px 10px; border-bottom: 1px solid var(--sac-border); }
.sac-widget-header .sac-solana-text { font-size: clamp(15px, 3vw, 18px); display: block; margin-bottom: 2px; }
.sac-widget-body { padding: 16px 20px; }
.sac-widget-in-modal { max-width: 100%; margin: 0; background: transparent; border: none; box-shadow: none; border-radius: 0; }
.sac-widget-in-modal .sac-widget-body { padding: 0; }

/* Payment step */
.sac-pay-grid {
    display: grid; grid-template-columns: 1fr auto;
    gap: 14px; align-items: center; text-align: left;
    background: rgba(0,0,0,0.30); padding: 12px 14px;
    border-radius: var(--sac-radius-sm); border: 1px solid var(--sac-border);
}
.sac-pay-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sac-pay-left .sac-solana-text { font-size: 14px; }
.sac-pay-left .sac-p { font-size: 12px; }
.sac-address-box {
    background: rgba(0,0,0,0.6); padding: 6px 10px; border-radius: 5px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    word-break: break-all; margin: 2px 0; border: 1px solid #444;
    font-size: 11px; user-select: all; color: #ddd;
}
.sac-qr { width: 88px; height: 88px; background: #fff; padding: 4px; border-radius: var(--sac-radius-sm); box-sizing: border-box; }
.sac-pay-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.sac-pay-actions .sac-btn { flex: 1; }

/* Gig type + time pickers */
.sac-gig-type-picker, .sac-gig-time-picker {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px;
}
.sac-gig-type-option, .sac-gig-time-option {
    cursor: pointer; padding: 10px 8px; border-radius: var(--sac-radius-sm);
    border: 1px solid var(--sac-border); background: rgba(0,0,0,0.35);
    text-align: center; transition: all 0.2s; position: relative; font-size: 13px;
}
.sac-gig-type-option input, .sac-gig-time-option input { position: absolute; opacity: 0; pointer-events: none; }
.sac-gig-type-option.is-selected, .sac-gig-time-option.is-selected {
    background: var(--sac-grad-soft); border-color: var(--sac-sol-green);
    box-shadow: 0 0 0 2px rgba(20,241,149,0.25);
}

/* ==========================================================================
   MODAL
   ========================================================================== */

body.sac-modal-open { overflow: hidden; padding-right: var(--sac-scrollbar-width, 0px); }

.sac-modal {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 12px; opacity: 0; visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.sac-modal.is-open { opacity: 1; visibility: visible; }
.sac-modal-overlay {
    position: absolute; inset: 0; background: rgba(7, 3, 14, 0.78);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer;
}
.sac-modal-panel {
    position: relative; z-index: 1; width: 100%; max-width: 460px;
    max-height: calc(100vh - 24px); overflow-y: auto;
    background: linear-gradient(180deg, #130924 0%, #0B0415 100%);
    border: 1px solid rgba(153, 69, 255, 0.25); border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 60px rgba(153, 69, 255, 0.15);
    transform: translateY(12px) scale(0.98); transition: transform 0.22s ease;
}
.sac-modal.is-open .sac-modal-panel { transform: translateY(0) scale(1); }
.sac-modal-close {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 30px; height: 30px; border: none;
    background: rgba(255, 255, 255, 0.06); color: #ccc; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, color 0.2s, transform 0.2s; padding: 0;
}
.sac-modal-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; transform: rotate(90deg); }
.sac-modal-header { padding: 16px 20px 10px; border-bottom: 1px solid var(--sac-border); text-align: center; }
.sac-modal-header .sac-solana-text { font-size: clamp(15px, 3vw, 18px); display: block; margin-bottom: 2px; }
.sac-modal-header .sac-p { font-size: 12px; }
.sac-modal-body { padding: 14px 18px 18px; }

@media (max-width: 600px) {
    .sac-modal { padding: 0; align-items: flex-end; }
    .sac-modal-panel { max-width: 100%; max-height: 94vh; border-radius: 14px 14px 0 0; transform: translateY(100%); }
    .sac-modal.is-open .sac-modal-panel { transform: translateY(0); }
    .sac-modal-header { padding: 14px 16px 8px; }
    .sac-modal-body { padding: 12px 16px 16px; }
    .sac-modal-close { top: 8px; right: 8px; width: 28px; height: 28px; }
    .sac-pay-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 10px; padding: 10px 12px; }
    .sac-pay-left { align-items: center; }
    .sac-qr { width: 96px; height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
    .sac-modal, .sac-modal-panel, .sac-modal-close,
    .sac-btn, .sac-gb-hero-btn, .sac-gb-card,
    .sac-gb-empty-orb, .sac-gb-empty-spark, .sac-spinner {
        transition: none !important;
        animation: none !important;
    }
}

.sac-btn:focus-visible,
.sac-gb-hero-btn:focus-visible,
.sac-gb-card.is-clickable:focus-visible,
.sac-modal-close:focus-visible,
.sac-currency-pill:focus-visible,
.sac-gig-type-option:focus-visible {
    outline: 2px solid var(--sac-sol-green);
    outline-offset: 2px;
}

.sac-step[hidden] { display: none !important; }

/* ==========================================================================
   ACCOUNT DASHBOARD — modern card-based with accordions
   ========================================================================== */

.sac-account-wrap {
    max-width: 680px; margin: 20px auto;
    font-family: var(--sac-font);
}

/* Login card */
.sac-acc-login-card {
    background: var(--sac-card);
    border: 1px solid var(--sac-border);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.sac-acc-login-icon { margin-bottom: 8px; }
.sac-acc-login-title {
    margin: 0; font-size: 22px; font-weight: 700; color: #fff;
    text-transform: capitalize;
}
.sac-acc-login-sub {
    margin: 0 0 12px; font-size: 13px; color: var(--sac-text-mute);
}
.sac-acc-login-card .sac-input { margin-bottom: 10px; }

.sac-signin-msg {
    font-size: 12px; font-weight: 600; margin-top: 8px;
    min-height: 1em; transition: color 0.2s;
}

/* Two-step sign-in modal */
.sac-signin-step {
    animation: sacFadeIn 0.25s ease;
}
.sac-signin-hint {
    text-align: center; margin-top: 12px;
    color: var(--sac-text-dim); font-size: 11px;
}
.sac-signin-step2-intro {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.sac-signin-step2-email-badge {
    display: inline-block; padding: 3px 10px;
    background: var(--sac-bg-3); border: 1px solid var(--sac-border-lit);
    border-radius: 999px; font-size: 12px; font-weight: 600;
    color: var(--sac-text); max-width: 200px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sac-signin-step2-label {
    font-size: 12px; color: var(--sac-text-mute);
}
.sac-btn-ghost {
    background: none; border: 1px solid var(--sac-border);
    color: var(--sac-text-mute); font-size: 13px;
    padding: 8px 16px; border-radius: var(--sac-radius-sm);
    cursor: pointer; transition: all 0.2s; margin-top: 8px;
    display: inline-block; width: auto;
}
.sac-btn-ghost:hover {
    border-color: var(--sac-sol-purple);
    color: var(--sac-sol-purple);
}

.sac-account-login,
.sac-account-dashboard {
    animation: sacFadeIn 0.3s ease;
}
@keyframes sacFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Dashboard header */
.sac-acc-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    padding: 16px 0; margin-bottom: 14px;
    border-bottom: 1px solid var(--sac-border);
}
.sac-acc-header-email {
    font-size: 16px; font-weight: 700; color: #fff;
}
.sac-acc-header-sub {
    font-size: 12px; color: var(--sac-text-mute);
}
.sac-acc-header-info {
    display: flex; flex-direction: column; gap: 2px;
}
.sac-acc-logout-btn {
    background: none; border: 1px solid var(--sac-border);
    color: var(--sac-text-mute); padding: 6px 14px;
    border-radius: 999px; font-size: 11px; cursor: pointer;
    font-family: var(--sac-font); transition: all 0.2s;
}
.sac-acc-logout-btn:hover {
    border-color: #dc3232; color: #dc3232;
}

/* Stats — 4 compact cards */
.sac-acc-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px; margin-bottom: 16px;
}
.sac-acc-stat-card {
    background: var(--sac-card); border: 1px solid var(--sac-border);
    border-radius: 10px; padding: 10px 8px;
    text-align: center; position: relative; overflow: hidden;
}
.sac-acc-stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--sac-grad); opacity: 0.5;
}
.sac-acc-stat-label {
    font-size: 9px; color: var(--sac-text-mute);
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px;
}
.sac-acc-stat-value {
    font-size: 18px; font-weight: 700; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 500px) {
    .sac-acc-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Accordion */
.sac-acc-accordion {
    display: flex; flex-direction: column; gap: 8px;
}
.sac-acc-panel {
    background: var(--sac-card);
    border: 1px solid var(--sac-border);
    border-radius: 10px;
    overflow: visible;
}
.sac-acc-panel[open] {
    border-color: var(--sac-border-lit);
}
.sac-acc-panel-summary {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    cursor: pointer; list-style: none;
    font-size: 13px; font-weight: 600; color: #fff;
    transition: background 0.15s;
}
.sac-acc-panel-summary::-webkit-details-marker { display: none; }
.sac-acc-panel-summary:hover { background: rgba(255,255,255,0.03); }
.sac-acc-panel-icon { font-size: 16px; }
.sac-acc-panel-chev {
    margin-left: auto; font-size: 11px; color: var(--sac-text-mute);
    transition: transform 0.2s;
}
.sac-acc-panel[open] .sac-acc-panel-chev { transform: rotate(180deg); }
.sac-acc-panel-body {
    padding: 0 16px 14px;
}

/* Wallet form inside accordion */
.sac-wallets-form { display: flex; flex-direction: column; gap: 6px; }
.sac-wallet-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 500px) {
    .sac-wallet-row { grid-template-columns: 1fr; }
}
.sac-wallet-field { display: flex; flex-direction: column; }
.sac-wallet-field .sac-label {
    display: flex; align-items: center; gap: 5px;
}

.sac-wallet-copy {
    cursor: pointer; background: none; border: none;
    color: var(--sac-text-mute); transition: color 0.2s;
    display: inline-flex; align-items: center; gap: 3px;
}
.sac-wallet-copy:hover { color: var(--sac-sol-green); }
.sac-wallet-copy.is-copied { color: var(--sac-sol-green); }

/* List items inside accordion */
.sac-list { display: flex; flex-direction: column; gap: 6px; }
.sac-list:empty::before {
    content: "Nothing here yet."; color: var(--sac-text-mute);
    font-size: 12px; font-style: italic; padding: 8px 0;
}
.sac-list-item {
    background: rgba(0,0,0,0.2); border: 1px solid var(--sac-border);
    padding: 10px 12px; border-radius: 8px;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    flex-wrap: wrap; font-size: 12px;
}
.sac-list-item a {
    color: var(--sac-sol-green) !important;
    -webkit-text-fill-color: var(--sac-sol-green) !important;
    background: none !important; text-decoration: none; font-weight: 600;
}
.sac-wallet-save-msg {
    font-size: 12px; color: var(--sac-sol-green);
    margin-top: 4px; min-height: 1em;
}

/* ==========================================================================
   GIG DETAIL MODAL (on-the-fly)
   ========================================================================== */

.sac-gig-detail-payout {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: var(--sac-grad-soft);
    border-radius: var(--sac-radius-sm); border: 1px solid rgba(20, 241, 149, 0.2);
    margin-bottom: 14px; font-size: 14px;
}
.sac-gig-detail-payout strong { color: var(--sac-sol-green); }
.sac-gig-detail-desc {
    font-size: 13px; line-height: 1.6; color: var(--sac-text-dim);
    white-space: pre-wrap; word-wrap: break-word;
    margin-bottom: 12px;
}
.sac-gig-detail-contact {
    margin-top: 12px; padding: 10px 12px;
    background: rgba(20, 241, 149, 0.06);
    border: 1px solid rgba(20, 241, 149, 0.15);
    border-radius: var(--sac-radius-sm);
    font-size: 12px; color: var(--sac-text-dim); line-height: 1.6;
}
.sac-gig-detail-contact strong { color: var(--sac-sol-green); }
.sac-gig-detail-contact code {
    font-family: monospace; font-size: 11px;
    background: rgba(0,0,0,0.4); padding: 2px 6px;
    border-radius: 4px; word-break: break-all;
}

/* ==========================================================================
   HOW IT WORKS MODAL
   ========================================================================== */

.sac-howitworks-steps {
    display: flex; flex-direction: column; gap: 16px;
    margin-bottom: 18px;
}
.sac-howitworks-step {
    display: flex; gap: 12px; align-items: flex-start;
}
.sac-howitworks-num {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--sac-grad);
    color: #07030E;
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.sac-howitworks-text strong {
    display: block;
    font-size: 13px; color: #fff;
    margin-bottom: 2px;
}
.sac-howitworks-text p {
    margin: 0;
    font-size: 12px; color: var(--sac-text-dim);
    line-height: 1.5;
}

.sac-howitworks-rules {
    background: rgba(255, 200, 0, 0.05);
    border: 1px solid rgba(255, 200, 0, 0.15);
    border-radius: var(--sac-radius-sm);
    padding: 12px;
    margin-bottom: 16px;
    font-size: 11px; color: var(--sac-text-dim);
    line-height: 1.6;
}
.sac-howitworks-rules strong { color: #ffc83d; display: block; margin-bottom: 4px; }
.sac-howitworks-rules p { margin: 0; }

.sac-howitworks-wallets {
    display: flex; flex-direction: column; gap: 12px;
}
.sac-howitworks-wallet {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px; background: rgba(0,0,0,0.25);
    border-radius: var(--sac-radius-sm); border: 1px solid var(--sac-border);
}
.sac-howitworks-wallet img {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
}
.sac-howitworks-wallet strong { font-size: 13px; color: #fff; }
.sac-howitworks-wallet p { margin: 2px 0 0; font-size: 11px; color: var(--sac-text-mute); line-height: 1.5; }
.sac-howitworks-wallet a { color: var(--sac-sol-green); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {
    .sac-gb-hero { padding: 4px 16px 0; }
    .sac-gb-hero-icon { width: 28px !important; height: 28px !important; }
    .sac-gb-hero-actions { flex-direction: column; align-items: stretch; }
    .sac-gb-hero-cta, .sac-gb-hero-secondary { width: 100%; }
    .sac-widget { margin: 14px auto; }
    .sac-gig-board { padding: 0 12px; }
    .sac-acc-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   v5.3.0 — WP login buttons, wallet prompt, claim button fix
   ========================================================================== */

.sac-btn-wp-login,
.sac-btn-wp-register {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    margin: 6px 4px;
}

.sac-btn-wp-login {
    background: var(--sac-grad);
    color: #fff;
    padding: 10px 24px;
    border-radius: var(--sac-radius);
    font-weight: 600;
}

.sac-btn-wp-register {
    background: transparent;
    border: 1px solid var(--sac-sol-green);
    color: var(--sac-sol-green);
    padding: 10px 24px;
    border-radius: var(--sac-radius);
    font-weight: 600;
}

.sac-signin-wp-prompt {
    text-align: center;
    padding: 16px 0;
}

.sac-signin-wp-prompt .sac-p {
    margin-bottom: 16px;
    color: var(--sac-text-mute);
}

.sac-gig-wallet-prompt-btn {
    background: transparent;
    border: 1px solid var(--sac-sol-purple);
    color: var(--sac-sol-purple);
    cursor: pointer;
}

.sac-gig-wallet-prompt-btn:hover {
    background: rgba(153, 69, 255, 0.15);
}

/* Make hero-btn links look like buttons */
a.sac-gb-hero-btn {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    line-height: normal;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Account page wallet prompt banner */
.sac-acc-wallet-prompt {
    background: rgba(240, 184, 64, 0.1);
    border: 1px solid #f0b840;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.sac-acc-wallet-prompt strong {
    color: #f0b840;
}

/* Login prompt on account page for non-logged-in users */
.sac-acc-login-card {
    text-align: center;
}

.sac-acc-login-card .sac-gb-hero-btn {
    display: inline-block;
    text-decoration: none;
    margin-top: 12px;
}

/* Ensure claim button in gig cards is always clickable and above other elements */
.sac-gig-claim-btn {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

/* Log In to Claim link styled as button */
a.sac-btn.sac-btn-sm {
    text-decoration: none;
    display: inline-block;
}