/* --- Hacker Dashboard Revamp --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Roboto Mono', 'Courier New', Courier, monospace;
}
body {
     display: flex;
     justify-content: center;
     align-items: flex-start; /* Changed from center to prevent top-clipping */
     min-height: 100vh;
     padding: 20px;
     background: #0a0a0a;
     color: #ccc;
     overflow-x: hidden; /* Keep horizontal overflow hidden */
     overflow-y: auto;   /* Allow vertical scrolling */
}
/* --- Background Effects --- */
 #tsparticles {
     position: fixed;
     inset: 0;
     width: 100%;
     height: 100%;
     background: #000;
     pointer-events: none;
     z-index: 0;
}
 #tsparticles canvas {
     display: block;
     width: 100%;
     height: 100%;
}
 .particles {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: -1;
}
 .particle {
     position: absolute;
     background-color: rgba(0, 255, 0, 0.15);
     border-radius: 50%;
     opacity: 0;
     animation: float-particles linear infinite;
}
 @keyframes float-particles {
     0% {
         transform: translate(0, 0) scale(0);
         opacity: 0;
    }
     25%, 75% {
         opacity: 1;
    }
     100% {
         transform: translate(var(--x), var(--y)) scale(1);
         opacity: 0;
    }
}
/* --- Main Terminal Container --- */
 .dashboard-container {
     width: 95%;
     max-width: 1400px;
     height: auto;
     margin: 0 auto;
     margin-top: 50px;
     position: relative;
     z-index: 1;
     background: rgba(10, 25, 10, 0.85);
     border: 1px solid rgba(0, 255, 0, 0.3);
     border-radius: 8px;
     box-shadow: 0 0 30px rgba(0, 255, 0, 0.15), inset 0 0 15px rgba(0, 0, 0, 0.5);
     overflow: hidden;
}
 .dashboard-container::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 3px);
     animation: scanlines 15s linear infinite;
     pointer-events: none;
     z-index: 2;
}
 @keyframes scanlines {
     from {
         background-position: 0 0;
    }
     to {
         background-position: 0 100px;
    }
}
/* --- Header --- */
 .dashboard-header {
     padding: 20px 40px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid rgba(0, 255, 0, 0.3);
     background: rgba(0, 0, 0, 0.3);
}
 .logo-and-title {
     display: flex;
     align-items: center;
     gap: 15px;
}
 .dashboard-logo {
     height: 31px;
     transition: transform 0.3s ease;
}
 .dashboard-logo:hover {
     transform: scale(1.1) rotate(5deg);
}
 .header-title {
     font-size: 1.5rem;
     color: #ccc;
     font-weight: 500;
     text-transform: uppercase;
}
 .user-greeting {
     display: flex;
     align-items: center;
     gap: 15px;
}
 .user-details {
     text-align: right;
}
 #header-username {
     color: #00ff00;
     cursor: pointer;
     font-size: 1.1rem;
     text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
}
 #header-username:hover {
     text-decoration: underline;
}
 #header-email {
     color: #888;
     font-size: 0.8rem;
}
 #header-username-input {
     background-color: #0a0a0a;
     border: 1px solid rgba(0, 255, 0, 0.4);
     color: #00ff00;
     padding: 4px 6px;
     border-radius: 4px;
     width: 300px;
     text-align: right;
}
 .profile-pic {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     object-fit: cover;
     cursor: pointer;
     border: 2px solid rgba(0, 255, 0, 0.4);
     transition: all 0.3s ease;
}
 .profile-pic:hover {
     border-color: #00ff00;
     box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
}
/* --- Dropdown Menu --- */
 .dropdown-menu {
     display: none;
     position: absolute;
     top: 60px;
     right: 0;
     background: rgba(10, 25, 10, 0.95);
     min-width: 160px;
     z-index: 100;
     border-radius: 4px;
     border: 1px solid rgba(0, 255, 0, 0.3);
     overflow: hidden;
     backdrop-filter: blur(5px);
}
 .dropdown-menu.show {
     display: block;
}
 #logout-btn {
     background: none;
     border: none;
     color: rgba(0, 255, 0, 0.7);
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     width: 100%;
     text-align: left;
     cursor: pointer;
     font-size: 1rem;
     transition: all 0.2s ease;
     text-transform: uppercase;
}
 #logout-btn:hover {
     background-color: rgba(0, 255, 0, 0.1);
     color: #00ff00;
     text-shadow: 0 0 8px rgba(0, 255, 0, 0.7);
}
/* --- Main Content Grid --- */
 .dashboard-content {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1px;
     padding: 0;
     background: rgba(0, 255, 0, 0.3);
}
 .card {
     background: rgba(10, 25, 10, 0.85);
     padding: 30px 25px;
     position: relative;
     transition: none;
     border: none;
     border-radius: 0;
}
/* --- Card Headers & Glitch Effect --- */
 .card-header {
     color: #27c93f;
     font-size: 1.5rem;
     margin-bottom: 25px;
     font-weight: 700;
     text-shadow: 0 0 10px rgba(39, 201, 63, 0.6);
     position: relative;
}
 .card-header::after, .card-header::before {
     content: attr(data-text);
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: transparent;
     overflow: hidden;
     clip-path: inset(50% 0 50% 0);
}
 .card-header:hover::before {
     left: 2px;
     text-shadow: -1px 0 #ff00c1;
     animation: text-glitch-effect 1.5s infinite linear alternate-reverse;
}
 @keyframes text-glitch-effect {
     0% {
         transform: translate(0) 
    }
     20% {
         transform: translate(-3px, 3px) 
    }
     40% {
         transform: translate(3px, -3px) 
    }
     60% {
         transform: translate(-3px, -3px) 
    }
     80% {
         transform: translate(3px, 3px) 
    }
     100% {
         transform: translate(0) 
    }
}
/* --- Freeze Subscription Styles --- */

