div#mid {
    background-image: none;
    float: none;
    height: auto;
    margin: 0 auto;
    width: 1030px !important;
}
div#content.build {
    overflow: visible !important;
}
div#content.build div#build.gid37 {
    position: relative;
    z-index: 4;
}

/* System message (announcement) - HTML content rendering */
.system-message {
    padding: 12px 16px;
    margin: 12px 0;
    background: #f8f6f0;
    border: 1px solid #c9b07a;
    border-radius: 4px;
    line-height: 1.5;
    color: #333;
    max-width: 100%;
    overflow-wrap: break-word;
}
.system-message h1,
.system-message h2,
.system-message h3 {
    margin: 0.5em 0 0.25em;
    color: #5d4e37;
}
.system-message h1:first-child,
.system-message h2:first-child,
.system-message h3:first-child {
    margin-top: 0;
}
.system-message p {
    margin: 0.5em 0;
}
.system-message img {
    max-width: 100%;
    /* height: auto; */
    vertical-align: middle;
}
.system-message a {
    color: #71D000;
    text-decoration: underline;
}
.system-message a:hover {
    color: #5ab800;
}
.system-message.priority-high,
.system-message.priority-urgent {
    background: #fff5e6;
    border-color: #e67e22;
}

/* a2b2: sitter context (history/top-up belong to account owner) */
p.a2b2-sitter-notice,
div.plus-sitter-topup-notice {
    margin: 8px 0 12px;
    padding: 8px 10px;
    background: #fff8e6;
    border: 1px solid #e6d08a;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.35;
    color: #5c4a1a;
}

/* a2b2 Account Statement: table scroll when too wide for container */
div#products.a2b2-history .a2b2-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}
div#products.a2b2-history table.plusFunctions {
    table-layout: fixed;
    width: 100%;
    min-width: 600px;
}
/*
 * Top-up Account Statement: give Serial a real share of width + floor min table width.
 * Narrow layout scrolls horizontally (.a2b2-table-wrap) instead of crushing columns onto each other.
 */
div#products.a2b2-history table.plusFunctions.a2b2-topup-statement {
    min-width: 780px;
}
div#products.a2b2-history table.plusFunctions.a2b2-topup-statement col.a2b2-col-no { width: 5%; }
div#products.a2b2-history table.plusFunctions.a2b2-topup-statement col.a2b2-col-serial { width: 24%; }
div#products.a2b2-history table.plusFunctions.a2b2-topup-statement col.a2b2-col-price { width: 12%; }
div#products.a2b2-history table.plusFunctions.a2b2-topup-statement col.a2b2-col-base { width: 10%; }
div#products.a2b2-history table.plusFunctions.a2b2-topup-statement col.a2b2-col-bonus { width: 10%; }
div#products.a2b2-history table.plusFunctions.a2b2-topup-statement col.a2b2-col-promo { width: 17%; }
div#products.a2b2-history table.plusFunctions.a2b2-topup-statement col.a2b2-col-date { width: 12%; }
div#products.a2b2-history table.plusFunctions.a2b2-topup-statement col.a2b2-col-status { width: 10%; }

div#products.a2b2-history table.plusFunctions.a2b2-topup-statement td.a2b2-serial-cell {
    min-width: 11.5rem;
    padding-right: 6px;
    overflow: hidden;
    vertical-align: middle;
}
div#products.a2b2-history table.plusFunctions.a2b2-topup-statement td.a2b2-serial-cell .a2b2-serial {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
div#products.a2b2-history table.plusFunctions.a2b2-topup-statement span.a2b2-serial[title] {
    cursor: help;
    border-bottom: 1px dotted #999;
}

/* Transaction Log: column widths + min table width (horizontal scroll when narrow) */
div#products.a2b2-history table.plusFunctions.a2b2-transaction-log {
    min-width: 820px;
}
div#products.a2b2-history table.plusFunctions.a2b2-transaction-log col.a2b2-log-col-no { width: 5%; }
div#products.a2b2-history table.plusFunctions.a2b2-transaction-log col.a2b2-log-col-date { width: 12%; }
div#products.a2b2-history table.plusFunctions.a2b2-transaction-log col.a2b2-log-col-type { width: 9%; }
div#products.a2b2-history table.plusFunctions.a2b2-transaction-log col.a2b2-log-col-cat { width: 14%; }
div#products.a2b2-history table.plusFunctions.a2b2-transaction-log col.a2b2-log-col-amt { width: 11%; }
div#products.a2b2-history table.plusFunctions.a2b2-transaction-log col.a2b2-log-col-bal { width: 14%; }
div#products.a2b2-history table.plusFunctions.a2b2-transaction-log col.a2b2-log-col-desc { width: 35%; }

div#products.a2b2-history table.plusFunctions.a2b2-transaction-log td.a2b2-log-desc-cell {
    min-width: 12rem;
    overflow: hidden;
    vertical-align: middle;
}
div#products.a2b2-history table.plusFunctions.a2b2-transaction-log td.a2b2-log-desc-cell .a2b2-log-desc {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
div#products.a2b2-history table.plusFunctions.a2b2-transaction-log span.a2b2-log-desc[title] {
    cursor: help;
    border-bottom: 1px dotted #999;
}

/* a2b2 Transaction Log: tabs and filter */
div.a2b2-tabs a {
    padding: 2px 8px;
    text-decoration: none;
}
div.a2b2-tabs a.selected {
    font-weight: bold;
    color: #71D000;
}
form.a2b2-log-filter table td {
    vertical-align: middle;
}

div#side_navi {
    height: auto !important;
    /* Important Regel für moderne Browser */
    height: 453px;
    /* Mindesthöhe für den IE */
    min-height: 453px;
    width: 205px !important;
}

.menu-section {
    width: 180px !important;
}

.plus-active {
    color: #71D000;
}

.plus-inactive {
    color: #FF6F0F;
}

