/*
 * Deal Community System - Frontend Styles
 * Version: 3.13.0
 * Colors synced with DealHub Theme v2.3.0 + Mobile Responsive
 * Force light/white theme on all devices (no dark mode auto-detection)
 * Now renders within the active theme (no standalone pages)
 * Mobile-first responsive redesign
 */

/*--------------------------------------------------------------
# CSS Variables - Matching DealHub Theme
--------------------------------------------------------------*/
.dcs-app {
        --dcs-bg: #F7FAFC;
        --dcs-card: #FFFFFF;
        --dcs-text: #2D3748;
        --dcs-muted: #718096;
        --dcs-line: #E2E8F0;
        --dcs-primary: #FF6B35;
        --dcs-primary-dark: #E55A2A;
        --dcs-primary-light: #FFF3ED;
        --dcs-primary-glow: rgba(255, 107, 53, 0.15);
        --dcs-blue: #3498DB;
        --dcs-danger: #E53E3E;
        --dcs-danger-light: #FFF5F5;
        --dcs-ok: #48BB78;
        --dcs-ok-light: #F0FFF4;
        --dcs-warning: #D69E2E;
        --dcs-warning-light: #FFFFF0;
        --dcs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
        --dcs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
        --dcs-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
        --dcs-radius-sm: 8px;
        --dcs-radius-md: 12px;
        --dcs-radius-lg: 16px;
        --dcs-radius-full: 999px;
        --dcs-transition: 0.2s ease;
        color: var(--dcs-text);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: var(--dcs-card);
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
}

/*--------------------------------------------------------------
# Theme-Integrated Page Styles
--------------------------------------------------------------*/
.dcs-theme-page {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
}

.dcs-theme-page *,
.dcs-theme-page *::before,
.dcs-theme-page *::after {
        box-sizing: border-box;
}

/*--------------------------------------------------------------
# Cards & Hero
--------------------------------------------------------------*/
.dcs-section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
}

.dcs-section-title h2,
.dcs-section-title h3 {
        margin: 0;
        font-size: 18px;
        color: var(--dcs-text);
        letter-spacing: 0;
}

.dcs-section-title .dashicons {
        font-size: 22px;
        width: 22px;
        height: 22px;
        color: var(--dcs-primary);
        flex-shrink: 0;
}

.dcs-hero,
.dcs-card {
        background: var(--dcs-card);
        border: 1px solid var(--dcs-line);
        border-radius: var(--dcs-radius-md);
        box-shadow: var(--dcs-shadow-sm);
        transition: box-shadow var(--dcs-transition);
}

.dcs-hero {
        align-items: center;
        display: flex;
        gap: 18px;
        justify-content: space-between;
        margin: 0 0 18px;
        padding: 24px;
}

.dcs-hero:hover {
        box-shadow: var(--dcs-shadow-md);
}

.dcs-hero h2,
.dcs-card h2,
.dcs-card h3 {
        letter-spacing: 0;
        line-height: 1.2;
        margin: 0 0 10px;
        color: var(--dcs-text);
}

.dcs-hero p,
.dcs-card p {
        color: var(--dcs-muted);
        margin: 0 0 14px;
        line-height: 1.5;
}

/*--------------------------------------------------------------
# Stats & Grid
--------------------------------------------------------------*/
.dcs-stats,
.dcs-grid {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-bottom: 18px;
}

.dcs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dcs-card {
        margin-bottom: 18px;
        padding: 20px;
}

.dcs-card span {
        color: var(--dcs-muted);
        display: block;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
}

.dcs-card strong {
        display: block;
        font-size: 28px;
        line-height: 1.25;
        color: var(--dcs-text);
}