/* 1. Frozen Badge Style (Ice Blue) */
.status-badge.frozen {
    color: #008cff; /* Electric Blue */
    border-color: rgba(0, 140, 255, 0.5);
    text-shadow: 0 0 5px rgba(0, 140, 255, 0.6);
}

.status-badge.frozen::before {
    content: '[FROZEN] ';
}

/* 2. Warning Button (Amber/Yellow - used for Freeze Action) */
.btn.btn-warning {
    border-color: rgba(255, 183, 0, 0.4);
    color: rgba(255, 183, 0, 0.7);
}

.btn.btn-warning:hover {
    border-color: #ffb700;
    background: rgba(255, 183, 0, 0.1);
    color: #ffb700;
    text-shadow: 0 0 8px rgba(255, 183, 0, 0.6);
    box-shadow: 0 0 15px rgba(255, 183, 0, 0.2);
}

/* Disabled state for Warning Button (e.g., No Allowance) */
.btn.btn-warning:disabled {
    border-color: rgba(100, 100, 100, 0.3);
    color: rgba(100, 100, 100, 0.5);
    background: transparent;
    cursor: not-allowed;
    box-shadow: none;
    text-shadow: none;
}

/* 3. Freeze Action Item Spacing */
/* Adds space between the Cancel item and the Freeze item */
.action-item + .action-item {
    margin-top: 15px;
}

/* 4. Freeze Allowance Text */
#freeze-allowance-display {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    color: #008cff;
}

#freeze-allowance-display::before {
    content: '>> ';
    opacity: 0.7;
}

/* 5. Specific Overlay Styles for Frozen State */
/* This targets elements inside the overlay when the user is frozen */

/* If the overlay title indicates Frozen, make it blue */
.subscription-overlay.active .overlay-content h3:contains("FROZEN"), /* CSS4 selector support varies, fallback handled via JS logic usually, but we can style via general rules */
.subscription-overlay.active h3[data-status="frozen"] { 
    color: #008cff;
    text-shadow: 0 0 10px rgba(0, 140, 255, 0.5);
}

/* 6. Modal Specifics for Freeze */
/* Highlights the specific freeze conditions in the modal */
#freeze-confirm-modal-overlay .warning-box {
    background: rgba(0, 140, 255, 0.05); /* Very faint blue background */
    border-color: rgba(0, 140, 255, 0.3);
}