/* Plus page action buttons (T3.6 style) */
div.plus table.plusFunctions td.act a.build {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(to bottom, #C9B07A 0%, #A68B4E 100%);
    color: #fff !important;
    text-decoration: none !important;
    border: 1px solid #8B7355;
    border-radius: 3px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
div.plus table.plusFunctions td.act a.build:hover {
    background: linear-gradient(to bottom, #D4BE8A 0%, #B69B5E 100%);
    border-color: #9A7F5F;
}

/* ===== Auto-queue (Special Waiting) buttons — Build/Upgrade ===== */
.auto-queue-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.auto-queue-buttons form {
    display: inline;
}
.btn-auto-queue {
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #5c4a2a !important;
    text-decoration: none !important;
    background: linear-gradient(to bottom, #f5e6c8 0%, #e8d4a8 100%);
    border: 1px solid #c9a227;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-auto-queue:hover {
    background: linear-gradient(to bottom, #faf0dc 0%, #f0e2b8 100%);
    border-color: #b8921f;
    box-shadow: 0 2px 4px rgba(201, 162, 39, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-auto-queue:active {
    background: linear-gradient(to bottom, #e8d4a8 0%, #ddc890 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.btn-auto-queue img {
    vertical-align: middle;
    height: 14px;
    width: auto;
}

/* ===== Plus Top-up & Daily Claim — Card layout with icons ===== */
.plus-topup-page {
    max-width: 100%;
}
.plus-topup-page .plus-card-container {
    margin-bottom: 12px;
}
.plus-card-container {
    background: #F4F3F0;
    border: 1px solid #DDD;
    border-radius: 6px;
    padding: 20px;
    margin: 10px 0;
    max-width: 100%;
}
/* Promo section: Your active + All promos */
.plus-promo-section {
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 640px) {
    .plus-promo-section {
        grid-template-columns: 1fr;
    }
}
.plus-promo-active-block,
.plus-promo-all-block {
    background: #fff;
    border: 1px solid #C7C3B8;
    border-radius: 6px;
    padding: 14px 18px;
}
.plus-promo-active-block.has-promo {
    background: linear-gradient(135deg, #fff8e7 0%, #ffe8b8 100%);
    border-color: #E5A822;
    box-shadow: 0 1px 4px rgba(229, 168, 34, 0.2);
}
.plus-promo-active-label,
.plus-promo-all-label {
    /*font-size: 11px;*/
    font-weight: bold;
    color: #784F28;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.plus-promo-active-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #5c4a2a;
}
.plus-promo-active-content.has-promo {
    font-weight: 600;
}
.plus-promo-active-icon img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}
.plus-promo-none {
    color: #888;
    font-style: italic;
}
.plus-promo-all-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.plus-promo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #666;
    padding: 4px 0;
    border-bottom: 1px solid #eee;
}
.plus-promo-item:last-child {
    border-bottom: none;
}
.plus-promo-item.is-active {
    color: #2E7D32;
    font-weight: 600;
}
.plus-promo-item.eligible {
    color: #5c4a2a;
}
.plus-promo-badge {
    display: inline-block;
    min-width: 36px;
    padding: 2px 6px;
    background: #E8E4DC;
    border-radius: 4px;
    font-weight: bold;
    color: #784F28;
    /*font-size: 11px;*/
}
.plus-promo-item.is-active .plus-promo-badge {
    background: #C8E6C9;
    color: #2E7D32;
}
.plus-promo-desc {
    flex: 1;
}
.plus-promo-until {
    /*font-size: 11px;*/
    color: #888;
}
.plus-promo-empty {
    color: #999;
    font-style: italic;
}
.plus-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid #C9B07A;
}
.plus-card-header .plus-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.plus-card-header .plus-icon svg,
.plus-card-header .plus-icon img {
    width: 100%;
    height: 100%;
}
.plus-card-header h2 {
    margin: 0;
    font-size: 18px;
    color: #784F28;
    font-weight: bold;
}
.plus-card-header .plus-brand {
    color: #71D000;
}
.plus-card-header .plus-brand-alt {
    color: #FF6F0F;
}
.plus-topup-tabs {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 12px 0;
    border-bottom: 1px solid #C7C3B8;
}
.plus-topup-tab {
    appearance: none;
    border: 1px solid #C7C3B8;
    border-bottom: none;
    background: #E8E4DC;
    color: #5D4E37;
    border-radius: 6px 6px 0 0;
    padding: 10px 18px;
    font-weight: bold;
    cursor: pointer;
    min-height: 38px;
}
.plus-topup-tab.is-active {
    background: #F4F3F0;
    color: #784F28;
    box-shadow: inset 0 3px 0 #E5A822;
}
.plus-topup-tab:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.plus-topup-panel {
    display: none;
}
.plus-topup-panel.is-active {
    display: block;
}
.truewallet-card code {
    overflow-wrap: anywhere;
    color: #5D4E37;
    background: #EFE8D8;
    border: 1px solid #DDD0B8;
    border-radius: 4px;
    padding: 1px 4px;
}
.truewallet-guide {
    margin-bottom: 18px;
}
.truewallet-guide h3,
.truewallet-rate-title {
    margin: 0 0 8px 0;
    color: #784F28;
    font-size: 16px;
    font-weight: bold;
}
.truewallet-guide ol {
    margin: 0;
    padding-left: 22px;
    color: #5D4E37;
    line-height: 1.55;
}
.truewallet-note,
.truewallet-examples {
    margin: 12px 0 0 0;
    color: #666;
    font-size: 13px;
    line-height: 1.45;
}
.truewallet-howto-images {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}
.truewallet-howto-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    border: 1px solid #DDD0B8;
    object-fit: cover;
}
.truewallet-promo-section,
.truewallet-calculator {
    margin-top: 16px;
}
.truewallet-calculator {
    background: #fff;
    border: 1px solid #C7C3B8;
    border-radius: 6px;
    padding: 14px;
}
.truewallet-calculator label {
    display: block;
    margin-bottom: 6px;
    color: #5D4E37;
    font-weight: bold;
}
.truewallet-calc-result {
    display: none;
    margin-top: 12px;
    border-radius: 6px;
    padding: 12px 14px;
    line-height: 1.45;
}
.truewallet-calc-result.success,
.truewallet-calc-result.error,
.truewallet-calc-result.pending {
    display: block;
}
.truewallet-calc-result.success {
    background: #E8F5E9;
    border: 1px solid #8BC34A;
    color: #2E7D32;
}
.truewallet-calc-result.error {
    background: #FDECEA;
    border: 1px solid #E57373;
    color: #9F2D24;
}
.truewallet-calc-result.pending {
    background: #FFF8E1;
    border: 1px solid #E5A822;
    color: #784F28;
}
@media (max-width: 600px) {
    .truewallet-howto-images {
        grid-template-columns: 1fr;
    }
}
.truewallet-rate-box {
    background: #fff;
    border: 1px solid #C7C3B8;
    border-radius: 6px;
    padding: 14px;
    margin-top: 18px;
    overflow-x: auto;
}
.truewallet-rate-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 12px;
}
.truewallet-rate-table th,
.truewallet-rate-table td {
    border-bottom: 1px solid #EEE5D3;
    padding: 7px 6px;
    text-align: left;
    vertical-align: top;
}
.truewallet-rate-table tr:last-child th,
.truewallet-rate-table tr:last-child td {
    border-bottom: none;
}
.truewallet-rate-table th {
    color: #784F28;
    white-space: nowrap;
}
.truewallet-rate-package {
    color: #5D4E37;
    font-weight: bold;
    margin-bottom: 3px;
}
.truewallet-form label {
    display: block;
    margin-bottom: 6px;
    color: #5D4E37;
    font-weight: bold;
}
.truewallet-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.truewallet-input-row input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #C7C3B8;
    border-radius: 4px;
    min-height: 40px;
    padding: 9px 10px;
    color: #333;
    background: #fff;
}
.truewallet-input-row .btn-claim {
    min-height: 40px;
    white-space: nowrap;
}
.truewallet-status {
    display: none;
    margin-top: 14px;
    border-radius: 6px;
    padding: 12px 14px;
    line-height: 1.45;
}
.truewallet-status.success,
.truewallet-status.error,
.truewallet-status.warning,
.truewallet-status.pending {
    display: block;
}
.truewallet-status.success {
    background: #E8F5E9;
    border: 1px solid #8BC34A;
    color: #2E7D32;
}
.truewallet-status.error {
    background: #FDECEA;
    border: 1px solid #E57373;
    color: #9F2D24;
}
.truewallet-status.warning,
.truewallet-status.pending {
    background: #FFF8E1;
    border: 1px solid #E5A822;
    color: #784F28;
}
@media (max-width: 720px) {
    .truewallet-input-row {
        grid-template-columns: 1fr;
    }
    .plus-topup-tabs {
        overflow-x: auto;
    }
    .plus-topup-tab {
        flex: 0 0 auto;
    }
}
.plus-fomo-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #fff8e7 0%, #ffe8b8 100%);
    border: 1px solid #E5A822;
    border-radius: 6px;
    font-weight: 600;
    color: #5c4a2a;
}
.plus-fomo-banner .plus-fomo-icon {
    flex-shrink: 0;
}
.plus-fomo-banner .plus-fomo-icon img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}
.plus-package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.plus-packages-block {
    padding: 20px;
}
.plus-package-card {
    background: #fff;
    border: 1px solid #C7C3B8;
    border-radius: 6px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.plus-package-card:hover {
    border-color: #C9B07A;
    box-shadow: 0 2px 8px rgba(201,176,122,0.25);
}
/* Popular package highlight — Pack C "ยอดนิยม" */
.plus-package-card.pkg-popular {
    border: 2px solid #E67E22;
    background: linear-gradient(135deg, #FFF8F0 0%, #FFFFFF 100%);
}
.plus-package-card.pkg-popular::before {
    content: '★ Most Popular';
    display: block;
    text-align: center;
    /*font-size: 11px;*/
    font-weight: bold;
    color: #fff;
    background: #E67E22;
    border-radius: 4px;
    padding: 3px 8px;
    margin-bottom: 2px;
}
/* Recommended package highlight — Pack G */
.plus-package-card.pkg-recommended {
    border: 2px solid #8E44AD;
    background: linear-gradient(135deg, #F8F0FF 0%, #FFFFFF 100%);
}
.plus-package-card.pkg-recommended::before {
    content: '💎 Recommended';
    display: block;
    text-align: center;
    /*font-size: 11px;*/
    font-weight: bold;
    color: #fff;
    background: linear-gradient(90deg, #8E44AD, #9B59B6);
    border-radius: 4px;
    padding: 3px 8px;
    margin-bottom: 2px;
}
/* VIP/Whale package highlight — Pack E */
.plus-package-card.pkg-vip {
    border: 2px solid #C9A227;
    background: linear-gradient(135deg, #FFFEF0 0%, #FFFFFF 100%);
    box-shadow: 0 0 20px rgba(201,162,39,0.15);
}
.plus-package-card.pkg-vip::before {
    content: '👑 VIP';
    display: block;
    text-align: center;
    /*font-size: 11px;*/
    font-weight: bold;
    color: #fff;
    background: linear-gradient(90deg, #B8860B, #C9A227, #DAA520);
    border-radius: 4px;
    padding: 3px 8px;
    margin-bottom: 2px;
}
.plus-package-card .pkg-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.plus-package-card .pkg-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.plus-package-card .pkg-icon .pkg-gold-img,
.plus-package-card .pkg-price .pkg-gold-img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}
.plus-package-card .pkg-price .pkg-gold-img {
    width: 20px;
    height: 20px;
    display: inline-block;
}
.plus-package-card .pkg-recommend {
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
}
.plus-package-card .pkg-recommend .pkg-star {
    width: 16px;
    height: 16px;
}
.plus-package-card .pkg-name {
    font-weight: bold;
    color: #784F28;
    font-size: 15px;
}
.plus-package-card .pkg-gold-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #5c4a2a;
}
.plus-package-card .pkg-bonus-line {
    margin-left: 8px;
    font-size: 13px;
    color: #2E7D32;
}
.plus-package-card .pkg-bonus-badge {
    display: inline-block;
    padding: 1px 6px;
    background: #C8E6C9;
    border-radius: 4px;
    font-weight: bold;
    color: #2E7D32;
}
.plus-package-card .pkg-value-line {
    font-size: 12px;
    color: #666;
}
.plus-package-card .pkg-price-thb {
    font-size: 0.9em;
    color: #666;
    margin-top: 2px;
}
.plus-package-card .pkg-price {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: bold;
    color: #5D4E37;
}
.plus-package-card .btn-paypal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(180deg, #FFC439 0%, #F0B429 50%, #E5A822 100%);
    color: #003087 !important;
    text-decoration: none !important;
    border: 1px solid #C9A227;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: background 0.2s, transform 0.1s;
}
.plus-package-card .btn-paypal:hover {
    background: linear-gradient(180deg, #FFCD4D 0%, #F5BE35 100%);
    transform: translateY(-1px);
}
.plus-package-card .btn-paypal .btn-icon {
    width: 18px;
    height: 18px;
}
.plus-daily-card {
    background: #fff;
    border: 1px solid #C7C3B8;
    border-radius: 6px;
    padding: 24px;
    max-width: 480px;
    margin: 0 auto;
}
.plus-daily-card .daily-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.plus-daily-card .daily-icon-wrap {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    color: #E5A822;
}
.plus-daily-card .daily-icon-wrap svg {
    width: 100%;
    height: 100%;
}
.plus-daily-card .daily-desc h3 {
    margin: 0 0 6px 0;
    font-size: 16px;
    color: #784F28;
}
.plus-daily-card .daily-desc .notice {
    font-size: 12px;
    color: #666;
}
.plus-daily-card .btn-claim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(180deg, #71D000 0%, #5BA800 100%);
    color: #fff !important;
    text-decoration: none !important;
    border: 1px solid #4A8F00;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: background 0.2s, transform 0.1s;
}
.plus-daily-card .btn-claim:hover {
    background: linear-gradient(180deg, #7EE000 0%, #66B800 100%);
    transform: translateY(-1px);
}
.plus-daily-card .btn-claim .btn-icon {
    width: 20px;
    height: 20px;
}
.plus-daily-card .msg-success {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #E8F5E9;
    border: 1px solid #81C784;
    border-radius: 4px;
    color: #2E7D32;
    font-weight: bold;
}
.plus-daily-card .msg-success .msg-icon,
.plus-daily-card .msg-already .msg-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.plus-daily-card .msg-success .msg-icon svg,
.plus-daily-card .msg-already .msg-icon svg {
    width: 100%;
    height: 100%;
}
.plus-daily-card .msg-error {
    padding: 12px 16px;
    background: #FFEBEE;
    border: 1px solid #E57373;
    border-radius: 4px;
    color: #C62828;
}
.plus-daily-card .msg-already {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #F5F5F5;
    border: 1px solid #C0C0C0;
    border-radius: 4px;
    color: #666;
}
.plus-daily-card .msg-already .msg-icon {
    color: #999;
}
.plus-history-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #DDD;
}
.plus-history-section h3 {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: #784F28;
    display: flex;
    align-items: center;
    gap: 8px;
}
.plus-history-section h3 .hist-icon {
    width: 20px;
    height: 20px;
}
.plus-history-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #C7C3B8;
}
.plus-history-table th,
.plus-history-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #EEE;
}
.plus-history-table th {
    background: #F5F5F5;
    color: #784F28;
    font-size: 12px;
    font-weight: bold;
}
.plus-history-table tr:last-child td {
    border-bottom: none;
}
.plus-history-table tr:hover td {
    background: #FAFAF8;
}
.plus-loading {
    text-align: center;
    padding: 24px;
    color: #666;
}

/* Tooltip styles for Special Waiting buttons */
.tt-special {
    position: relative;
}

.tt-special[data-tooltip] {
    cursor: help;
}

/* default hidden bubble */
.tt-special[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: 125%;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 320px;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    /*font-size: 11px;*/
    line-height: 1.3;
    white-space: normal;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 1000;
}

.tt-special[data-tooltip]::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(125% - 6px);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.85);
    opacity: 0;
    transition: opacity .15s ease;
}

.tt-special:hover::after,
.tt-special:hover::before,
.tt-special:focus::after,
.tt-special:focus::before {
    opacity: 1;
}

/* place above other UI */
.tt-special {
    z-index: 9999;
}

/* .auth-container {
    max-width: 700px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border: 1px solid #ddd;
} */

.form-section {
    background: #f9f9f9;
    border-radius: 5px;
    padding: 15px;
    margin: 15px 0;
    border: 1px solid #ddd;
}

.section-title {
    color: #333;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ccc;
}

/* Enhanced Input Styles */
.enhanced-input {
    width: 95%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
    background: #fff;
}

.enhanced-input:focus {
    outline: none;
    border-color: #4CAF50;
    background: #fff;
}

.input-group {
    margin-bottom: 15px;
}

.input-label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    font-size: 13px;
}

/* Enhanced Tribe Selection */
.tribe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 15px 0;
}