/*--------------------------------------------------------------
# Stat Card Icons
--------------------------------------------------------------*/
.dcs-stat-icon {
        width: 40px;
        height: 40px;
        border-radius: var(--dcs-radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        font-size: 18px;
}

.dcs-stat-icon.coins {
        background: var(--dcs-primary-light);
        color: var(--dcs-primary);
}

.dcs-stat-icon.rank {
        background: #EBF8FF;
        color: var(--dcs-blue);
}

.dcs-stat-icon.level {
        background: #E9D8FD;
        color: #805AD5;
}

.dcs-stat-icon.badge {
        background: var(--dcs-ok-light);
        color: var(--dcs-ok);
}

.dcs-stat-icon.achievements {
        background: var(--dcs-warning-light);
        color: var(--dcs-warning);
}

/*--------------------------------------------------------------
# Progress Bar
--------------------------------------------------------------*/
.dcs-progress {
        background: #EDF2F7;
        border-radius: var(--dcs-radius-full);
        height: 8px;
        margin-top: 12px;
        overflow: hidden;
}

.dcs-progress i {
        animation: dcs-fill 650ms ease both;
        background: linear-gradient(90deg, var(--dcs-primary), var(--dcs-primary-dark));
        display: block;
        height: 100%;
        border-radius: var(--dcs-radius-full);
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.dcs-button {
        background: var(--dcs-primary);
        border: 0;
        border-radius: var(--dcs-radius-sm);
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        font-size: 14px;
        justify-content: center;
        line-height: 1;
        padding: 12px 20px;
        text-decoration: none;
        transition: all var(--dcs-transition);
        box-shadow: 0 2px 6px rgba(255, 107, 53, 0.3);
        white-space: nowrap;
}

.dcs-button:hover {
        color: #fff;
        background: var(--dcs-primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);
}

.dcs-button:active {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(255, 107, 53, 0.25);
}

.dcs-button:disabled {
        cursor: not-allowed;
        opacity: 0.55;
        transform: none;
        box-shadow: none;
}

.dcs-button-outline {
        background: transparent;
        border: 1px solid var(--dcs-primary);
        color: var(--dcs-primary);
        box-shadow: none;
}

.dcs-button-outline:hover {
        background: var(--dcs-primary);
        color: #fff;
}

.dcs-button-ghost {
        background: var(--dcs-bg);
        color: var(--dcs-text);
        border: 1px solid var(--dcs-line);
        box-shadow: none;
}

.dcs-button-ghost:hover {
        background: var(--dcs-card);
        border-color: var(--dcs-primary);
        color: var(--dcs-primary);
        box-shadow: none;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.dcs-ajax-form,
.dcs-deal-form {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dcs-ajax-form label,
.dcs-deal-form label {
        color: var(--dcs-text);
        display: grid;
        font-size: 13px;
        font-weight: 600;
        gap: 7px;
}

.dcs-ajax-form input,
.dcs-ajax-form select,
.dcs-ajax-form textarea,
.dcs-copy-input {
        background: var(--dcs-card);
        border: 1.5px solid var(--dcs-line);
        border-radius: var(--dcs-radius-sm);
        color: var(--dcs-text);
        min-height: 44px;
        padding: 10px 14px;
        width: 100%;
        font-size: 14px;
        transition: border-color var(--dcs-transition), box-shadow var(--dcs-transition);
        outline: none;
        max-width: 100%;
}

.dcs-ajax-form input:focus,
.dcs-ajax-form select:focus,
.dcs-ajax-form textarea:focus,
.dcs-copy-input:focus {
        border-color: var(--dcs-primary);
        box-shadow: 0 0 0 3px var(--dcs-primary-glow);
}

.dcs-ajax-form input::placeholder,
.dcs-ajax-form textarea::placeholder {
        color: #A0AEC0;
}

.dcs-wide,
.dcs-message {
        grid-column: 1 / -1;
}

.dcs-message {
        color: var(--dcs-muted);
        font-weight: 700;
        margin-top: 8px;
        padding: 8px 12px;
        border-radius: var(--dcs-radius-sm);
        background: var(--dcs-bg);
}

.dcs-message.is-error {
        color: var(--dcs-danger);
        background: var(--dcs-danger-light);
}

.dcs-message.is-ok {
        color: #276749;
        background: var(--dcs-ok-light);
}

/*--------------------------------------------------------------
# Tables — Mobile-First Responsive
--------------------------------------------------------------*/
.dcs-responsive-table {
        overflow-x: auto;
        width: 100%;
        border-radius: var(--dcs-radius-sm);
        -webkit-overflow-scrolling: touch;
}

.dcs-responsive-table table {
        border-collapse: collapse;
        width: 100%;
        min-width: 480px;
}

.dcs-responsive-table th {
        background: var(--dcs-bg);
        color: var(--dcs-muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
}

.dcs-responsive-table th,
.dcs-responsive-table td {
        border-bottom: 1px solid var(--dcs-line);
        padding: 10px 8px;
        text-align: left;
}

.dcs-responsive-table tbody tr {
        transition: background var(--dcs-transition);
}

.dcs-responsive-table tbody tr:hover {
        background: var(--dcs-bg);
}

/*--------------------------------------------------------------
# Pills & Status Badges
--------------------------------------------------------------*/
.dcs-pill {
        background: #EDF2F7;
        border-radius: var(--dcs-radius-full);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 700;
        padding: 5px 10px;
        letter-spacing: 0.2px;
        white-space: nowrap;
}

.dcs-approved {
        background: #F0FFF4;
        color: var(--dcs-ok);
}

.dcs-rejected {
        background: #FFF5F5;
        color: var(--dcs-danger);
}

.dcs-pending {
        background: #FFFFF0;
        color: #B7791F;
}

.dcs-draft {
        background: #EDF2F7;
        color: #4A5568;
}

.dcs-publish {
        background: #F0FFF4;
        color: var(--dcs-ok);
}

/*--------------------------------------------------------------
# Task List
--------------------------------------------------------------*/
.dcs-task-list {
        display: grid;
        gap: 12px;
}

.dcs-task-summary {
        background: linear-gradient(135deg, var(--dcs-primary-light), #FFF8F3);
        border: 1px solid rgba(255, 107, 53, 0.2);
        border-radius: var(--dcs-radius-md);
        margin: 0 0 18px;
        padding: 18px;
}

.dcs-task-summary strong {
        display: block;
        font-size: 18px;
        line-height: 1.25;
        color: var(--dcs-primary-dark);
}

.dcs-task-summary span {
        color: var(--dcs-muted);
        display: block;
        font-size: 13px;
        margin-top: 5px;
}

.dcs-task {
        align-items: center;
        background: var(--dcs-card);
        border: 1px solid var(--dcs-line);
        border-radius: var(--dcs-radius-sm);
        display: flex;
        justify-content: space-between;
        padding: 16px;
        transition: all var(--dcs-transition);
        gap: 10px;
}

.dcs-task:hover {
        border-color: var(--dcs-primary);
        box-shadow: var(--dcs-shadow-sm);
}

.dcs-task-icon {
        width: 36px;
        height: 36px;
        border-radius: var(--dcs-radius-sm);
        background: var(--dcs-primary-light);
        color: var(--dcs-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 16px;
        margin-right: 14px;
}

.dcs-task-info {
        flex: 1;
        min-width: 0;
}

.dcs-task-info strong {
        display: block;
        font-size: 14px;
        line-height: 1.4;
        color: var(--dcs-text);
}

.dcs-task-info span {
        color: var(--dcs-primary);
        font-size: 13px;
        font-weight: 600;
}

.dcs-task-left {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
}

.dcs-editor-field label {
        color: var(--dcs-muted);
        display: block;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 7px;
}

.dcs-editor-field .wp-editor-wrap {
        max-width: 100%;
}

/*--------------------------------------------------------------
# Daily Coin Limits Display
--------------------------------------------------------------*/
.dcs-daily-limits-bar {
        background: var(--dcs-card);
        border: 1px solid var(--dcs-line);
        border-radius: var(--dcs-radius-md);
        padding: 16px 20px;
        margin: 0 0 18px;
        box-shadow: var(--dcs-shadow-sm);
}

.dcs-daily-limits-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
        flex-wrap: wrap;
}

.dcs-daily-limits-header .dashicons {
        color: var(--dcs-primary);
        font-size: 20px;
        width: 20px;
        height: 20px;
}

.dcs-daily-limits-header strong {
        font-size: 15px;
        color: var(--dcs-text);
}

.dcs-daily-reset-timer {
        margin-left: auto;
        font-size: 12px;
        color: var(--dcs-muted);
        font-weight: 600;
        background: var(--dcs-bg);
        padding: 4px 10px;
        border-radius: var(--dcs-radius-full);
        display: inline-flex;
        align-items: center;
        gap: 4px;
}

.dcs-daily-reset-timer::before {
        content: '⏱';
        font-size: 12px;
}

.dcs-daily-limits-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
}

.dcs-daily-limit-item {
        text-align: center;
        padding: 12px 8px;
        border-radius: var(--dcs-radius-sm);
        background: var(--dcs-bg);
        transition: all var(--dcs-transition);
}

.dcs-daily-limit-item.is-limit-reached {
        background: var(--dcs-warning-light);
        border: 1px solid rgba(214, 158, 46, 0.2);
}

.dcs-daily-limit-label {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 600;
        color: var(--dcs-muted);
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
}

.dcs-daily-limit-label .dashicons {
        font-size: 14px;
        width: 14px;
        height: 14px;
        color: var(--dcs-primary);
}

.dcs-daily-limit-bar {
        background: #EDF2F7;
        border-radius: var(--dcs-radius-full);
        height: 6px;
        overflow: hidden;
        margin-bottom: 6px;
}

.dcs-daily-limit-fill {
        height: 100%;
        border-radius: var(--dcs-radius-full);
        background: linear-gradient(90deg, var(--dcs-primary), var(--dcs-primary-dark));
        transition: width 0.5s ease;
}

.dcs-limit-bar-reached {
        background: linear-gradient(90deg, var(--dcs-warning), #B7791F) !important;
}

.dcs-daily-limit-numbers {
        font-size: 13px;
        font-weight: 700;
        color: var(--dcs-text);
}

.dcs-limit-reached-text {
        color: var(--dcs-warning) !important;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
}

/*--------------------------------------------------------------
# Login Page
--------------------------------------------------------------*/
.dcs-login-shell {
        align-items: stretch;
        display: grid;
        gap: 0;
        grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
        overflow: hidden;
        border-radius: var(--dcs-radius-lg);
        box-shadow: var(--dcs-shadow-lg);
        max-width: 900px;
        margin: 0 auto;
}

.dcs-login-intro,
.dcs-portal-header {
        background: linear-gradient(135deg, #E55A2A, #FF6B35);
        color: #fff;
        padding: 40px 32px;
        position: relative;
        overflow: hidden;
}

.dcs-login-intro::before,
.dcs-portal-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
}

.dcs-login-intro::after,
.dcs-portal-header::after {
        content: '';
        position: absolute;
        bottom: -30%;
        right: 10%;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
}

.dcs-login-intro span,
.dcs-portal-header span {
        display: block;
        font-size: 12px;
        font-weight: 800;
        margin-bottom: 12px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: rgba(255, 255, 255, 0.85);
}

.dcs-login-intro h2,
.dcs-portal-header h2 {
        color: inherit;
        font-size: 28px;
        letter-spacing: 0;
        line-height: 1.15;
        margin: 0 0 14px;
}

.dcs-login-intro p {
        color: rgba(255, 255, 255, 0.88);
        font-size: 15px;
        line-height: 1.6;
        margin: 0;
}

.dcs-login-features {
        margin-top: 24px;
        display: grid;
        gap: 10px;
}

.dcs-login-feature {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
}

.dcs-login-feature .dashicons {
        font-size: 18px;
        width: 18px;
        height: 18px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        padding: 4px;
}

.dcs-login-card {
        background: var(--dcs-card);
        padding: 36px 32px;
        display: flex;
        flex-direction: column;
        justify-content: center;
}

.dcs-login-card form,
.dcs-login-card p {
        margin: 0;
}

.dcs-login-card label {
        color: var(--dcs-text);
        font-weight: 600;
        font-size: 13px;
        display: block;
        margin-bottom: 6px;
}

.dcs-login-card input[type="text"],
.dcs-login-card input[type="password"] {
        border: 1.5px solid var(--dcs-line);
        border-radius: var(--dcs-radius-sm);
        min-height: 44px;
        padding: 10px 14px;
        width: 100%;
        font-size: 14px;
        transition: border-color var(--dcs-transition), box-shadow var(--dcs-transition);
        outline: none;
        max-width: 100%;
}

.dcs-login-card input[type="text"]:focus,
.dcs-login-card input[type="password"]:focus {
        border-color: var(--dcs-primary);
        box-shadow: 0 0 0 3px var(--dcs-primary-glow);
}

.dcs-login-card input[type="submit"] {
        background: var(--dcs-primary);
        border: 0;
        border-radius: var(--dcs-radius-sm);
        color: #fff;
        cursor: pointer;
        font-weight: 700;
        font-size: 15px;
        padding: 12px 24px;
        width: 100%;
        transition: all var(--dcs-transition);
        box-shadow: 0 2px 6px rgba(255, 107, 53, 0.3);
}

.dcs-login-card input[type="submit"]:hover {
        background: var(--dcs-primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);
}

.dcs-login-links {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 18px;
}

.dcs-login-links a {
        color: var(--dcs-primary);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
}

.dcs-login-links a:hover {
        text-decoration: underline;
}

/* DCS Custom AJAX Login Form */
.dcs-login-messages {
        margin-bottom: 12px;
}

.dcs-login-messages .dcs-message {
        padding: 10px 14px;
        border-radius: var(--dcs-radius-sm);
        font-size: 13px;
        font-weight: 600;
}

.dcs-login-messages .dcs-message.is-error {
        background: var(--dcs-danger-light);
        color: var(--dcs-danger);
        border: 1px solid var(--dcs-danger);
}

.dcs-login-messages .dcs-message.is-ok {
        background: var(--dcs-ok-light);
        color: var(--dcs-ok);
        border: 1px solid var(--dcs-ok);
}

.dcs-login-field {
        margin-bottom: 16px;
}

.dcs-login-remember {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 18px;
        font-size: 13px;
        color: var(--dcs-muted);
}

.dcs-login-remember label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 400;
        cursor: pointer;
}

.dcs-login-remember input[type="checkbox"] {
        margin: 0;
        accent-color: var(--dcs-primary);
}

.dcs-login-submit {
        margin-top: 4px;
}

#dcs-login-form .dcs-button.dcs-login-submit {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px 24px;
        font-weight: 700;
        font-size: 15px;
}

#dcs-login-form .dcs-button.dcs-login-submit:disabled {
        opacity: 0.7;
        cursor: not-allowed;
}

/*--------------------------------------------------------------
# Admin Login (WP-Admin Style)
--------------------------------------------------------------*/
.dcs-admin-login-screen {
        align-items: center;
        background: var(--dcs-bg);
        border: 1px solid var(--dcs-line);
        display: flex;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        justify-content: center;
        margin: 0;
        padding: 40px 24px;
        border-radius: var(--dcs-radius-lg);
}

.dcs-admin-login-box {
        max-width: 400px;
        width: 100%;
}

.dcs-admin-login-header {
        background: linear-gradient(135deg, #E55A2A, #FF6B35);
        border-radius: var(--dcs-radius-md) var(--dcs-radius-md) 0 0;
        padding: 24px;
        text-align: center;
}

.dcs-admin-login-header strong {
        color: #fff;
        display: block;
        font-size: 20px;
        line-height: 1.25;
}

.dcs-admin-login-header span {
        color: rgba(255, 255, 255, 0.8);
        display: block;
        font-size: 13px;
        margin-top: 6px;
}

.dcs-admin-login-card {
        background: var(--dcs-card);
        border: 1px solid var(--dcs-line);
        border-top: 0;
        border-radius: 0 0 var(--dcs-radius-md) var(--dcs-radius-md);
        box-shadow: var(--dcs-shadow-lg);
        padding: 28px 24px;
}

.dcs-admin-login-card form,
.dcs-admin-login-card p {
        margin: 0;
}

.dcs-admin-login-card label {
        color: var(--dcs-text);
        display: block;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 6px;
}

.dcs-admin-login-card .login-username,
.dcs-admin-login-card .login-password {
        margin-bottom: 16px;
}

.dcs-admin-login-card input[type="text"],
.dcs-admin-login-card input[type="password"] {
        border: 1.5px solid var(--dcs-line);
        border-radius: var(--dcs-radius-sm);
        min-height: 44px;
        padding: 10px 14px;
        width: 100%;
        font-size: 14px;
        transition: border-color var(--dcs-transition), box-shadow var(--dcs-transition);
        outline: none;
        max-width: 100%;
}

.dcs-admin-login-card input[type="text"]:focus,
.dcs-admin-login-card input[type="password"]:focus {
        border-color: var(--dcs-primary);
        box-shadow: 0 0 0 3px var(--dcs-primary-glow);
}

.dcs-admin-login-card input[type="submit"] {
        background: var(--dcs-primary);
        border: 0;
        border-radius: var(--dcs-radius-sm);
        color: #fff;
        cursor: pointer;
        font-weight: 700;
        font-size: 15px;
        padding: 12px 20px;
        width: 100%;
        transition: all var(--dcs-transition);
        box-shadow: 0 2px 6px rgba(255, 107, 53, 0.3);
}

.dcs-admin-login-card input[type="submit"]:hover {
        background: var(--dcs-primary-dark);
}

/*--------------------------------------------------------------
# Portal Header & Menu
--------------------------------------------------------------*/
.dcs-portal-header {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
        flex-wrap: wrap;
        gap: 12px;
}

.dcs-secondary-button {
        background: rgba(255, 255, 255, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.38);
        border-radius: var(--dcs-radius-sm);
        color: #fff;
        cursor: pointer;
        font-weight: 700;
        font-size: 13px;
        padding: 10px 16px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all var(--dcs-transition);
        white-space: nowrap;
}

.dcs-secondary-button:hover {
        background: rgba(255, 255, 255, 0.28);
        color: #fff;
}

.dcs-portal-menu {
        background: var(--dcs-card);
        border: 1px solid var(--dcs-line);
        border-radius: var(--dcs-radius-md);
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 16px;
        padding: 8px;
        box-shadow: var(--dcs-shadow-sm);
}

.dcs-portal-menu a {
        border-radius: var(--dcs-radius-sm);
        color: var(--dcs-muted);
        font-weight: 600;
        font-size: 13px;
        padding: 10px 14px;
        text-decoration: none;
        transition: all var(--dcs-transition);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
}

.dcs-portal-menu a:hover {
        background: var(--dcs-primary-light);
        color: var(--dcs-primary);
}

.dcs-portal-menu a.is-active {
        background: var(--dcs-primary);
        color: #fff;
}

/*--------------------------------------------------------------
# Portal Actions
--------------------------------------------------------------*/
.dcs-portal-actions {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 18px;
}

.dcs-action-card {
        background: var(--dcs-card);
        border: 1px solid var(--dcs-line);
        border-radius: var(--dcs-radius-md);
        color: var(--dcs-text);
        display: block;
        padding: 20px;
        text-decoration: none;
        transition: all var(--dcs-transition);
        box-shadow: var(--dcs-shadow-sm);
}

.dcs-action-card:hover {
        border-color: var(--dcs-primary);
        box-shadow: var(--dcs-shadow-md);
        transform: translateY(-2px);
        color: var(--dcs-text);
}

.dcs-action-card-icon {
        width: 44px;
        height: 44px;
        border-radius: var(--dcs-radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        font-size: 20px;
}

.dcs-action-card-icon.submit {
        background: var(--dcs-primary-light);
        color: var(--dcs-primary);
}

.dcs-action-card-icon.tasks {
        background: #EBF8FF;
        color: var(--dcs-blue);
}

.dcs-action-card-icon.redeem {
        background: var(--dcs-ok-light);
        color: var(--dcs-ok);
}

.dcs-action-card-icon.achievements {
        background: var(--dcs-warning-light);
        color: var(--dcs-warning);
}

.dcs-action-card-icon.notifications {
        background: #FED7E2;
        color: #D53F8C;
}

.dcs-action-card-icon.leaderboard {
        background: #E9D8FD;
        color: #805AD5;
}

.dcs-action-card strong {
        display: block;
        font-size: 16px;
        margin-bottom: 5px;
        font-weight: 700;
}

.dcs-action-card span {
        color: var(--dcs-muted);
        font-size: 13px;
        line-height: 1.4;
}

/*--------------------------------------------------------------
# Admin Panel Layout
--------------------------------------------------------------*/
.dcs-portal-admin {
        background: var(--dcs-bg);
        border: 1px solid var(--dcs-line);
        border-radius: var(--dcs-radius-lg);
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        margin: 0;
        max-width: none;
        width: 100%;
}

/*--------------------------------------------------------------
# Left Sidebar Navigation
--------------------------------------------------------------*/
.dcs-admin-body {
        display: flex;
        min-height: 0;
}

.dcs-admin-sidebar {
        background: var(--dcs-card);
        border-right: 1px solid var(--dcs-line);
        width: 220px;
        flex-shrink: 0;
        overflow-y: auto;
}

.dcs-sidebar-nav {
        display: flex;
        flex-direction: column;
        padding: 12px 0;
}

.dcs-sidebar-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 18px;
        color: var(--dcs-muted);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        transition: all var(--dcs-transition);
        border-left: 3px solid transparent;
        white-space: nowrap;
}

.dcs-sidebar-link .dashicons {
        font-size: 18px;
        width: 18px;
        height: 18px;
        opacity: 0.7;
        flex-shrink: 0;
}

.dcs-sidebar-link:hover {
        color: var(--dcs-primary);
        background: var(--dcs-primary-light);
        border-left-color: var(--dcs-primary);
}

.dcs-sidebar-link:hover .dashicons {
        opacity: 1;
        color: var(--dcs-primary);
}

.dcs-sidebar-link.is-active {
        color: var(--dcs-primary);
        background: var(--dcs-primary-light);
        border-left-color: var(--dcs-primary);
        font-weight: 700;
}

.dcs-sidebar-link.is-active .dashicons {
        opacity: 1;
        color: var(--dcs-primary);
}

.dcs-sidebar-label .dcs-nav-badge {
        background: var(--dcs-primary);
        color: #fff;
        border-radius: var(--dcs-radius-full);
        font-size: 11px;
        font-weight: 700;
        padding: 1px 6px;
        margin-left: 4px;
        vertical-align: middle;
}

.dcs-admin-user-info-inline {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-right: 12px;
}

.dcs-admin-user-info-inline .dcs-admin-user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--dcs-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        flex-shrink: 0;
}

.dcs-admin-user-info-inline .dcs-admin-user-name {
        color: var(--dcs-text);
        font-weight: 600;
        font-size: 13px;
}

.dcs-admin-topbar-left {
        display: flex;
        flex-direction: column;
}

.dcs-admin-topbar-label {
        color: var(--dcs-muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
}

.dcs-admin-main {
        flex: 1;
        min-width: 0;
        padding: 0;
        overflow-x: hidden;
}

.dcs-admin-topbar {
        align-items: center;
        background: var(--dcs-card);
        border-bottom: 1px solid var(--dcs-line);
        display: flex;
        justify-content: space-between;
        min-height: 60px;
        padding: 12px 24px;
        gap: 12px;
}

.dcs-admin-topbar h2 {
        color: var(--dcs-text);
        font-size: 20px;
        letter-spacing: 0;
        line-height: 1.25;
        margin: 2px 0 0;
}

.dcs-admin-topbar-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
}

.dcs-admin-logout {
        background: var(--dcs-primary);
        border-radius: var(--dcs-radius-sm);
        padding: 9px 16px;
        font-size: 13px;
}

.dcs-admin-stats,
.dcs-admin-content-grid {
        display: grid;
        gap: 16px;
        padding: 24px;
}

.dcs-admin-stats {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding-bottom: 0;
}

.dcs-admin-widget,
.dcs-admin-panel {
        background: var(--dcs-card);
        border: 1px solid var(--dcs-line);
        box-shadow: var(--dcs-shadow-sm);
}

.dcs-admin-widget {
        padding: 20px;
        border-radius: var(--dcs-radius-md);
        transition: all var(--dcs-transition);
}

.dcs-admin-widget:hover {
        box-shadow: var(--dcs-shadow-md);
        border-color: rgba(255, 107, 53, 0.2);
}

.dcs-admin-widget span {
        color: var(--dcs-muted);
        display: block;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
}

.dcs-admin-widget strong {
        color: var(--dcs-text);
        display: block;
        font-size: 28px;
        line-height: 1.2;
        margin-top: 6px;
}

.dcs-admin-quicklinks {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 20px 24px 0;
}

.dcs-admin-quicklinks a {
        background: var(--dcs-primary);
        border: 1px solid var(--dcs-primary);
        border-radius: var(--dcs-radius-sm);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        padding: 10px 16px;
        text-decoration: none;
        transition: all var(--dcs-transition);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 2px 6px rgba(255, 107, 53, 0.25);
        white-space: nowrap;
}

.dcs-admin-quicklinks a:hover {
        background: var(--dcs-primary-dark);
        border-color: var(--dcs-primary-dark);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.dcs-admin-quicklinks a .dashicons {
        font-size: 16px;
        width: 16px;
        height: 16px;
}

.dcs-admin-content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dcs-admin-page-body {
        padding: 24px;
}

.dcs-admin-page-body > .dcs-app {
        max-width: none;
}

.dcs-admin-page-body .dcs-card,
.dcs-admin-page-body .dcs-hero {
        box-shadow: none;
}

.dcs-admin-panel {
        min-width: 0;
        padding: 20px;
        border-radius: var(--dcs-radius-md);
}

.dcs-admin-panel h3 {
        border-bottom: 1px solid var(--dcs-line);
        color: var(--dcs-text);
        font-size: 15px;
        letter-spacing: 0;
        margin: -20px -20px 16px;
        padding: 14px 20px;
        font-weight: 700;
}

.dcs-portal-admin .dcs-responsive-table th,
.dcs-portal-admin .dcs-responsive-table td {
        font-size: 13px;
        padding: 10px 8px;
}

.dcs-portal-admin .dcs-copy-input {
        border-color: var(--dcs-line);
        border-radius: var(--dcs-radius-sm);
}

.dcs-login-claim {
        margin-top: 18px;
}

/*--------------------------------------------------------------
# Redeem Voucher Grid
--------------------------------------------------------------*/
.dcs-redeem-vouchers {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
        margin-bottom: 16px;
}

.dcs-voucher-option {
        background: var(--dcs-card);
        border: 2px solid var(--dcs-line);
        border-radius: var(--dcs-radius-md);
        padding: 16px 12px;
        text-align: center;
        cursor: pointer;
        transition: all var(--dcs-transition);
}

.dcs-voucher-option:hover {
        border-color: var(--dcs-primary);
        box-shadow: var(--dcs-shadow-sm);
}

.dcs-voucher-option.is-selected {
        border-color: var(--dcs-primary);
        background: var(--dcs-primary-light);
}

.dcs-voucher-option .dashicons {
        font-size: 24px;
        width: 24px;
        height: 24px;
        color: var(--dcs-primary);
        margin-bottom: 8px;
}

.dcs-voucher-option strong {
        display: block;
        font-size: 13px;
        color: var(--dcs-text);
}

/*--------------------------------------------------------------
# Referral Section
--------------------------------------------------------------*/
.dcs-referral-section {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
}

.dcs-referral-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--dcs-radius-sm);
        background: var(--dcs-primary-light);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
}

.dcs-referral-icon .dashicons {
        font-size: 24px;
        width: 24px;
        height: 24px;
        color: var(--dcs-primary);
}

.dcs-referral-info {
        flex: 1;
        min-width: 0;
}

.dcs-referral-info strong {
        display: block;
        font-size: 14px;
        color: var(--dcs-text);
}

.dcs-referral-info span {
        display: block;
        font-size: 13px;
        color: var(--dcs-muted);
}

.dcs-referral-input {
        display: flex;
        gap: 8px;
        width: 100%;
        min-width: 0;
}

.dcs-copy-input {
        flex: 1;
        font-size: 13px !important;
        min-height: 40px !important;
        min-width: 0;
}

.dcs-copy-btn {
        background: var(--dcs-primary);
        border: 0;
        border-radius: var(--dcs-radius-sm);
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-weight: 700;
        font-size: 13px;
        padding: 8px 14px;
        white-space: nowrap;
        transition: all var(--dcs-transition);
        flex-shrink: 0;
}

.dcs-copy-btn:hover {
        background: var(--dcs-primary-dark);
}

/*--------------------------------------------------------------
# Share Button on Single Deal Pages
--------------------------------------------------------------*/
.dcs-share-box {
        margin-top: 16px;
        padding: 12px 0;
}

/*--------------------------------------------------------------
# Deal Stats Row (Dashboard)
--------------------------------------------------------------*/
.dcs-deal-stats-row {
        display: flex;
        gap: 16px;
        margin-bottom: 16px;
}

.dcs-deal-stat-item {
        flex: 1;
        text-align: center;
        padding: 12px;
        border-radius: var(--dcs-radius-sm);
        background: var(--dcs-bg);
}

.dcs-deal-stat-item strong {
        display: block;
        font-size: 24px;
        color: var(--dcs-text);
        line-height: 1.2;
}

.dcs-deal-stat-item span {
        font-size: 12px;
        color: var(--dcs-muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
}

.dcs-deal-stat-published {
        background: var(--dcs-ok-light);
}

.dcs-deal-stat-published strong {
        color: var(--dcs-ok);
}

.dcs-deal-stat-pending {
        background: var(--dcs-warning-light);
}

.dcs-deal-stat-pending strong {
        color: var(--dcs-warning);
}

/*--------------------------------------------------------------
# Deal Row (My Deals)
--------------------------------------------------------------*/
.dcs-deal-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid var(--dcs-line);
}

.dcs-deal-row:last-child {
        border-bottom: none;
}

.dcs-deal-row-icon {
        font-size: 18px;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
}

.dcs-deal-row-title {
        flex: 1;
        font-size: 14px;
        color: var(--dcs-text);
        text-decoration: none;
        font-weight: 500;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.dcs-deal-row-title:hover {
        color: var(--dcs-primary);
}

.dcs-deal-row-status {
        flex-shrink: 0;
}

/*--------------------------------------------------------------
# Coin Summary (Coin History page)
--------------------------------------------------------------*/
.dcs-coin-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
}

.dcs-coin-summary-item {
        text-align: center;
        padding: 16px 12px;
        background: var(--dcs-bg);
        border-radius: var(--dcs-radius-sm);
}

.dcs-coin-summary-item .dcs-stat-icon {
        margin: 0 auto 8px;
}

.dcs-coin-summary-item span {
        font-size: 12px;
        color: var(--dcs-muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        display: block;
}

.dcs-coin-summary-item strong {
        font-size: 22px;
        line-height: 1.2;
        margin-top: 4px;
        display: block;
}

.dcs-coin-summary-item small {
        display: block;
        margin-top: 4px;
}

/*--------------------------------------------------------------
# Achievements Grid
--------------------------------------------------------------*/
.dcs-achievements-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 18px;
}

.dcs-achievement-card {
        background: var(--dcs-card);
        border: 1px solid var(--dcs-line);
        border-radius: var(--dcs-radius-md);
        padding: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        transition: all var(--dcs-transition);
}

.dcs-achievement-card:hover {
        border-color: var(--dcs-primary);
        box-shadow: var(--dcs-shadow-sm);
}

.dcs-achievement-card.is-earned {
        border-color: var(--dcs-ok);
        background: var(--dcs-ok-light);
}

.dcs-achievement-card.is-locked {
        opacity: 0.7;
}

.dcs-achievement-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--dcs-primary-light);
        color: var(--dcs-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        flex-shrink: 0;
}

.dcs-achievement-card.is-earned .dcs-achievement-icon {
        background: var(--dcs-ok-light);
        color: var(--dcs-ok);
}

.dcs-achievement-info strong {
        font-size: 14px;
        color: var(--dcs-text);
        display: block;
}

.dcs-achievement-info span {
        font-size: 12px;
        color: var(--dcs-muted);
        display: block;
        margin-top: 2px;
}

.dcs-achievement-reward {
        color: var(--dcs-primary);
        font-size: 12px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin-top: 4px;
}

.dcs-achievement-status {
        flex-shrink: 0;
}

/*--------------------------------------------------------------
# Leaderboard Styles
--------------------------------------------------------------*/
.dcs-leaderboard-user {
        display: flex;
        align-items: center;
        gap: 10px;
}

.dcs-leaderboard-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--dcs-primary-light);
        color: var(--dcs-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 14px;
        flex-shrink: 0;
}