#freeze-confirm-modal-overlay .warning-title {
    color: #008cff;
}

#freeze-confirm-modal-overlay .warning-list li::before {
    color: #008cff;
    content: '*';
}
.tier-icon {
    height: 0.9em; /* Scales with the badge font-size */
    width: 0.9em;
    margin-right: 5px; /* Space between icon and text */
    vertical-align: middle; /* Aligns icon nicely with the text */
}
/* --- Account Overview Card --- */
 .credits-showcase {
     padding: 20px;
     text-align: center;
     border: 1px solid rgba(0, 255, 0, 0.2);
     background: rgba(0, 0, 0, 0.2);
     border-radius: 4px;
     margin-bottom: 24px;
}
 .credits-number {
     font-size: 4rem;
     font-weight: 700;
     color: #00ff00;
     margin-bottom: 8px;
     text-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
     line-height: 1;
}
 .credits-label, .credits-expiry {
     font-size: 1rem;
     color: #888;
     font-weight: 500;
}
/* Update or Add under "6. Modal Specifics for Freeze" */

#freeze-confirm-modal-overlay .warning-list li strong {
    color: #fff; /* Make key terms pop in white against the grey text */
}

/* Make the 'Accept' button look more severe */
#confirm-freeze-btn {
    border-color: #008cff;
    color: #008cff;
}

