/* Auto-generated CSS from blade page components */

/* From: about.blade.php */


/* From: addresses.blade.php */
.addresses-header-card {
    background: linear-gradient(135deg, #27A17C 0%, #1e8a66 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(39, 161, 124, 0.15);
    color: white;
    position: relative;
    overflow: hidden;
}

.addresses-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    border-radius: 50%;
    transform: translate(50%, -50%);
}

.icon-wrapper {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #27A17C, #1e8a66);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(39, 161, 124, 0.3);
}

.address-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 20px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.address-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-color: #27A17C;
}

.address-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #27A17C, #1e8a66);
}

.chain-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

.chain-badge.erc20 {
    background: linear-gradient(135deg, #627eea, #5a6edb);
}

.chain-badge.trc20 {
    background: linear-gradient(135deg, #eb0029, #d40025);
}

.chain-badge.bep20 {
    background: linear-gradient(135deg, #f0b90b, #d49c0a);
}

.address-text {
    --az-radius: 8px;
    padding: 0;
    font-family: 'Courier New', monospace;
    background: #f8fafc;
    border-radius: var(--az-radius);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    font-size: 0.9rem;
    word-break: break-all;
    position: relative;
}

.address-area {
    border: none;
    background: transparent;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    resize: none;
}

.address-area:focus {
    box-shadow: none;
}

.address-input-group {
    border-radius: var(--az-radius);
}

.visibility-btn i {
    vertical-align: -1px;
}

.copy-append {
    border-left: 1px solid #e2e8f0;
}

.copy-btn {
    min-width: 42px;
    background: #27A17C;
    color: white;
    border: none;
    border-radius: 0 6px 6px 0;
    padding: 8px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-btn:hover {
    background: #1e8a66;
    transform: translateY(-50%) scale(1.05);
}

.btn-action {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-edit {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
}

.btn-edit:hover {
    background: #3b82f6;
    color: white;
}

.btn-delete {
    background: #f8fafc;
    border-color: #ef4444;
    color: #ef4444;
}

.btn-delete:hover {
    background: #ef4444;
    color: white;
}

.btn-add {
    background: #27A17C;
    border-color: #27A17C;
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(39, 161, 124, 0.3);
}

.btn-add:hover {
    background: #1e8a66;
    border-color: #1e8a66;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(39, 161, 124, 0.4);
}

/* =========================================================
   NOTE: Loading/Empty state styles moved to member-style.css
   These are shared utilities used across ALL pages
   ========================================================= */

.status-active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.status-inactive {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.address-label {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.address-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.modal-header-custom {
    background: linear-gradient(135deg, #27A17C, #1e8a66);
    color: white;
    border-radius: 12px 12px 0 0;
}

.form-control:focus {
    border-color: #27A17C;
    box-shadow: 0 0 0 0.2rem rgba(39, 161, 124, 0.25);
}

.form-select:focus {
    border-color: #27A17C;
    box-shadow: 0 0 0 0.2rem rgba(39, 161, 124, 0.25);
}

@media (max-width: 768px) {
    .address-card {
        padding: 16px;
    }

    .address-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .btn-actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* From: announcements.blade.php */
/* Modern News Page Styling */
#page_announcements .news-container {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 24px;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

#page_announcements .news-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    padding: 2rem 2rem 1.5rem;
}

#page_announcements .news-title {
    background: linear-gradient(135deg, var(--app-purple-primary) 0%, var(--app-purple-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.025em;
}

/* Modern Tabs */
#page_announcements .modern-tabs {
    background: #f1f5f9;
    border-radius: 16px;
    padding: 8px;
    margin-bottom: 2rem;
}

#page_announcements .modern-tabs .nav-link {
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    margin: 0 4px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #64748b;
    background: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: capitalize;
    letter-spacing: 0.025em;
}

#page_announcements .modern-tabs .nav-link:hover {
    color: var(--app-purple-primary);
    background: rgba(139, 69, 244, 0.1);
    transform: translateY(-2px);
}

#page_announcements .modern-tabs .nav-link.active {
    color: white;
    background: linear-gradient(135deg, var(--app-purple-primary) 0%, var(--app-purple-secondary) 100%);
    box-shadow: 0 4px 12px rgba(139, 69, 244, 0.3);
    transform: translateY(-2px);
}

/* Enhanced Search Bar */
#page_announcements .search-container {
    position: relative;
    max-width: 500px;
    margin: 0 auto 2rem;
}

#page_announcements .search-input {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 20px 16px 52px;
    font-size: 1rem;
    font-weight: 500;
    color: #1e293b;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#page_announcements .search-input:focus {
    outline: none;
    border-color: var(--app-purple-primary);
    box-shadow: 0 0 0 3px rgba(139, 69, 244, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
    background: white;
}

#page_announcements .search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

#page_announcements .search-input:focus+.search-icon {
    color: var(--app-purple-primary);
}

/* Modern News Items */
#page_announcements .news-list {
    padding: 0 2rem 2rem;
}

#page_announcements .news-item {
    background: white;
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

#page_announcements .news-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(135deg, var(--app-purple-primary) 0%, var(--app-purple-secondary) 100%);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#page_announcements .news-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    border-color: rgba(139, 69, 244, 0.2);
}

#page_announcements .news-item:hover::before {
    width: 4px;
}

#page_announcements .news-item-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: #1e293b;
    margin-bottom: 0.5rem;
    line-height: 1.5;
    letter-spacing: -0.025em;
    transition: color 0.3s ease;
}

#page_announcements .news-item:hover .news-item-title {
    color: var(--app-purple-primary);
}

#page_announcements .news-item-date {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#page_announcements .news-item-date i {
    color: #94a3b8;
    font-size: 0.8rem;
}

/* Loading and Empty States */
#page_announcements .loading-state {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 20px;
    margin: 2rem;
}

#page_announcements .loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid var(--app-purple-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

#page_announcements .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 20px;
    margin: 2rem;
}

#page_announcements .empty-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: #94a3b8;
    font-size: 2rem;
}

#page_announcements .empty-title {
    color: #475569;
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

#page_announcements .empty-subtitle {
    color: #94a3b8;
    font-size: 0.95rem;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #page_announcements .news-header {
        padding: 1.5rem 1rem 1rem;
    }

    #page_announcements .news-list {
        padding: 0 1rem 1.5rem;
    }

    #page_announcements .news-item {
        padding: 1rem;
        margin-bottom: 0.75rem;
    }

    #page_announcements .news-item-title {
        font-size: 1rem;
    }

    #page_announcements .modern-tabs .nav-link {
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    #page_announcements .search-input {
        padding: 14px 18px 14px 48px;
        font-size: 0.95rem;
    }
}

/* From: assets.blade.php */
/* Font Awesome icon with rounded background */
#page_assets .fal.bg-rounded {
    padding: 10px;
    border-radius: 50%;
    color: white;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Enhanced asset card */
#page_assets .asset-balance {
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Action buttons in card - slightly larger for better visibility (Tether USDT) */
#page_assets .action-icon-wrapper {
    width: 54px;
    height: 54px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    transition: all 0.2s;
    font-size: 1.15rem;
}

#page_assets .action-btn-link .action-btn-label {
    font-size: 0.95rem;
}

#page_assets .action-btn-link:hover .action-icon-wrapper {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

#page_assets .action-btn-link {
    color: white;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s;
}

#page_assets .action-btn-link:hover {
    opacity: 1;
    color: white;
}

/* Credit Point / Bonus Point dropdown labels - slightly larger for better visibility */
#page_assets .asset-dropdown-item-points {
    font-size: 0.95rem;
}

/* Allowed deduction wallet - improved desktop/mobile UI */
#page_assets .deduction-wallet-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    justify-self: center;
    gap: 0.9rem;
}
#page_assets .deduction-wallet-copy {
    min-width: 0;
}
#page_assets .deduction-wallet-title {
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.3;
}
#page_assets .deduction-wallet-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}
#page_assets .deduction-wallet-switch .deduction-wallet-label {
    cursor: pointer;
    margin-bottom: 0;
}
/* Bigger switch toggle - scale up Bootstrap's form-switch */
#page_assets .deduction-wallet-input.form-check-input[type="checkbox"] {
    width: 2.8em;
    height: 1.5em;
    margin-top: 0;
    cursor: pointer;
    flex-shrink: 0;
}
#page_assets .deduction-wallet-status {
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    line-height: 1;
    display: inline-block;
}
#page_assets .deduction-wallet-status.is-editable {
    color: #0f5132;
    background: #d1e7dd;
}
#page_assets .deduction-wallet-status.is-locked {
    color: #664d03;
    background: #fff3cd;
}
#page_assets .deduction-wallet-status.is-disabled {
    color: #6c757d;
    background: rgba(255, 255, 255, 0.15);
}

/* Wallet dropdown - larger tap area */
#page_assets .wallet-dropdown-toggle {
    padding: 0.45rem 1.25rem;
    min-width: 150px;
    font-size: 0.9rem;
    border-radius: 999px;
}

/* Loading/empty states - using shared utilities from member-style.css */

/* Responsive improvements */
@media (max-width: 768px) {
    .asset-balance {
        font-size: 2rem;
    }
}

/* Assets page: deduction wallet mobile layout - keep left/right row on all screen sizes */
@media (max-width: 768px) {
    #page_assets .deduction-wallet-card {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        padding: 0.7rem 0.85rem;
    }
    #page_assets .deduction-wallet-copy {
        flex: 1;
        min-width: 0;
    }
    #page_assets .deduction-wallet-title {
        font-size: 0.9rem;
    }
    #page_assets .deduction-wallet-switch {
        flex-shrink: 0;
        align-items: center;
        gap: 0.4rem;
    }
    #page_assets .deduction-wallet-input.form-check-input[type="checkbox"] {
        width: 2.8em;
        height: 1.5em;
    }
    #page_assets .deduction-wallet-status {
        font-size: 0.78rem;
    }
}

/* From: bot.blade.php */
#page_bot .bot_strategy_card {
    cursor: pointer;
}

#page_bot .bot_strategy_icon {
    width: 48px;
    height: 48px;
}

/* From: bot-action-log.blade.php */
#page_bot_action_log .action-log-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

#page_bot_action_log .action-log-item:last-child {
    border-bottom: none;
}

#page_bot_action_log .action-timestamp {
    color: #6c757d;
    font-size: 0.875rem;
}

#page_bot_action_log .action-label {
    color: var(--app-purple-primary);
    font-weight: 500;
}

#page_bot_action_log .action-detail {
    display: block;
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 400;
}

/* From: bot-detail.blade.php */
/* Outranks the global .btn:disabled fill. */
#page_bot_detail .bot-op-tile:disabled {
    background-color: transparent !important;
    border-color: transparent !important;
    opacity: .45;
}

/* From: copy-trade-action-log.blade.php */
#page_copy_trade_action_log .action-log-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

#page_copy_trade_action_log .action-log-item:last-child {
    border-bottom: none;
}

#page_copy_trade_action_log .action-timestamp {
    color: #6c757d;
    font-size: 0.875rem;
}

#page_copy_trade_action_log .action-label {
    color: var(--app-purple-primary);
    font-weight: 500;
}

/* Loading/empty states - using shared utilities from member-style.css */

/* From: bot-history.blade.php */
/* Loading/empty states - using shared utilities from member-style.css */

/* From: bot-order.blade.php */
#page_bot_order .order-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #e9ecef;
}

#page_bot_order .order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dee2e6;
    gap: 12px;
}

#page_bot_order .order-header-left {
    flex: 1;
    min-width: 0;
}

#page_bot_order .order-header-right {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

#page_bot_order .order-header .btn {
    font-size: 0.75rem;
    padding: 4px 10px;
    white-space: nowrap;
}

#page_bot_order .order-details-table {
    width: 100%;
    font-size: 0.875rem;
}

#page_bot_order .order-details-table td {
    padding: 4px 8px;
    vertical-align: top;
    word-break: break-word;
    max-width: 0;
}