.tribe-option {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.tribe-option:hover {
    border-color: #4CAF50;
}

.tribe-option.selected {
    border-color: #4CAF50;
    background: #f0f8f0;
}

.tribe-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tribe-image {
    /* width: 50px;
    height: 50px; */
    margin: 0 auto 8px;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.tribe-name {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    font-size: 14px;
}

.tribe-description {
    /*font-size: 11px;*/
    color: #666;
    line-height: 1.3;
}

/* Enhanced Perk Selection */
.perk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    margin: 15px 0;
}

.perk-option {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.perk-option:hover {
    border-color: #4CAF50;
}

.perk-option.selected {
    border-color: #4CAF50;
    background: #f0f8f0;
}

.perk-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.perk-icon {
    width: 40px;
    height: 40px;
    background: #4CAF50;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    flex-shrink: 0;
}

.perk-details {
    flex: 1;
}

.perk-name {
    font-weight: bold;
    color: #333;
    margin-bottom: 3px;
    font-size: 14px;
}

.perk-description {
    font-size: 12px;
    color: #666;
    line-height: 1.3;
}

/* Position Selection - Map Style */
.position-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 15px 0;
}

.position-random {
    margin-bottom: 15px;
}

.position-random .position-option {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    transition: border-color 0.2s ease;
    text-align: center;
    display: inline-block;
    min-width: 120px;
}

.position-map {
    display: grid;
    grid-template-columns: repeat(2, 120px);
    grid-template-rows: repeat(2, 80px);
    gap: 2px;
    border: 2px solid #333;
    background: #333;
    position: relative;
}

.position-map::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: #333;
    transform: translateY(-1px);
}

.position-map::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #333;
    transform: translateX(-1px);
}

.position-option {
    background: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.position-option:hover {
    border-color: #4CAF50;
    background: #f0f8f0;
}

.position-option.selected {
    border-color: #4CAF50;
    background: #e8f5e8;
}

.position-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Enhanced Buttons */
.enhanced-button {
    background: #4CAF50;
    color: white;
    border: 1px solid #45a049;
    padding: 10px 25px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.enhanced-button:hover {
    background: #45a049;
}

.enhanced-button:active {
    background: #3d8b40;
}

/* CSRF and Form Protection */
.security-notice {
    background: #fff3cd;
    color: #856404;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 15px 0;
    text-align: center;
    font-size: 13px;
    border: 1px solid #ffeaa7;
}

/* reCAPTCHA Container */
.recaptcha-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 5px;
    border: 1px dashed #ccc;
}

/* Error Messages */
.error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 10px 0;
    font-size: 13px;
    border: 1px solid #f5c6cb;
}

/* Success Messages */
.success-message {
    background: #d4edda;
    color: #155724;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 10px 0;
    font-size: 13px;
    border: 1px solid #c3e6cb;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* .auth-container {
        margin: 10px;
        padding: 20px;
    } */

    .tribe-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
    }

    .perk-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .perk-option {
        flex-direction: column;
        text-align: center;
    }

    .position-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   AUCTION HOUSE — Redesigned UX (T3.6 theme)
   =================================================================== */

/* ---- Page shell & hero ---- */
div.hero_auction.auc-page {
    max-width: 100%;
}
.auc-hero {
    margin-bottom: 4px;
}
.auc-hero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0 8px;
    border-bottom: 1px solid #d9cdb8;
}
.auc-hero-title-area {
    flex: 1;
    min-width: 200px;
}
.auc-hero-title {
    margin: 0;
    font-size: 16px;
    color: #5d4e37;
    letter-spacing: 0.02em;
}
.auc-hero-desc {
    margin: 4px 0 0;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}
.auc-balance-pill {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(to bottom, #fffbe8 0%, #f5e6c8 100%);
    border: 1px solid #d9c08a;
    border-radius: 20px;
    /*font-size: 11px;*/
}
.auc-balance-ico {
    vertical-align: middle;
}
.auc-balance-lbl {
    color: #666;
    font-weight: bold;
}
.auc-balance-num {
    font-weight: bold;
    font-size: 14px;
    color: #5d4e37;
    min-width: 3em;
    text-align: right;
}
.auc-link-exch {
    padding: 4px 10px;
    background: #5d4e37;
    color: #fff !important;
    text-decoration: none;
    border-radius: 4px;
    /*font-size: 10px;*/
    font-weight: bold;
    white-space: nowrap;
}
.auc-link-exch:hover {
    background: #71D000;
    color: #fff !important;
}

.auc-banner {
    padding: 8px 12px;
    margin: 0 0 8px;
    border-radius: 4px;
    /*font-size: 11px;*/
    line-height: 1.4;
}
.auc-banner-warn {
    background: #fff3cd;
    border: 1px solid #e6d08a;
    color: #856404;
}
.auc-banner-note {
    background: #e8f4fc;
    border: 1px solid #b8d8e8;
    color: #5d4e37;
}

/* Tab navigation — Travian T3.6 textmenu style */
.auc-tabs {
    display: flex;
    gap: 0;
    margin: 0 0 10px;
    padding: 0;
    border-bottom: 2px solid #5d4e37;
}
.auc-tabs .auc-tab {
    display: inline-block;
    padding: 7px 16px;
    /*font-size: 11px;*/
    font-weight: bold;
    text-decoration: none;
    color: #5d4e37;
    background: linear-gradient(to bottom, #f4f3f0 0%, #e8e4dc 100%);
    border: 1px solid #d9cdb8;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    margin-right: 2px;
    position: relative;
    bottom: -2px;
}
.auc-tabs .auc-tab:hover {
    background: linear-gradient(to bottom, #fff 0%, #f4f3f0 100%);
    color: #333;
}
.auc-tabs .auc-tab.active {
    background: #fff;
    color: #5d4e37;
    border-color: #5d4e37;
    border-bottom: 2px solid #fff;
    z-index: 1;
}
.auc-tab-icon {
    margin-right: 4px;
}

/* Notification bar */
.auc-notify {
    padding: 8px 12px;
    margin: 0 0 8px;
    border-radius: 4px;
    /*font-size: 11px;*/
    font-weight: bold;
    text-align: center;
}
.auc-notify-success {
    background: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
}
.auc-notify-error {
    background: #f8d7da;
    border: 1px solid #dc3545;
    color: #721c24;
}
.auc-notify-info {
    background: #ffffcc;
    border: 1px solid #e6d08a;
    color: #5c4a1a;
}

/* Tab intro panels */
.auc-sell-intro,
.auc-my-intro {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #faf9f6;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    margin-bottom: 10px;
}
.auc-intro-icon {
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
}
.auc-intro-text h3 {
    margin: 0 0 4px;
    font-size: 13px;
    color: #5d4e37;
}
.auc-intro-text p {
    margin: 0;
    font-size: 11px;
    color: #888;
    line-height: 1.4;
}

/* Filter bar — compact */
.auc-filter-bar {
    background: #f4f3f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 8px;
}
.auc-filter-categories {
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}
.auc-filter-label {
    font-weight: bold;
    color: #5d4e37;
    margin-right: 4px;
}
.auc-filter-label::after {
    content: ':';
    margin-right: 4px;
}
.auc-cat-link {
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    /*font-size: 10px;*/
    text-decoration: none;
    color: #5d4e37;
    border: 1px solid transparent;
    border-radius: 3px;
    gap: 2px;
}
.auc-cat-link:hover {
    background: #e8e4dc;
    border-color: #c9b07a;
}
.auc-cat-link.active {
    background: #5d4e37;
    color: #fff;
    border-color: #5d4e37;
    font-weight: bold;
}
.auc-cat-ico {
    width: 14px;
    height: 14px;
    vertical-align: middle;
}
.auc-filter-sort {
    border-top: 1px solid #ddd;
    padding-top: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}
.auc-filter-sort a {
    display: inline-block;
    padding: 2px 6px;
    /*font-size: 10px;*/
    text-decoration: none;
    color: #5d4e37;
    border-radius: 3px;
}
.auc-filter-sort a:hover {
    text-decoration: underline;
}
.auc-filter-sort a.selected {
    font-weight: bold;
    color: #71D000;
}

/* ========== GRID SYSTEM — shared by all tabs ========== */
.auc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 8px;
    padding: 8px;
}

/* Browse: listings container */
.auc-listings-wrap {
    border: 1px solid #d9cdb8;
    border-radius: 6px;
    overflow: hidden;
    background: #faf9f6;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.auc-empty-panel {
    padding: 30px 16px;
    text-align: center;
    background: #faf9f6;
    border: 1px dashed #d9cdb8;
    border-radius: 6px;
}
.auc-empty {
    margin: 0;
    color: #888;
    font-size: 12px;
    font-style: italic;
}
.auc-empty-icon {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
}

/* ========== BROWSE TAB — Item Cards ========== */
.auc-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.auc-card:hover {
    border-color: #c9b07a;
    box-shadow: 0 2px 8px rgba(93, 78, 55, 0.12);
}
.auc-card-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid #f0ece4;
}
.auc-item-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #faf9f6;
    border: 1px solid #e0dcd4;
    border-radius: 4px;
}
.auc-item-icon img {
    display: block;
}
.auc-item-qty {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #5d4e37;
    color: #fff;
    /*font-size: 9px;*/
    font-weight: bold;
    padding: 0 3px;
    border-radius: 3px;
    line-height: 14px;
}
.auc-card-info {
    flex: 1;
    min-width: 0;
}
.auc-item-name {
    font-weight: bold;
    /*font-size: 11px;*/
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.auc-item-meta {
    /*font-size: 10px;*/
    color: #888;
    margin-top: 1px;
}
.auc-item-seller {
    /*font-size: 10px;*/
    color: #aaa;
    margin-top: 1px;
}
.auc-tribe-lock {
    color: #cc6600;
    font-style: italic;
}
.auc-tribe-warn {
    color: #cc6600;
    /*font-size: 10px;*/
    font-style: italic;
}

/* Card middle: price + timer */
.auc-card-mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #faf9f6;
    gap: 6px;
}
.auc-card-price {
    flex: 1;
    min-width: 0;
}
.auc-bid-value {
    font-size: 12px;
    color: #333;
    font-weight: bold;
}
.auc-bid-value b {
    color: #5d4e37;
}
.auc-bid-count {
    /*font-size: 9px;*/
    color: #aaa;
    display: block;
    margin-top: 1px;
}
.auc-card-buyout-line {
    margin-top: 2px;
    /*font-size: 10px;*/
    color: #cc6600;
}
.auc-card-buyout-lbl {
    font-weight: bold;
}
.auc-item-timer {
    flex-shrink: 0;
    text-align: right;
}
.auc-timer {
    /*font-size: 11px;*/
    font-weight: bold;
    color: #5d4e37;
}
.auc-timer.auc-soon {
    color: #e67e22;
}
.auc-timer.auc-urgent {
    color: #dc3545;
    animation: auc-blink 1s ease-in-out infinite;
}
.auc-timer.auc-expired {
    color: #999;
    font-style: italic;
    font-weight: normal;
}
.auc-timer.auc-warning {
    color: #e8a027;
}
@keyframes auc-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Card footer: actions */
.auc-card-foot {
    padding: 6px 10px 8px;
    border-top: 1px solid #f0ece4;
}
.auc-action-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.auc-bid-input {
    flex: 1;
    min-width: 50px;
    max-width: 80px;
    padding: 3px 4px !important;
    font-size: 11px !important;
    text-align: right;
}
.auc-own-label {
    color: #999;
    /*font-size: 10px;*/
    font-style: italic;
}