#confirm-freeze-btn:hover {
    background: rgba(0, 140, 255, 0.15);
    color: #fff;
    text-shadow: 0 0 10px #008cff;
    border-color: #fff;
}
 .credits-label::before, .credits-expiry::before {
     content: '// ';
}
 .account-details {
     margin-top: 24px;
     padding-top: 24px;
     border-top: 1px solid rgba(0, 255, 0, 0.1);
}
 .detail-item-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 16px;
}
 .meta-label {
     font-size: 1rem;
     color: #888;
}
 .meta-value {
     font-size: 1rem;
     color: #ccc;
}
/* --- Subscription Card --- */
 .status-badge {
     display: inline-block;
     padding: 4px 8px;
     font-size: 0.9rem;
     font-weight: 700;
     border: 1px solid;
     text-transform: uppercase;
}
 .status-badge.active {
     color: #00ff00;
     border-color: rgba(0, 255, 0, 0.5);
}
 .status-badge.active::before {
     content: '[ACTIVE] ';
}
 .status-badge.expired {
     color: #ff4500;
     border-color: rgba(255, 69, 0, 0.5);
}
 .status-badge.expired::before {
     content: '[EXPIRED] ';
}
 .status-badge.inactive {
     color: #888;
     border-color: rgba(136, 136, 136, 0.5);
}
 .status-badge.inactive::before {
     content: '[INACTIVE] ';
}
 .billing-title-section {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
}
 .billing-details {
     display: flex;
     flex-direction: column;
     gap: 15px;
     margin-bottom: 24px;
}
 .detail-item {
     display: flex;
     justify-content: space-between;
}
 .detail-label {
     font-size: 0.9rem;
     color: #888;
}
 .detail-value {
     font-size: 0.9rem;
     color: #ccc;
}
 .action-item {
     background: rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(0, 255, 0, 0.1);
     border-radius: 4px;
     padding: 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 .action-title {
     font-size: 1.1rem;
     font-weight: 500;
     color: #ccc;
     margin-bottom: 4px;
}
 .action-description {
     font-size: 0.9rem;
     color: #888;
}
 .action-description::before {
     content: '// ';
}
/* --- Subscription Overlay --- */
 .subscription-overlay {
     position: absolute;
     inset: 0;
     background: rgba(10, 25, 10, 0.95);
     backdrop-filter: blur(5px);
     z-index: 10;
     display: none;
     justify-content: center;
     align-items: center;
     text-align: center;
     border: 1px solid rgba(0, 255, 0, 0.3);
}
 .subscription-overlay.active {
     display: flex;
}
 .overlay-content {
     padding: 30px;
}
 .overlay-content h3 {
     color: #ccc;
     font-size: 1.5rem;
     margin-bottom: 15px;
     text-transform: uppercase;
}
 .overlay-expiry {
     color: #ff4500;
     font-size: 1rem;
     margin-bottom: 25px;
     font-weight: 500;
}
 .overlay-expiry::before {
     content: '// STATUS: ';
}
/* Banked-time / unfreeze-lock box: keep it clear of the button beneath it. */
 #overlay-freeze-time {
     margin-bottom: 20px;
}
/* --- System Control Card --- */
 .deletion-header h3 {
     font-size: 1.2rem;
     color: #ccc;
     font-weight: 500;
     margin-bottom: 8px;
}
 .deletion-description {
     font-size: 1rem;
     color: #888;
     line-height: 1.5;
     margin-bottom: 20px;
}
 .deletion-description::before {
     content: '// ';
}
 .warning-box {
     background: rgba(255, 69, 0, 0.1);
     border: 1px solid rgba(255, 69, 0, 0.3);
     border-radius: 4px;
     padding: 16px;
     margin-bottom: 20px;
}
 .warning-title {
     font-size: 1rem;
     font-weight: 700;
     color: #ff4500;
     margin-bottom: 12px;
}
 .warning-list {
     list-style: none;
     margin: 0;
     padding: 0;
}
 .warning-list li {
     font-size: 0.9rem;
     color: #ccc;
     margin-bottom: 6px;
     padding-left: 20px;
     position: relative;
}
 .warning-list li::before {
     content: '>';
     color: #ff4500;
     position: absolute;
     left: 0;
     font-weight: 700;
}
 .deletion-requirements p {
     font-size: 1rem;
     color: #ccc;
     font-weight: 500;
     margin-bottom: 12px;
}
 .requirement-item {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 10px;
     position: relative;
     cursor: pointer;
}
/* Custom Checkbox */
 .custom-checkbox-label {
     padding-left: 40px;
     position: relative;
     display: inline-block;
     line-height: 20px;
     color: #888;
     font-size: 0.9rem;
     cursor: pointer;
}
 .custom-checkbox-label::before {
     content: '[ ]';
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 18px;
     height: 18px;
     color: #888;
     font-size: 1.2rem;
     white-space: pre;
}
 .deletion-checkbox {
     opacity: 0;
     position: absolute;
     cursor: pointer;
}
 .deletion-checkbox:checked + .custom-checkbox-label::before {
     content: '[x]';
     color: #ff4500;
}
 .deletion-checkbox:checked + .custom-checkbox-label {
     color: #ccc;
}
/* --- Buttons --- */
 .btn {
     background: transparent;
     border: 1px solid;
     font-size: 1rem;
     padding: 8px 12px;
     cursor: pointer;
     transition: all 0.3s ease;
     text-transform: uppercase;
}
 .btn:hover {
     background: rgba(255, 255, 255, 0.1);
     text-shadow: 0 0 8px;
     color: #fff;
}
 .btn.btn-primary {
     border-color: rgba(0, 255, 0, 0.4);
     color: rgba(0, 255, 0, 0.7);
     width: 100%;
}
 .btn.btn-primary:hover {
     border-color: #00ff00;
     background: rgba(0, 255, 0, 0.1);
     color: #00ff00;
}
 .btn.btn-danger {
     border-color: rgba(255, 69, 0, 0.4);
     color: rgba(255, 69, 0, 0.7);
}
 .btn.btn-danger:hover {
     border-color: #ff4500;
     background: rgba(255, 69, 0, 0.1);
     color: #ff4500;
}
 .btn-danger-filled {
     width: 100%;
     background: transparent;
     border: 1px solid rgba(136, 136, 136, 0.4);
     color: rgba(136, 136, 136, 0.7);
     cursor: not-allowed;
     text-transform: uppercase;
     padding: 14px;
}
 .btn-danger-filled:not(:disabled) {
     border-color: rgba(255, 69, 0, 0.4);
     color: rgba(255, 69, 0, 0.7);
     cursor: pointer;
}
 .btn-danger-filled:not(:disabled):hover {
     border-color: #ff4500;
     background: rgba(255, 69, 0, 0.1);
     color: #ff4500;
}
/* --- Modals (History & Delete) --- */
 .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.8);
     backdrop-filter: blur(8px);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 1000;
}
 .modal-overlay.show {
     display: flex;
}
 .modal-content {
     max-width: 600px;
     width: 90%;
     background: rgba(10, 25, 10, 0.95);
     border: 1px solid rgba(0, 255, 0, 0.3);
     border-radius: 8px;
     box-shadow: 0 0 25px rgba(0, 255, 0, 0.15);
     position: relative;
}
 .modal-header {
     padding: 20px 30px;
     border-bottom: 1px solid rgba(0, 255, 0, 0.2);
}
 .modal-header-title {
     font-size: 1.5rem;
     color: #ccc;
}
 .modal-close {
     position: absolute;
     top: 15px;
     right: 25px;
     color: #888;
     font-size: 2rem;
     cursor: pointer;
     transition: color 0.3s ease;
}
 .modal-close:hover {
     color: #ff4500;
}
 .modal-body {
     padding: 30px;
}
 .modal-actions {
     display: flex;
     justify-content: flex-end;
     gap: 16px;
     padding: 20px 30px;
     border-top: 1px solid rgba(0, 255, 0, 0.2);
}
/* --- Active Tier Highlight --- */
.tier-active {
    background: rgba(0, 255, 157, 0.15) !important;
    border: 1px solid #00ff9d !important;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.2);
    color: #fff !important;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 255, 157, 0.5);
    padding-left: 10px !important;
    padding-right: 10px !important;
}
/* History Modal List */
 .modal-history-list {
     max-height: 50vh;
     overflow-y: auto;
     padding-right: 15px;
     display: flex;
     flex-direction: column;
     gap: 12px;
}
 .history-item {
     background: rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(0, 255, 0, 0.1);
     border-radius: 4px;
     padding: 16px;
     display: flex;
     flex-direction: column;
     gap: 8px;
}
 .history-top-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 .history-credits, .history-amount {
     font-size: 1rem;
     color: #ccc;
}
 .history-date {
     font-size: 0.9rem;
     color: #888;
}
 .no-history-message {
     color: #888;
     text-align: center;
     padding: 20px;
}
 .no-history-message::before {
     content: '// NO_TRANSACTIONS_LOGGED';
}
/* Delete Modal Specifics */
 .modal-body p {
     font-size: 1rem;
     color: #888;
     line-height: 1.5;
     text-align: center;
}
/* --- Utility --- */
 .hidden {
     display: none;
}
/* --- Inactive Action Item --- */
 .action-item.inactive-action {
     opacity: 0.6;
     background: rgba(0, 0, 0, 0.1);
}
 .action-item.inactive-action .btn {
     cursor: not-allowed;
     background: transparent;
     border-color: rgba(136, 136, 136, 0.4);
     color: rgba(136, 136, 136, 0.7);
}
/* Override hover effects when inactive */
 .action-item.inactive-action .btn:hover {
     background: transparent;
     text-shadow: none;
     color: rgba(136, 136, 136, 0.7);
}

