body {
    min-height: 100vh;
}

/* ── Trade page background ── */
.trade-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 50% at 20% 0%, rgba(34, 197, 94, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 85% 100%, rgba(59, 130, 246, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, #0a0e17 0%, #0d1117 40%, #0f1520 100%);
}

.trade-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(34, 197, 94, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 94, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(0,0,0,0.6) 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(0,0,0,0.6) 0%, transparent 80%);
}

.trade-bg::after {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.12) 0%, transparent 70%);
    filter: blur(60px);
    animation: trade-pulse 8s ease-in-out infinite;
}

@keyframes trade-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

.trade-content {
    position: relative;
    z-index: 1;
}

.trade-page .card {
    background: rgba(22, 27, 38, 0.85) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    color: #e5e7eb !important;
}

.trade-page .card .card-title {
    color: #f9fafb;
}

.trade-page .form-label {
    color: #9ca3af;
}

.trade-page .form-control,
.trade-page .form-select {
    background-color: rgba(15, 20, 30, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

.trade-page .form-control:focus,
.trade-page .form-select:focus {
    background-color: rgba(15, 20, 30, 0.95);
    border-color: #22c55e;
    color: #f9fafb;
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.15);
}

.trade-page .form-check-label {
    color: #d1d5db;
}

.trade-page .form-text {
    color: #6b7280 !important;
}

.trade-page .text-muted {
    color: #6b7280 !important;
}

.trade-page .table {
    color: #d1d5db;
}

.trade-page .table th {
    color: #9ca3af;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.trade-page .table td {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.trade-page .table-hover tbody tr:hover {
    background-color: rgba(34, 197, 94, 0.04);
}

.trade-page .nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.trade-page .nav-tabs .nav-link {
    color: #9ca3af;
}

.trade-page .nav-tabs .nav-link.active {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1) transparent;
    color: #22c55e;
}

.trade-page .btn-success {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    border: none;
    font-weight: 600;
}

.trade-page .btn-success:hover {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
}

.trade-page .btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    border: none;
    font-weight: 600;
}

.trade-page .btn-danger:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
}

.trade-page .alert-info {
    background-color: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.2);
    color: #d1d5db;
}

.trade-page .badge.bg-secondary {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #22c55e;
}

.trade-page hr {
    border-color: rgba(255, 255, 255, 0.08);
}

.trade-page .form-check-input {
    background-color: rgba(15, 20, 30, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
}

.trade-page .form-check-input:checked {
    background-color: #22c55e;
    border-color: #22c55e;
}

.trade-page .form-switch .form-check-input:checked {
    background-color: #22c55e;
}

.trade-page .btn-outline-dark {
    color: #d1d5db;
    border-color: rgba(255, 255, 255, 0.2);
}

.trade-page .btn-outline-dark:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
}

.trade-page .btn-outline-danger {
    border-color: rgba(239, 68, 68, 0.5);
}

.trade-page .btn-outline-info {
    color: #67e8f9;
    border-color: rgba(103, 232, 249, 0.4);
}

.trade-page .btn-outline-info:hover {
    color: #fff;
    background-color: rgba(103, 232, 249, 0.12);
    border-color: rgba(103, 232, 249, 0.6);
}

.trade-page .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    border: none;
}

/* ── Algo strategy info tooltip ── */
.algo-info-icon:hover svg {
    opacity: 1 !important;
    color: #22c55e;
}

.algo-info-tooltip {
    display: none;
    position: absolute;
    top: 28px;
    left: 0;
    z-index: 200;
    min-width: 280px;
    padding: 12px 14px;
    background: #1a1f2e;
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.6;
    color: #d1d5db;
    white-space: normal;
}

.algo-info-icon:hover .algo-info-tooltip {
    display: block;
}

.algo-info-tooltip .tip-heading {
    color: #22c55e;
    font-weight: 600;
    font-size: 0.82rem;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 4px;
}

.algo-info-tooltip .tip-row {
    display: flex;
    justify-content: space-between;
    padding: 1px 0;
}

.algo-info-tooltip .tip-label {
    color: #9ca3af;
}

.algo-info-tooltip .tip-value {
    color: #f9fafb;
    font-weight: 500;
}