#page_bot_order .order-details-table td:first-child {
    font-weight: 600;
    color: #6c757d;
    width: 30%;
}

#page_bot_order .order-details-table td:last-child {
    word-break: break-word;
    overflow-wrap: break-word;
}

#page_bot_order .order-details-table .badge {
    max-width: 100%;
    word-break: break-word;
    white-space: normal;
    display: inline-block;
}

#page_bot_order .order-label {
    font-weight: 600;
    color: var(--app-purple-primary);
}

#page_bot_order .pnl-value {
    color: #ff8b7e;
    font-weight: 600;
}

/* Mobile Responsive Styles */
@media (max-width: 576px) {
    #page_bot_order .order-card {
        padding: 10px;
        margin-bottom: 10px;
    }

    #page_bot_order .order-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    #page_bot_order .order-header-left {
        width: 100%;
    }

    #page_bot_order .order-header-right {
        width: 100%;
        justify-content: stretch;
    }

    #page_bot_order .order-header .btn {
        flex: 1;
        font-size: 0.7rem;
        padding: 6px 8px;
    }

    #page_bot_order .order-details-table {
        font-size: 0.8rem;
    }

    #page_bot_order .order-details-table td {
        padding: 6px 4px;
    }

    #page_bot_order .order-details-table td:first-child {
        width: 35%;
    }

    #page_bot_order .order-details-table .badge {
        font-size: 0.75rem;
        padding: 4px 8px;
        line-height: 1.3;
    }
}

@media (max-width: 768px) {
    #page_bot_order .order-header .btn {
        font-size: 0.7rem;
        padding: 5px 10px;
    }
}

/* Loading and empty states (following assets pattern) */
.loading-state,
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: #6b7280;
}

.loading-state .fa-spinner {
    color: var(--app-purple-primary);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* From: notifications.blade.php */
#page_notifications .notification-list-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
#page_notifications .notification-list-item:last-child {
    border-bottom: none;
}
#page_notifications .notification-list-item:hover {
    background-color: var(--app-purple-light, rgba(111, 66, 193, 0.06));
}
#page_notifications .notification-list-item_unread {
    background-color: rgba(111, 66, 193, 0.04);
}
#page_notifications .notification-list-item_unread:hover {
    background-color: var(--app-purple-light, rgba(111, 66, 193, 0.08));
}
#page_notifications .notification-list-item__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
#page_notifications .notification-list-item__icon_unread {
    background: var(--app-purple-primary);
    color: white;
}
#page_notifications .notification-list-item__icon_seen {
    background: #e5e7eb;
    color: #6b7280;
}

/* From: bot-positions.blade.php */
/* Column edges line up with the bordered position box above: its 1rem padding + 2px border */
#page_bot_positions .bot-figures {
    padding: 0 calc(1rem + 2px);
}

#page_bot_positions .app-float-bottom-bar {
    z-index: 1000;
}

/* When batch menu is open, bar expands and spacer grows */
#page_bot_positions .app-float-bottom-bar.batch-open {
    max-height: 50vh;
    overflow-y: auto;
}

#page_bot_positions .app-float-bottom-spacer.batch-open {
    height: 50vh;
}

#page_bot_positions .batch-sheet {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.18);
    padding: 16px 16px 20px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    pointer-events: auto;
}

#page_bot_positions .batch-title {
    font-weight: 700;
    color: var(--app-purple-primary);
}

#page_bot_positions .batch-select-list {
    max-height: 35vh;
    overflow-y: auto;
}

#page_bot_positions .batch-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 16px;
    background: #f5f3ff;
    color: var(--app-purple-primary);
    border: 1px solid rgba(129, 140, 248, 0.5);
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.15s ease-in-out;
}

#page_bot_positions .batch-pill i {
    font-size: 1.25rem;
}

#page_bot_positions .batch-pill span {
    padding: 0 4px;
    line-height: 1.15;
    text-align: center;
}

#page_bot_positions .batch-filter label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-purple-primary);
}

@media (max-width: 576px) {
    #page_bot_positions .batch-pill {
        width: 64px;
        height: 64px;
        border-radius: 14px;
    }
}

/* From: commissions.blade.php */
/* Hero stats layout inside glass card */
#page_commissions .hero-stat-card {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 0.55rem 1rem;
    flex: 1 1 0;
    height: 100%;
    /* ensure equal height */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* From: community.blade.php */
/* Header card */
#page_community .community-header-card {
    background: var(--app-purple-primary);
    border-radius: 24px;
    box-shadow: var(--app-shadow-purple-md);
    color: white;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

#page_community .community-header-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--app-purple-primary-45);
    opacity: 0.12;
    pointer-events: none;
}

#page_community .community-header-card::after {
    content: '';
    position: absolute;
    right: -90px;
    top: -90px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    filter: blur(0.5px);
    pointer-events: none;
}

#page_community .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    font-weight: 600;
    font-size: 0.9rem;
}

#page_community .chip i {
    opacity: 0.9;
}

/* Scope tabs (header) */
#page_community .scope-tabs {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    padding: 6px;
    display: flex;
    gap: 6px;
}

#page_community .scope-tab {
    width: 100%;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    border-radius: 12px;
    padding: 10px 12px;
    transition: all 0.15s ease;
}

#page_community .scope-tab.active {
    background: rgba(255, 255, 255, 0.92);
    color: #111827;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

/* Stat tiles */
#page_community .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    #page_community .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

#page_community .stat-tile {
    border: 1px solid rgba(102, 126, 234, 0.12);
    border-radius: 18px;
    background: white;
    padding: 14px;
    box-shadow: 0 8px 26px rgba(17, 24, 39, 0.04);
    position: relative;
    overflow: hidden;
}

#page_community .stat-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120px 80px at 100% 0%, rgba(102, 126, 234, 0.10), transparent 60%);
    pointer-events: none;
}

#page_community .stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 126, 234, 0.12);
    color: var(--app-purple-primary);
    flex-shrink: 0;
}

#page_community .stat-label {
    font-size: 12px;
    color: #6b7280;
}

#page_community .stat-value {
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

#page_community .member-row {
    border: 1px solid rgba(102, 126, 234, 0.12);
    border-radius: 14px;
    background: #fff;
    transition: all 0.15s ease;
}

#page_community .member-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(17, 24, 39, 0.06);
}

#page_community .member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.20), rgba(102, 126, 234, 0.08));
    border: 1px solid rgba(102, 126, 234, 0.18);
    color: #1f2a37;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

#page_community .search-wrap {
    border: 1px solid rgba(102, 126, 234, 0.12);
    border-radius: 16px;
    background: white;
    box-shadow: 0 8px 26px rgba(17, 24, 39, 0.04);
}

#page_community .search-wrap .form-control {
    border: 0;
    border-radius: 16px;
}

#page_community .search-wrap .form-control:focus {
    box-shadow: none;
}

#page_community .search-icon {
    color: #9ca3af;
}

/* Loading and empty states */
#page_community .loading-state,
#page_community .empty-state {
    text-align: center;
    padding: 48px 24px;
    color: #6b7280;
}

#page_community .loading-state .fa-spinner {
    color: var(--app-purple-primary);
}

#page_community .empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* From: copy-trading.blade.php */
/* Strategy cards */
#page_copy_trading .strategy-card {
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

#page_copy_trading .strategy-card.batch-mode {
    cursor: pointer;
}

#page_copy_trading .strategy-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

#page_copy_trading .strategy-card::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--app-gradient-primary);
}

/* Metric cards */
#page_copy_trading .metric-card {
    background: var(--app-purple-light-2);
    border: 1px solid var(--app-purple-light);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

#page_copy_trading .metric-card .label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
}

#page_copy_trading .metric-card .value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-top: 4px;
}

/* Backtest modal */
#page_copy_trading .backtest-content {
    border: 2px solid var(--app-purple-light);
    border-radius: 12px;
    background: rgba(102, 126, 234, 0.05);
}

/* Batch operation overlay and sheet (same as bot-positions) */
#page_copy_trading .batch-overlay {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20000;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    pointer-events: auto;
}

#page_copy_trading .batch-sheet {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.18);
    padding: 16px 16px 20px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    pointer-events: auto;
}

#page_copy_trading .batch-title {
    font-weight: 700;
    color: var(--app-purple-primary);
}

#page_copy_trading .batch-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: 18px;
    background: rgba(102, 126, 234, 0.06);
    border: 1px solid rgba(102, 126, 234, 0.18);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    min-height: 80px;
}

#page_copy_trading .batch-pill:hover {
    background: rgba(102, 126, 234, 0.12);
    transform: translateY(-2px);
}

#page_copy_trading .batch-pill.active {
    background: var(--app-purple-primary);
    color: white;
    border-color: var(--app-purple-primary);
}

#page_copy_trading .batch-pill i {
    font-size: 1.25rem;
}

#page_copy_trading .batch-pill span {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

@media (max-width: 576px) {
    #page_copy_trading .batch-pill {
        width: 64px;
        height: 64px;
        border-radius: 14px;
        min-height: unset;
    }
}

/* From: credit-alert.blade.php */
#page_credit_alert .info-card {
    border-radius: 1rem;
    border: 1px solid rgba(var(--bs-primary-rgb, 79, 70, 229), 0.12);
    background: rgba(var(--bs-primary-rgb, 79, 70, 229), 0.03);
}

#page_credit_alert .info-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

#page_credit_alert .form-label {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.25rem;
}

#page_credit_alert .form-control-lg {
    border-radius: 0.75rem;
    font-size: 0.95rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

#page_credit_alert .helper-text {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

#page_credit_alert .page-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb, 79, 70, 229), 0.08);
    color: var(--bs-primary);
}

#page_credit_alert .page-title {
    font-size: 1.05rem;
    font-weight: 600;
}

#page_credit_alert .meta-row {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

/* From: deposit.blade.php */
#page_deposit .deposit-illustration {
    max-width: 280px;
}

#page_deposit .qr-code-wrapper {
    box-shadow: var(--app-shadow-sm);
}

#page_deposit .qr-code-wrapper img {
    width: 200px;
    height: 200px;
}

#page_deposit .deposit-address-input {
    font-family: 'Courier New', monospace;
    word-break: break-all;
}

/* From: exchange-apis.blade.php */
#page_exchange_apis .card {
    border: none;
    border-radius: 20px;
    box-shadow: var(--app-shadow-sm);
    transition: all 0.3s ease;
}

#page_exchange_apis .exchange-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition: all 0.2s ease;
}

#page_exchange_apis .exchange-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-md);
    border-color: var(--app-purple-light);
}

#page_exchange_apis .exchange-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

#page_exchange_apis .exchange-card:hover .exchange-icon {
    transform: scale(1.1) rotate(5deg);
}

#page_exchange_apis .icon-binance {
    background: rgba(240, 185, 11, 0.1);
    color: #F0B90B;
}

#page_exchange_apis .icon-okx {
    background: rgba(0, 0, 0, 0.05);
    color: #000000;
}

#page_exchange_apis .icon-triix {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

#page_exchange_apis .status-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#page_exchange_apis .status-bound {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

#page_exchange_apis .status-unbound {
    background: #f1f5f9;
    color: #64748b;
}

/* Modal Styles */
#page_exchange_apis .modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: var(--app-shadow-lg);
}

#page_exchange_apis .modal-header {
    border-bottom: 1px solid #f1f5f9;
    padding: 1.5rem;
}

#page_exchange_apis .modal-body {
    padding: 1.5rem;
}

#page_exchange_apis .modal-footer {
    border-top: 1px solid #f1f5f9;
    padding: 1.5rem;
}

#page_exchange_apis .form-control {
    border-radius: 12px;
    padding: 0.75rem 1rem;
    border-color: #e2e8f0;
}

#page_exchange_apis .form-control:focus {
    border-color: var(--app-purple-primary);
    box-shadow: 0 0 0 4px var(--app-purple-light);
}

/* From: trading-accounts.blade.php */
#page_trading_accounts .account-card {
    background: white;
    color: #212529;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