/* --- Affiliate Overview Hacker Restyle --- */
.affiliate-overview {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ── OPT-IN VIEW ── */

.af-optin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 10px 20px;
    flex: 1;
    gap: 0;
}

.af-optin-icon {
    width: 56px;
    height: 56px;
    color: #00ff00;
    margin-bottom: 20px;
    opacity: 0.9;
    filter: drop-shadow(0 0 15px rgba(0, 255, 0, 0.5));
    animation: af-float 4s ease-in-out infinite;
}

@keyframes af-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

.af-optin-title {
    font-size: 1.5rem;
    color: #27c93f;
    margin-bottom: 10px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(39, 201, 63, 0.6);
    text-transform: uppercase;
}

.af-optin-subtitle {
    font-size: 0.9rem;
    color: #888;
    line-height: 1.5;
    margin-bottom: 28px;
    max-width: 400px;
}

.af-optin-subtitle::before {
    content: '// ';
}

.af-perks {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 255, 0, 0.1);
    border-radius: 4px;
    padding: 16px 20px;
    width: 100%;
    margin-bottom: 28px;
}

.af-perk {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.af-perk-divider {
    width: 1px;
    height: 36px;
    background: rgba(0, 255, 0, 0.2);
}

.af-perk-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #00ff00;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.4);
}