.algo-info-tooltip .tip-section {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.algo-info-tooltip .tip-section-title {
    color: #67e8f9;
    font-weight: 600;
    font-size: 0.76rem;
    margin-bottom: 3px;
}

body.trade-light .algo-info-tooltip {
    background: #fff;
    border-color: rgba(34, 197, 94, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    color: #374151;
}

body.trade-light .algo-info-tooltip .tip-label {
    color: #6b7280;
}

body.trade-light .algo-info-tooltip .tip-value {
    color: #111827;
}

.trade-page .badge.bg-warning {
    background-color: rgba(234, 179, 8, 0.2) !important;
    color: #facc15;
}

.trade-page .sortable:hover {
    background-color: rgba(34, 197, 94, 0.06);
}

/* ── Positions table reflows into stacked cards on narrow screens (no JS duplication - the
   same rows/cells just get a card layout via CSS; data-label supplies the per-cell caption) ── */
@media (max-width: 767.98px) {
    .positions-table-card table thead {
        display: none;
    }

    .positions-table-card table,
    .positions-table-card tbody,
    .positions-table-card tr,
    .positions-table-card td {
        display: block;
        width: 100%;
        background-color: transparent !important;
    }

    .positions-table-card tbody tr {
        margin-bottom: 0.75rem;
        padding: 0.6rem 0.85rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.5rem;
        background: rgba(255, 255, 255, 0.02);
    }

    .positions-table-card tbody tr.table-secondary {
        background: rgba(34, 197, 94, 0.08);
    }

    .positions-table-card td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.3rem 0;
        border: none !important;
        text-align: right;
        color: #d1d5db;
    }

    body.trade-light .positions-table-card td {
        color: #374151;
    }

    .positions-table-card td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #9ca3af;
        text-align: left;
        margin-right: 0.75rem;
    }

    .positions-table-card td:not([data-label]) {
        justify-content: flex-end;
        gap: 0.5rem;
    }

    .positions-table-card td.mobile-cell-empty {
        display: none;
    }
}

body.trade-light .positions-table-card tbody tr {
    border-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
}

body.trade-light .positions-table-card tbody tr.table-secondary {
    background: rgba(34, 197, 94, 0.1);
}

body.trade-light .positions-table-card td[data-label]::before {
    color: #6b7280;
}

/* ── Trade page animated chart background ── */
.trade-chart-track {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    width: 200%;
    height: 260px;
    opacity: 0.18;
    animation: trade-chart-scroll 50s linear infinite;
}

.trade-chart-svg {
    width: 1400px;
    height: 260px;
    flex-shrink: 0;
}

.trade-chart-track-2 {
    position: absolute;
    top: 5%;
    left: 0;
    display: flex;
    width: 200%;
    height: 180px;
    opacity: 0.10;
    animation: trade-chart-scroll 68s linear infinite reverse;
}

.trade-chart-svg-2 {
    width: 1400px;
    height: 180px;
    flex-shrink: 0;
}

.trade-candle-track {
    position: absolute;
    top: 20%;
    left: 0;
    display: flex;
    width: 200%;
    height: 200px;
    opacity: 0.12;
    animation: trade-chart-scroll 60s linear infinite;
}

.trade-candle-svg {
    width: 1400px;
    height: 200px;
    flex-shrink: 0;
}

@keyframes trade-chart-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ── Theme toggle button ── */
.theme-toggle-btn {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 100;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(22, 27, 38, 0.85);
    backdrop-filter: blur(10px);
    color: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.2s;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.theme-toggle-btn:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #22c55e;
    transform: scale(1.1);
}

/* ── Navbar link colors (dark theme default) ── */
.navbar .nav-links a,
.navbar .nav-links button {
    color: #f8f9fa !important;
}

.navbar .nav-links a:hover,
.navbar .nav-links button:hover {
    color: #22c55e !important;
}

.navbar .nav-links .nav-link-muted {
    color: #9ca3af !important;
}

/* ── Light theme overrides ── */
body.trade-light {
    background-color: #f0f2f5 !important;
    color: #1a1a2e !important;
}