.dcs-leaderboard-name {
        font-weight: 600;
        font-size: 14px;
        color: var(--dcs-text);
}

.dcs-rank-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        font-weight: 700;
        font-size: 13px;
        background: #EDF2F7;
        color: var(--dcs-muted);
}

.dcs-rank-1 {
        background: linear-gradient(135deg, #F6E05E, #D69E2E);
        color: #fff;
}

.dcs-rank-2 {
        background: linear-gradient(135deg, #CBD5E0, #A0AEC0);
        color: #fff;
}

.dcs-rank-3 {
        background: linear-gradient(135deg, #ED8936, #C05621);
        color: #fff;
}

.dcs-coins-display {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-weight: 700;
        color: var(--dcs-primary);
}

/*--------------------------------------------------------------
# Notifications
--------------------------------------------------------------*/
.dcs-notifications-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 16px;
}

.dcs-notification-list {
        display: grid;
        gap: 12px;
}

.dcs-notification-item {
        display: flex;
        gap: 12px;
        padding: 14px;
        border-radius: var(--dcs-radius-sm);
        background: var(--dcs-bg);
        border: 1px solid var(--dcs-line);
        align-items: flex-start;
}

.dcs-notification-item.is-unread {
        background: var(--dcs-primary-light);
        border-color: rgba(255, 107, 53, 0.2);
}

.dcs-notification-badge {
        flex-shrink: 0;
}

.dcs-notification-content {
        flex: 1;
        min-width: 0;
}

.dcs-notification-content strong {
        display: block;
        font-size: 14px;
        color: var(--dcs-text);
        margin-bottom: 4px;
}

.dcs-notification-content span {
        display: block;
        font-size: 13px;
        color: var(--dcs-muted);
        line-height: 1.4;
}

.dcs-notification-content small {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        color: var(--dcs-muted);
}

/*--------------------------------------------------------------
# Empty States
--------------------------------------------------------------*/
.dcs-empty-state {
        text-align: center;
        padding: 40px 20px;
}

.dcs-empty-state .dashicons {
        font-size: 48px;
        width: 48px;
        height: 48px;
        color: var(--dcs-muted);
        opacity: 0.3;
}

.dcs-empty-state h3 {
        margin: 12px 0 6px;
        color: var(--dcs-text);
        font-size: 16px;
}

.dcs-empty-state p {
        color: var(--dcs-muted);
        font-size: 14px;
        margin: 0 0 16px;
}

/*--------------------------------------------------------------
# Notification Bell
--------------------------------------------------------------*/
.dcs-notification-bell {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--dcs-primary-light);
        color: var(--dcs-primary);
        text-decoration: none;
        transition: all var(--dcs-transition);
}

.dcs-notification-bell:hover {
        background: var(--dcs-primary);
        color: #fff;
}

.dcs-notification-bell .dashicons {
        font-size: 18px;
        width: 18px;
        height: 18px;
}

.dcs-bell-count {
        position: absolute;
        top: -4px;
        right: -4px;
        background: var(--dcs-danger);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
}

/*--------------------------------------------------------------
# Spin Wheel (Dashboard)
--------------------------------------------------------------*/
.dcs-spin-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
}