/* T3.6-style buttons */
.auc-btn {
    display: inline-block;
    padding: 4px 8px;
    /*font-size: 10px;*/
    font-weight: bold;
    text-decoration: none;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid;
    white-space: nowrap;
    text-align: center;
}
.auc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.auc-btn-bid {
    background: linear-gradient(to bottom, #f5e6c8 0%, #e8d4a8 100%);
    border-color: #c9a227;
    color: #5c4a2a;
}
.auc-btn-bid:hover:not(:disabled) {
    background: linear-gradient(to bottom, #faf0dc 0%, #f0e2b8 100%);
    border-color: #b8921f;
}
.auc-btn-buyout {
    background: linear-gradient(to bottom, #8dce3d 0%, #71b32b 100%);
    border-color: #5a9022;
    color: #fff;
    width: 100%;
    margin-top: 2px;
}
.auc-btn-buyout:hover:not(:disabled) {
    background: linear-gradient(to bottom, #9dde4d 0%, #81c33b 100%);
    border-color: #4a8012;
}
.auc-btn-sell {
    background: linear-gradient(to bottom, #C9B07A 0%, #A68B4E 100%);
    border-color: #8B7355;
    color: #fff;
}
.auc-btn-sell:hover:not(:disabled) {
    background: linear-gradient(to bottom, #D4BE8A 0%, #B69B5E 100%);
    border-color: #9A7F5F;
}
.auc-btn-suggest {
    background: #f4f3f0;
    border-color: #ccc;
    color: #666;
    font-weight: normal;
}
.auc-btn-suggest:hover:not(:disabled) {
    background: #e8e4dc;
    border-color: #999;
}
.auc-btn-cancel {
    background: linear-gradient(to bottom, #f5d0d0 0%, #e8b0b0 100%);
    border-color: #c99;
    color: #a00;
    width: 100%;
}
.auc-btn-cancel:hover:not(:disabled) {
    background: linear-gradient(to bottom, #fdd 0%, #ecc 100%);
    border-color: #a77;
}

/* ========== SELL TAB — Card Grid ========== */
.auc-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.auc-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}
.auc-stat-card {
    background: linear-gradient(to bottom, #faf9f6 0%, #f4f3f0 100%);
    border: 1px solid #d9cdb8;
    border-radius: 6px;
    padding: 8px 10px;
    text-align: center;
}
.auc-stat-chip {
    background: linear-gradient(to bottom, #faf9f6 0%, #f4f3f0 100%);
    border: 1px solid #d9cdb8;
    border-radius: 6px;
    padding: 8px 10px;
    text-align: center;
}
.auc-stat-label {
    display: block;
    /*font-size: 9px;*/
    font-weight: bold;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.auc-stat-value {
    font-size: 13px;
    font-weight: bold;
    color: #5d4e37;
}
.auc-stat-sub {
    /*font-size: 10px;*/
    font-weight: normal;
    color: #888;
}
.auc-sell-hint {
    margin: 0 0 8px;
    padding: 6px 10px;
    /*font-size: 10px;*/
    color: #666;
    background: #fffef8;
    border-left: 3px solid #c9a227;
    border-radius: 0 4px 4px 0;
}

/* Sell card */
.auc-sell-grid-wrap {
    margin-bottom: 10px;
}
.auc-sell-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.auc-sell-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.15s;
}
.auc-sell-card:hover {
    border-color: #c9b07a;
}
.auc-sell-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #f0ece4;
    background: #faf9f6;
}
.auc-sell-card-info {
    flex: 1;
    min-width: 0;
}
.auc-sell-card-name {
    font-weight: bold;
    /*font-size: 11px;*/
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.auc-sell-card-meta {
    /*font-size: 10px;*/
    color: #888;
    margin-top: 1px;
}
.auc-sell-card-body {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.auc-sell-field {
    display: flex;
    align-items: center;
    gap: 6px;
}
.auc-sell-field label {
    /*font-size: 10px;*/
    font-weight: bold;
    color: #5d4e37;
    min-width: 60px;
    flex-shrink: 0;
}
.auc-sell-field-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.auc-inp-sm {
    width: 48px !important;
    text-align: center;
}
.auc-inp-field {
    flex: 1;
    min-width: 60px;
    max-width: 100px;
    padding: 3px 6px !important;
    font-size: 11px !important;
    text-align: right;
}
.auc-sell-fee {
    /*font-size: 10px;*/
    color: #888;
    text-align: right;
    padding-top: 2px;
    border-top: 1px dashed #ece8e0;
}
.auc-fee-calc {
    font-weight: bold;
    color: #5d4e37;
}
.auc-sell-card-foot {
    padding: 6px 10px 8px;
    border-top: 1px solid #f0ece4;
}
.auc-sell-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

/* ========== MY AUCTIONS TAB — Card Grid ========== */
.auc-section {
    margin-bottom: 12px;
}
.auc-section.auc-panel {
    border: 1px solid #d9cdb8;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.auc-section-title {
    margin: 0;
    padding: 8px 12px;
    background: linear-gradient(to bottom, #5d4e37 0%, #4a3d2c 100%);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}
.auc-my-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.auc-my-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.15s;
}
.auc-my-card:hover {
    border-color: #c9b07a;
}
.auc-my-card.auc-winning {
    border-color: #a8dba8;
    background: #f7fdf7;
}
.auc-my-card.auc-outbid {
    border-color: #e8b0b0;
    background: #fef8f8;
}
.auc-my-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #f0ece4;
    background: #faf9f6;
}
.auc-my-card-info {
    flex: 1;
    min-width: 0;
}
.auc-my-card-name {
    font-weight: bold;
    /*font-size: 11px;*/
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.auc-my-card-body {
    padding: 6px 10px;
}
.auc-my-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    /*font-size: 11px;*/
    border-bottom: 1px dotted #f0ece4;
}
.auc-my-row:last-child {
    border-bottom: none;
}
.auc-my-lbl {
    color: #888;
    /*font-size: 10px;*/
    font-weight: bold;
}
.auc-my-row-highlight {
    background: #f7fdf7;
    border-radius: 3px;
    padding: 3px 6px !important;
    margin: 2px 0;
}
.auc-my-row-action {
    background: #fff8f0;
    border-radius: 3px;
    padding: 3px 6px !important;
    margin: 2px 0;
}
.auc-my-card-foot {
    padding: 6px 10px 8px;
    border-top: 1px solid #f0ece4;
    text-align: center;
    min-height: 20px;
}

/* Status badges */
.auc-status {
    /*font-size: 10px;*/
    font-weight: bold;
    white-space: nowrap;
}
.auc-status-icon {
    margin-right: 2px;
}
.auc-status-active {
    color: #228b22;
}
.auc-status-sold {
    color: #2180de;
}
.auc-status-expired {
    color: #999;
}
.auc-status-cancelled {
    color: #a00;
}
.auc-status-outbid {
    color: #dc3545;
}

/* Bid value colours */
.auc-proceeds {
    color: #228b22;
    font-weight: bold;
}
.auc-your-bid {
    color: #5d4e37;
    font-weight: bold;
}
.auc-min-next {
    color: #b87333;
    font-size: 10px;
}

/* Loading spinner */
.auc-spinner,
.auc-modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    color: #888;
}
.auc-spinner::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #d9cdb8;
    border-top-color: #5d4e37;
    border-radius: 50%;
    animation: auc-spin 0.7s linear infinite;
}
@keyframes auc-spin {
    to { transform: rotate(360deg); }
}

/* Pagination (T3.6 footer pattern) */
div.hero_auction .footer {
    margin: 8px 0;
}
div.hero_auction .footer .paginator {
    text-align: center;
    padding: 6px 0;
}
div.hero_auction .footer .paginator a {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 1px;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-decoration: none;
    color: #5d4e37;
    /*font-size: 11px;*/
}
div.hero_auction .footer .paginator a:hover {
    background: #e8e4dc;
    border-color: #999;
}
div.hero_auction .footer .paginator b.auc-page-current {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 1px;
    background: #5d4e37;
    color: #fff;
    border: 1px solid #5d4e37;
    border-radius: 3px;
    /*font-size: 11px;*/
}
div.hero_auction .footer .paginator span.none {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 1px;
    color: #ccc;
    /*font-size: 11px;*/
}

/* Tooltip override for auction items */
.auc-item-icon .tooltiptext {
    width: 180px;
    /*font-size: 10px;*/
    text-align: left;
    bottom: 110%;
    left: 0;
    margin-left: 0;
}

/* ========== Responsive ========== */
@media (max-width: 640px) {
    .auc-grid {
        grid-template-columns: 1fr;
    }
    .auc-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .auc-hero-top {
        flex-direction: column;
        align-items: stretch;
    }
    .auc-balance-pill {
        justify-content: center;
    }
    .auc-tabs {
        flex-wrap: wrap;
    }
    .auc-filter-categories .auc-cat-link {
        /*font-size: 9px;*/
        padding: 2px 4px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .auc-timer.auc-urgent {
        animation: none !important;
    }
}

/* ---- v2 Browse Grid & Card ---- */
.auc-filter-groups {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.auc-group-btn {
    display: inline-block;
    padding: 5px 14px;
    background: #f4f3f0;
    border: 1px solid #ccc;
    border-radius: 14px;
    color: #5d4e37;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    transition: background .15s, border-color .15s;
}
.auc-group-btn:hover {
    background: #e8dcc8;
    border-color: #b8a888;
}
.auc-group-btn.active {
    background: #5d4e37;
    color: #fff;
    border-color: #5d4e37;
}
.auc-filter-categories {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.auc-filter-sublabel {
    color: #999;
    font-size: 11px;
    margin-right: 4px;
}
.auc-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    color: #5d4e37;
    text-decoration: none;
    font-size: 11px;
    transition: background .15s;
}
.auc-cat-chip:hover {
    background: #f0e8d8;
    border-color: #c8b898;
}
.auc-cat-chip.active {
    background: #7a6a52;
    color: #fff;
    border-color: #7a6a52;
}

.auc-browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    padding: 8px 0;
}
.auc-card2 {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
    display: flex;
    flex-direction: column;
}
.auc-card2:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    border-color: #c8b898;
}
.auc-card2-hot {
    border-color: #d9534f;
    box-shadow: 0 0 0 1px rgba(217,83,79,.2);
}
.auc-card2-click {
    display: flex;
    gap: 10px;
    padding: 10px;
    cursor: pointer;
    transition: background .1s;
}
.auc-card2-click:hover {
    background: #fcf9f0;
}
.auc-card2-icon {
    position: relative;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
}
.auc-card2-qty {
    position: absolute;
    bottom: -2px;
    right: -4px;
    background: #5d4e37;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 8px;
}
.auc-card2-info {
    flex: 1;
    min-width: 0;
}
.auc-card2-name {
    font-weight: bold;
    font-size: 12px;
    color: #5d4e37;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.auc-card2-cat {
    font-size: 11px;
    color: #999;
}
.auc-card2-tribe {
    font-size: 10px;
    color: #b87333;
    font-style: italic;
}

/* Big countdown timer area */
.auc-card2-timer-wrap {
    text-align: center;
    padding: 6px 10px;
    background: #f7f3ea;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.auc-card2-timer-wrap .auc-timer {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: #5d4e37;
}
.auc-card2-timer-wrap .auc-timer.auc-soon {
    color: #e8a027;
}
.auc-card2-timer-wrap .auc-timer.auc-urgent {
    color: #d9534f;
    animation: auc-pulse 1s infinite;
}
.auc-card2-timer-wrap .auc-timer.auc-expired {
    color: #999;
    font-size: 13px;
}
.auc-card2-timer-wrap .auc-timer.auc-warning {
    color: #e8a027;
}

/* Own listing highlight */
.auc-card2-own {
    border-color: #c8b898;
    background: #fafaf5;
}
.auc-card2-own:hover {
    border-color: #a08060;
}

/* Price section */
.auc-card2-price {
    padding: 8px 10px 4px;
}
.auc-card2-current {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.auc-card2-price-label {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
}
.auc-card2-price-val {
    font-weight: bold;
    font-size: 14px;
    color: #5d4e37;
}
.auc-card2-bid-count {
    font-size: 10px;
    color: #999;
    text-align: right;
}
.auc-card2-buyout-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #b87333;
    margin-top: 2px;
}
.auc-card2-buyout-label {
    font-size: 10px;
    text-transform: uppercase;
}
.auc-card2-buyout-val {
    font-weight: bold;
}

/* Card actions */
.auc-card2-actions {
    padding: 6px 10px 10px;
    border-top: 1px solid #f0ece0;
}
.auc-card2-bid-row {
    display: flex;
    gap: 4px;
    align-items: center;
}
.auc-card2-bid-row .auc-bid-input {
    flex: 1;
    min-width: 60px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
}
.auc-own-label {
    font-size: 11px;
    color: #999;
    font-style: italic;
}
.auc-tribe-warn {
    font-size: 11px;
    color: #d9534f;
}

/* ---- Detail Modal ---- */
.auc-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auc-modal {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,.3);
    max-width: 480px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    animation: aucModalIn .2s ease-out;
}
@keyframes aucModalIn {
    from { transform: translateY(30px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.auc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    background: #f9f6ef;
    border-radius: 8px 8px 0 0;
}
.auc-modal-title {
    margin: 0;
    font-size: 15px;
    color: #5d4e37;
}
.auc-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.auc-modal-close:hover {
    color: #d9534f;
}
.auc-modal-body {
    padding: 16px;
}
.auc-modal-loading {
    text-align: center;
    padding: 30px;
    color: #999;
}

/* Detail sections */
.auc-detail-top {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.auc-detail-icon {
    position: relative;
    flex: 0 0 64px;
}
.auc-detail-qty {
    position: absolute;
    bottom: -2px;
    right: -4px;
    background: #5d4e37;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 8px;
}
.auc-detail-info {
    flex: 1;
}
.auc-detail-name {
    font-weight: bold;
    font-size: 16px;
    color: #5d4e37;
    margin-bottom: 4px;
}
.auc-detail-meta {
    font-size: 11px;
    color: #888;
    line-height: 1.5;
}
.auc-detail-cat {
    color: #b87333;
    font-weight: bold;
}

/* Big detail timer */
.auc-detail-timer {
    text-align: center;
    padding: 12px 0;
    margin: 8px 0 12px;
    background: #f7f3ea;
    border-radius: 6px;
}
.auc-detail-timer .auc-timer {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 0.06em;
    color: #5d4e37;
}
.auc-detail-timer .auc-timer.auc-soon {
    color: #e8a027;
}
.auc-detail-timer .auc-timer.auc-urgent {
    color: #d9534f;
    animation: auc-pulse 1s infinite;
}
.auc-detail-timer .auc-timer.auc-expired {
    color: #999;
    font-size: 18px;
}
.auc-detail-timer .auc-timer.auc-warning {
    color: #e8a027;
}

/* Detail prices */
.auc-detail-prices {
    margin-bottom: 10px;
}
.auc-detail-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}
.auc-detail-price-lbl {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
}
.auc-detail-price-big {
    font-size: 18px;
    font-weight: bold;
    color: #5d4e37;
}
.auc-detail-buyout {
    color: #b87333;
}
.auc-detail-bids-count {
    font-size: 11px;
    color: #999;
    text-align: right;
}

/* Detail action buttons */
.auc-detail-actions {
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.auc-detail-bid-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.auc-detail-bid-row .auc-bid-input {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}
.auc-detail-actions .auc-btn-buyout {
    width: 100%;
    text-align: center;
    padding: 8px;
    font-size: 13px;
}

/* Bid history */
.auc-detail-history {
    margin-top: 14px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}
.auc-detail-hist-title {
    margin: 0 0 8px;
    font-size: 13px;
    color: #5d4e37;
}
.auc-hist-list {
    max-height: 200px;
    overflow-y: auto;
}
.auc-hist-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 6px;
    border-bottom: 1px solid #f5f2ec;
    font-size: 11px;
    gap: 6px;
}
.auc-hist-row:last-child {
    border-bottom: none;
}
.auc-hist-latest {
    background: #fdf8e8;
    font-weight: bold;
}
.auc-hist-name {
    flex: 0 0 90px;
    color: #5d4e37;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.auc-hist-type {
    flex: 0 0 50px;
    color: #999;
    font-size: 10px;
}
.auc-hist-amount {
    flex: 1;
    text-align: right;
    font-weight: bold;
    color: #5d4e37;
}
.auc-hist-time {
    flex: 0 0 100px;
    text-align: right;
    color: #bbb;
    font-size: 10px;
}

/* Responsive for v2 grid */
@media (max-width: 640px) {
    .auc-browse-grid {
        grid-template-columns: 1fr;
    }
    .auc-card2-timer-wrap .auc-timer {
        font-size: 15px;
    }
    .auc-detail-timer .auc-timer {
        font-size: 22px;
    }
    .auc-modal {
        max-width: 100%;
        border-radius: 0;
        max-height: 100vh;
    }
    .auc-hist-row {
        flex-wrap: wrap;
    }
    .auc-hist-name { flex: 0 0 100%; }
    .auc-hist-time { flex: 0 0 100%; text-align: left; }
}

/* ===================================================================
   GOLD ↔ SILVER EXCHANGE — Redesigned (T3.6 theme)
   =================================================================== */

/* Exchange page wrapper */
.exch-wrap {
    max-width: 600px;
}

/* Balance panel */
.exch-balance-panel {
    background: #f4f3f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 14px;
}
.exch-balance-title {
    font-size: 14px;
    font-weight: bold;
    color: #5d4e37;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #d9cdb8;
}
.exch-balance-grid {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.exch-balance-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.exch-balance-gold {
    background: linear-gradient(to bottom, #fffbe6 0%, #fff5cc 100%);
    border-color: #e6d08a;
}
.exch-balance-silver {
    background: linear-gradient(to bottom, #f0f4f8 0%, #e4eaf0 100%);
    border-color: #b0c0d0;
}
.exch-currency-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.exch-balance-info {
    display: flex;
    flex-direction: column;
}
.exch-balance-label {
    /*font-size: 10px;*/
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.exch-balance-value {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}
.exch-balance-divider {
    flex-shrink: 0;
    font-size: 18px;
    color: #999;
    font-weight: bold;
}

/* Rate badge */
.exch-rate-badge {
    text-align: center;
    padding: 4px 0 0;
}
.exch-rate-text {
    /*font-size: 11px;*/
    color: #6b5f48;
    background: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    border: 1px solid #e0d8c8;
}

/* Exchange forms grid */
.exch-forms-grid {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
}
.exch-form-card {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.exch-form-header {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}
.exch-form-g2s {
    background: linear-gradient(to right, #c9a227, #a68b4e);
}
.exch-form-s2g {
    background: linear-gradient(to right, #7a8fa3, #5a7088);
}
.exch-form-icon {
    font-size: 14px;
}
.exch-form-body {
    padding: 12px;
}

/* Rate display inside form */
.exch-rate-display {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #f8f7f4;
    border: 1px solid #eee;
    border-radius: 3px;
    font-size: 12px;
    color: #5d4e37;
    margin-bottom: 10px;
}
.exch-rate-ico {
    width: 14px;
    height: 14px;
}
.exch-rate-arrow {
    font-weight: bold;
    color: #999;
}

/* Input field */
.exch-field {
    margin-bottom: 10px;
}
.exch-field label {
    display: block;
    /*font-size: 11px;*/
    color: #5d4e37;
    font-weight: bold;
    margin-bottom: 4px;
}
.exch-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.exch-input {
    flex: 1;
    font-size: 13px !important;
    padding: 5px 8px !important;
}
.exch-max-btn {
    display: inline-block;
    padding: 4px 8px;
    /*font-size: 10px;*/
    font-weight: bold;
    color: #666;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 0.5px;
}
.exch-max-btn:hover {
    background: #e0e0e0;
    border-color: #999;
}
.exch-field-note {
    display: block;
    /*font-size: 10px;*/
    color: #999;
    margin-top: 4px;
    line-height: 1.3;
}

/* Live preview */
.exch-preview {
    padding: 6px 10px;
    background: #fffff5;
    border: 1px dashed #e0d8c8;
    border-radius: 3px;
    font-size: 12px;
    color: #5d4e37;
    margin-bottom: 10px;
}
.exch-preview-positive {
    color: #228b22;
}

/* Actions */
.exch-form-actions {
    text-align: right;
}

/* Back link */
.exch-backlink {
    padding: 8px 0;
    font-size: 12px;
}
.exch-backlink a {
    color: #5d4e37;
    text-decoration: none;
}
.exch-backlink a:hover {
    text-decoration: underline;
    color: #71D000;
}

/* ===================================================================
   PLUS MENU — Redesigned navigation (T3.6 theme)
   =================================================================== */

/* Plus title colored letters */
.pmenu-p, .pmenu-u { color: #71D000; }
.pmenu-l, .pmenu-s { color: #FF6F0F; }

/* Plus menu navigation */
.pmenu-nav {
    margin-bottom: 12px;
}

/* ===================================================================
   A2B2 TRANSACTION HISTORY — Redesigned (T3.6 theme)
   =================================================================== */

/* Filter bar (matches auction filter pattern) */
.a2b2-filter-bar {
    background: #f4f3f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 10px;
}
.a2b2-filter-bar form {
    display: flex;
    align-items: center;
    gap: 8px;
}
.a2b2-filter-label {
    font-weight: bold;
    color: #5d4e37;
    /*font-size: 11px;*/
}
.a2b2-filter-select {
    /*font-size: 11px;*/
    padding: 3px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
}

/* Transaction log filter grid */
.a2b2-log-filter {
    background: #f4f3f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 10px;
}
.a2b2-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.a2b2-filter-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.a2b2-filter-field label {
    /*font-size: 10px;*/
    font-weight: bold;
    color: #5d4e37;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.a2b2-filter-date {
    width: 130px;
    /*font-size: 11px;*/
    padding: 3px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.a2b2-filter-input {
    width: 180px;
    /*font-size: 11px;*/
    padding: 3px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.a2b2-filter-search {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.a2b2-log-desc-text {
    margin-bottom: 10px;
    color: #888;
    /*font-size: 11px;*/
}

/* Status badges (replaces <font> tags) */
.a2b2-status {
    display: inline-block;
    padding: 2px 8px;
    /*font-size: 10px;*/
    font-weight: bold;
    border-radius: 10px;
    white-space: nowrap;
}
.a2b2-status-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #28a745;
}
.a2b2-status-failed {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #dc3545;
}
.a2b2-status-expired {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #dc3545;
}
.a2b2-status-pending {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}
.a2b2-loading-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
}

/* Amount colors (replaces <font> tags) */
.a2b2-amt-positive {
    color: #228b22;
    font-weight: bold;
}
.a2b2-amt-negative {
    color: #dc3545;
    font-weight: bold;
}

/* Silver icon */
.a2b2-silver-icon {
    vertical-align: middle;
    margin-right: 2px;
}

/* Pagination (matches auction paginator pattern) */
.a2b2-paginator {
    margin-top: 10px;
    text-align: center;
    padding: 8px 0;
}
.a2b2-page-btn {
    display: inline-block;
    padding: 3px 10px;
    margin: 0 2px;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-decoration: none;
    color: #5d4e37;
    font-size: 12px;
    font-weight: bold;
    background: #fff;
}
.a2b2-page-btn:hover {
    background: #e8e4dc;
    border-color: #999;
}
.a2b2-page-active {
    background: #5d4e37;
    color: #fff;
    border-color: #5d4e37;
}
.a2b2-page-total {
    margin-left: 8px;
    /*font-size: 11px;*/
    color: #999;
}
.a2b2-update-note {
    text-align: center;
    color: #228b22;
    /*font-size: 11px;*/
    margin-top: 6px;
}

/* Table row hover for a2b2 */
div#products.a2b2-history table.plusFunctions tbody tr:hover {
    background: #fce6c4;
}
div#products.a2b2-history table.plusFunctions tbody tr:nth-child(even) {
    background: #f8f7f4;
}
div#products.a2b2-history table.plusFunctions tbody tr:nth-child(even):hover {
    background: #fce6c4;
}

/* ===================================================================
   AUCTION — tab panels, a11y, narrow content
   =================================================================== */
div.hero_auction .auc-tab-panel {
    min-width: 0;
}
.auc-tabs .auc-tab:focus-visible {
    outline: 2px solid #c9a227;
    outline-offset: 2px;
}
.auc-locked {
    color: #888;
    font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
    .auc-timer.auc-urgent {
        animation: none !important;
    }
}
@media (max-width: 640px) {
    .auc-filter-bar .auc-filter-sort {
        border-top: 1px solid #ddd;
        padding-top: 8px;
        margin-top: 4px;
    }
    .auc-filter-sort a {
        margin: 2px 4px 2px 0;
        min-height: 32px;
        line-height: 1.3;
        padding: 6px 8px;
    }
}

/* ===================================================================
   HERO INVENTORY (build 37) — Grid card layout
   =================================================================== */
.hero-inv-flash {
    padding: 8px 12px;
    margin: 0 0 10px;
    border: 1px solid #d9cdb8;
    border-radius: 4px;
    background: linear-gradient(to bottom, #fffbe8 0%, #f5e6c8 100%);
    color: #5d4e37;
    /*font-size: 11px;*/
    font-weight: bold;
    line-height: 1.4;
}
.hero-equip-wrap {
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    overflow: visible;
}
.hi-equipped-panel {
    border: 1px solid #d9cdb8;
    border-top: none;
    border-radius: 0 0 6px 6px;
    background: #faf9f6;
    padding: 10px;
    overflow: visible;
}
.hi-equipped-visual {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    padding: 10px 8px;
    border: 1px solid #e6dfd2;
    border-radius: 6px;
    background: radial-gradient(circle at top, #fff 0%, #f5f1e8 100%);
    overflow-x: auto;
}
.hi-equipped-visual div.hero_inventory {
    width: 300px;
    min-width: 300px;
}
.hi-equipped-visual div.hero_inventory #bodyOptions {
    float: none;
    margin: 0 auto;
}
.hi-equipped-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
}
.hi-equip-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 108px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
    overflow: visible;
}
.hi-equip-card:hover {
    border-color: #c9b07a;
    box-shadow: 0 2px 8px rgba(93, 78, 55, 0.1);
}
.hi-equip-card-wide {
    grid-column: 1 / -1;
}
.hi-equip-slot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f0ece4;
}
.hi-equip-slot-name {
    color: #5d4e37;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.hi-equip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid #d9baba;
    border-radius: 50%;
    background: linear-gradient(to bottom, #fff 0%, #f5dede 100%);
    text-decoration: none;
    flex-shrink: 0;
}
.hi-equip-remove:hover {
    border-color: #c08c8c;
    background: linear-gradient(to bottom, #fff4f4 0%, #efcaca 100%);
}
.hi-equip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 68px;
}
.hi-equip-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    background: #faf9f6;
    border: 1px solid #e0dcd4;
    border-radius: 4px;
    flex-shrink: 0;
    overflow: visible;
}
.hi-equip-icon img {
    display: block;
}
.hi-item-tip {
    position: relative;
    z-index: 5;
}
.hi-item-tip:hover {
    z-index: 5000;
}
.hi-item-tip img[class*="male_item_"] {
    width: 100% !important;
    height: 100% !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.hi-item-tip .tooltiptext,
.hi-item-tip .tooltiptext_right {
    width: 300px;
    max-width: min(300px, 72vw);
    padding: 12px 14px;
    border: 1px solid #c9b07a;
    border-radius: 6px;
    background: linear-gradient(to bottom, #fffef5 0%, #f4edc8 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    color: #4c3d26;
    text-align: left;
    line-height: 1.35;
    white-space: normal;
    z-index: 6000;
    bottom: calc(100% + 8px);
    left: 50%;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    transform: translateX(-50%);
    pointer-events: none;
}
.hi-tip-card {
    display: block;
}
.hi-tip-head {
    display: block;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(93, 78, 55, 0.14);
}
.hi-tip-name-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.hi-tip-name {
    display: block;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.3;
}
.hi-tip-tier {
    margin-left: auto;
}
.hi-tip-slot {
    display: block;
    margin-top: 4px;
    color: #8b7450;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hi-tip-body {
    display: block;
}
.hi-tip-stat {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(93, 78, 55, 0.08);
}
.hi-tip-stat:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.hi-tip-stat-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    color: #8b6c35;
    font-size: 12px;
    line-height: 1;
}
.hi-tip-stat-mark img {
    display: block;
}
.hi-tip-stat-copy {
    display: block;
    color: #4c3d26;
    font-size: 11px;
    line-height: 1.4;
}
.hi-item-name-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
}
.hi-equip-name-row {
    justify-content: flex-start;
}
.hi-card-name-row {
    justify-content: center;
}
.hi-tier-0 {
    color: #5d4e37;
}
.hi-tier-1 {
    color: #8a5721;
}
.hi-tier-2 {
    color: #667180;
}
.hi-tier-3 {
    color: #9b6c09;
}
.hi-tier-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 0 6px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0.08em;
    line-height: 16px;
    background: rgba(255, 255, 255, 0.88);
    flex-shrink: 0;
}
.hi-tier-pill.hi-tier-1 {
    border-color: #c48749;
    background: linear-gradient(to bottom, #fff6ea 0%, #f2ddc1 100%);
}
.hi-tier-pill.hi-tier-2 {
    border-color: #b2bcc9;
    background: linear-gradient(to bottom, #fbfcfd 0%, #e0e5ec 100%);
}
.hi-tier-pill.hi-tier-3 {
    border-color: #d6b14b;
    background: linear-gradient(to bottom, #fffbe7 0%, #f4e1a1 100%);
}
.hi-equip-qty {
    position: absolute;
    right: -4px;
    bottom: -4px;
    padding: 0 4px;
    border-radius: 3px;
    background: #5d4e37;
    color: #fff;
    /*font-size: 9px;*/
    font-weight: bold;
    line-height: 15px;
}
.hi-equip-copy {
    min-width: 0;
    flex: 1;
}
.hi-equip-name {
    font-size: 11px;
    font-weight: bold;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}
.hi-dura {
    width: 100%;
    margin-top: 6px;
}
.hi-dura-compact {
    max-width: 150px;
}
.hi-dura-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}
.hi-dura-label {
    color: #8b7a60;
    /*font-size: 9px;*/
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hi-dura-value {
    color: #5d4e37;
    font-size: 10px;
    font-weight: bold;
}
.hi-dura-track {
    position: relative;
    height: 8px;
    border: 1px solid #d9ccb2;
    border-radius: 999px;
    background: linear-gradient(to bottom, #f4f0e8 0%, #e5dccd 100%);
    box-shadow: inset 0 1px 2px rgba(93, 78, 55, 0.12);
    overflow: hidden;
}
.hi-dura-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(to right, #81c85f 0%, #4f972f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.hi-dura-fill.hi-dura-good {
    background: linear-gradient(to right, #81c85f 0%, #4f972f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.hi-dura-fill.hi-dura-mid {
    background: linear-gradient(to right, #dfc968 0%, #c49623 100%);
}
.hi-dura-fill.hi-dura-low {
    background: linear-gradient(to right, #e5927f 0%, #c64636 100%);
}
.hi-equip-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    border: 1px dashed #ded7cb;
    border-radius: 4px;
    background: linear-gradient(to bottom, #fcfbf8 0%, #f5f1e8 100%);
}
.hi-equip-empty-mark {
    color: #b5aa98;
    font-size: 22px;
    line-height: 1;
}

/* Section header */
.hi-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin: 10px 0 0;
    background: linear-gradient(to bottom, #5d4e37 0%, #4a3d2c 100%);
    color: #fff;
    border-radius: 6px 6px 0 0;
}
.hi-section-header-tight {
    margin-top: 20px;
}
.hi-section-title {
    margin: 0;
    font-size: 12px;
    font-weight: bold;
}

/* Filter toolbar */
.hi-inv-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: #f4f3f0;
    border: 1px solid #d9cdb8;
    border-top: none;
    box-sizing: border-box;
}
.hi-inv-btn {
    display: inline-block;
    padding: 4px 8px;
    /*font-size: 10px;*/
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    color: #5d4e37;
    background: #fff;
    border: 1px solid #d9cdb8;
    border-radius: 3px;
    min-height: 26px;
    line-height: 1.2;
}
.hi-inv-btn:hover {
    background: #e8e4dc;
    border-color: #c9b07a;
}
.hi-inv-btn.active {
    background: linear-gradient(to bottom, #5d4e37 0%, #4a3d2c 100%);
    color: #fff;
    border-color: #5d4e37;
}
.hi-inv-btn:focus-visible {
    outline: 2px solid #c9a227;
    outline-offset: 2px;
}

/* Grid container */
.hi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
    padding: 8px;
    border: 1px solid #d9cdb8;
    border-top: none;
    border-radius: 0 0 6px 6px;
    background: #faf9f6;
    overflow: visible;
}

/* Item card */
.hi-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 4px;
    padding: 8px 6px;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s;
    overflow: visible;
}
.hi-card:hover {
    border-color: #c9b07a;
    box-shadow: 0 2px 6px rgba(93, 78, 55, 0.1);
}

/* Item icon */
.hi-card-icon {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #faf9f6;
    border: 1px solid #e0dcd4;
    border-radius: 4px;
    margin-bottom: 4px;
    overflow: visible;
}
.hi-card-icon img {
    display: block;
}
.hi-card-qty {
    position: absolute;
    bottom: -3px;
    right: -3px;
    background: #5d4e37;
    color: #fff;
    /*font-size: 9px;*/
    font-weight: bold;
    padding: 0 4px;
    border-radius: 3px;
    line-height: 15px;
}

/* Name & meta */
.hi-card-name {
    font-weight: bold;
    /*font-size: 10px;*/
    line-height: 1.2;
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    text-align: center;
}
.hi-card-meta {
    /*font-size: 9px;*/
    color: #888;
    margin-bottom: 4px;
}

/* Action buttons */
.hi-card-actions {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 5px;
}
.hi-card-btn {
    display: inline-block;
    padding: 2px 6px;
    /*font-size: 9px;*/
    font-weight: bold;
    color: #5d4e37;
    background: linear-gradient(to bottom, #f5e6c8 0%, #e8d4a8 100%);
    border: 1px solid #c9a227;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
}
.hi-card-btn:hover {
    background: linear-gradient(to bottom, #faf0dc 0%, #f0e2b8 100%);
    border-color: #b8921f;
}
.hi-card-disabled {
    color: #999 !important;
    background: #f0f0f0 !important;
    border-color: #ccc !important;
    cursor: help;
    border-bottom: 1px dotted #bbb;
}

/* Empty state */
.hi-empty {
    grid-column: 1 / -1;
    padding: 20px;
    text-align: center;
    color: #888;
    /*font-size: 11px;*/
    font-style: italic;
}

/* Responsive */
@media (max-width: 520px) {
    .hi-equipped-panel {
        padding: 8px 6px;
    }
    .hi-equipped-grid {
        grid-template-columns: 1fr;
    }
    .hi-equip-card-wide {
        grid-column: auto;
    }
    .hi-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 4px;
        padding: 6px;
    }
    .hi-inv-toolbar {
        justify-content: flex-start;
    }
    .hi-inv-btn {
        flex: 1 1 auto;
        min-width: calc(50% - 4px);
        text-align: center;
    }
    .hi-card-icon {
        width: 48px;
        height: 48px;
    }
    .hi-item-tip .tooltiptext,
    .hi-item-tip .tooltiptext_right {
        width: 240px;
        max-width: min(240px, 78vw);
    }
}

/* ===================================================================
   PROMO MISSIONS — Player UI (green theme, matches referral dashboard)
   =================================================================== */

/* ---------- Hero Banner ---------- */
.promo-mission-card {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #d9c7a0;
}
.promo-mission-banner {
    position: relative;
    overflow: hidden;
    padding: 28px 24px;
    border-radius: 8px;
    background: #2E6F3E;
    color: #fff;
    box-shadow: 0 8px 32px rgba(46, 125, 50, 0.28);
    margin-bottom: 16px;
}
.promo-mission-banner::before {
    content: none;
}
.promo-mission-banner::after {
    content: none;
}
.promo-mission-banner-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
}
.promo-mission-banner-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.promo-mission-banner h2 {
    margin: 10px 0 6px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}
.promo-mission-banner p {
    margin: 0 0 14px;
    max-width: 520px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,0.88);
}
.promo-mission-banner-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.promo-mission-stat-card {
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px);
    text-align: center;
    min-width: 120px;
}
.promo-mission-stat-val {
    display: block;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}
.promo-mission-stat-label {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

/* ---------- Steps Section ---------- */
.promo-mission-steps {
    padding: 20px 22px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #C8E6C9;
    box-shadow: 0 2px 12px rgba(46,125,50,0.08);
    margin-bottom: 16px;
}
.promo-mission-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #E8F5E9;
    color: #2E7D32;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.promo-mission-steps-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}
.promo-mission-step {
    position: relative;
    text-align: center;
    padding: 16px 12px;
}
.promo-mission-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 32px;
    right: 0;
    width: 50%;
    height: 2px;
    background: #C8E6C9;
}
.promo-mission-step:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 0;
    width: 50%;
    height: 2px;
    background: #C8E6C9;
}
.promo-mission-step-num {
    position: relative;
    z-index: 2;
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 3px 12px rgba(46,125,50,0.3);
    margin-bottom: 10px;
}
.promo-mission-step h4 {
    margin: 0 0 5px;
    color: #1B5E20;
    font-size: 13px;
    font-weight: 700;
}
.promo-mission-step p {
    margin: 0;
    color: #555;
    font-size: 12px;
    line-height: 1.45;
}

/* ---------- Copy Panel ---------- */
.promo-mission-copy {
    padding: 18px 22px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #C8E6C9;
    box-shadow: 0 2px 12px rgba(46,125,50,0.08);
    margin-bottom: 16px;
}
.promo-mission-copy-title {
    display: block;
    margin-bottom: 12px;
    color: #2E7D32;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.promo-mission-copy-grid {
    display: grid;
    /*grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);*/
    gap: 12px;
}
.promo-mission-copy-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.promo-mission-copy-field.full-width {
    grid-column: 1 / -1;
}
.promo-mission-copy-field label {
    font-size: 12px;
    font-weight: 600;
    color: #1B5E20;
}
.promo-mission-copy-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    border-radius: 8px;
    border: 2px solid #C8E6C9;
    overflow: hidden;
    transition: border-color 0.2s;
}
.promo-mission-copy-row:focus-within {
    border-color: #4CAF50;
}
.promo-mission-copy-row input,
.promo-mission-copy-row textarea {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: none;
    background: #F1F8E9;
    color: #1B5E20;
    font-size: 13px;
    font-family: 'Consolas', 'Monaco', monospace;
    resize: none;
}
.promo-mission-copy-row input:focus,
.promo-mission-copy-row textarea:focus {
    outline: none;
    background: #E8F5E9;
}
.promo-mission-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 16px;
    border: none;
    background: #2E7D32;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    min-width: 92px;
}
.promo-mission-copy-btn:hover {
    background: #1B5E20;
}
.promo-mission-copy-btn.copied {
    background: #388E3C;
}
.promo-mission-copy-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ---------- Mission Cards Grid ---------- */
.promo-mission-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.promo-mission-card-item {
    display: flex;
    flex-direction: column;
    padding: 18px;
    min-width: 0;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #C8E6C9;
    transition: transform 0.2s, box-shadow 0.2s;
}
.promo-mission-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46,125,50,0.15);
}
.promo-mission-card-item.ineligible {
    opacity: 0.7;
    background: #f7f7f7;
    border-color: #ddd;
}
.promo-mission-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.promo-mission-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1B5E20;
    line-height: 1.3;
}
.promo-mission-card-platform {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #E8F5E9;
    color: #2E7D32;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.promo-mission-card-desc {
    margin: 0 0 12px;
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    flex: 1;
}
.promo-mission-public-note {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #F9F4E8;
    border: 1px solid #E6D7B9;
    color: #6D4C1F;
    font-size: 12px;
    line-height: 1.45;
}
.promo-mission-card-reward {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, #FFF8E1, #FFECB3);
    border: 1px solid #FFD54F;
}
.promo-mission-reward-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,160,0,0.18);
    color: #E65100;
    font-size: 11px;
    font-weight: 700;
}
.promo-mission-reward-val {
    font-size: 18px;
    font-weight: 900;
    color: #E65100;
    line-height: 1;
}
.promo-mission-reward-bonus {
    font-size: 11px;
    color: #757575;
    margin-left: auto;
}
.promo-mission-card-limit {
    font-size: 11px;
    color: #666;
    margin-bottom: 12px;
}
.promo-mission-card-limit b {
    color: #2E7D32;
}
.promo-mission-card-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 12px;
}
.promo-mission-card-status svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}
.promo-mission-card-status.eligible {
    background: #E8F5E9;
    color: #2E7D32;
}
.promo-mission-card-status.completed {
    background: #E3F2FD;
    color: #1565C0;
}
.promo-mission-card-status.ineligible {
    background: #FFEBEE;
    color: #C62828;
}
.promo-mission-card-form {
    margin-top: auto;
}
.promo-mission-card-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: #333;
}
.promo-mission-card-form label span {
    display: block;
    margin-bottom: 3px;
    font-weight: 600;
    color: #1B5E20;
}
.promo-mission-card-form input,
.promo-mission-card-form select,
.promo-mission-card-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #C8E6C9;
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.promo-mission-card-form input:focus,
.promo-mission-card-form select:focus,
.promo-mission-card-form textarea:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76,175,80,0.15);
}
.promo-mission-card-form textarea {
    resize: vertical;
    min-height: 48px;
}
.promo-mission-card-form .char-counter {
    text-align: right;
    font-size: 10px;
    color: #999;
    margin-top: 2px;
}
.promo-mission-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    min-height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    margin-top: 4px;
    white-space: normal;
    line-height: 1.35;
}
.promo-mission-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(46,125,50,0.3);
}
.promo-mission-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.promo-mission-card-blocked {
    padding: 10px 12px;
    border-radius: 8px;
    background: #FFEBEE;
    color: #C62828;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* ---------- History Table ---------- */
.promo-mission-history-section {
    margin-top: 20px;
}
.promo-mission-history-section h3 {
    margin: 0 0 12px;
    font-size: 15px;
    color: #1B5E20;
    display: flex;
    align-items: center;
    gap: 8px;
}
.promo-mission-history-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #C8E6C9;
}
.promo-mission-history-table {
    width: 100%;
    min-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    font-size: 12px;
}
.promo-mission-history-table thead th {
    padding: 10px 14px;
    background: #E8F5E9;
    color: #2E7D32;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    border-bottom: 2px solid #C8E6C9;
    white-space: nowrap;
}
.promo-mission-history-table thead th:first-child {
    border-radius: 10px 0 0 0;
}
.promo-mission-history-table thead th:last-child {
    border-radius: 0 10px 0 0;
}
.promo-mission-history-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #E8F5E9;
    color: #333;
    vertical-align: middle;
}
.promo-mission-history-table tbody tr:last-child td {
    border-bottom: none;
}
.promo-mission-history-table tbody tr:hover td {
    background: #F1F8E9;
}
.promo-mission-history-table a {
    color: #2E7D32;
    text-decoration: none;
    font-weight: 600;
}
.promo-mission-history-table a:hover {
    text-decoration: underline;
}