body.trade-light .navbar {
    background-color: #fff !important;
    border-bottom-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.trade-light .navbar .navbar-brand,
body.trade-light .navbar .nav-links a,
body.trade-light .navbar .nav-links button {
    color: #1a1a2e !important;
}

body.trade-light .navbar .nav-links a:hover,
body.trade-light .navbar .nav-links button:hover {
    color: #16a34a !important;
}

body.trade-light .navbar .nav-links .nav-link-muted {
    color: #6b7280 !important;
}

body.trade-light .trade-bg {
    background:
        radial-gradient(ellipse 90% 50% at 20% 0%, rgba(34, 197, 94, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 85% 100%, rgba(59, 130, 246, 0.05) 0%, transparent 55%),
        linear-gradient(180deg, #f0f2f5 0%, #e8ecf1 40%, #dfe4ea 100%);
}

body.trade-light .trade-bg::before {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

body.trade-light .trade-bg::after {
    background: radial-gradient(circle, rgba(34, 197, 94, 0.08) 0%, transparent 70%);
}

body.trade-light .trade-chart-track { opacity: 0.08; }
body.trade-light .trade-chart-track-2 { opacity: 0.05; }
body.trade-light .trade-candle-track { opacity: 0.06; }

body.trade-light .trade-page .card {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    color: #1a1a2e !important;
}

body.trade-light .trade-page .card .card-title {
    color: #111827;
}

body.trade-light .trade-page .form-label {
    color: #4b5563;
}

body.trade-light .trade-page .form-control,
body.trade-light .trade-page .form-select {
    background-color: #fff;
    border-color: #d1d5db;
    color: #1a1a2e;
}

body.trade-light .trade-page .form-control:focus,
body.trade-light .trade-page .form-select:focus {
    background-color: #fff;
    border-color: #16a34a;
    color: #111827;
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.15);
}

body.trade-light .trade-page .form-check-label {
    color: #374151;
}

body.trade-light .trade-page .form-text {
    color: #6b7280 !important;
}

body.trade-light .trade-page .text-muted {
    color: #6b7280 !important;
}

body.trade-light .trade-page .table {
    color: #374151;
}

body.trade-light .trade-page .table th {
    color: #4b5563;
    border-bottom-color: #e5e7eb;
}

body.trade-light .trade-page .table td {
    border-bottom-color: #f3f4f6;
}

body.trade-light .trade-page .table-hover tbody tr:hover {
    background-color: rgba(34, 197, 94, 0.04);
}

body.trade-light .trade-page .nav-tabs {
    border-bottom-color: #e5e7eb;
}

body.trade-light .trade-page .nav-tabs .nav-link {
    color: #6b7280;
}

body.trade-light .trade-page .nav-tabs .nav-link.active {
    background-color: transparent;
    border-color: #e5e7eb #e5e7eb transparent;
    color: #16a34a;
}

body.trade-light .trade-page .btn-outline-dark {
    color: #374151;
    border-color: #d1d5db;
}

body.trade-light .trade-page .btn-outline-dark:hover {
    color: #111827;
    background-color: #f3f4f6;
    border-color: #9ca3af;
}

body.trade-light .trade-page .btn-outline-info {
    color: #0891b2;
    border-color: rgba(8, 145, 178, 0.4);
}

body.trade-light .trade-page .btn-outline-info:hover {
    color: #fff;
    background-color: #0891b2;
}

body.trade-light .trade-page .badge.bg-secondary {
    background-color: rgba(34, 197, 94, 0.12) !important;
    color: #16a34a;
}

body.trade-light .trade-page .badge.bg-warning {
    background-color: rgba(234, 179, 8, 0.15) !important;
    color: #a16207;
}

body.trade-light .trade-page hr {
    border-color: #e5e7eb;
}

body.trade-light .trade-page .form-check-input {
    background-color: #fff;
    border-color: #d1d5db;
}

body.trade-light .trade-page .alert-info {
    background-color: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.15);
    color: #374151;
}

body.trade-light .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    color: #374151;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.trade-light .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(34, 197, 94, 0.4);
    color: #16a34a;
}

/* Light theme modal overrides */
body.trade-light .modal .modal-content {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #1a1a2e;
}

body.trade-light .modal .modal-header {
    border-bottom-color: #e5e7eb;
}

body.trade-light .modal .modal-footer {
    border-top-color: #e5e7eb;
}

body.trade-light .modal .modal-title {
    color: #111827;
}

body.trade-light .modal .btn-close {
    filter: none;
}

body.trade-light .modal .form-label {
    color: #4b5563;
}

body.trade-light .modal .form-control,
body.trade-light .modal .form-select {
    background-color: #fff;
    border-color: #d1d5db;
    color: #1a1a2e;
}

body.trade-light .modal .form-control:focus,
body.trade-light .modal .form-select:focus {
    background-color: #fff;
    border-color: #16a34a;
    color: #111827;
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.15);
}