.dcs-spin-wheel {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        border: 3px solid rgba(255, 255, 255, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all var(--dcs-transition);
}

.dcs-spin-wheel:hover {
        transform: rotate(30deg);
        border-color: rgba(255, 255, 255, 0.7);
}

.dcs-spin-wheel-inner .dashicons {
        font-size: 28px;
        width: 28px;
        height: 28px;
        color: #fff;
}

/*--------------------------------------------------------------
# Submit Actions
--------------------------------------------------------------*/
.dcs-submit-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.dcs-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--dcs-line);
}

/*--------------------------------------------------------------
# Keyframes
--------------------------------------------------------------*/
@keyframes dcs-fill {
        from { width: 0; }
}

/*--------------------------------------------------------------
# MOBILE RESPONSIVE — 768px and below
--------------------------------------------------------------*/
@media (max-width: 768px) {
        /* ---- Root ---- */
        .dcs-app {
                border-radius: 0;
        }

        /* ---- Hero — stack vertically ---- */
        .dcs-hero {
                flex-direction: column;
                padding: 20px 16px;
                gap: 14px;
                align-items: flex-start;
        }

        .dcs-hero h2 {
                font-size: 20px;
        }

        /* ---- Stats — 2 columns on mobile ---- */
        .dcs-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
        }

        .dcs-grid {
                grid-template-columns: 1fr;
                gap: 12px;
        }

        .dcs-card {
                padding: 16px;
        }

        .dcs-card strong {
                font-size: 22px;
        }

        /* ---- Forms — single column on mobile ---- */
        .dcs-ajax-form,
        .dcs-deal-form {
                grid-template-columns: 1fr;
        }

        /* ---- Login Shell — stack vertically ---- */
        .dcs-login-shell {
                grid-template-columns: 1fr;
                border-radius: var(--dcs-radius-md);
        }

        .dcs-login-intro {
                padding: 28px 20px;
        }

        .dcs-login-intro h2,
        .dcs-portal-header h2 {
                font-size: 22px;
        }

        .dcs-login-card {
                padding: 28px 20px;
        }

        /* ---- Admin Login ---- */
        .dcs-admin-login-screen {
                padding: 24px 12px;
                border-radius: var(--dcs-radius-md);
        }

        /* ---- Portal Header ---- */
        .dcs-portal-header {
                padding: 24px 16px;
                flex-direction: column;
                align-items: flex-start;
        }

        /* ---- Daily Limits — responsive on mobile ---- */
        .dcs-daily-limits-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
        }

        .dcs-daily-limit-item {
                padding: 8px 6px;
        }

        .dcs-daily-limit-label {
                font-size: 11px;
        }

        .dcs-daily-limits-header {
                gap: 6px;
        }

        .dcs-daily-reset-timer {
                margin-left: 0;
                width: 100%;
                justify-content: center;
                margin-top: 6px;
        }

        /* ---- Portal Menu — horizontal scroll ---- */
        .dcs-portal-menu {
                overflow-x: auto;
                flex-wrap: nowrap;
                -webkit-overflow-scrolling: touch;
                padding: 6px;
                gap: 2px;
        }

        .dcs-portal-menu a {
                flex-shrink: 0;
                padding: 8px 12px;
                font-size: 12px;
        }

        /* ---- Portal Actions — stack ---- */
        .dcs-portal-actions {
                grid-template-columns: 1fr;
                gap: 10px;
        }

        /* ---- Admin Body — sidebar on top ---- */
        .dcs-admin-body {
                flex-direction: column;
        }

        .dcs-admin-sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid var(--dcs-line);
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
        }

        .dcs-sidebar-nav {
                flex-direction: row;
                padding: 0 8px;
                min-width: max-content;
        }

        .dcs-sidebar-link {
                padding: 12px 14px;
                border-left: none;
                border-bottom: 3px solid transparent;
        }

        .dcs-sidebar-link.is-active {
                border-left-color: transparent;
                border-bottom-color: var(--dcs-primary);
        }

        .dcs-sidebar-link:hover {
                border-left-color: transparent;
                border-bottom-color: var(--dcs-primary);
        }

        .dcs-sidebar-label {
                display: none;
        }

        .dcs-sidebar-link .dashicons {
                font-size: 20px;
                width: 20px;
                height: 20px;
        }

        /* ---- Admin Topbar ---- */
        .dcs-admin-topbar {
                flex-wrap: wrap;
                gap: 8px;
                padding: 12px 16px;
        }

        .dcs-admin-topbar h2 {
                font-size: 16px;
        }

        .dcs-admin-topbar-actions {
                gap: 8px;
                flex-wrap: wrap;
        }

        .dcs-admin-user-name {
                display: none;
        }

        .dcs-admin-logout span {
                display: none;
        }

        /* ---- Admin Stats — 2 columns on mobile ---- */
        .dcs-admin-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                padding: 16px;
                gap: 10px;
        }

        .dcs-admin-stats .dcs-admin-widget strong {
                font-size: 22px;
        }

        .dcs-admin-content-grid {
                grid-template-columns: 1fr;
                padding: 16px;
        }

        .dcs-admin-page-body {
                padding: 16px;
        }

        .dcs-admin-quicklinks {
                padding: 16px 16px 0;
                gap: 8px;
        }

        .dcs-admin-quicklinks a {
                font-size: 12px;
                padding: 8px 12px;
        }

        .dcs-admin-panel h3 {
                margin: -16px -16px 14px;
                padding: 12px 16px;
                font-size: 14px;
        }

        /* ---- Tables — smaller padding on mobile ---- */
        .dcs-responsive-table {
                margin: 0 -8px;
                padding: 0 8px;
        }

        .dcs-responsive-table table {
                min-width: 420px;
        }

        .dcs-responsive-table th,
        .dcs-responsive-table td {
                padding: 8px 6px;
                font-size: 12px;
        }

        /* ---- Referral — stack ---- */
        .dcs-referral-section {
                flex-direction: column;
                align-items: flex-start;
        }

        .dcs-referral-input {
                width: 100%;
                flex-direction: column;
        }

        .dcs-copy-btn {
                width: 100%;
                justify-content: center;
        }

        /* ---- Redeem Vouchers — smaller on mobile ---- */
        .dcs-redeem-vouchers {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        /* ---- Tasks ---- */
        .dcs-task {
                padding: 12px;
                flex-wrap: wrap;
        }

        .dcs-task-left {
                flex: 1;
                min-width: 0;
        }

        /* ---- Deal Stats Row ---- */
        .dcs-deal-stats-row {
                flex-direction: row;
                gap: 10px;
        }

        .dcs-deal-stat-item strong {
                font-size: 20px;
        }

        /* ---- Coin Summary ---- */
        .dcs-coin-summary {
                grid-template-columns: 1fr;
                gap: 10px;
        }

        .dcs-coin-summary-item {
                padding: 12px;
        }

        .dcs-coin-summary-item strong {
                font-size: 18px;
        }

        /* ---- Achievements — single column ---- */
        .dcs-achievements-grid {
                grid-template-columns: 1fr;
                gap: 10px;
        }

        .dcs-achievement-card {
                flex-direction: row;
                text-align: left;
                padding: 14px;
                gap: 14px;
        }

        .dcs-achievement-icon {
                width: 40px;
                height: 40px;
                font-size: 18px;
        }

        /* ---- Leaderboard ---- */
        .dcs-leaderboard-user {
                gap: 8px;
        }

        .dcs-leaderboard-avatar {
                width: 28px;
                height: 28px;
                font-size: 12px;
        }

        .dcs-leaderboard-name {
                font-size: 13px;
        }

        /* ---- Notifications ---- */
        .dcs-notification-item {
                flex-direction: column;
                gap: 8px;
                padding: 12px;
        }

        /* ---- Deal Row ---- */
        .dcs-deal-row {
                gap: 8px;
        }

        .dcs-deal-row-title {
                font-size: 13px;
        }

        /* ---- Spin Wheel ---- */
        .dcs-spin-container {
                width: 100%;
        }

        .dcs-spin-wheel {
                width: 50px;
                height: 50px;
        }

        /* ---- Buttons ---- */
        .dcs-button {
                padding: 10px 16px;
                font-size: 13px;
        }

        /* ---- Submit Actions ---- */
        .dcs-submit-actions {
                flex-direction: column;
                align-items: stretch;
        }

        .dcs-submit-actions .dcs-button {
                width: 100%;
        }

        /* ---- Section Titles ---- */
        .dcs-section-title h2,
        .dcs-section-title h3 {
                font-size: 16px;
        }

        /* ---- Discount Display ---- */
        .dcs-discount-badge-preview {
                padding: 6px 10px;
        }

        .dcs-discount-badge-preview strong {
                font-size: 14px;
        }

        /* ---- Pagination ---- */
        .dcs-pagination {
                flex-wrap: wrap;
        }
}