/* Status badges */
.promo-mission-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.promo-mission-badge--pending {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFCC80;
}
.promo-mission-badge--approved {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #81C784;
}
.promo-mission-badge--rejected {
    background: #FFEBEE;
    color: #C62828;
    border: 1px solid #EF9A9A;
}
.promo-mission-badge--needs_fix {
    background: #FFFDE7;
    color: #F9A825;
    border: 1px solid #FFF176;
}

/* ---------- Empty State ---------- */
.promo-mission-empty {
    padding: 40px 24px;
    text-align: center;
    background: #fafafa;
    border-radius: 8px;
    border: 1px dashed #C8E6C9;
}
.promo-mission-empty-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #E8F5E9;
    margin-bottom: 14px;
    color: #66BB6A;
}
.promo-mission-empty-icon svg {
    width: 28px;
    height: 28px;
}
.promo-mission-empty h4 {
    margin: 0 0 6px;
    color: #333;
    font-size: 15px;
}
.promo-mission-empty p {
    margin: 0;
    color: #888;
    font-size: 13px;
}

/* ---------- Messages ---------- */
.promo-mission-msg {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
}
.promo-mission-msg--success {
    background: #E8F5E9;
    border: 1px solid #81C784;
    color: #2E7D32;
}
.promo-mission-msg--error {
    background: #FFEBEE;
    border: 1px solid #EF9A9A;
    color: #C62828;
}