#page_trading_accounts .account-login {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

#page_trading_accounts .figure-label {
    font-size: 0.75rem;
    color: #64748b;
}

#page_trading_accounts .figure-unit {
    font-size: 0.75rem;
    color: #64748b;
    margin-left: 2px;
}

#page_trading_accounts .card {
    border: none;
    border-radius: 20px;
    box-shadow: var(--app-shadow-sm);
}

/* From: trade.blade.php, trade-history.blade.php */
#page_trade_history .trade-card {
    background: white;
    color: #212529;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

#page_trade_history .trade-symbol {
    font-size: 1.05rem;
    font-weight: 700;
}

#page_trade .figure-label,
#page_trade_history .figure-label {
    font-size: 0.75rem;
    color: #64748b;
}

#page_trade .figure-value,
#page_trade_history .figure-value {
    font-weight: 600;
}

#page_trade .card,
#page_trade_history .card {
    border: none;
    border-radius: 20px;
    box-shadow: var(--app-shadow-sm);
}

/* Wider than other pages: symbols, chart and side panel side by side. Header included so the title stays aligned. */
#page_trade .container-fluid {
    max-width: 1680px;
}

#page_trade .trade-panel {
    align-self: start;
}

#page_trade .trade-panel-symbol {
    font-size: 1rem;
    font-weight: 700;
}

/* Sell and Buy: side picker and live bid / ask in one. */
#page_trade .trade-sides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#page_trade .trade-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.55rem 0.5rem;
    border: 1px solid;
    border-radius: 12px;
    background: white;
    font-weight: 600;
}

#page_trade .trade-side-label {
    font-size: 0.8rem;
}

#page_trade .trade-side-price {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#page_trade .trade-side.side-sell {
    border-color: #ef4444;
    color: #dc2626;
}

#page_trade .trade-side.side-buy {
    border-color: #10b981;
    color: #059669;
}

#page_trade .trade-side.side-sell.active {
    background: #ef4444;
    color: white;
}

#page_trade .trade-side.side-buy.active {
    background: #10b981;
    color: white;
}

/* Side panel and open list tabs: underlined, count in a pill. */
#page_trade .trade-tabs {
    display: flex;
}

#page_trade .trade-panel .trade-tabs {
    border-bottom: 1px solid #e2e8f0;
}

#page_trade .trade-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    color: #64748b;
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}

#page_trade .trade-panel .trade-tabs button {
    flex: 1 1 0;
}

#page_trade .trade-tabs button.active {
    border-bottom-color: var(--app-purple-primary);
    color: var(--app-purple-primary);
}

#page_trade .trade-tabs button:disabled {
    opacity: 0.4;
}

#page_trade .trade-tab-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.72rem;
    line-height: 18px;
}

#page_trade .trade-tabs button.active .trade-tab-count {
    background: var(--app-purple-light);
    color: var(--app-purple-primary);
}

#page_trade .trade-est {
    min-height: 1.25em;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#page_trade .trade-rr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f8fafc;
}

#page_trade .trade-open {
    overflow: hidden;
}

#page_trade .trade-open-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
}

#page_trade .trade-open-empty {
    padding: 1.25rem;
    text-align: center;
    color: #64748b;
    font-weight: 600;
}

#page_trade .trade-table th {
    padding: 7px 10px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

#page_trade .trade-table td {
    padding: 6px 10px;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    vertical-align: middle;
}

#page_trade .trade-table tbody tr {
    cursor: pointer;
}

#page_trade .trade-table tbody tr:hover td {
    background: #f8fafc;
}

/* The picked row: tinted, marked on its left edge. */
#page_trade .trade-table tbody tr.picked td {
    background: var(--app-purple-light);
}

#page_trade .trade-table tbody tr.picked td:first-child {
    box-shadow: inset 3px 0 0 var(--app-purple-primary);
}

#page_trade .trade-table tbody tr:last-child td {
    border-bottom: none;
}

#page_trade .trade-table .btn-xs {
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
}

/* From: components/trade-chart/*.blade.php */
/* Grid areas: desktop symbols | chart over list | side panel; phone chart, side panel, list. */
.trade-chart .chart-main {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "chart" "side" "list";
    gap: 1rem;
}

.trade-chart .chart-card {
    grid-area: chart;
}

.trade-chart .trade-panel {
    grid-area: side;
}

.trade-chart .trade-open {
    grid-area: list;
}

/* Header row: symbol, last price, bid, ask, spread; account at the right end. */
.trade-chart .chart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 24px;
    row-gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
}

.trade-chart .chart-head-symbol {
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}

.trade-chart .chart-head-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
}

.trade-chart .chart-head-toggle .fas {
    color: #64748b;
    font-size: 0.7rem;
}

.trade-chart .chart-head-last {
    white-space: nowrap;
}

.trade-chart .chart-head-price {
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.trade-chart .chart-head-last .figure-label {
    font-variant-numeric: tabular-nums;
}

.trade-chart .chart-head-figures {
    display: flex;
    column-gap: 24px;
    white-space: nowrap;
}

.trade-chart .chart-head-account {
    max-width: 260px;
    margin-left: auto;
}

.trade-chart .chart-head-account .form-select {
    border-radius: 8px;
    font-weight: 600;
}

/* Toolbar row: the left part scrolls on a phone, settings and full screen stay in view. */
.trade-chart .chart-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid #e2e8f0;
}

.trade-chart .chart-toolbar-scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.trade-chart .chart-toolbar-scroll > * {
    flex-shrink: 0;
}

.trade-chart .chart-toolbar-scroll > * + * {
    padding-left: 6px;
    border-left: 1px solid #e2e8f0;
}

.trade-chart .chart-toolbar-end {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    padding-left: 6px;
    border-left: 1px solid #e2e8f0;
}

.trade-chart .chart-intervals {
    display: flex;
    gap: 2px;
}

.trade-chart .chart-tb-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border: none;
    border-radius: 6px;
    background: none;
    color: #475569;
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
}

.trade-chart .chart-tb-btn:hover:not(:disabled) {
    background: #f1f5f9;
}

.trade-chart .chart-tb-btn.active {
    background: var(--app-purple-light);
    color: var(--app-purple-primary);
}

.trade-chart .chart-card {
    overflow: hidden;
}

.trade-chart .chart-symbols > .card {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow: hidden;
}

.trade-chart .chart-symbols-search {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.trade-chart .chart-symbols-search i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.75rem;
}

.trade-chart .chart-symbols-search input {
    padding-left: 28px;
    border-radius: 8px;
}

.trade-chart .chart-symbols-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 0 8px;
}

.trade-chart .chart-folder {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 7px 10px 7px 6px;
    border: none;
    background: none;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: left;
}

.trade-chart .chart-folder .fas {
    font-size: 0.6rem;
}

.trade-chart .chart-folder-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trade-chart .chart-folder-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.trade-chart .chart-symbol {
    display: block;
    width: 100%;
    padding: 6px 10px 6px 25px;
    border: none;
    border-left: 3px solid transparent;
    background: none;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trade-chart .chart-symbol:hover {
    background: #f8fafc;
}

.trade-chart .chart-symbol.active {
    border-left-color: var(--app-purple-primary);
    background: var(--app-purple-light);
    color: var(--app-purple-primary);
}

.trade-chart .chart-symbols-empty {
    padding: 16px 10px;
    color: #64748b;
    font-size: 0.85rem;
    text-align: center;
}

.trade-chart .chart-body {
    display: flex;
    gap: 6px;
    padding: 6px 8px 8px;
}

.trade-chart .chart-drawbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    width: 36px;
    padding: 4px 0;
    border-right: 1px solid #e2e8f0;
    overflow-y: auto;
    scrollbar-width: none;
}

.trade-chart .chart-draw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: none;
    color: #475569;
    font-size: 0.85rem;
}

.trade-chart .chart-draw-btn:hover:not(:disabled) {
    background: #f1f5f9;
}

.trade-chart .chart-draw-btn.active {
    background: var(--app-purple-light);
    color: var(--app-purple-primary);
}

.trade-chart .chart-magnet {
    position: relative;
}

.trade-chart .chart-magnet-mode {
    position: absolute;
    right: 1px;
    bottom: 0;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1;
}

.trade-chart .chart-draw-btn:disabled {
    opacity: 0.35;
}

.trade-chart .chart-draw-sep {
    flex-shrink: 0;
    width: 20px;
    margin: 4px 0;
    border-top: 1px solid #e2e8f0;
}

.trade-chart .chart-swatch {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 3px 0;
    padding: 0;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #cbd5e1;
}

.trade-chart .chart-swatch.active {
    box-shadow: 0 0 0 2px var(--app-purple-primary);
}

.trade-chart .chart-card:fullscreen {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    background: white;
}

.trade-chart .chart-card:fullscreen .chart-body {
    flex: 1 1 auto;
    min-height: 0;
}

.trade-chart .chart-card:fullscreen .chart-stage {
    height: auto;
}

/* Bootstrap's backdrop stays in <body>, outside what full screen draws. */
.trade-chart .chart-card:fullscreen > .modal {
    background: rgba(15, 23, 42, 0.5);
}

.trade-chart .figure-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.trade-chart .text-sell {
    color: #dc2626;
}

.trade-chart .text-buy {
    color: #059669;
}

.trade-chart .chart-segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3px;
    border-radius: 10px;
    background: #f1f5f9;
}

.trade-chart .chart-segment button {
    padding: 0.35rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    font-weight: 600;
    font-size: 0.875rem;
}

.trade-chart .chart-segment button.active {
    background: white;
    color: var(--app-purple-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.trade-chart .chart-ind-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trade-chart .chart-ind-count {
    margin-left: 6px;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--app-purple-primary);
    color: white;
    font-size: 0.7rem;
    line-height: 18px;
    text-align: center;
}

.trade-chart .chart-active {
    display: flex;
    gap: 4px;
}

.trade-chart .chart-ind-head {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.trade-chart .chart-ind-total {
    color: #64748b;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.trade-chart .chart-ind-search {
    position: relative;
    flex: 1 1 180px;
    max-width: 280px;
    margin-left: auto;
}

.trade-chart .chart-ind-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.8rem;
}

.trade-chart .chart-ind-search input {
    padding-left: 30px;
    border-radius: 10px;
}

.trade-chart .chart-ind-head .btn-close {
    margin: 0;
}

.trade-chart .chart-ind-body {
    display: grid;
    grid-template-columns: 360px 1fr;
    height: min(560px, 70vh);
}

.trade-chart .chart-ind-list,
.trade-chart .chart-ind-settings {
    overflow-y: auto;
    min-height: 0;
}

.trade-chart .chart-ind-list {
    border-right: 1px solid #e2e8f0;
    padding: 8px 0;
}

.trade-chart .chart-ind-settings {
    padding: 16px 20px;
}

.trade-chart .chart-ind-group + .chart-ind-group {
    margin-top: 8px;
}

.trade-chart .chart-ind-group-head {
    display: flex;
    justify-content: space-between;
    padding: 6px 16px;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.trade-chart .chart-ind-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 0 0;
    border-left: 3px solid transparent;
}

.trade-chart .chart-ind-row.selected {
    background: var(--app-purple-light);
    border-left-color: var(--app-purple-primary);
}

.trade-chart .chart-ind-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 0 8px 13px;
    border: none;
    background: none;
    text-align: left;
}