/*--------------------------------------------------------------
# EXTRA SMALL — 480px and below (phones)
--------------------------------------------------------------*/
@media (max-width: 480px) {
        .dcs-app {
                font-size: 14px;
        }

        .dcs-hero {
                padding: 16px 14px;
        }

        .dcs-hero h2 {
                font-size: 18px;
        }

        .dcs-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
        }

        .dcs-card {
                padding: 14px;
                margin-bottom: 12px;
        }

        .dcs-card strong {
                font-size: 20px;
        }

        .dcs-admin-stats {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                padding: 12px;
        }

        .dcs-admin-widget {
                padding: 14px;
        }

        .dcs-admin-widget strong {
                font-size: 20px;
        }

        .dcs-admin-quicklinks a {
                font-size: 11px;
                padding: 7px 10px;
                gap: 4px;
        }

        .dcs-admin-quicklinks a .dashicons {
                font-size: 14px;
                width: 14px;
                height: 14px;
        }

        .dcs-portal-header h2 {
                font-size: 20px;
        }

        .dcs-login-intro {
                padding: 20px 16px;
        }

        .dcs-login-intro h2 {
                font-size: 20px;
        }

        .dcs-login-card {
                padding: 20px 16px;
        }

        .dcs-task-icon {
                width: 32px;
                height: 32px;
                margin-right: 10px;
        }

        .dcs-task-info strong {
                font-size: 13px;
        }

        .dcs-deal-stats-row {
                gap: 8px;
        }

        .dcs-deal-stat-item {
                padding: 10px 8px;
        }

        .dcs-deal-stat-item strong {
                font-size: 18px;
        }

        .dcs-redeem-vouchers {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
        }

        .dcs-voucher-option {
                padding: 12px 8px;
        }

        /* Tables — even tighter on very small screens */
        .dcs-responsive-table {
                margin: 0 -12px;
                padding: 0 8px;
        }

        .dcs-responsive-table table {
                min-width: 360px;
        }

        .dcs-responsive-table th,
        .dcs-responsive-table td {
                padding: 6px 4px;
                font-size: 11px;
        }

        .dcs-pill {
                font-size: 10px;
                padding: 3px 6px;
                gap: 2px;
        }

        .dcs-section-title {
                gap: 6px;
        }

        .dcs-section-title h2,
        .dcs-section-title h3 {
                font-size: 15px;
        }

        .dcs-button {
                padding: 9px 14px;
                font-size: 12px;
        }
}