.af-perk-label {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    font-weight: 500;
}

.af-join-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.4);
    border-radius: 0;
    color: rgba(0, 255, 0, 0.7);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    box-shadow: none;
}

.af-join-btn:hover {
    border-color: #00ff00;
    background: rgba(0, 255, 0, 0.1);
    color: #00ff00;
    text-shadow: 0 0 8px;
}

.af-join-btn:active {
    transform: translateY(0);
}

/* ── DASHBOARD VIEW ── */

.af-dash {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

.af-dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.af-dash-label {
    font-size: 1rem;
    font-weight: 700;
    color: #27c93f;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(39, 201, 63, 0.6);
}

.af-commission-badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.9rem;
    font-weight: 700;
    border: 1px solid rgba(0, 255, 0, 0.5);
    color: #00ff00;
    text-transform: uppercase;
    background: transparent;
    border-radius: 0;
}

.af-commission-badge::before {
    content: '[ ';
}

.af-commission-badge::after {
    content: ' ]';
}

/* Earnings hero */
.af-earnings-hero {
    padding: 20px 0;
    border-top: 1px solid rgba(0, 255, 0, 0.2);
    border-bottom: 1px solid rgba(0, 255, 0, 0.2);
    margin-bottom: 20px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
}

.af-earnings-amount {
    font-size: 3rem;
    font-weight: 700;
    color: #00ff00;
    text-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
    line-height: 1;
    margin-bottom: 8px;
}

.af-earnings-label {
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
}

/* Stats row */
.af-stats-row {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 255, 0, 0.1);
    border-radius: 4px;
    padding: 14px 16px;
    margin-bottom: 24px;
}

.af-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.af-stat-sep {
    width: 1px;
    height: 28px;
    background: rgba(0, 255, 0, 0.2);
}

.af-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ccc;
}

.af-stat-label {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
}

/* Referral link block */
.af-link-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.af-link-label {
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

.af-link-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.af-link-input {
    flex: 1;
    background: #0a0a0a;
    border: 1px solid rgba(0, 255, 0, 0.4);
    border-radius: 0;
    padding: 10px 12px;
    color: #00ff00;
    outline: none;
    transition: border-color 0.2s;
}

.af-link-input:focus {
    border-color: #00ff00;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

.af-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.4);
    border-radius: 0;
    color: rgba(0, 255, 0, 0.7);
    font-size: 0.9rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.af-copy-btn:hover {
    background: rgba(0, 255, 0, 0.1);
    border-color: #00ff00;
    color: #00ff00;
    text-shadow: 0 0 8px;
}

.af-copy-btn.copied {
    background: rgba(0, 255, 0, 0.2);
    border-color: #00ff00;
    color: #00ff00;
}

.af-copy-default,
.af-copy-success {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* --- Affiliate Commissions Ledger --- */
.af-commissions-section {
    margin-top: 24px;
    border-top: 1px solid rgba(0, 255, 0, 0.2);
    padding-top: 20px;
}
.af-commissions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 5px;
}

/* Custom scrollbar for the list */
.af-commissions-list::-webkit-scrollbar {
    width: 6px;
}
.af-commissions-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
.af-commissions-list::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 0, 0.3);
    border-radius: 4px;
}
.af-comm-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 255, 0, 0.1);
    border-radius: 4px;
    padding: 12px 16px;
    transition: background 0.2s;
}
.af-comm-item:hover {
    background: rgba(0, 255, 0, 0.1);
    border-color: rgba(0, 255, 0, 0.3);
}
.af-comm-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.af-comm-date {
    font-size: 0.8rem;
    color: #888;
}
.af-comm-provider {
    font-size: 0.9rem;
    color: #ccc;
    text-transform: uppercase;
}
.af-comm-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.af-comm-amount {
    font-size: 1rem;
    font-weight: 700;
}
.af-comm-status {
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid;
    border-radius: 0;
}