.trade-chart .chart-ind-badge {
    flex-shrink: 0;
    min-width: 44px;
    padding: 3px 6px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.trade-chart .chart-ind-row.selected .chart-ind-badge {
    background: var(--app-purple-primary);
    color: white;
}

.trade-chart .chart-ind-name {
    color: #1e293b;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
}

.trade-chart .chart-ind-settings-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.trade-chart .chart-ind-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.trade-chart .chart-ind-section {
    margin-bottom: 8px;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
}

.trade-chart .chart-ind-params {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.trade-chart .chart-ind-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trade-chart .chart-ind-line {
    display: grid;
    grid-template-columns: 72px 48px minmax(0, 1fr) minmax(0, 1.3fr);
    max-width: 620px;
    align-items: center;
    gap: 10px;
}

.trade-chart .chart-ind-line-head {
    color: #64748b;
    font-size: 0.75rem;
}

.trade-chart .chart-ind-line-title {
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 600;
    text-overflow: ellipsis;
}

.trade-chart .chart-ind-line .form-control-color {
    width: 48px;
    height: 34px;
    padding: 3px;
}

.trade-chart .chart-segment.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.trade-chart .chart-segment.cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.trade-chart .chart-set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.trade-chart .chart-set-row .form-control-color {
    width: 48px;
    height: 34px;
    padding: 3px;
}

.trade-chart .form-switch .form-check-input {
    width: 2.4em;
    height: 1.3em;
    cursor: pointer;
}

.trade-chart .form-switch .form-check-input:checked {
    background-color: var(--app-purple-primary);
    border-color: var(--app-purple-primary);
}

.trade-chart .chart-chip {
    padding: 1px 7px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: white;
    color: #475569;
    font-weight: 600;
    font-size: 0.72rem;
    white-space: nowrap;
}

.trade-chart .chart-chip.active {
    background: var(--app-purple-light);
    border-color: var(--app-purple-primary);
    color: var(--app-purple-primary);
}

.trade-chart .chart-legends {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.trade-chart .chart-legend {
    position: absolute;
    left: 6px;
    right: 70px;
    font-size: 11px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.trade-chart .chart-legend > div {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
}

.trade-chart .chart-legend-name {
    color: #334155;
    font-weight: 600;
}

.trade-chart .chart-stage {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 600px;
}

/* Desktop columns: symbols, chart over the open list, side panel. The list row takes any spare height. */
@media (min-width: 992px) {
    .trade-chart .chart-main {
        grid-template-columns: 180px minmax(0, 1fr) 280px;
        grid-template-rows: auto 1fr;
        grid-template-areas: "symbols chart side" "symbols list side";
    }

    .trade-chart .trade-open {
        align-self: start;
    }

    /* Out of flow: the list takes the height of the chart and open list instead of setting it. */
    .trade-chart .chart-symbols {
        grid-area: symbols;
        position: relative;
    }

    .trade-chart .chart-symbols > .card {
        position: absolute;
        inset: 0;
        max-height: none;
    }

    .trade-chart .chart-main.symbols-hidden {
        grid-template-columns: minmax(0, 1fr) 280px;
        grid-template-areas: "chart side" "list side";
    }

    .trade-chart .chart-main.symbols-hidden .chart-symbols {
        display: none;
    }

    /* Chart and the open list's first rows within 900 px of height. */
    .trade-chart .chart-stage {
        height: 460px;
    }

    /* contain: the drawing toolbar never sets the chart's height; tighter buttons keep every one in view at 460 px. */
    .trade-chart .chart-drawbar {
        contain: size;
        gap: 0;
        padding: 2px 0;
    }

    .trade-chart .chart-draw-btn {
        width: 26px;
        height: 26px;
    }

    .trade-chart .chart-swatch {
        width: 16px;
        height: 16px;
        margin: 2px 0;
    }

    .trade-chart .chart-draw-sep {
        margin: 3px 0;
    }
}

.trade-chart .chart-main > .card {
    margin-bottom: 0;
}

@media (min-width: 1400px) {
    .trade-chart .chart-main {
        grid-template-columns: 200px minmax(0, 1fr) 320px;
    }

    .trade-chart .chart-main.symbols-hidden {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

@media (max-width: 991.98px) {
    .trade-chart .chart-symbols:not(.open) {
        display: none;
    }

    .trade-chart .chart-symbols.open {
        position: absolute;
        left: 8px;
        z-index: 30;
        width: min(320px, calc(100% - 16px));
    }

    .trade-chart .chart-symbols.open > .card {
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    }
}

@media (max-width: 767.98px) {
    .trade-chart .chart-head {
        column-gap: 16px;
        padding: 8px 10px;
    }

    .trade-chart .chart-head-figures {
        column-gap: 14px;
    }

    .trade-chart .chart-head-account {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* touch-action: lightweight-charts-drawing works on pointer events; without it a touch drag of a drawing ends in pointercancel. */
.trade-chart .chart-pane {
    position: absolute;
    inset: 0;
    touch-action: none;
}

.trade-chart .chart-pane.picking,
.trade-chart .chart-pane.picking * {
    cursor: crosshair !important;
}

#page_trade .trade-pick {
    padding: 0 8px;
    border: 1px solid #cbd5e1;
    background: white;
    color: #64748b;
    font-size: 0.8rem;
}

/* Room for a 5-digit price beside the pick button in a half-width column. */
#page_trade .input-group > input[type="number"] {
    min-width: 0;
    padding-left: 8px;
    padding-right: 4px;
}

#page_trade .trade-pick.active {
    border-color: var(--app-purple-primary);
    background: var(--app-purple-light);
    color: var(--app-purple-primary);
}

#page_trade .trade-lot-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 6px;
}

#page_trade .trade-lot-presets button {
    padding: 2px 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#page_trade .trade-lot-presets button.active {
    border-color: var(--app-purple-primary);
    background: var(--app-purple-light);
    color: var(--app-purple-primary);
}

#page_trade .trade-lots-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0.5rem;
}

#page_trade .trade-lots-head .form-label {
    margin-bottom: 0;
}

#page_trade .trade-lots-head .chart-segment button {
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
}

#page_trade .trade-risk-hint {
    margin-top: 6px;
    color: #d97706;
    font-size: 0.75rem;
}

.trade-chart .chart-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
}

@media (max-width: 767.98px) {
    .trade-chart .chart-stage {
        height: 520px;
    }

    .trade-chart .chart-ind-search {
        flex-basis: 100%;
        max-width: none;
        order: 3;
    }

    .trade-chart .chart-ind-head .btn-close {
        margin-left: auto;
    }

    .trade-chart .chart-ind-body {
        display: block;
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .trade-chart .chart-ind-list {
        border-right: none;
    }

    .trade-chart .chart-ind.view-list .chart-ind-settings,
    .trade-chart .chart-ind.view-list .chart-ind-restore,
    .trade-chart .chart-ind.view-settings .chart-ind-list {
        display: none;
    }
    .trade-chart .chart-ind-params {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trade-chart .chart-ind-line {
        grid-template-columns: 1fr 1fr;
    }

    .trade-chart .chart-ind-line .form-control-color {
        justify-self: end;
    }

    .trade-chart .chart-ind-line-head {
        display: none;
    }
}

/* From: faq.blade.php */


/* From: follow-details.blade.php */
/* Page-scoped: default theme (purple) details UI */
#page_follow_details {
    --fd-accent: var(--app-purple-primary);
    --fd-accent-2: var(--app-purple-secondary);
    --fd-radius: 18px;
}

#page_follow_details .fd_title_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

#page_follow_details .fd_title {
    font-weight: 900;
    color: #111827;
}

#page_follow_details .fd_value_box {
    background: #f9fafb;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 12px 12px;
    color: #111827;
    font-weight: 800;
}

#page_follow_details .fd_kv {
    color: var(--fd-accent);
    font-weight: 800;
    font-size: 12px;
    line-height: 1.8;
}

#page_follow_details .fd_card {
    background: #ffffff;
    border-radius: var(--fd-radius);
    box-shadow: var(--app-shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    padding: 14px;
    margin-bottom: 12px;
}

#page_follow_details .fd_card_title {
    font-weight: 900;
    color: #111827;
    margin-bottom: 10px;
}

#page_follow_details .fd_pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#page_follow_details .fd_pill_btn {
    border: 1px solid rgba(102, 126, 234, 0.35);
    background: rgba(102, 126, 234, 0.06);
    border-radius: 14px;
    padding: 10px 12px;
    font-weight: 900;
    color: var(--fd-accent);
}

#page_follow_details .fd_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

#page_follow_details .fd_row:first-child {
    border-top: none;
}

#page_follow_details .fd_row .label {
    color: #111827;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

#page_follow_details .fd_row .hint {
    color: #6b7280;
    font-size: 12px;
    margin-top: 4px;
}

#page_follow_details .fd_row .right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#page_follow_details .fd_select_btn {
    border-radius: 12px;
    padding: 8px 12px;
    font-weight: 900;
    border: 1px solid rgba(102, 126, 234, 0.35);
    background: rgba(102, 126, 234, 0.06);
    color: var(--fd-accent);
}

#page_follow_details .fd_inline_input {
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
}

#page_follow_details .fd_inline_input input {
    border: none;
    outline: none;
    padding: 8px 10px;
    width: 88px;
    font-weight: 900;
    color: #111827;
    background: transparent;
}

#page_follow_details .fd_inline_input .addon {
    padding: 8px 12px;
    font-weight: 900;
    background: rgba(102, 126, 234, 0.08);
    color: var(--fd-accent);
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}

@media (max-width: 420px) {
    #page_follow_details .fd_row .right {
        justify-content: flex-end;
    }

    #page_follow_details .fd_inline_input input {
        width: 72px;
    }
}

/* From: follow-strategy.blade.php */
/* Page-scoped UI polish (uses member-style variables) */
#page_follow_strategy {
    --fs-accent: var(--app-purple-primary);
    --fs-accent-2: var(--app-purple-secondary);
    --fs-card-radius: 18px;
}

#page_follow_strategy #page_follow_strategy_wrapper {
    padding-bottom: 104px;
    /* room for fixed bottom action */
}

#page_follow_strategy .fs_top {
    background: #ffffff;
    border-radius: var(--fs-card-radius);
    box-shadow: var(--app-shadow-sm);
    padding: 14px 14px 12px 14px;
    margin-bottom: 14px;
}

#page_follow_strategy .fs_tabs_wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#page_follow_strategy .fs_tabs_wrap::-webkit-scrollbar {
    display: none;
}

#page_follow_strategy .fs_tabs_wrap .nav-tabs {
    flex-wrap: nowrap;
    white-space: nowrap;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#page_follow_strategy .fs_tabs_wrap .nav-link {
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#page_follow_strategy .fs_note {
    background: rgba(245, 158, 11, 0.08);
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    padding: 10px 12px;
}

/* Search bar (better UX than input-group) */
#page_follow_strategy .fs_search {
    position: relative;
}

#page_follow_strategy .fs_search .fs_search_input {
    border-radius: 14px;
    padding: 12px 44px 12px 42px;
    border: 1px solid var(--app-purple-light);
    background: #fff;
}

#page_follow_strategy .fs_search .fs_search_input:focus {
    border-color: var(--fs-accent);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.12);
}

#page_follow_strategy .fs_search .fs_search_icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fs-accent);
    opacity: 0.9;
    pointer-events: none;
}

#page_follow_strategy .fs_search .fs_search_clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 0;
    background: rgba(102, 126, 234, 0.08);
    color: var(--fs-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#page_follow_strategy .fs_pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

#page_follow_strategy .fs_chip {
    border: 1px solid rgba(102, 126, 234, 0.28);
    background: rgba(102, 126, 234, 0.06);
    color: var(--fs-accent);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

#page_follow_strategy .fs_chip.active {
    background: var(--fs-accent);
    border-color: var(--fs-accent);
    color: #fff;
    box-shadow: var(--app-shadow-purple-sm);
}

#page_follow_strategy .fs_segment .btn {
    padding: 8px 12px;
}

#page_follow_strategy .fs_list_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 2px 10px 2px;
}

#page_follow_strategy .fs_list_title .title {
    font-weight: 800;
    color: #111827;
}

#page_follow_strategy .fs_strategy {
    background: #fff;
    border-radius: var(--fs-card-radius);
    box-shadow: var(--app-shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 12px;
}

#page_follow_strategy .fs_strategy::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--fs-accent), var(--fs-accent-2));
    opacity: 0.9;
}

#page_follow_strategy .fs_strategy_body {
    padding: 14px 14px 12px 14px;
}