body.trade-light .modal .form-text {
    color: #6b7280 !important;
}

body.trade-light .modal .alert-warning {
    background-color: rgba(234, 179, 8, 0.08);
    border-color: rgba(234, 179, 8, 0.2);
    color: #374151;
}

body.trade-light .modal .table {
    color: #374151;
}

body.trade-light .modal .sticky-top {
    background-color: #fff !important;
}

body.trade-light .modal .form-check-input {
    background-color: #fff;
    border-color: #d1d5db;
}

body.trade-light .modal .form-check-label {
    color: #374151;
}

body.trade-light .modal .algo-checkbox-list {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}

body.trade-light .algo-info-icon svg {
    color: #6b7280;
}

.card {
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

#positionsBody tr td {
    vertical-align: middle;
}

/* ── Client dashboard stat cards (TailAdmin-style icon badge cards) ── */
.stat-card .card-body {
    padding: 1.1rem 1.25rem;
}

.stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon-blue {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.stat-icon-purple {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
}

.stat-icon-green {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.stat-icon-red {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.stat-icon-teal {
    background: rgba(20, 184, 166, 0.15);
    color: #2dd4bf;
}

.chart-box-sm {
    position: relative;
    height: 130px;
}

.chart-box-sm canvas {
    max-height: 130px;
}

.pnl-positive {
    color: #22c55e;
    font-weight: 600;
}

.pnl-negative {
    color: #ef4444;
    font-weight: 600;
}

.result-ok {
    color: #22c55e;
}

.result-error {
    color: #ef4444;
}

/* ── Algo checkbox list ── */
.algo-checkbox-list {
    max-height: 200px;
    overflow-y: auto;
}

body:not(.trade-light) .algo-checkbox-list {
    background: rgba(15, 20, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ── Trade page modals (dark theme only) ── */
body:not(.trade-light) .modal .modal-content {
    background-color: #161b26;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

body:not(.trade-light) .modal .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body:not(.trade-light) .modal .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

body:not(.trade-light) .modal .modal-title {
    color: #f9fafb;
}

body:not(.trade-light) .modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body:not(.trade-light) .modal .form-label {
    color: #9ca3af;
}

body:not(.trade-light) .modal .form-control,
body:not(.trade-light) .modal .form-select {
    background-color: rgba(15, 20, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e5e7eb;
}

body:not(.trade-light) .modal .form-control:focus,
body:not(.trade-light) .modal .form-select:focus {
    background-color: rgba(15, 20, 30, 0.95);
    border-color: #22c55e;
    color: #f9fafb;
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.15);
}

body:not(.trade-light) .modal .form-text {
    color: #6b7280 !important;
}

body:not(.trade-light) .modal .alert-warning {
    background-color: rgba(234, 179, 8, 0.08);
    border-color: rgba(234, 179, 8, 0.2);
    color: #d1d5db;
}

body:not(.trade-light) .modal .table {
    color: #d1d5db;
}

body:not(.trade-light) .modal .sticky-top {
    background-color: #161b26 !important;
}

@media (prefers-reduced-motion: reduce) {
    .trade-bg::after,
    .trade-chart-track,
    .trade-chart-track-2,
    .trade-candle-track {
        animation: none;
    }
}

/* Landing page ticker tape */
.ticker-tape {
    overflow: hidden;
    white-space: nowrap;
    background: #000;
    border-radius: 0.5rem;
    padding: 0.85rem 0;
}

.ticker-track {
    display: inline-flex;
    animation: ticker-scroll 28s linear infinite;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 2rem;
    font-variant-numeric: tabular-nums;
    color: #ddd;
}

.ticker-symbol {
    font-weight: 600;
    color: #fff;
}

.ticker-price {
    transition: color 0.4s ease;
}

.ticker-price.flash-up {
    color: #22c55e;
}

.ticker-price.flash-down {
    color: #ef4444;
}

.ticker-change-up {
    color: #22c55e;
}

.ticker-change-down {
    color: #ef4444;
}

@keyframes ticker-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Landing page login cards */
.landing-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-top: 3px solid rgba(255, 255, 255, 0.1);
}

.landing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.landing-icon svg {
    width: 46px;
    height: 46px;
}

/* Landing hero background: animated grid, glow orbs, and a scrolling chart line
   to visually tie the login page to the algo-trading theme. Fixed + negative
   z-index so it sits behind all page content without affecting layout flow. */
.landing-hero-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 60% at 50% -10%, #10352b 0%, #0b0e14 55%, #050608 100%);
}

.landing-hero-bg::before {
    content: "";
    position: absolute;
    inset: -1px;
    background-image:
        linear-gradient(rgba(34, 197, 94, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 94, 0.08) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 0%, transparent 75%);
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.32;
    animation: orb-float 20s ease-in-out infinite;
    will-change: transform;
}

.orb-1 {
    width: 420px;
    height: 420px;
    background: #22c55e;
    top: -140px;
    left: -110px;
}

.orb-2 {
    width: 380px;
    height: 380px;
    background: #3b82f6;
    bottom: -160px;
    right: -90px;
    animation-delay: -7s;
}

.orb-3 {
    width: 280px;
    height: 280px;
    background: #a855f7;
    top: 45%;
    left: 62%;
    animation-delay: -13s;
}

@keyframes orb-float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(30px, -36px) scale(1.08);
    }
}

.hero-chart-track {
    position: absolute;
    top: 12%;
    left: 0;
    display: flex;
    width: 200%;
    height: 240px;
    opacity: 0.55;
    animation: hero-chart-scroll 42s linear infinite;
}

.hero-chart-svg {
    width: 1200px;
    height: 240px;
    flex-shrink: 0;
}

@keyframes hero-chart-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.landing-content {
    position: relative;
    z-index: 1;
}

/* Market snapshot cards: symbol + live price/change + a real sparkline built
   from actual kline history (see landing.js), not decorative fake data. */
.market-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 0.9rem 1rem 0.6rem;
    backdrop-filter: blur(6px);
    transition: transform 0.2s ease, border-color 0.2s ease;
    color: #9ca3af;
}

.market-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.18);
}