/* Dynamic Status Colors */
.comm-available .af-comm-amount { color: #00ff00; }
.comm-available .af-comm-status { 
    color: #00ff00; 
    border-color: rgba(0, 255, 0, 0.5);
    background: transparent;
}

.comm-pending .af-comm-amount { color: #ffb700; }
.comm-pending .af-comm-status { 
    color: #ffb700; 
    border-color: rgba(255, 183, 0, 0.5);
    background: transparent;
}
.af-comm-timer {
    display: block;
    font-size: 0.68rem;
    color: #ffb700;
    margin-top: 4px;
    opacity: 0.9;
}
/* --- Affiliate Program Intel Box --- */
.af-intel-box {
    margin-top: 24px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-left: 3px solid #00ff00;
    padding: 16px 20px;
    border-radius: 0 4px 4px 0;
}

.af-intel-title {
    color: #00ff00;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.4);
}

.af-intel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.af-intel-list li {
    font-size: 0.85rem;
    color: #888;
    line-height: 1.4;
    position: relative;
    padding-left: 15px;
}

.af-intel-list li strong {
    color: #ccc;
}

.af-intel-list li::before {
    content: '>';
    color: #00ff00;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* --- Affiliate Payout Request Section --- */
.af-payout-section {
    margin-top: 24px;
    border-top: 1px solid rgba(0, 255, 0, 0.2);
    padding-top: 20px;
}

.af-payout-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.af-payout-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #27c93f;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(39, 201, 63, 0.4);
}

.af-payout-desc {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 18px;
    line-height: 1.5;
}

.af-payout-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.af-payout-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.af-payout-label {
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
}

.af-payout-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0, 255, 0, 0.4);
    background: #0a0a0a;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.af-payout-input-wrap:focus-within {
    border-color: #00ff00;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

.af-payout-prefix {
    padding: 10px 10px 10px 12px;
    color: #00ff00;
    font-size: 1rem;
    font-weight: 700;
    user-select: none;
}

.af-payout-input {
    flex: 1;
    background: #0a0a0a;
    border: 1px solid rgba(0, 255, 0, 0.4);
    border-radius: 0;
    padding: 10px 12px;
    color: #00ff00;
    outline: none;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

.af-payout-input:focus {
    border-color: #00ff00;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

.af-payout-input-wrap .af-payout-input {
    border: none;
    padding-left: 0;
}

.af-payout-method-row {
    display: flex;
    gap: 10px;
}

.af-method-btn {
    flex: 1;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.3);
    color: rgba(0, 255, 0, 0.6);
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.af-method-btn:hover {
    border-color: rgba(0, 255, 0, 0.7);
    color: #00ff00;
    background: rgba(0, 255, 0, 0.07);
}

.af-method-btn.active {
    border-color: #00ff00;
    color: #00ff00;
    background: rgba(0, 255, 0, 0.12);
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.15);
}

.af-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.5);
    color: rgba(0, 255, 0, 0.8);
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.af-generate-btn:hover {
    border-color: #00ff00;
    background: rgba(0, 255, 0, 0.1);
    color: #00ff00;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.15);
}

.af-payout-output {
    margin-top: 18px;
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-left: 3px solid #00ff00;
    background: rgba(0, 0, 0, 0.35);
    padding: 16px;
}

.af-payout-output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.af-payout-output-label {
    font-size: 0.8rem;
    color: #00ff00;
    text-transform: uppercase;
    font-weight: 700;
}

.af-payout-subject {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 255, 0, 0.15);
}

.af-payout-subject-label {
    color: #555;
    margin-right: 6px;
    text-transform: uppercase;
    font-size: 0.75rem;
}

#payout-subject-text {
    color: #ccc;
}

.af-payout-body {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.82rem;
    color: #aaa;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    background: transparent;
    border: none;
}
/* --- Collapsible UI Styles --- */
.collapsible-header .toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    user-select: none;
}