#page_follow_strategy .fs_head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#page_follow_strategy .fs_name {
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
}

#page_follow_strategy .fs_label {
    color: #6b7280;
    font-size: 12px;
    margin-top: 2px;
}

#page_follow_strategy .fs_meta {
    text-align: right;
    color: #6b7280;
    font-size: 12px;
    white-space: nowrap;
}

#page_follow_strategy .fs_metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-top: 12px;
}

#page_follow_strategy .fs_metric .label {
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
}

#page_follow_strategy .fs_metric .val {
    color: #111827;
    font-weight: 800;
    margin-top: 2px;
}

#page_follow_strategy .fs_actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

#page_follow_strategy .fs_actions .btn-link {
    font-weight: 800;
}

#page_follow_strategy .fs_bottom_bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 64px;
    /* above bottom nav */
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

#page_follow_strategy .fs_bottom_bar .container-fluid {
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

#modal_follow_strategy_batch .modal-content {
    border-radius: 18px;
    border: 0;
    box-shadow: var(--app-shadow-md);
}

#modal_follow_strategy_batch .modal-header {
    border-bottom: 0;
    padding-bottom: 0;
}

#modal_follow_strategy_batch .modal-footer {
    border-top: 0;
}

/* From: g2fa.blade.php */
/* TODO: move button, form-control styles to global styles */
#page_g2fa .status-indicator {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

#page_g2fa .status-indicator.enabled {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

#page_g2fa .status-indicator.disabled {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

#page_g2fa .status-indicator.loading {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

#page_g2fa .step-indicator {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    margin-right: 12px;
}

#page_g2fa .qr-container {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 2px dashed #d1d5db;
}

#page_g2fa .secret-key-box {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 12px;
    font-family: 'Courier New', monospace;
    word-break: break-all;
    font-size: 0.9rem;
}

#page_g2fa .step-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

#page_g2fa .step-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.g2fa-copy-btn {
    background: #f8fafc;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 12px;
    color: #6b7280;
    transition: all 0.2s ease;
}

.g2fa-copy-btn:hover {
    background: #f1f5f9;
    color: #374151;
}

.g2fa-progress-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0 0 24px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.g2fa-progress-step {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 80px;
    /* Add spacing between steps */
}

.g2fa-progress-step:last-child {
    margin-right: 0;
    /* Remove margin from last step */
}

.g2fa-progress-step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.g2fa-progress-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    /* Half of circle height (40px) */
    right: -70px;
    /* Position line between circles with new spacing */
    width: 60px;
    height: 2px;
    background: #e2e8f0;
    transition: background-color 0.3s ease;
}

.g2fa-progress-step.completed:not(:last-child)::after {
    background: #10b981;
}

.g2fa-progress-step.active:not(:last-child)::after {
    background: linear-gradient(90deg, #10b981 50%, #e2e8f0 50%);
}

.g2fa-progress-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 2px solid #e2e8f0;
    background: white;
    color: #6b7280;
}

.g2fa-progress-step.completed .g2fa-progress-circle {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

.g2fa-progress-step.active .g2fa-progress-circle {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
    transform: scale(1.1);
}

.g2fa-progress-label {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #6b7280;
    white-space: nowrap;
    font-weight: 500;
    text-align: center;
}

.g2fa-progress-step.active .g2fa-progress-label {
    color: #3b82f6;
    font-weight: 600;
}

.g2fa-progress-step.completed .g2fa-progress-label {
    color: #10b981;
}

@media (max-width: 768px) {
    #page_g2fa .qr-container {
        padding: 16px;
    }

    #page_g2fa .btn {
        margin-bottom: 8px;
    }

    #page_g2fa .d-flex.gap-2 {
        flex-direction: column;
        gap: 0 !important;
    }

    #page_g2fa .secret-key-box {
        font-size: 0.8rem;
        padding: 10px;
    }

    .g2fa-progress-steps {
        padding: 16px;
        margin: 0 0 16px;
    }

    .g2fa-progress-step {
        margin-right: 60px;
        /* Reduced spacing for mobile */
    }

    .g2fa-progress-step:not(:last-child)::after {
        top: 16px;
        /* Half of mobile circle height (32px) */
        right: -50px;
        /* Adjust for mobile spacing */
        width: 40px;
    }

    .g2fa-progress-circle {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .g2fa-progress-label {
        font-size: 0.7rem;
        margin-top: 6px;
    }
}

@media (max-width: 576px) {
    #page_g2fa .col-md-6 {
        margin-bottom: 20px;
    }
}

/* From: guides.blade.php */
#page_guides .type-title:hover {
    color: var(--color-primary) !important;
}

/* From: income-ranking.blade.php */
#page_income_ranking .podium-card {
    border-radius: 20px;
    background: #ffffff;
    border: none;
    box-shadow: var(--app-shadow-sm);
}

#page_income_ranking .podium-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

#page_income_ranking .podium-item {
    text-align: center;
    flex: 1;
    max-width: 100px;
}

#page_income_ranking .podium-item.first {
    order: 2;
}

#page_income_ranking .podium-item.second {
    order: 1;
    margin-top: 20px;
}

#page_income_ranking .podium-item.third {
    order: 3;
    margin-top: 20px;
}

#page_income_ranking .avatar-ring {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    padding: 3px;
    margin: 0 auto 0.75rem;
    background: linear-gradient(135deg, var(--app-purple-primary), var(--app-purple-secondary));
    box-shadow: var(--app-shadow-purple-md);
}

#page_income_ranking .avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 1.1rem;
}

#page_income_ranking .avatar-ring.gold {
    background: var(--app-gold-gradient);
    box-shadow: var(--app-gold-shadow);
}

#page_income_ranking .avatar-ring.silver {
    background: var(--app-silver-gradient);
}

#page_income_ranking .avatar-ring.bronze {
    background: var(--app-bronze-gradient);
}

#page_income_ranking .income-amount {
    color: var(--app-purple-primary);
    font-weight: 700;
    font-size: 1rem;
    background: var(--app-purple-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#page_income_ranking .username {
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 4px;
}

#page_income_ranking .rank-label {
    font-size: 0.75rem;
    font-weight: 600;
}

#page_income_ranking .top-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b5563;
}

#page_income_ranking .table-card {
    border-radius: 20px;
    border: none;
    box-shadow: var(--app-shadow-sm);
    overflow: hidden;
}

#page_income_ranking .table-card-header {
    border-bottom: 1px solid #e5e7eb;
}

#page_income_ranking .rank-table-wrapper {
    position: relative;
}

#page_income_ranking .rank-pill {
    min-width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

#page_income_ranking .rank-list-item {
    display: flex;
    align-items: stretch;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
    background-color: #ffffff;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

#page_income_ranking .rank-list-item:last-child {
    border-bottom: none;
}

#page_income_ranking .rank-list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--app-purple-primary), var(--app-purple-secondary));
    opacity: 0;
    transition: opacity 0.2s ease;
}

#page_income_ranking .rank-list-item.row-alt {
    background-color: #fafafb;
}

#page_income_ranking .rank-list-item.row-current {
    background: linear-gradient(90deg, rgba(129, 140, 248, 0.10), rgba(167, 139, 250, 0.16));
}

#page_income_ranking .rank-list-item.row-current::before {
    opacity: 1;
}

#page_income_ranking .rank-list-item:hover {
    background-color: #f9fafb;
    transform: translateX(3px);
}

#page_income_ranking .rank-user-name {
    font-weight: 600;
    color: #111827;
}

#page_income_ranking .rank-income-label {
    font-size: 0.75rem;
    color: #9ca3af;
}

#page_income_ranking .text-purple {
    color: var(--app-purple-primary) !important;
}

#page_income_ranking .badge-top {
    background: rgba(139, 92, 246, 0.12);
    color: var(--app-purple-primary);
    border-radius: 999px;
    font-size: 0.75rem;
    padding: 0.3rem 0.7rem;
}

#page_income_ranking .you-pill {
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    background-color: rgba(129, 140, 248, 0.12);
    color: var(--app-purple-primary);
}

#page_income_ranking .table-footer {
    border-top: 1px solid #f1f5f9;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    color: #9ca3af;
}

#page_income_ranking [x-cloak] {
    display: none !important;
}

@media (max-width: 768px) {
    #page_income_ranking .podium-container {
        gap: 0.9rem;
    }

    #page_income_ranking .avatar-ring {
        width: 64px;
        height: 64px;
    }

    #page_income_ranking .table-card .card-body {
        padding: 1rem;
    }
}

/* From: index.blade.php */
/* Enhanced hero section */
#page_index .hero-placeholder {
    background: var(--app-purple-primary);
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    min-height: 180px;
    box-shadow: var(--app-shadow-sm);
    position: relative;
}

#page_index .hero-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Bootstrap Carousel Enhancements */
#page_index #homeCarousel {
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

#page_index #homeCarousel .carousel-inner,
#page_index #homeCarousel .carousel-item {
    height: 100%;
}

/* Keep slide links below controls so prev/next clicks work */
#page_index #homeCarousel .carousel-item > a,
#page_index #homeCarousel .carousel-item > img {
    position: relative;
    z-index: 0;
}

#page_index #homeCarousel .home-carousel-controls .carousel-control-prev,
#page_index #homeCarousel .home-carousel-controls .carousel-control-next {
    z-index: 3;
}

#page_index #homeCarousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

#page_index #homeCarousel img:hover {
    transform: scale(1.02);
}

#page_index #homeCarousel .carousel-control-prev,
#page_index #homeCarousel .carousel-control-next {
    width: 50px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

#page_index #homeCarousel .carousel-control-prev:hover,
#page_index #homeCarousel .carousel-control-next:hover {
    opacity: 1;
}

/* Enhanced profit card */
#page_index .profit-card {
    border-radius: 20px;
    background: var(--app-purple-primary);
    color: white;
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: var(--app-shadow-purple-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#page_index .profit-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--app-shadow-purple-xl);
}

#page_index .profit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

#page_index .profit-card .card-body {
    position: relative;
    z-index: 2;
    padding: 2rem;
}

#page_index .profit-card .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500;
}

#page_index .profit-card .display-6 {
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#page_index .profit-card .bg-line {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 80%;
    opacity: 0.15;
    filter: brightness(1.5);
}

#page_index .profit-card i {
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: color 0.3s ease;
    font-size: 1.1rem;
}

#page_index .profit-card i:hover {
    color: white;
}

/* Enhanced feature grid */
#page_index .grid-feature .item {
    text-align: center;
    padding: 20px 12px;
    border-radius: 16px;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

#page_index .grid-feature .item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--app-purple-light-5);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 16px;
}

#page_index .grid-feature .item:hover::before {
    opacity: 1;
}

#page_index .grid-feature .item:hover {
    transform: translateY(-8px);
    box-shadow: var(--app-shadow-lg);
    text-decoration: none;
    color: inherit;
}

#page_index .grid-feature .icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--app-purple-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: white;
    font-size: 1.2rem;
    box-shadow: var(--app-shadow-purple-md);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

#page_index .grid-feature .item:hover .icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: var(--app-shadow-purple-lg);
}

#page_index .grid-feature .small {
    font-weight: 600;
    color: #344054;
    font-size: 0.85rem;
}

/* Feature links disabled state for guests */
#page_index .grid-feature .item.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Enhanced ranking section */
#page_index .ranking {
    border-radius: 20px;
    background: white;
    border: none;
    box-shadow: var(--app-shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#page_index .ranking:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-md);
}

#page_index .ranking .card-body {
    padding: 2rem;
}

#page_index .ranking .podium-container {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

#page_index .ranking .podium-item {
    text-align: center;
    flex: 1;
    max-width: 100px;
}

#page_index .ranking .podium-item.first {
    order: 2;
}

#page_index .ranking .podium-item.second {
    order: 1;
    margin-top: 20px;
}

#page_index .ranking .podium-item.third {
    order: 3;
    margin-top: 20px;
}

#page_index .ranking .avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--app-purple-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    margin: 0 auto 12px;
    box-shadow: var(--app-shadow-purple-md);
    transition: transform 0.3s ease;
    position: relative;
}