/* ---------- Admin Promo Mission Styles ---------- */
.admin-promo-container {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}
.admin-promo-header {
    margin-bottom: 20px;
}
.admin-promo-header h1 {
    margin: 0 0 8px;
    font-size: 22px;
    color: #1B5E20;
    font-weight: 700;
}
.admin-promo-header p {
    margin: 0;
    max-width: 760px;
    color: #666;
    font-size: 13px;
    line-height: 1.5;
}
.admin-promo-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.admin-promo-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    background: #fff;
    border: 1px solid #C8E6C9;
    color: #555;
    transition: all 0.15s;
}
.admin-promo-tab:hover {
    background: #F1F8E9;
    color: #1B5E20;
}
.admin-promo-tab.active {
    background: #2E7D32;
    border-color: #2E7D32;
    color: #fff;
}
.admin-promo-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #C8E6C9;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(46,125,50,0.06);
}
.admin-promo-table-wrap {
    overflow: visible;
    border-radius: 0;
    border: 0;
}
.admin-promo-table {
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 12px;
    background: #fff;
    font-size: 12px;
}
.admin-promo-table thead {
    display: none;
}
.admin-promo-table,
.admin-promo-table tbody,
.admin-promo-table tr,
.admin-promo-table tbody td {
    display: block;
}
.admin-promo-table tbody tr {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #C8E6C9;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(46,125,50,0.06);
}
.admin-promo-table tbody td {
    position: relative;
    min-height: 24px;
    padding: 8px 0 8px 112px;
    border-bottom: 1px solid #F1F8E9;
    color: #333;
    vertical-align: top;
    overflow-wrap: anywhere;
}
.admin-promo-table tbody td::before {
    content: attr(data-label);
    position: absolute;
    top: 8px;
    left: 0;
    width: 96px;
    color: #2E7D32;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.admin-promo-table tbody tr:last-child td {
    border-bottom: none;
}
.admin-promo-table tbody td:last-child {
    border-bottom: 0;
}
.admin-promo-table a {
    color: #2E7D32;
    text-decoration: none;
    font-weight: 600;
}
.admin-promo-table a:hover {
    text-decoration: underline;
}
.admin-promo-table .user-link {
    color: #1565C0;
}
.admin-promo-table .user-link:hover {
    color: #0D47A1;
}
.admin-promo-proof-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #E3F2FD;
    color: #1565C0;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 6px;
}
.admin-promo-proof-link:hover {
    background: #BBDEFB;
}
.admin-promo-meta {
    font-size: 11px;
    color: #888;
    line-height: 1.6;
}
.admin-promo-meta strong {
    color: #555;
    font-weight: 600;
}
.admin-promo-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
}
.admin-promo-score--high {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #81C784;
}
.admin-promo-score--medium {
    background: #FFFDE7;
    color: #F9A825;
    border: 1px solid #FFF176;
}
.admin-promo-score--low {
    background: #FFEBEE;
    color: #C62828;
    border: 1px solid #EF9A9A;
}
.admin-promo-checks {
    font-size: 11px;
    color: #666;
    line-height: 1.5;
}
.admin-promo-checks .check-pass {
    color: #2E7D32;
}
.admin-promo-checks .check-fail {
    color: #C62828;
}
.admin-promo-checks .check-warn {
    color: #F9A825;
}
.admin-promo-reward {
    font-size: 12px;
    line-height: 1.6;
    color: #555;
}
.admin-promo-reward .reward-base {
    font-weight: 700;
    color: #2E7D32;
}
.admin-promo-reward .reward-bonus {
    font-weight: 700;
    color: #1565C0;
}
.admin-promo-reward .reward-cap {
    font-size: 11px;
    color: #888;
}
.admin-promo-form {
    margin-bottom: 8px;
}
.admin-promo-actions {
    display: grid;
    gap: 8px;
    min-width: 0;
}
.admin-promo-form--quick {
    display: flex;
}
.admin-promo-form--quick .admin-promo-btn {
    width: 100%;
}
.admin-promo-form--bonus {
    padding: 8px;
    border-radius: 8px;
    background: #F8FBF6;
    border: 1px solid #E0EFD8;
}
.admin-promo-form:last-child {
    margin-bottom: 0;
}
.admin-promo-form label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
    margin-bottom: 4px;
}
.admin-promo-form input[type="number"] {
    width: 72px;
    padding: 4px 8px;
    border: 1px solid #C8E6C9;
    border-radius: 6px;
    font-size: 12px;
}
.admin-promo-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #C8E6C9;
    border-radius: 6px;
    font-size: 12px;
    resize: vertical;
    min-height: 44px;
    font-family: inherit;
}
.admin-promo-form textarea:focus,
.admin-promo-form input:focus {
    outline: none;
    border-color: #66BB6A;
    box-shadow: 0 0 0 2px rgba(102,187,106,0.15);
}
.admin-promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.admin-promo-btn--approve {
    background: #2E7D32;
    color: #fff;
}
.admin-promo-btn--approve:hover {
    background: #1B5E20;
}
.admin-promo-btn--reject {
    background: #C62828;
    color: #fff;
}
.admin-promo-btn--reject:hover {
    background: #B71C1C;
}
.admin-promo-empty {
    padding: 40px 24px;
    text-align: center;
    color: #888;
    font-size: 14px;
}
.admin-promo-msg {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
}
.admin-promo-msg--success {
    background: #E8F5E9;
    border: 1px solid #81C784;
    color: #2E7D32;
}
.admin-promo-msg--error {
    background: #FFEBEE;
    border: 1px solid #EF9A9A;
    color: #C62828;
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    .promo-mission-card {
        margin-top: 14px;
        padding-top: 14px;
    }
    .promo-mission-banner,
    .promo-mission-steps,
    .promo-mission-copy {
        padding: 16px;
    }
    .promo-mission-banner-inner {
        grid-template-columns: 1fr;
    }
    .promo-mission-banner-stats {
        flex-direction: row;
        justify-content: center;
    }
    .promo-mission-steps-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .promo-mission-step:not(:last-child)::after,
    .promo-mission-step:not(:first-child)::before {
        display: none;
    }
    .promo-mission-copy-grid {
        grid-template-columns: 1fr;
    }
    .promo-mission-copy-row {
        flex-direction: column;
    }
    .promo-mission-copy-btn {
        justify-content: center;
        width: 100%;
    }
    .promo-mission-cards {
        grid-template-columns: 1fr;
    }
    .promo-mission-history-table {
        min-width: 500px;
    }
    .admin-promo-tabs {
        gap: 6px;
    }
    .admin-promo-tab {
        padding: 6px 12px;
        font-size: 12px;
    }
    .admin-promo-card {
        padding: 12px;
    }
    .admin-promo-table tbody td {
        padding-left: 92px;
    }
    .admin-promo-table tbody td::before {
        width: 80px;
    }
}