.collapsible-header.is-collapsed .toggle-icon {
    transform: rotate(-90deg);
}

.collapsible-content {
    transition: opacity 0.3s ease;
}

.collapsible-content.is-collapsed {
    display: none !important;
}

/* Remove lingering bottom margins when sections are collapsed */
h2.card-header.collapsible-header.is-collapsed {
    margin-bottom: 0;
}
.af-payout-header.collapsible-header.is-collapsed {
    margin-bottom: 0;
}

/* ============================================================= */
/* ===============  COPY USERNAME BUTTON  ====================== */
/* ============================================================= */
#header-username-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.copy-username-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-radius: 4px;
    color: rgba(0, 255, 0, 0.7);
    cursor: pointer;
    line-height: 0;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.copy-username-btn:hover {
    border-color: #00ff00;
    color: #00ff00;
    background: rgba(0, 255, 0, 0.1);
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
}

.copy-username-btn:focus-visible {
    outline: 2px solid #00ff00;
    outline-offset: 2px;
}

.copy-username-btn:active {
    transform: scale(0.92);
}

.copy-username-btn.copied {
    border-color: #00ff00;
    color: #00ff00;
    background: rgba(0, 255, 0, 0.12);
}

/* Icon swap: clipboard -> checkmark on copy */
.copy-username-btn .copy-icon-success {
    display: none;
}
.copy-username-btn.copied .copy-icon-default {
    display: none;
}
.copy-username-btn.copied .copy-icon-success {
    display: inline;
}

/* Hide the copy button while the username is being edited */
#header-username.hidden ~ .copy-username-btn {
    display: none;
}

/* ============================================================= */
/* ===============  RESPONSIVE / MOBILE LAYOUT  =============== */
/* ============================================================= */

/* Tablets and below: collapse the 3-column grid to a single column */
@media (max-width: 900px) {
    body {
        padding: 12px;
    }
    .dashboard-container {
        width: 100%;
        margin-top: 20px;
    }
    .dashboard-content {
        grid-template-columns: 1fr;
    }
    .dashboard-header {
        padding: 18px 22px;
    }
    .card {
        padding: 24px 20px;
    }
}

/* Phones */
@media (max-width: 600px) {
    body {
        padding: 8px;
    }
    .dashboard-container {
        margin-top: 12px;
        border-radius: 6px;
    }

    /* Stack the header: logo/title row, then user greeting row */
    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }
    .logo-and-title {
        gap: 12px;
    }
    .header-title {
        font-size: 1.2rem;
    }
    .user-greeting {
        justify-content: space-between;
        gap: 12px;
    }
    .user-details {
        text-align: left;
        flex: 1;
        min-width: 0; /* allow long text to truncate instead of overflowing */
    }
    /* On its own row, username + copy icon read better left-aligned */
    #header-username-container {
        justify-content: flex-start;
    }
    #header-username {
        font-size: 1rem;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #header-email {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* The edit field was a fixed 300px — let it fit the screen */
    #header-username-input {
        width: 100%;
        max-width: 100%;
        text-align: left;
    }

    .card {
        padding: 20px 16px;
    }
    .card-header {
        font-size: 1.3rem;
    }
    .credits-number {
        font-size: 3rem;
    }
    .af-earnings-amount {
        font-size: 2.4rem;
    }

    /* Modals: tighten padding and let action buttons wrap instead of overflow */
    .modal-header,
    .modal-body {
        padding-left: 18px;
        padding-right: 18px;
    }
    .modal-actions {
        flex-wrap: wrap;
        padding-left: 18px;
        padding-right: 18px;
    }
    .modal-actions .btn {
        flex: 1 1 auto;
    }

    /* Upgrade modal: stack its two info columns (they use inline flex styles) */
    #upgrade-modal-overlay .modal-content {
        max-width: 100% !important;
    }
    #upgrade-modal-overlay .modal-body > div[style*="flex"] {
        flex-direction: column !important;
        gap: 16px !important;
    }
}

/* Respect users who prefer reduced motion (disables scanlines, glitch, float) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}