#page_index .ranking .avatar.gold {
    background: var(--app-gold-gradient);
    transform: scale(1.1);
    box-shadow: var(--app-gold-shadow);
}

#page_index .ranking .avatar.silver {
    background: var(--app-silver-gradient);
}

#page_index .ranking .avatar.bronze {
    background: var(--app-bronze-gradient);
}

#page_index .ranking .avatar:hover {
    transform: scale(1.05);
}

#page_index .ranking .avatar.gold:hover {
    transform: scale(1.15);
}

#page_index .ranking .amount {
    color: var(--app-purple-primary);
    font-weight: 700;
    font-size: 1rem;
    background: var(--app-purple-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#page_index .ranking .username {
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 8px;
}

/* Aesthetically refined trending markets */
#page_index .trending-markets {
    border-radius: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

#page_index .trending-markets:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

#page_index .trending-markets .card-body {
    padding: 0;
}

#page_index .trending-markets .market-header-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

#page_index .trending-markets .market-header {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 0;
    padding: 16px 24px;
    margin: 0;
    font-weight: 700;
    color: #475569;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #cbd5e1;
}

/* Enhanced row styling */
#page_index .trending-markets .row-item {
    padding: 16px 24px;
    margin-left: 0;
    margin-right: 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
}

/* Price change animations */
#page_index .trending-markets .price-flash-up {
    animation: flashGreen 0.5s ease-in-out;
}

#page_index .trending-markets .price-flash-down {
    animation: flashRed 0.5s ease-in-out;
}

@keyframes flashGreen {
    0% {
        background-color: rgba(16, 185, 129, 0.2);
    }

    50% {
        background-color: rgba(16, 185, 129, 0.3);
    }

    100% {
        background-color: transparent;
    }
}

@keyframes flashRed {
    0% {
        background-color: rgba(239, 68, 68, 0.2);
    }

    50% {
        background-color: rgba(239, 68, 68, 0.3);
    }

    100% {
        background-color: transparent;
    }
}

/* Price indicator styling */
#page_index .trending-markets .price-indicator {
    transition: all 0.3s ease;
    opacity: 0.8;
}

#page_index .trending-markets .price-value {
    transition: all 0.2s ease;
    font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
}

#page_index .trending-markets .row-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(135deg, var(--app-purple-primary) 0%, var(--app-purple-secondary) 100%);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#page_index .trending-markets .row-item:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    transform: translateX(8px);
}

#page_index .trending-markets .row-item:hover::before {
    width: 4px;
}

#page_index .trending-markets .row-item:last-child {
    border-bottom: none !important;
}

/* Typography enhancements */
#page_index .trending-markets .name .fw-semibold {
    font-weight: 700;
    color: #1e293b;
    font-size: 1rem;
    letter-spacing: -0.025em;
    transition: color 0.3s ease;
}

#page_index .trending-markets .row-item:hover .name .fw-semibold {
    color: var(--app-purple-primary);
}

#page_index .trending-markets .name .quote {
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.9rem;
    margin-left: 2px;
}

#page_index .trending-markets .col-4 .fw-semibold {
    font-weight: 600;
    color: #475569;
    font-size: 0.95rem;
    font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
    letter-spacing: -0.025em;
}

#page_index .trending-markets .change .badge {
    font-weight: 700;
    font-size: 0.85rem;
    font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
    letter-spacing: -0.025em;
    padding: 8px 12px;
    border-radius: 16px;
    min-width: 75px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

#page_index .trending-markets .change .badge.bg-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 1) 100%) !important;
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

#page_index .trending-markets .change .badge.bg-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9) 0%, rgba(220, 38, 38, 1) 100%) !important;
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

#page_index .trending-markets .row-item:hover .change .badge {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Loading and empty states */
#page_index .trending-markets .text-muted.small {
    padding: 20px 24px;
    text-align: center;
    color: #94a3b8;
    font-style: italic;
}

/* Enhanced card styling */
#page_index .card {
    border: none;
    border-radius: 20px;
    box-shadow: var(--app-shadow-sm);
    transition: all 0.3s ease;
}

#page_index .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-md);
}

#page_index .card-body {
    padding: 1.5rem;
}

#page_index .mb-3 {
    margin-bottom: 2rem !important;
}

/* Hide elements with x-cloak */
#page_index [x-cloak] {
    display: none !important;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    #page_index .profit-card .card-body {
        padding: 1.5rem;
    }

    #page_index .profit-card .display-6 {
        font-size: 2rem;
    }

    #page_index .ranking .podium-item.second,
    #page_index .ranking .podium-item.third {
        margin-top: 10px;
    }

    #page_index .grid-feature .item {
        padding: 16px 8px;
    }

    /* Mobile trending markets optimizations */
    #page_index .trending-markets .market-header-section {
        padding: 1rem 1rem;
    }

    #page_index .trending-markets .market-header {
        padding: 12px 16px;
        font-size: 0.8rem;
    }

    #page_index .trending-markets .row-item {
        padding: 12px 16px;
        transform: none;
    }

    #page_index .trending-markets .row-item:hover {
        transform: none;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    }

    #page_index .trending-markets .row-item::before {
        display: none;
    }

    #page_index .trending-markets .name .fw-semibold {
        font-size: 0.9rem;
        font-weight: 600;
    }

    #page_index .trending-markets .name .quote {
        font-size: 0.8rem;
    }

    #page_index .trending-markets .col-4 .fw-semibold {
        font-size: 0.85rem;
    }

    #page_index .trending-markets .change .badge {
        font-size: 0.75rem;
        padding: 6px 8px;
        min-width: 60px;
        border-radius: 12px;
    }

    #page_index .trending-markets .text-muted.small {
        padding: 16px;
        font-size: 0.85rem;
    }
}

/* Extra small mobile adjustments */
@media (max-width: 480px) {
    #page_index .trending-markets .market-header-section {
        padding: 0.75rem;
    }

    #page_index .trending-markets .market-header {
        padding: 10px 12px;
        font-size: 0.75rem;
    }

    #page_index .trending-markets .row-item {
        padding: 10px 12px;
    }

    #page_index .trending-markets .name .fw-semibold {
        font-size: 0.85rem;
    }

    #page_index .trending-markets .name .quote {
        font-size: 0.75rem;
    }

    #page_index .trending-markets .col-4 .fw-semibold {
        font-size: 0.8rem;
    }

    #page_index .trending-markets .change .badge {
        font-size: 0.7rem;
        padding: 4px 6px;
        min-width: 50px;
        border-radius: 10px;
    }
}

/* From: kyc.blade.php */
.upload-container {
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-container:hover {
    border-color: #27A17C !important;
    background-color: #f0fdf9;
}

.upload-area {
    padding: 2rem;
    transition: all 0.3s ease;
}

.preview-area img {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid #e9ecef;
}

.form-control.is-invalid {
    border-color: #dc3545;
}

.form-control.touched:invalid {
    border-color: #dc3545;
}

.form-control:valid {
    border-color: #27A17C;
}

.upload-progress {
    display: none;
    margin-top: 1rem;
}

.icon-wrapper {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #27A17C, #1e8a66);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(39, 161, 124, 0.3);
}

.kyc-step.completed {
    opacity: 1;
}

.kyc-section-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.kyc-section-disabled .upload-container {
    border-color: #dee2e6 !important;
    background-color: #f8f9fa;
}

.kyc-section-disabled .upload-area {
    color: #6c757d;
}

.btn-theme {
    background-color: #27A17C;
    border-color: #27A17C;
    color: white;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-theme:hover {
    background-color: #1e8a66;
    border-color: #1e8a66;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(39, 161, 124, 0.3);
}

.card {
    border-radius: 12px;
}

.form-control:focus,
.form-select:focus {
    border-color: #27A17C;
    box-shadow: 0 0 0 0.2rem rgba(39, 161, 124, 0.25);
}

/* From: log.blade.php */
/* Log UI (match screenshot): simple filter + timeline cards */
#page_log .log-card {
    cursor: default;
}

#page_log .log-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

#page_log .form-control:focus,
#page_log .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

@media (max-width: 767px) {
    #page_log .card-body {
        padding: 1rem !important;
    }

    #page_log .fs-5 {
        font-size: 1rem !important;
    }
}

/* From: login-history.blade.php */
#page_login_history .stats-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    margin: 0 auto 12px;
}

#page_login_history .login-item {
    background: white;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

#page_login_history .login-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-color: #27A17C;
}

#page_login_history .login-item.success {
    border-left: 4px solid #10b981;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.05) 0%, white 10%);
}

#page_login_history .login-item.danger {
    border-left: 4px solid #ef4444;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, white 10%);
}

#page_login_history .device-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: white;
}

#page_login_history .device-desktop {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

#page_login_history .device-mobile {
    background: linear-gradient(135deg, #10b981, #059669);
}

#page_login_history .device-tablet {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

#page_login_history .device-unknown {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

#page_login_history .ip-address {
    font-family: 'Courier New', monospace;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    border: 1px solid #e2e8f0;
    display: inline-block;
}

/* From: me.blade.php */
/* Profile Header Card */
#page_me .profile-header-card {
    background: var(--app-purple-primary);
    border-radius: 24px;
    box-shadow: var(--app-shadow-purple-md);
    color: white;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

#page_me .profile-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--app-purple-primary-45);
    opacity: 0.1;
    pointer-events: none;
}

#page_me .profile-header-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-purple-lg);
}

/* Profile Avatar */
#page_me .profile-avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    border: 3px solid rgba(255, 255, 255, 0.3);
    position: relative;
    backdrop-filter: blur(10px);
}

#page_me .profile-avatar .icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid white;
}

#page_me .profile-avatar .icon.online {
    background: var(--bs-success);
    box-shadow: 0 0 12px rgba(var(--bs-success-rgb), 0.5);
}

/* Profile Text */
#page_me .profile-nickname {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#page_me .verification-badge {
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#page_me .verification-badge i {
    color: var(--bs-success);
    margin-right: 6px;
}

/* Info Items */
#page_me .info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    transition: all 0.2s ease;
}

#page_me .info-item:hover {
    transform: translateX(4px);
}

#page_me .info-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#page_me .reputation-score {
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Settings / tabs cards */
#page_me .card {
    border: none;
    border-radius: 20px;
    box-shadow: var(--app-shadow-sm);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

#page_me .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-md);
}

#page_me .card-header {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-weight: 700;
    color: #334155;
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

/* Top tabs card between hero and list */
#page_me .top-tabs-card {
    background: #ffffff;
    box-shadow: var(--app-shadow-sm);
}

#page_me .top-tabs-card:hover {
    transform: none;
    box-shadow: var(--app-shadow-sm);
}

#page_me .top-tabs-row {
    display: flex;
    text-align: center;
}

#page_me .top-tabs-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    text-decoration: none;
    color: #555;
    position: relative;
}

#page_me .top-tabs-link .top-tabs-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    color: #757575;
    position: relative;
    font-size: 1.2rem;
}

#page_me .top-tabs-link .top-tabs-label {
    font-size: 0.9rem;
}

#page_me .top-tabs-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: #ff9800;
    color: #fff;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Settings Menu Items */
#page_me .hover-bg-light {
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    text-decoration: none;
    color: inherit;
}

#page_me .hover-bg-light:hover {
    background: var(--app-purple-light-5);
    border-left-color: var(--app-purple-primary);
    color: inherit;
    text-decoration: none;
    transform: translateX(4px);
}

#page_me .item-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    font-size: 1rem;
    color: white;
    background: var(--app-purple-primary);
    box-shadow: var(--app-shadow-sm);
    transition: all 0.3s ease;
}

#page_me .hover-bg-light:hover .item-icon {
    transform: scale(1.05);
    box-shadow: var(--app-shadow-md);
}

#page_me .item-arrow {
    color: #94a3b8;
    font-size: 1rem;
    margin-left: 12px;
    transition: all 0.3s ease;
}