.market-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.8rem;
}

.market-symbol {
    font-weight: 700;
    color: #e5e7eb;
    letter-spacing: 0.02em;
}

.market-price {
    font-size: 1.15rem;
    font-weight: 600;
    color: #f9fafb;
    font-variant-numeric: tabular-nums;
    margin-top: 0.15rem;
}

.market-spark {
    width: 100%;
    height: 44px;
    margin-top: 0.35rem;
    color: #6b7280;
}

.market-card.market-up {
    border-color: rgba(34, 197, 94, 0.25);
}

.market-card.market-up .market-change {
    color: #22c55e;
}

.market-card.market-up .market-spark {
    color: #22c55e;
}

.market-card.market-down {
    border-color: rgba(239, 68, 68, 0.25);
}

.market-card.market-down .market-change {
    color: #ef4444;
}

.market-card.market-down .market-spark {
    color: #ef4444;
}

/* Feature/info cards */
.feature-card {
    height: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(34, 197, 94, 0.3);
}

.feature-card h5 {
    color: #f3f4f6;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.feature-icon {
    color: #22c55e;
    margin-bottom: 0.75rem;
}

.feature-icon svg {
    width: 32px;
    height: 32px;
}

@media (prefers-reduced-motion: reduce) {

    .glow-orb,
    .hero-chart-track {
        animation: none;
    }
}

/* Back-to-home pill used on the Admin/Client login pages */
.back-home-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #d1d5db;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.04);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.back-home-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.back-home-link svg {
    width: 18px;
    height: 18px;
}

.auth-form-card {
    max-width: 400px;
    margin: 0 auto;
}