#page_me .hover-bg-light:hover .item-arrow {
    color: var(--app-purple-primary);
    transform: translateX(4px);
}

/* Status Badges */
#page_me .status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#page_me .status-success {
    background: var(--bs-success);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--bs-success-rgb), 0.3);
}

#page_me .status-disabled {
    background: var(--bs-danger);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--bs-danger-rgb), 0.3);
}

/* Typography */
#page_me .fw-bold {
    font-weight: 600;
    color: #1e293b;
    font-size: 1.05rem;
}

#page_me .text-muted {
    color: #64748b !important;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Language Dropdown */
#page_me .dropdown-toggle {
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: white;
    color: #475569;
    font-weight: 500;
    transition: all 0.3s ease;
}

#page_me .dropdown-toggle:hover {
    border-color: var(--app-purple-primary);
    transform: translateY(-1px);
    box-shadow: var(--app-shadow-purple-sm);
}

/* Logout Button */
#page_me .btn-danger {
    border-radius: 16px !important;
    padding: 16px 24px !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#page_me .btn-danger:hover {
    transform: translateY(-2px) !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #page_me .profile-header-card {
        padding: 24px !important;
        border-radius: 20px;
    }

    #page_me .profile-avatar {
        width: 70px;
        height: 70px;
        font-size: 1.5rem;
    }

    #page_me .profile-nickname {
        font-size: 1.5rem;
    }

    #page_me .item-icon {
        width: 40px;
        height: 40px;
        margin-right: 12px;
        flex-shrink: 0;
    }

    #page_me .item-arrow {
        margin-left: 0;
        font-size: 0.9rem;
    }

    #page_me .status-badge {
        display: none;
    }

    #page_me .card {
        margin-bottom: 1rem;
        border-radius: 16px;
    }

    #page_me .card-header {
        padding: 0.875rem 1.25rem;
        font-size: 0.9rem;
    }

    #page_me .text-muted {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    #page_me .info-item {
        padding: 8px 0;
    }

    #page_me .info-icon {
        width: 36px;
        height: 36px;
    }
}

/* Avatar image */
#page_me .me-avatar-wrap {
    position: relative;
    display: inline-block;
}

#page_me .me-avatar-img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.5);
}

#page_me .me-avatar-status {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #adb5bd;
}

#page_me .me-avatar-status.online {
    background: #28a745;
}

#page_me .me-username {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.15rem;
}

#page_me .me-email {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

/* From: member-purchase.blade.php */
/* Ensure purchase button sits above bottom nav on mobile */
#page_member_purchase .fixed-bottom {
    z-index: 1040;
    bottom: 68px;
}

@media (min-width: 992px) {
    #page_member_purchase .fixed-bottom {
        bottom: 16px;
    }
}

#page_member_purchase .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.cursor-pointer {
    cursor: pointer;
}

/* From: membership.blade.php */
#page_membership .tip-card {
    background: var(--app-purple-light);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    padding: 14px;
}

#page_membership .renew-bar {
    z-index: 1040;
    bottom: 68px;
}

@media (min-width: 992px) {
    #page_membership .renew-bar {
        bottom: 16px;
    }
}

/* From: notifications.blade.php */
.page_notifications .notice_not_seen {
    background-color: var(--bs-primary-bg-subtle);
}

/* From: password.blade.php */
#page_password .card {
    border: none;
    border-radius: 20px;
    box-shadow: var(--app-shadow-sm);
    transition: all 0.3s ease;
}

#page_password .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-md);
}

#page_password .password-requirements {
    background: var(--app-purple-light-5);
    border-left: 4px solid var(--app-purple-primary);
    border-radius: 12px;
}

#page_password .requirement-item {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

#page_password .requirement-item.valid {
    color: var(--app-purple-primary);
}

#page_password .requirement-item i {
    width: 16px;
}

#page_password .form-control {
    border-radius: 12px;
    padding: 0.75rem 1rem;
    border-color: #e2e8f0;
}

#page_password .form-control:focus {
    border-color: var(--app-purple-primary);
    box-shadow: 0 0 0 4px var(--app-purple-light);
}

#page_password .password-toggle-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    z-index: 100;
    color: #94a3b8;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s ease;
}

#page_password .password-toggle-icon:hover {
    color: var(--app-purple-primary);
}

/* From: profile-edit.blade.php */
#page_profile_edit .card {
    border: none;
    border-radius: 20px;
    box-shadow: var(--app-shadow-sm);
    transition: all 0.3s ease;
}

#page_profile_edit .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-md);
}

#page_profile_edit .form-label {
    font-weight: 600;
    color: #344054;
}

#page_profile_edit .form-control,
#page_profile_edit .form-select {
    border-radius: 12px;
    padding: 0.75rem 1rem;
    border-color: #e2e8f0;
}

#page_profile_edit .form-control:focus,
#page_profile_edit .form-select:focus {
    border-color: var(--app-purple-primary);
    box-shadow: 0 0 0 4px var(--app-purple-light);
}

/* From: profile.blade.php */
.profile-header-card {
    background: linear-gradient(135deg, #27A17C 0%, #1e8a66 100%);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(39, 161, 124, 0.2);
    color: white;
    position: relative;
    overflow: hidden;
}

/* .profile-header-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 40%);
            animation: shimmer 3s ease-in-out infinite;
        } */

/* @keyframes shimmer {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(180deg); }
        } */

.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #34d399, #10b981);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: bold;
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.profile-nickname {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 8px;
}

.profile-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.verification-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.verification-badge.verified {
    background: rgba(52, 211, 153, 0.3);
    border-color: rgba(52, 211, 153, 0.5);
}

.stat-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    height: 100%;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 16px;
}

.stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}

.activity-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.activity-item {
    padding: 16px 24px;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.2s ease;
}

.activity-item:hover {
    background: #f9fafb;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
}

.status-online {
    position: relative;
}

.status-online .icon {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.online {
    background: #10b981;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-item:last-child {
    border-bottom: none;
}

.info-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.reputation-score {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    padding: 4px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.trust-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #10b981;
    font-weight: 600;
}

.text-purple {
    color: #8b5cf6 !important;
}

.border-purple {
    border-color: #8b5cf6 !important;
}

/* Override orange accents to blue within this page */
#page_profile .text-warning {
    color: #0d6efd !important;
}

#page_profile .border-warning {
    border-color: #0d6efd !important;
}

#page_profile .bg-warning-subtle {
    background-color: rgba(13, 110, 253, 0.1) !important;
}


/* Custom Accordion Styles */
.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    box-shadow: none !important;
}

.accordion-button:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}

.accordion-button::after {
    display: none !important;
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed) .accordion-icon {
    transform: rotate(180deg);
}

.accordion-text {
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .profile-avatar {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    .profile-nickname {
        font-size: 1.8rem;
    }

    .stat-value {
        font-size: 1.8rem;
    }

    .profile-header-card {
        padding: 20px !important;
    }
}

/* From: profile2.blade.php */
.profile-header-card {
    background: linear-gradient(135deg, #27A17C 0%, #1e8a66 100%);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(39, 161, 124, 0.2);
    color: white;
    position: relative;
    overflow: hidden;
}

/* .profile-header-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 40%);
            animation: shimmer 3s ease-in-out infinite;
        } */

/* @keyframes shimmer {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(180deg); }
        } */

.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #34d399, #10b981);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: bold;
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.profile-nickname {
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 8px;
}

.profile-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.verification-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.verification-badge.verified {
    background: rgba(52, 211, 153, 0.3);
    border-color: rgba(52, 211, 153, 0.5);
}

.stat-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    height: 100%;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 16px;
}

.stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}

.activity-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.activity-item {
    padding: 16px 24px;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.2s ease;
}

.activity-item:hover {
    background: #f9fafb;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
}

.status-online {
    position: relative;
}

.status-online::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: #10b981;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-item:last-child {
    border-bottom: none;
}

.info-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.reputation-score {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    padding: 4px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.trust-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #10b981;
    font-weight: 600;
}

.text-purple {
    color: #8b5cf6 !important;
}

.border-purple {
    border-color: #8b5cf6 !important;
}

@media (max-width: 768px) {
    .profile-avatar {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    .profile-nickname {
        font-size: 1.8rem;
    }

    .stat-value {
        font-size: 1.8rem;
    }

    .profile-header-card {
        padding: 20px !important;
    }
}

/* From: ranks.blade.php */
/* Use centralized color variables directly from app.css */

#page_ranks .ranks_hero_card {
    border-radius: 20px;
    background: var(--app-purple-primary);
    color: #fff;
    overflow: hidden;
    position: relative;
    box-shadow: var(--app-shadow-md);
}

#page_ranks .ranks_hero_inner {
    position: relative;
    z-index: 2;
}

#page_ranks .ranks_hero_icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

#page_ranks .ranks_empty_icon {
    width: 64px;
    height: 64px;
    font-size: 24px;
}

#page_ranks .rank_card {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

#page_ranks .rank_card_icon {
    width: 56px;
    height: 56px;
    background: var(--app-purple-primary);
    color: white;
    font-size: 20px;
}

#page_ranks .ranks_hero_label {
    letter-spacing: 0.05em;
}

#page_ranks .ranks_hero_value {
    font-size: clamp(1.5rem, 4vw, 2rem);
}

#page_ranks .ranks_next_block {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Hero background pattern */
#page_ranks .ranks_hero_card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='7' cy='7' r='7'/%3E%3Ccircle cx='53' cy='53' r='7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.6;
    pointer-events: none;
}

#page_ranks .hero .progress-ring {
    width: 80px;
    height: 80px;
    position: relative;
}

#page_ranks .hero .progress-ring svg {
    transform: rotate(-90deg);
}

#page_ranks .hero .progress-ring circle {
    fill: none;
    stroke-width: 4;
}

#page_ranks .hero .progress-ring .progress-background {
    stroke: rgba(255, 255, 255, 0.2);
}

#page_ranks .hero .progress-ring .progress-bar {
    stroke: #fff;
    stroke-linecap: round;
    stroke-dasharray: 251.2;
    stroke-dashoffset: 188.4;
    transition: stroke-dashoffset 0.5s ease;
}


#page_ranks .rank-meta {
    color: #718096;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Enhanced Chips */
#page_ranks .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #f7fafc;
    color: #2d3748;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#page_ranks .chip i {
    color: #718096;
    font-size: 0.75rem;
}

#page_ranks .chip-accent {
    background: var(--app-purple-light);
    color: var(--app-purple-primary);
    border-color: var(--app-purple-light);
}

#page_ranks .chip-success {
    background: linear-gradient(135deg, rgba(72, 187, 120, 0.1), rgba(104, 211, 145, 0.1));
    color: #48bb78;
    border-color: rgba(72, 187, 120, 0.2);
}

#page_ranks .chip-warning {
    background: linear-gradient(135deg, rgba(237, 137, 54, 0.1), rgba(246, 173, 85, 0.1));
    color: #ed8936;
    border-color: rgba(237, 137, 54, 0.2);
}

/* Current and Next Rank Indicators */
#page_ranks .is-current {
    border: 2px solid #48bb78;
    background: linear-gradient(135deg, rgba(72, 187, 120, 0.05), rgba(104, 211, 145, 0.05));
    position: relative;
    box-shadow: var(--app-shadow-purple-md);
}

#page_ranks .is-current::before {
    background: linear-gradient(90deg, #48bb78, var(--rank-success-light));
    opacity: 1;
}

#page_ranks .rank-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 1.125rem;
    color: #2d3748;
}

#page_ranks .fee-section {
    background: #f7fafc;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e2e8f0;
}

#page_ranks .fee-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #718096;
    margin-bottom: 4px;
}

#page_ranks .fee-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: #2d3748;
}

#page_ranks .rank-requirements {
    background: var(--app-purple-light-5);
    border: 1px solid var(--app-purple-light);
    border-radius: 12px;
    padding: 12px;
    margin-top: 12px;
}

#page_ranks .req-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--app-purple-primary);
    margin-bottom: 4px;
}

#page_ranks .req-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #2d3748;
}

/* Loading and Empty States */
#page_ranks .loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

    100% {
        background-position: -200% 0;
    }
}


/* Responsive Design */
@media (max-width: 768px) {
    #page_ranks .hero {
        margin-bottom: 1.5rem;
        border-radius: 16px;
    }

    #page_ranks .hero .rank-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    #page_ranks .rank-badge {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    #page_ranks .rank-name {
        font-size: 1rem;
    }

    #page_ranks .chip {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    #page_ranks .fee-section {
        padding: 12px;
    }
}

@media (max-width: 576px) {
    #page_ranks .chip {
        width: 100%;
        justify-content: space-between;
    }

    #page_ranks .hero {
        border-radius: 12px;
    }

    #page_ranks .rank-card {
        border-radius: 12px;
    }
}

/* From: referral.blade.php */
#page_referral .qr-container {
    background: var(--app-purple-light);
    border: 2px solid rgba(102, 126, 234, 0.15);
}

#page_referral .card {
    border: 1px solid rgba(102, 126, 234, 0.1);
}

#page_referral .form-label {
    color: var(--app-purple-primary);
}

#page_referral .input-group .form-control:focus {
    border-color: var(--app-purple-primary);
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.15);
}

@media (max-width: 768px) {
    #page_referral .qr-container {
        width: 180px !important;
        height: 180px !important;
    }
}

/* From: tradingview-strategy.blade.php */
/* Page-scoped UI: refer follow-strategy, use default theme colors */
#page_tradingview_strategy {
    --tv-accent: var(--app-purple-primary);
    --tv-accent-2: var(--app-purple-secondary);
    --tv-radius: 18px;
}

#page_tradingview_strategy #page_tradingview_strategy_wrapper {
    padding-bottom: 104px;
    /* room for fixed bottom action */
}

#page_tradingview_strategy .tv_top {
    background: #ffffff;
    border-radius: var(--tv-radius);
    box-shadow: var(--app-shadow-sm);
    padding: 14px 14px 12px 14px;
    margin-bottom: 14px;
}

#page_tradingview_strategy .tv_note {
    background: rgba(245, 158, 11, 0.08);
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    padding: 10px 12px;
}

/* Search bar (better UX than input-group) */
#page_tradingview_strategy .tv_search {
    position: relative;
}

#page_tradingview_strategy .tv_search .tv_search_input {
    border-radius: 14px;
    padding: 12px 44px 12px 42px;
    border: 1px solid var(--app-purple-light);
    background: #fff;
}

#page_tradingview_strategy .tv_search .tv_search_input:focus {
    border-color: var(--tv-accent);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.12);
}

#page_tradingview_strategy .tv_search .tv_search_icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tv-accent);
    opacity: 0.9;
    pointer-events: none;
}

#page_tradingview_strategy .tv_search .tv_search_clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 0;
    background: rgba(102, 126, 234, 0.08);
    color: var(--tv-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#page_tradingview_strategy .tv_filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#page_tradingview_strategy .tv_filter_label {
    font-size: 12px;
    color: #374151;
    font-weight: 800;
    margin-bottom: 6px;
}

#page_tradingview_strategy .tv_dd_btn {
    width: 100%;
    background: rgba(102, 126, 234, 0.06);
    border: 1px solid rgba(102, 126, 234, 0.28);
    color: var(--tv-accent);
    border-radius: 14px;
    padding: 12px 12px;
    font-weight: 900;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#page_tradingview_strategy .tv_dd_menu {
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--app-shadow-sm);
    padding: 8px;
    min-width: 100%;
}

#page_tradingview_strategy .tv_dd_item {
    width: 100%;
    border-radius: 12px;
    padding: 10px 10px;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#page_tradingview_strategy .tv_dd_item.active,
#page_tradingview_strategy .tv_dd_item:active {
    background: var(--app-purple-light) !important;
    color: var(--tv-accent) !important;
}

#page_tradingview_strategy .tv_list_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 2px 10px 2px;
}

#page_tradingview_strategy .tv_list_title .title {
    font-weight: 800;
    color: #111827;
}

#page_tradingview_strategy .tv_strategy {
    background: #fff;
    border-radius: var(--tv-radius);
    box-shadow: var(--app-shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 12px;
}

#page_tradingview_strategy .tv_strategy::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--tv-accent), var(--tv-accent-2));
    opacity: 0.9;
}

#page_tradingview_strategy .tv_strategy_body {
    padding: 14px 14px 12px 14px;
}

#page_tradingview_strategy .tv_head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#page_tradingview_strategy .tv_name {
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
}

#page_tradingview_strategy .tv_meta {
    text-align: right;
    color: #6b7280;
    font-size: 12px;
    white-space: nowrap;
}

#page_tradingview_strategy .tv_metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-top: 12px;
}

#page_tradingview_strategy .tv_metric .label {
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
}

#page_tradingview_strategy .tv_metric .val {
    color: #111827;
    font-weight: 800;
    margin-top: 2px;
}

#page_tradingview_strategy .tv_actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

#page_tradingview_strategy .tv_actions .btn-link {
    font-weight: 800;
}

#page_tradingview_strategy .tv_bottom_bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 64px;
    /* above bottom nav */
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

#page_tradingview_strategy .tv_bottom_bar .container-fluid {
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

#modal_tradingview_batch .modal-content {
    border-radius: 18px;
    border: 0;
    box-shadow: var(--app-shadow-md);
}

#modal_tradingview_batch .modal-header {
    border-bottom: 0;
    padding-bottom: 0;
}

#modal_tradingview_batch .modal-footer {
    border-top: 0;
}

/* From: withdrawal.blade.php */
.withdraw_create_coin-icon {
    width: 24px;
    height: 24px;
}

.select2-selection.select2-selection--single {
    position: relative;
}

.select2-selection__arrow {
    display: none !important;
}

.form-control.hidden-box {
    border: none !important;
}

.input-icon:hover {
    color: RGBA(var(--bs-primary-rgb));
}

.withdraw_create_address_item:hover {
    border-color: #80cffd !important;
}

/* ===================================
   Addresses Page Styles
   =================================== */

/* Hover shadow effect for address cards */
.hover-shadow {
    transition: all 0.3s ease;
}

.hover-shadow:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Address cards responsive adjustments */
@media (max-width: 767px) {
    .page_addresses_container .card-body {
        padding: 1rem !important;
    }
    
    .page_addresses_container .badge {
        font-size: 0.75rem;
    }
}
.form-control-g2fa {
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
}

.form-control-g2fa::placeholder {
    letter-spacing: normal;
    font-size: 0.9rem;
    font-weight: normal;
}

/* From: deposit-history.blade.php & withdrawal-history.blade.php */
#page_deposit_history .history-list-item,
#page_withdrawal_history .history-list-item {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s;
    cursor: pointer;
    background-color: #fff;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid #f3f4f6;
}

#page_deposit_history .history-list-item:hover,
#page_withdrawal_history .history-list-item:hover {
    background-color: #f9fafb;
    border-color: #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#page_deposit_history .history-status-badge,
#page_withdrawal_history .history-status-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
}

/* From: deposit-details.blade.php & withdrawal-details.blade.php & transaction-detail.blade.php */
.details-page-container {
    max-width: 520px;
    margin: 0 auto;
    padding: 4px 8px;
}

.details-amount-card {
    background: var(--app-purple-primary);
    border-radius: 16px;
    padding: 24px 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
    position: relative;
    overflow: hidden;
}

.details-amount-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 10px;
    background-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
}

.details-amount-badge i {
    font-size: 0.875rem;
}

.details-amount-badge.badge-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: rgba(255, 255, 255, 0.35);
}

.details-amount-badge.badge-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: rgba(255, 255, 255, 0.35);
}

.details-amount-value {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 6px 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
}

.details-amount-currency {
    font-size: 1.25rem;
    opacity: 0.95;
    font-weight: 600;
}

.details-info-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.details-info-card hr {
    margin: 8px 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

.details-info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    gap: 16px;
}

.details-info-item:first-child {
    padding-top: 0;
}

.details-info-item:last-child {
    padding-bottom: 0;
}

.details-info-label {
    color: #6b7280;
    font-size: 0.8125rem;
    font-weight: 600;
    flex-shrink: 0;
    min-width: 100px;
}

.details-info-value {
    color: #1f2937;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

.details-info-value-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}

.details-info-item-copyable .details-info-value {
    font-size: 0.75rem;
    background: #f9fafb;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.details-copy-icon {
    color: #667eea;
    cursor: pointer;
    font-size: 0.8125rem;
    flex-shrink: 0;
    padding: 4px;
    transition: color 0.2s ease, background 0.2s ease;
    border-radius: 4px;
    background: #f3f4f6;
}

.details-copy-icon:hover {
    color: #fff;
    background: #667eea;
}

.details-copy-icon:active {
    opacity: 0.9;
}

.details-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.details-actions .btn {
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 10px;
    font-size: 0.875rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 2px solid transparent;
}

.details-actions .btn-outline-primary {
    border-color: #667eea;
    color: #667eea;
    background: transparent;
}

.details-actions .btn-outline-primary:hover {
    background: #667eea;
    color: #fff;
}

.details-actions .btn-gradient-primary:hover {
    opacity: 0.95;
}

/* Status Badges (inside details card) */
.details-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid;
}

.details-status-badge.status-pending {
    background: rgba(251, 191, 36, 0.15);
    color: #d97706;
    border-color: rgba(251, 191, 36, 0.35);
}

.details-status-badge.status-approved {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.35);
}

.details-status-badge.status-rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.35);
}

.details-status-badge.status-cancelled {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
    border-color: rgba(107, 114, 128, 0.35);
}

.details-status-badge.status-sending {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
    border-color: rgba(59, 130, 246, 0.35);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .details-page-container {
        padding: 4px;
    }

    .details-amount-card {
        padding: 20px 16px;
        margin-bottom: 14px;
        border-radius: 14px;
    }

    .details-amount-value {
        font-size: 1.75rem;
    }

    .details-amount-currency {
        font-size: 1.125rem;
    }

    .details-info-card {
        padding: 16px;
        margin-bottom: 14px;
        border-radius: 14px;
    }

    .details-info-item {
        flex-direction: column;
        gap: 4px;
        padding: 8px 0;
    }

    .details-info-label {
        min-width: auto;
        font-size: 0.75rem;
        font-weight: 600;
        color: #9ca3af;
    }

    .details-info-value {
        text-align: left;
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .details-info-value-wrapper {
        justify-content: flex-start;
        width: 100%;
    }

    .details-info-item-copyable .details-info-value {
        max-width: 100%;
        word-break: break-all;
        font-size: 0.8125rem;
        padding: 8px 12px;
    }

    .details-actions {
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
    }

    .details-actions .btn {
        width: 100%;
        padding: 16px 20px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .details-amount-card {
        padding: 28px 16px;
    }

    .details-amount-value {
        font-size: 2rem;
    }

    .details-amount-currency {
        font-size: 1.25rem;
    }

    .details-amount-badge {
        font-size: 0.8125rem;
        padding: 8px 16px;
    }

    .details-info-card {
        padding: 16px;
    }

    .details-info-item {
        padding: 10px 0;
    }

    .details-status-badge {
        font-size: 0.75rem;
        padding: 4px 10px;
    }

    .details-actions {
        margin-top: 16px;
        gap: 10px;
    }

    .details-actions .btn {
        padding: 10px 16px;
        font-size: 0.8125rem;
    }
}

/* ===================================
   Withdrawal Page Styles
   =================================== */

.withdraw_create_coin-icon {
    width: 24px;
    height: 24px;
}

.select2-selection.select2-selection--single {
    position: relative;
}

.select2-selection__arrow {
    display: none !important;
}

.form-control.hidden-box {
    border: none !important;
}

.input-icon:hover {
    color: RGBA(var(--bs-primary-rgb));
}

.withdraw_create_address_item:hover {
    border-color: #80cffd !important;
}