/**
 * BASE STYLES
 * Базовые стили, сброс и типографика
 */

/* Alpine.js - скрыть элементы до инициализации */
[x-cloak] { 
    display: none !important; 
}

/* Предотвращение горизонтального скролла на мобильных */
html {
    max-width: 100%;
    overflow-x: hidden; /* Критично для мобилок */
    scroll-behavior: smooth !important;
    overscroll-behavior: none; /* Предотвращает bounce-эффект и показ фона за границами */
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
}

body {
    max-width: 100%;
    overflow-x: clip; /* clip вместо hidden для Chrome */
    scroll-behavior: smooth !important;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
}

/* Theme Tokens */
:root,
.theme-light {
    color-scheme: light;
    --color-bg: #f1f5f9;
    --color-surface: #ffffff;
    --color-surface-soft: #f8fafc;
    --color-surface-muted: #f1f5f9;
    --color-text: #0f172a;
    --color-text-muted: #475569;
    --color-text-soft: #64748b;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-accent: #2563eb;
    --color-accent-strong: #1d4ed8;
    --color-accent-soft: #dbeafe;
    --color-success: #16a34a;
    --color-success-soft: #dcfce7;
    --color-error: #dc2626;
    --color-error-soft: #fee2e2;
    --color-warning: #d97706;
    --color-warning-soft: #fef3c7;
    --color-overlay: rgba(15, 23, 42, 0.45);
    --color-chart-bg: #f8fafc;
    --color-chart-grid: rgba(148, 163, 184, 0.22);
    --color-chart-line-positive: #10b981;
    --color-chart-line-negative: #dc2626;
    --color-chart-fill-positive-start: rgba(16, 185, 129, 0.16);
    --color-chart-fill-positive-end: rgba(16, 185, 129, 0.04);
    --color-chart-fill-negative-start: rgba(220, 38, 38, 0.16);
    --color-chart-fill-negative-end: rgba(220, 38, 38, 0.04);
    --color-chart-point-stroke: #ffffff;
}

.theme-dark {
    color-scheme: dark;
    --color-bg: #000000;
    --color-surface: rgba(10, 10, 12, 0.98);
    --color-surface-soft: rgba(8, 8, 10, 0.95);
    --color-surface-muted: rgba(12, 12, 14, 0.92);
    --color-text: #ffffff;
    --color-text-muted: #e5e5e5;
    --color-text-soft: #a8a8a8;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.15);
    --color-accent: #60a5fa;
    --color-accent-strong: #3b82f6;
    --color-accent-soft: rgba(96, 165, 250, 0.15);
    --color-success: #10b981;
    --color-success-soft: rgba(16, 185, 129, 0.15);
    --color-error: #ef4444;
    --color-error-soft: rgba(239, 68, 68, 0.15);
    --color-warning: #f59e0b;
    --color-warning-soft: rgba(245, 158, 11, 0.15);
    --color-overlay: rgba(0, 0, 0, 0.92);
    --color-chart-bg: rgba(10, 10, 12, 0.98);
    --color-chart-grid: rgba(255, 255, 255, 0.06);
    --color-chart-line-positive: #10b981;
    --color-chart-line-negative: #ef4444;
    --color-chart-fill-positive-start: rgba(16, 185, 129, 0.2);
    --color-chart-fill-positive-end: rgba(16, 185, 129, 0.05);
    --color-chart-fill-negative-start: rgba(239, 68, 68, 0.2);
    --color-chart-fill-negative-end: rgba(239, 68, 68, 0.05);
    --color-chart-point-stroke: #121212;
}

/* Основные стили body */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--color-bg); 
    color: var(--color-text);
    -webkit-tap-highlight-color: transparent; 
}

/* Убираем стандартный outline для устранения мелькания при закрытии модальных окон */
*:focus {
    outline: none !important;
}

/* Для доступности - оставляем видимый фокус только для клавиатурной навигации */
*:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Убираем визуальные артефакты при закрытии модальных окон */
button:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Убираем transition на outline для предотвращения мелькания */
* {
    outline-color: transparent;
    outline-width: 0;
    transition: outline 0s;
}

a, button, [role="button"], input, select, textarea {
    transition-property: background-color, color, border-color, box-shadow, transform, opacity;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    a, button, [role="button"], input, select, textarea {
        transition: none !important;
    }
    html, body {
        scroll-behavior: auto !important;
    }
}

[x-collapse] {
    transition: height 0.4s ease !important;
}

/* Убираем ring эффект только у интерактивных элементов */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
    box-shadow: none !important;
    border-color: inherit;
}

/* Специально для modals и overlays */
[role="dialog"] *:focus {
    outline: none !important;
}

/* Кастомный scrollbar */
::-webkit-scrollbar { 
    width: 6px; 
    height: 6px; 
}

::-webkit-scrollbar-thumb { 
    background: var(--color-border-strong); 
    border-radius: 4px; 
}

.theme-dark .bg-white { background-color: var(--color-surface) !important; }
.theme-dark .bg-slate-50 { background-color: var(--color-surface-soft) !important; }
.theme-dark .bg-slate-100 { background-color: var(--color-surface-muted) !important; }
.theme-dark .bg-\[\#F1F5F9\] { background-color: var(--color-bg) !important; }
.theme-dark .md\:bg-\[\#F1F5F9\] { background-color: var(--color-bg) !important; }
.theme-dark .text-slate-900 { color: var(--color-text) !important; }
.theme-dark .text-slate-800,
.theme-dark .text-slate-700,
.theme-dark .text-slate-600 { color: var(--color-text-muted) !important; }
.theme-dark .text-slate-500,
.theme-dark .text-slate-400,
.theme-dark .text-slate-300 { color: var(--color-text-soft) !important; }
.theme-dark .border-slate-100,
.theme-dark .border-slate-200,
.theme-dark .border-slate-300 { border-color: var(--color-border) !important; }
.theme-dark .shadow-sm,
.theme-dark .shadow-lg,
.theme-dark .shadow-2xl { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important; }
.theme-dark .hover\:bg-slate-50:hover { background-color: var(--color-surface-soft) !important; }
.theme-dark .hover\:bg-slate-100:hover { background-color: var(--color-surface-muted) !important; }
.theme-dark .hover\:text-slate-900:hover { color: var(--color-text) !important; }
.theme-dark .bg-slate-900 { background-color: #0f0f0f !important; }
.theme-dark .hover\:bg-black:hover { background-color: #050505 !important; }
.theme-dark .bg-slate-900\/40,
.theme-dark .bg-slate-900\/50,
.theme-dark .bg-slate-900\/80 { background-color: var(--color-overlay) !important; }
.theme-dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12) !important; }
.theme-dark .text-emerald-700 { color: #34d399 !important; }
.theme-dark .bg-rose-100 { background-color: rgba(239, 68, 68, 0.12) !important; }
.theme-dark .text-rose-700 { color: #f87171 !important; }
.theme-dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12) !important; }
.theme-dark .text-blue-700 { color: #60a5fa !important; }
.theme-dark .text-blue-600 { color: #3b82f6 !important; }
.theme-dark .border-blue-300 { border-color: rgba(59, 130, 246, 0.3) !important; }
.theme-dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12) !important; }
.theme-dark .text-amber-900 { color: #fbbf24 !important; }
.theme-dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.3) !important; }
.theme-dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.18) !important; }
.theme-dark .bg-slate-300 { background-color: #2a2a2a !important; }
.theme-dark .disabled\:bg-slate-300:disabled { background-color: #2a2a2a !important; }
.theme-dark .disabled\:cursor-not-allowed:disabled { color: #6b7280 !important; }
.theme-dark .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.15) !important; }
.theme-dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.15) !important; }
.theme-dark .hover\:bg-rose-50:hover { background-color: rgba(239, 68, 68, 0.15) !important; }
.theme-dark .from-slate-50 { --tw-gradient-from: var(--color-surface-soft) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(26, 26, 26, 0) var(--tw-gradient-to-position) !important; }
.theme-dark .to-slate-100 { --tw-gradient-to: var(--color-surface-muted) var(--tw-gradient-to-position) !important; }
.theme-dark .from-blue-50 { --tw-gradient-from: rgba(30, 64, 175, 0.15) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(30, 64, 175, 0) var(--tw-gradient-to-position) !important; }
.theme-dark .to-indigo-50 { --tw-gradient-to: rgba(67, 56, 202, 0.15) var(--tw-gradient-to-position) !important; }
.theme-dark .from-white { --tw-gradient-from: rgba(18, 18, 18, 0.95) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(18, 18, 18, 0) var(--tw-gradient-to-position) !important; }
.theme-dark .via-white { --tw-gradient-to: rgba(18, 18, 18, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), rgba(22, 22, 22, 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.theme-dark .to-white { --tw-gradient-to: rgba(26, 26, 26, 0.92) var(--tw-gradient-to-position) !important; }
.theme-dark .focus\:ring-blue-100:focus { --tw-ring-color: rgba(59, 130, 246, 0.25) !important; }
.theme-dark .focus\:ring-blue-200:focus { --tw-ring-color: rgba(59, 130, 246, 0.35) !important; }

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.theme-page {
    background-color: var(--color-bg) !important;
}

.theme-surface,
.theme-modal {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.theme-dark:root {
    background-color: #000000 !important;
}

.theme-dark html {
    background-color: #000000 !important;
}

.theme-dark body {
    background-color: #000000 !important;
    background-image: none !important;
}

.theme-dark .bg-white,
.theme-dark .theme-surface,
.theme-dark .theme-modal {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.theme-dark .bg-white {
    border-color: var(--color-border) !important;
}

:root:not(.theme-dark) .bg-white,
.theme-light .bg-white {
    border-color: #f1f5f9 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

:root:not(.theme-dark) .analytics-filters-card,
.theme-light .analytics-filters-card {
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 6px 20px rgba(15, 23, 42, 0.07) !important;
}

:root:not(.theme-dark) .dashboard-new-trade-btn,
.theme-light .dashboard-new-trade-btn {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.3) !important;
    border: none !important;
}

:root:not(.theme-dark) .dashboard-new-trade-btn:hover,
.theme-light .dashboard-new-trade-btn:hover {
    background: linear-gradient(135deg, #1e40af, #1e3a8a) !important;
    box-shadow: 0 6px 20px rgba(30, 64, 175, 0.38) !important;
}

.theme-dark .dashboard-new-trade-btn {
    background: linear-gradient(135deg, #0f172a, #1e293b) !important;
    border: 1px solid rgba(125, 211, 252, 0.34);
    box-shadow: 0 10px 24px rgba(8, 47, 73, 0.48);
}

.theme-dark .dashboard-new-trade-btn:hover {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    border-color: rgba(125, 211, 252, 0.52);
    box-shadow: 0 14px 32px rgba(8, 47, 73, 0.56);
}

.theme-dark .dashboard-active-account-card {
    background: linear-gradient(135deg, rgba(20, 28, 43, 0.88), rgba(12, 18, 31, 0.86)) !important;
    border-color: rgba(125, 211, 252, 0.26) !important;
    box-shadow: 0 14px 34px rgba(2, 8, 20, 0.58) !important;
}

.theme-dark .dashboard-active-account-card:hover {
    border-color: rgba(125, 211, 252, 0.38) !important;
    background: linear-gradient(135deg, rgba(20, 28, 43, 0.92), rgba(10, 16, 28, 0.9)) !important;
}

.theme-dark .dashboard-active-account-card .bg-white {
    background-color: rgba(13, 17, 26, 0.94) !important;
    border-color: rgba(125, 211, 252, 0.38) !important;
}

.theme-dark .sidebar-active-account-trigger {
    border-color: rgba(125, 211, 252, 0.2) !important;
}

.theme-dark .sidebar-active-account-trigger:hover {
    border-color: rgba(125, 211, 252, 0.34) !important;
    background-color: rgba(14, 20, 34, 0.62) !important;
}

.theme-dark .sidebar-account-option:hover {
    background-color: rgba(51, 65, 85, 0.32) !important;
}

.theme-dark .accounts-modal-shell {
    background: linear-gradient(160deg, rgba(6, 9, 13, 0.9), rgba(12, 16, 22, 0.82)) !important;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 26px 64px rgba(2, 6, 12, 0.78) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.theme-dark .accounts-modal-header {
    background: linear-gradient(90deg, rgba(22, 28, 36, 0.72), rgba(10, 14, 19, 0.52)) !important;
    border-bottom-color: rgba(148, 163, 184, 0.18) !important;
}

.theme-dark .account-item-card {
    background: linear-gradient(145deg, rgba(17, 24, 39, 0.78), rgba(11, 16, 28, 0.7)) !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
}

.theme-dark .account-item-card:hover {
    background: linear-gradient(145deg, rgba(25, 37, 57, 0.78), rgba(15, 24, 40, 0.7)) !important;
    border-color: rgba(125, 211, 252, 0.36) !important;
}

.theme-dark .account-item-card .bg-white {
    background-color: rgba(13, 17, 26, 0.94) !important;
    border-color: rgba(125, 211, 252, 0.32) !important;
}

.theme-dark .account-edit-btn {
    color: #94a3b8 !important;
}

.theme-dark .account-edit-btn:hover {
    color: #7dd3fc !important;
}

.theme-dark .account-delete-btn {
    color: #94a3b8 !important;
}

.theme-dark .account-delete-btn:hover {
    background-color: rgba(244, 63, 94, 0.18) !important;
    color: #fb7185 !important;
}

.theme-dark .accounts-modal-input {
    background-color: rgba(15, 23, 42, 0.64) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: #e2e8f0 !important;
}

.theme-dark .accounts-modal-input::placeholder {
    color: #94a3b8 !important;
}

.theme-dark .accounts-modal-add-btn {
    background: linear-gradient(135deg, #111827, #1f2937) !important;
    border: 1px solid rgba(148, 163, 184, 0.34);
    box-shadow: 0 10px 24px rgba(2, 6, 12, 0.5);
}

.theme-dark .accounts-modal-add-btn:hover {
    background: linear-gradient(135deg, #1f2937, #334155) !important;
    border-color: rgba(203, 213, 225, 0.46);
}

.theme-dark .edit-balance-modal {
    background: rgba(8, 8, 10, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.theme-dark .edit-balance-modal .bg-gradient-to-r.from-blue-50.to-indigo-50 {
    background: rgba(12, 12, 14, 0.8) !important;
}

.theme-dark .edit-balance-modal .bg-gradient-to-br.from-slate-50.via-white.to-blue-50 {
    background: rgba(10, 10, 12, 0.85) !important;
}

.theme-dark .edit-balance-modal .rounded-2xl.border.border-slate-200.bg-white,
.theme-dark .edit-balance-transaction-block {
    background: rgba(15, 15, 17, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-dark .edit-balance-modal input,
.theme-dark .edit-balance-transaction-type {
    background-color: rgba(20, 20, 22, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.theme-dark .edit-balance-modal input::placeholder {
    color: #6b7280 !important;
}

.theme-dark .edit-balance-transaction-type option {
    background: #0a0a0c;
    color: #ffffff;
}

.theme-dark .edit-balance-add-btn {
    background: rgba(20, 20, 22, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    color: #ffffff !important;
}

.theme-dark .edit-balance-add-btn:hover {
    background: rgba(30, 30, 32, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.25);
}

.theme-dark .edit-balance-delete-tx {
    background-color: rgba(20, 20, 22, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #9ca3af !important;
}

.theme-dark .edit-balance-delete-tx:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

.theme-dark .edit-balance-footer {
    background: rgba(8, 8, 10, 0.95) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .edit-balance-cancel-btn {
    background: rgba(30, 30, 32, 0.7) !important;
    color: #d1d5db !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    margin: 0 !important;
}

.theme-dark .edit-balance-cancel-btn:hover {
    background: rgba(40, 40, 42, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #f3f4f6 !important;
}

.theme-dark .edit-balance-save-btn {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    margin: 0 !important;
}

.theme-dark .edit-balance-save-btn:hover {
    background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.45) !important;
}

.theme-dark .edit-balance-footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.theme-dark .dashboard-side-badge {
    border: 1px solid rgba(148, 163, 184, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.theme-dark .dashboard-side-badge.text-emerald-600 {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
}

.theme-dark .dashboard-side-badge.text-rose-600 {
    background-color: rgba(244, 63, 94, 0.22) !important;
    color: #fda4af !important;
}

.theme-dark .dashboard-recent-trades {
    background: rgba(9, 13, 22, 0.72) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

.theme-dark .dashboard-recent-trades .border-b,
.theme-dark .dashboard-recent-trades .divide-y > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(148, 163, 184, 0.16) !important;
}

.theme-dark .trade-save-btn {
    background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
    border: 1px solid rgba(125, 211, 252, 0.38);
    box-shadow: 0 14px 30px rgba(14, 165, 233, 0.28), 0 0 0 1px rgba(2, 132, 199, 0.14) inset;
}

.theme-dark .trade-save-btn:hover {
    background: linear-gradient(135deg, #38bdf8, #3b82f6) !important;
    box-shadow: 0 18px 34px rgba(14, 165, 233, 0.34), 0 0 0 1px rgba(125, 211, 252, 0.22) inset;
}

.theme-dark .dashboard-month-goal-card {
    background: linear-gradient(145deg, rgba(12, 21, 38, 0.9), rgba(11, 18, 31, 0.84)) !important;
    border-color: rgba(125, 211, 252, 0.24) !important;
}

.theme-dark .dashboard-month-goal-inner {
    background: rgba(10, 16, 28, 0.72) !important;
    border-color: rgba(125, 211, 252, 0.2) !important;
}

.theme-dark .month-goal-progress-fill {
    background-image: linear-gradient(90deg, #38bdf8, #22d3ee) !important;
}

.theme-dark .month-goal-progress-fill.bg-gradient-to-r.from-emerald-500.to-emerald-600 {
    background-image: linear-gradient(90deg, #14b8a6, #06b6d4) !important;
}

.theme-dark .month-goal-progress-fill.bg-gradient-to-r.from-blue-500.to-indigo-600 {
    background-image: linear-gradient(90deg, #0ea5e9, #3b82f6) !important;
}

.theme-dark .day-trade-notes-box,
.theme-dark .bg-rose-50.day-trade-notes-box {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
}

.theme-dark .day-trade-notes-box [data-breakable] {
    color: #fbbf24 !important;
}

.theme-dark .day-trade-notes-box .text-rose-600,
.theme-dark .day-trade-notes-box .text-xs.font-bold.text-rose-600 {
    color: #f59e0b !important;
}

.theme-dark .bg-rose-50.border-rose-200 {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
}

.theme-dark .day-trade-edit-btn {
    background: linear-gradient(135deg, #1e293b, #111827) !important;
    border: 1px solid rgba(125, 211, 252, 0.24);
    color: #e2e8f0 !important;
}

.theme-dark .day-trade-edit-btn:hover {
    background: linear-gradient(135deg, #334155, #1f2937) !important;
    border-color: rgba(125, 211, 252, 0.38);
    color: #f8fafc !important;
}

.theme-dark .analytics-winrate-ring {
    border-color: rgba(148, 163, 184, 0.26) !important;
}

.theme-dark .analytics-winrate-ring .stroke-slate-200 {
    stroke: rgba(148, 163, 184, 0.24);
}

.theme-dark .analytics-winrate-ring .bg-white {
    background: rgba(9, 14, 24, 0.94) !important;
}

.theme-dark .analytics-unified-track {
    background: rgba(51, 65, 85, 0.42) !important;
}

.theme-dark .analytics-top-symbol-fill.meter-green,
.theme-dark .analytics-weekdays-card .meter-fill.meter-green,
.theme-dark .analytics-hours-card .meter-fill.meter-green {
    background: linear-gradient(90deg, #14b8a6, #10b981) !important;
}

.theme-dark .analytics-top-symbol-fill.meter-rose,
.theme-dark .analytics-weekdays-card .meter-fill.meter-rose,
.theme-dark .analytics-hours-card .meter-fill.meter-rose {
    background: linear-gradient(90deg, #f43f5e, #fb7185) !important;
}

.theme-dark .analytics-weekdays-card .meter-fill.meter-amber,
.theme-dark .analytics-hours-card .meter-fill.meter-amber {
    background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
}

.theme-dark .analytics-session-fill {
    background: linear-gradient(90deg, #0ea5e9, #38bdf8) !important;
}

.theme-dark .analytics-rr-fill {
    background: linear-gradient(90deg, #22d3ee, #14b8a6) !important;
}

.theme-dark .workspace-notes-surface {
    background: rgba(10, 14, 24, 0.78) !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
}

.theme-dark .workspace-notes-empty-state {
    background: rgba(17, 24, 39, 0.72) !important;
}

.theme-dark .workspace-notes-empty-state:hover {
    background: rgba(30, 41, 59, 0.82) !important;
}

.theme-dark .workspace-notes-empty-state .fa-pencil {
    color: #7dd3fc !important;
}

.theme-dark .workspace-notes-empty-state p {
    color: #cbd5e1 !important;
}

.theme-dark .workspace-notes-content-trigger:hover {
    background: rgba(30, 41, 59, 0.56) !important;
}

.theme-dark .workspace-notes-surface .prose,
.theme-dark .workspace-notes-surface .prose p,
.theme-dark .workspace-notes-surface .prose li,
.theme-dark .workspace-notes-surface .prose h1,
.theme-dark .workspace-notes-surface .prose h2,
.theme-dark .workspace-notes-surface .prose h3 {
    color: #e2e8f0 !important;
}

.theme-dark .workspace-notes-edit-hint {
    color: #7dd3fc !important;
}

.theme-dark .workspace-frequent-block {
    background: linear-gradient(145deg, rgba(14, 24, 40, 0.76), rgba(10, 18, 30, 0.7)) !important;
    border-color: rgba(125, 211, 252, 0.28) !important;
    box-shadow: 0 10px 28px rgba(2, 8, 20, 0.4) inset;
}

.theme-dark .journal-list-footer,
.theme-dark .journal-list-footer tr,
.theme-dark .journal-list-footer td {
    background: rgba(13, 18, 30, 0.94) !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
}

.theme-dark .journal-list-footer tr:hover td,
.theme-dark .journal-list-footer:hover td {
    background: rgba(13, 18, 30, 0.94) !important;
}

.theme-dark .analytics-setups-details-btn {
    background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
    border: 1px solid rgba(125, 211, 252, 0.38);
    color: #f8fafc !important;
    box-shadow: 0 10px 24px rgba(14, 165, 233, 0.28);
}

.theme-dark .analytics-setups-details-btn:hover {
    background: linear-gradient(135deg, #38bdf8, #3b82f6) !important;
    border-color: rgba(125, 211, 252, 0.5);
}

.theme-dark .analytics-streak-loss-card {
    background: linear-gradient(150deg, rgba(34, 13, 23, 0.68), rgba(22, 11, 18, 0.72)) !important;
    border-color: rgba(251, 113, 133, 0.28) !important;
}

.theme-dark .analytics-streak-loss-card .text-slate-700 {
    color: #fecdd3 !important;
}

.theme-dark .analytics-streak-loss-card .text-slate-500 {
    color: #fda4af !important;
}

.theme-dark .analytics-year-trigger {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(125, 211, 252, 0.28);
    color: #e2e8f0 !important;
}

.theme-dark .analytics-year-trigger:hover {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(125, 211, 252, 0.42);
}

.theme-dark .analytics-year-menu {
    background: rgba(7, 12, 22, 0.96) !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
}

.theme-dark .analytics-year-option:hover {
    background: rgba(51, 65, 85, 0.46) !important;
}

.theme-dark .analytics-period-btn {
    border: 1px solid rgba(148, 163, 184, 0.24);
}

.theme-dark .analytics-period-btn.bg-slate-900 {
    background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
    border-color: rgba(125, 211, 252, 0.45) !important;
    color: #f8fafc !important;
}

.theme-dark .analytics-period-btn.bg-slate-100 {
    background: rgba(30, 41, 59, 0.62) !important;
    color: #cbd5e1 !important;
}

.theme-dark .journal-direction-btn {
    border: 1px solid rgba(148, 163, 184, 0.26);
}

.theme-dark .journal-direction-btn.journal-direction-long.bg-emerald-50 {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
    border-color: rgba(52, 211, 153, 0.32) !important;
}

.theme-dark .journal-direction-btn.journal-direction-short.bg-rose-50 {
    background: rgba(244, 63, 94, 0.22) !important;
    color: #fda4af !important;
    border-color: rgba(251, 113, 133, 0.34) !important;
}

.theme-dark .journal-direction-btn.journal-direction-long.bg-emerald-600 {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-color: rgba(110, 231, 183, 0.45) !important;
}

.theme-dark .journal-direction-btn.journal-direction-short.bg-rose-600 {
    background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
    border-color: rgba(253, 164, 175, 0.45) !important;
}

.theme-dark .journal-add-trade-btn {
    background: linear-gradient(135deg, #0f172a, #1e293b) !important;
    border: 1px solid rgba(125, 211, 252, 0.34);
    box-shadow: 0 10px 24px rgba(8, 47, 73, 0.48);
}

.theme-dark .journal-add-trade-btn:hover {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    border-color: rgba(125, 211, 252, 0.52);
    box-shadow: 0 14px 32px rgba(8, 47, 73, 0.56);
}

.theme-dark .calculators-modal-overlay {
    z-index: 140 !important;
}

.theme-dark .my-notes-shell,
.theme-dark .my-note-card,
.theme-dark .my-note-card .bg-white,
.theme-dark .my-notes-empty {
    background: rgba(10, 14, 24, 0.95) !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
}

.theme-dark .my-note-card .text-slate-800,
.theme-dark .my-note-card .text-slate-900 {
    color: #e2e8f0 !important;
}

.theme-dark .note-editor-modal-shell {
    background: #0b1220 !important;
    border-color: rgba(148, 163, 184, 0.26) !important;
}

.theme-dark .note-editor-modal-shell .text-slate-700 {
    color: #cbd5e1 !important;
}

.theme-dark .note-editor-modal-shell .text-slate-900 {
    color: #f1f5f9 !important;
}

.theme-dark .note-editor-modal-shell input,
.theme-dark .note-editor-modal-shell select {
    background: rgba(15, 23, 42, 0.82) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: #e2e8f0 !important;
}

.theme-dark .note-editor-modal-shell input::placeholder {
    color: #94a3b8 !important;
}

.theme-dark .note-editor-footer {
    background: #0b1220 !important;
    border-top-color: rgba(148, 163, 184, 0.24) !important;
}

.theme-dark .note-editor-surface .tiptap-toolbar {
    background: rgba(15, 23, 42, 0.9) !important;
    border-bottom-color: rgba(148, 163, 184, 0.24) !important;
}

.theme-dark .note-editor-surface .tiptap-content {
    background: rgba(15, 23, 42, 0.72) !important;
    color: #e2e8f0 !important;
}

.theme-dark .note-editor-surface .tiptap-content h1,
.theme-dark .note-editor-surface .tiptap-content h2,
.theme-dark .note-editor-surface .tiptap-content strong {
    color: #f8fafc !important;
}

.theme-dark .note-editor-surface .tiptap-content p.is-editor-empty:first-child::before {
    color: #94a3b8 !important;
}

.theme-dark .calculators-modal-shell {
    background: linear-gradient(165deg, rgba(7, 10, 14, 0.98), rgba(9, 12, 18, 0.96)) !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
}

.theme-dark .calculators-modal-shell .text-slate-900 {
    color: #f1f5f9 !important;
}

.theme-dark .calculators-modal-shell .text-slate-700,
.theme-dark .calculators-modal-shell .text-slate-600,
.theme-dark .calculators-modal-shell .text-slate-500 {
    color: #cbd5e1 !important;
}

.theme-dark .calculators-modal-shell .bg-slate-50,
.theme-dark .calculators-modal-shell .even\:bg-slate-50\/40,
.theme-dark .calculators-modal-shell .odd\:bg-white,
.theme-dark .calculators-modal-shell .bg-white {
    background: rgba(15, 23, 42, 0.7) !important;
}

.theme-dark .calculators-modal-shell .border-slate-200,
.theme-dark .calculators-modal-shell .border-slate-100 {
    border-color: rgba(148, 163, 184, 0.24) !important;
}

.theme-dark .calc-plan-months-table td,
.theme-dark .calc-plan-months-table th {
    color: #dbeafe !important;
}

.theme-dark .analytics-streak-expected-card {
    background: rgba(8, 12, 20, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}

.theme-dark .analytics-expected-subtitle {
    color: #94a3b8 !important;
}

.theme-dark .analytics-expected-loss-pill {
    background: rgba(244, 63, 94, 0.24) !important;
    border-color: rgba(251, 113, 133, 0.36) !important;
    color: #fecdd3 !important;
}

.theme-dark .monthly-goal-cancel-btn {
    background: rgba(30, 41, 59, 0.9) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.theme-dark .monthly-goal-cancel-btn:hover {
    background: rgba(51, 65, 85, 0.95) !important;
}

.theme-dark .trade-modal-overlay {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.theme-dark .trade-modal-shell {
    background: rgba(10, 10, 12, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.theme-dark .trade-modal-header {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .trade-modal-shell .modal-input,
.theme-dark .trade-modal-shell select,
.theme-dark .trade-modal-shell input,
.theme-dark .trade-modal-shell textarea {
    background: rgba(20, 20, 22, 0.6) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.theme-dark .trade-modal-shell .modal-input::placeholder,
.theme-dark .trade-modal-shell textarea::placeholder {
    color: #6b7280 !important;
}

.theme-dark .my-notes-shell,
.theme-dark .my-note-card,
.theme-dark .my-note-card .bg-white,
.theme-dark .my-notes-empty {
    background: rgba(10, 10, 12, 0.9) !important;
}

.theme-dark .note-editor-modal-shell {
    background: #000000 !important;
}

.theme-dark .note-editor-footer {
    background: #000000 !important;
}

.theme-dark .note-editor-modal-shell input,
.theme-dark .note-editor-modal-shell select {
    background: rgba(20, 20, 22, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.theme-dark .note-editor-modal-shell select option {
    background: #000000;
    color: #ffffff;
}

.theme-dark .note-editor-surface .tiptap-toolbar {
    background: rgba(15, 15, 17, 0.9) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .note-editor-surface .tiptap-content {
    background: #000000 !important;
    color: #ffffff !important;
}

.theme-dark .analytics-filters-card {
    position: relative;
    z-index: 90;
    overflow: visible !important;
}

.theme-dark .analytics-session-trigger {
    background: rgba(10, 16, 28, 0.88) !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
    color: #e2e8f0 !important;
}

.theme-dark .analytics-session-menu {
    z-index: 160 !important;
    background: rgba(6, 10, 18, 0.98) !important;
    border-color: rgba(148, 163, 184, 0.26) !important;
    box-shadow: 0 22px 44px rgba(2, 6, 12, 0.7) !important;
}

.theme-dark .journal-quick-preset-btn {
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.theme-dark .journal-quick-preset-btn.bg-slate-900 {
    background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
    border-color: rgba(125, 211, 252, 0.45) !important;
    color: #f8fafc !important;
}

.theme-dark .journal-quick-preset-btn.bg-slate-100 {
    background: rgba(30, 41, 59, 0.68) !important;
    color: #cbd5e1 !important;
}

.theme-dark .journal-session-chip {
    border: 1px solid rgba(148, 163, 184, 0.24);
}

.theme-dark .journal-session-chip.bg-slate-100 {
    background: rgba(30, 41, 59, 0.72) !important;
    color: #cbd5e1 !important;
}

.theme-dark .journal-session-chip.bg-amber-100 {
    background: rgba(245, 158, 11, 0.24) !important;
    color: #fcd34d !important;
    border-color: rgba(251, 191, 36, 0.34) !important;
}

.theme-dark .journal-session-chip.bg-emerald-100 {
    background: rgba(16, 185, 129, 0.24) !important;
    color: #6ee7b7 !important;
    border-color: rgba(52, 211, 153, 0.34) !important;
}

.theme-dark .journal-session-chip.bg-blue-100 {
    background: rgba(59, 130, 246, 0.24) !important;
    color: #93c5fd !important;
    border-color: rgba(96, 165, 250, 0.34) !important;
}

.theme-dark .journal-session-chip.bg-purple-100 {
    background: rgba(139, 92, 246, 0.24) !important;
    color: #c4b5fd !important;
    border-color: rgba(167, 139, 250, 0.34) !important;
}

.theme-dark .meter-track,
.theme-dark .analytics-unified-track {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.78)) !important;
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08), inset 0 -1px 0 rgba(2, 6, 12, 0.42);
}

.theme-dark .meter-fill,
.theme-dark .analytics-session-fill,
.theme-dark .analytics-rr-fill,
.theme-dark .analytics-top-symbol-fill,
.theme-dark .analytics-weekdays-card .meter-fill,
.theme-dark .analytics-hours-card .meter-fill {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 0 18px rgba(14, 165, 233, 0.24);
}

.theme-dark .analytics-session-fill {
    background: linear-gradient(90deg, #22d3ee, #0ea5e9) !important;
}

.theme-dark .analytics-rr-fill {
    background: linear-gradient(90deg, #38bdf8, #06b6d4) !important;
}

.theme-dark .analytics-top-symbol-fill.meter-green,
.theme-dark .analytics-weekdays-card .meter-fill.meter-green,
.theme-dark .analytics-hours-card .meter-fill.meter-green {
    background: linear-gradient(90deg, #2dd4bf, #10b981) !important;
}

.theme-dark .analytics-top-symbol-fill.meter-rose,
.theme-dark .analytics-weekdays-card .meter-fill.meter-rose,
.theme-dark .analytics-hours-card .meter-fill.meter-rose {
    background: linear-gradient(90deg, #fb7185, #f43f5e) !important;
}

.theme-dark .note-preview-shell {
    background: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-dark .note-preview-content {
    background: #000000 !important;
}

.theme-dark .note-preview-shell .prose,
.theme-dark .note-preview-shell .prose p,
.theme-dark .note-preview-shell .prose li,
.theme-dark .note-preview-shell .prose h1,
.theme-dark .note-preview-shell .prose h2,
.theme-dark .note-preview-shell .prose h3 {
    color: #ffffff !important;
}

.theme-dark .note-preview-shell .prose strong {
    color: #ffffff !important;
}

.theme-dark .note-preview-shell .prose mark,
.theme-dark .note-editor-surface .tiptap-content mark {
    color: #0f172a !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14);
}

.theme-dark .note-preview-shell .border-slate-200 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .note-editor-surface .tiptap-toolbar button,
.theme-dark .note-editor-surface .tiptap-toolbar .dropdown-trigger {
    color: #d1d5db !important;
}

.theme-dark .note-editor-surface .tiptap-toolbar button:hover,
.theme-dark .note-editor-surface .tiptap-toolbar .dropdown-trigger:hover {
    background: rgba(30, 30, 32, 0.7) !important;
}

.theme-dark .note-editor-surface .tiptap-toolbar button.is-active {
    background: rgba(40, 40, 42, 0.9) !important;
    color: #ffffff !important;
}

.theme-dark .note-editor-surface .tiptap-toolbar .dropdown-menu {
    background: #000000 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-dark .note-editor-surface .tiptap-toolbar .color-swatch.is-active {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2) !important;
}

.theme-dark .upgrade-method-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.theme-dark .upgrade-method-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 36px rgba(2, 8, 20, 0.56);
}

.theme-dark .upgrade-method-card:hover .upgrade-icon-visa,
.theme-dark .upgrade-method-card:hover .upgrade-icon-mastercard,
.theme-dark .upgrade-method-card:hover .upgrade-icon-applepay,
.theme-dark .upgrade-method-card:hover .upgrade-icon-usdt {
    transform: scale(1.08);
    filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.32));
}

.theme-dark .upgrade-icon-visa,
.theme-dark .upgrade-icon-mastercard,
.theme-dark .upgrade-icon-applepay,
.theme-dark .upgrade-icon-usdt {
    transition: transform 0.28s ease, filter 0.28s ease, color 0.28s ease;
}

.theme-dark .upgrade-method-card:hover .upgrade-usdt-pill {
    background: linear-gradient(90deg, rgba(38, 161, 123, 0.24), rgba(45, 212, 191, 0.24)) !important;
    border-color: rgba(45, 212, 191, 0.4) !important;
    box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.28) inset;
}

/* View Toggle Buttons (Calendar/List/Cards) - Dark Theme */
.theme-dark button[class*="viewMode"] {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.theme-dark button[class*="viewMode"]:not(.bg-slate-900):not([class*="shadow-lg"]) {
    background: rgba(30, 30, 30, 0.6) !important;
    color: #9ca3af !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark button[class*="viewMode"]:not(.bg-slate-900):not([class*="shadow-lg"]):hover {
    background: rgba(45, 45, 45, 0.8) !important;
    color: #d1d5db !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.theme-dark button.bg-slate-900.shadow-lg,
.theme-dark button[class*="shadow-lg"].bg-slate-900 {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    color: #ffffff !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4) !important;
}

/* Input Placeholders - Dark Theme */
.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
    color: #6b7280 !important;
    opacity: 1;
}

.theme-dark .modal-input::placeholder {
    color: #6b7280 !important;
}

/* Instrument Input Placeholder - More Visible */
.theme-dark input[placeholder*="Start typing"]::placeholder,
.theme-dark input[placeholder*="eur/"]::placeholder,
.theme-dark input[placeholder*="btc/"]::placeholder,
.theme-dark input[placeholder*="xau/"]::placeholder {
    color: #9ca3af !important;
    font-weight: 500;
}

/* Enhanced Dark Theme - Cards and Surfaces */
.theme-dark .rounded-xl.bg-white,
.theme-dark .rounded-2xl.bg-white,
.theme-dark .rounded-lg.bg-white {
    background: rgba(20, 20, 20, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Analytics Cards */
.theme-dark .bg-gradient-to-r.from-blue-50.to-indigo-50,
.theme-dark .bg-gradient-to-br.from-slate-50.to-blue-50 {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.12), rgba(67, 56, 202, 0.12)) !important;
}

/* Calendar Cards */
.theme-dark .calendar-cell {
    background: rgba(25, 25, 25, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .calendar-cell:hover {
    background: rgba(35, 35, 35, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Profitable days - green background */
.theme-dark .bg-emerald-50.border-emerald-200 {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

/* Losing days - red background */
.theme-dark .bg-rose-50.border-rose-200 {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Trade Cards - Profit/Loss Colors */
.theme-dark .border-emerald-100 {
    border-color: rgba(16, 185, 129, 0.25) !important;
}

.theme-dark .border-rose-100 {
    border-color: rgba(239, 68, 68, 0.25) !important;
}

.theme-dark .border-blue-100 {
    border-color: rgba(59, 130, 246, 0.25) !important;
}

/* Text Colors for Better Readability */
.theme-dark .text-emerald-500 {
    color: #10b981 !important;
}

.theme-dark .text-rose-500 {
    color: #ef4444 !important;
}

.theme-dark .text-blue-500 {
    color: #3b82f6 !important;
}

/* Scrollbar for Dark Theme */
.theme-dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
}

.theme-dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Better contrast for interactive elements */
.theme-dark button:not(.bg-slate-900):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-blue"]) {
    color: #d1d5db;
}

.theme-dark button:not(.bg-slate-900):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-blue"]):hover {
    color: #f3f4f6;
}

/* Note Card - Improve "Open" button visibility */
.theme-dark .my-note-card .bg-blue-50.text-blue-600 {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    color: #ffffff !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35) !important;
}

.theme-dark .my-note-card:hover .bg-blue-50.text-blue-600 {
    background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5) !important;
}

/* Set as cover button in note modal */
.theme-dark .bg-white\/90.border-slate-300 {
    background: rgba(30, 30, 32, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.theme-dark .bg-white\/90.border-slate-300:hover {
    background: rgba(40, 40, 42, 0.98) !important;
    color: #60a5fa !important;
}

/* CSV Import Modal */
.theme-dark [x-show="csvModalOpen"] .bg-white {
    background: rgba(10, 10, 12, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.theme-dark [x-show="csvModalOpen"] input,
.theme-dark [x-show="csvModalOpen"] select,
.theme-dark [x-show="csvModalOpen"] textarea {
    background: rgba(20, 20, 22, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.theme-dark [x-show="csvModalOpen"] .bg-blue-600 {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
}

.theme-dark [x-show="csvModalOpen"] .bg-blue-600:hover {
    background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.45) !important;
}

.theme-dark [x-show="csvModalOpen"] .bg-slate-100,
.theme-dark [x-show="csvModalOpen"] button.bg-white {
    background: rgba(30, 30, 32, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #d1d5db !important;
}

.theme-dark [x-show="csvModalOpen"] .bg-slate-100:hover,
.theme-dark [x-show="csvModalOpen"] button.bg-white:hover {
    background: rgba(40, 40, 42, 0.85) !important;
    color: #f3f4f6 !important;
}

.theme-dark [x-show="csvModalOpen"] .border-slate-200,
.theme-dark [x-show="csvModalOpen"] .border-slate-300 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-dark [x-show="csvModalOpen"] .text-slate-900,
.theme-dark [x-show="csvModalOpen"] .text-slate-700,
.theme-dark [x-show="csvModalOpen"] .text-slate-600 {
    color: #ffffff !important;
}

.theme-dark [x-show="csvModalOpen"] .text-slate-500 {
    color: #9ca3af !important;
}

.theme-dark [x-show="csvModalOpen"] .bg-slate-200 {
    background: rgba(30, 30, 32, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #d1d5db !important;
}

.theme-dark [x-show="csvModalOpen"] .bg-slate-200:hover {
    background: rgba(40, 40, 42, 0.85) !important;
    color: #f3f4f6 !important;
}

/* Trades of the Day Modal */
.theme-dark [x-show="dayTradesModalOpen"] .bg-white {
    background: rgba(8, 8, 10, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

.theme-dark [x-show="dayTradesModalOpen"] .bg-gradient-to-r {
    background: rgba(12, 12, 14, 0.8) !important;
}

.theme-dark [x-show="dayTradesModalOpen"] .border-slate-200 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark [x-show="dayTradesModalOpen"] .text-slate-900,
.theme-dark [x-show="dayTradesModalOpen"] .text-slate-700,
.theme-dark [x-show="dayTradesModalOpen"] .text-slate-600 {
    color: #ffffff !important;
}

.theme-dark [x-show="dayTradesModalOpen"] .text-slate-500 {
    color: #9ca3af !important;
}

.theme-dark [x-show="dayTradesModalOpen"] .bg-blue-50 {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}

.theme-dark [x-show="dayTradesModalOpen"] .text-blue-600 {
    color: #60a5fa !important;
}

.theme-dark [x-show="dayTradesModalOpen"] .bg-rose-50 {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
}

.theme-dark [x-show="dayTradesModalOpen"] .text-rose-600 {
    color: #f59e0b !important;
}

/* Journal List - Notes column (red text to white) */
.theme-dark .sheet-table td.text-rose-500 {
    color: #ffffff !important;
}

.theme-dark .sheet-table tbody tr:hover td.text-rose-500 {
    color: #e5e5e5 !important;
}

/* Sidebar Navigation - Active Page Highlight for Dark Theme */
.theme-dark .bg-slate-100.text-slate-900.shadow-sm {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Equity Growth Chart Block - Black Background for Dark Theme */
.theme-dark .bg-white.rounded-2xl.shadow-sm.border.border-slate-200\/60 {
    background: rgba(0, 0, 0, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Market Mood Buttons - Better Readability in Dark Theme */
.theme-dark .bias-button.bg-green-100.text-green-700 {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.theme-dark .bias-button.bg-green-100.text-green-700:hover {
    background: rgba(16, 185, 129, 0.35) !important;
    color: #86efac !important;
}

.theme-dark .bias-button.bg-red-100.text-red-700 {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.theme-dark .bias-button.bg-red-100.text-red-700:hover {
    background: rgba(239, 68, 68, 0.35) !important;
    color: #fecaca !important;
}

.theme-dark .bias-button.bg-slate-100.text-slate-700 {
    background: rgba(148, 163, 184, 0.25) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
}

.theme-dark .bias-button.bg-slate-100.text-slate-700:hover {
    background: rgba(148, 163, 184, 0.35) !important;
    color: #e2e8f0 !important;
}

/* Instrument Input - Black Background with White Text */
.theme-dark input[placeholder="EUR/USD, XAU/USD, BTC/USDT"] {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.theme-dark input[placeholder="EUR/USD, XAU/USD, BTC/USDT"]::placeholder {
    color: #9ca3af !important;
}

/* Settings Modal - Better Active Button Visibility */
.theme-dark button.bg-slate-900.text-white {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    border: 1px solid rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;
}

.theme-dark button.bg-slate-50.text-slate-700 {
    background: rgba(30, 30, 32, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #9ca3af !important;
}

.theme-dark button.bg-slate-50.text-slate-700:hover {
    background: rgba(40, 40, 42, 0.85) !important;
    color: #d1d5db !important;
}

/* Settings Modal - Instrument Pills */
.theme-dark .bg-slate-100.px-2.py-1.rounded.text-xs {
    background: rgba(30, 30, 32, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e2e8f0 !important;
}

/* Instant Tab Switching - No Transition Animation for Main Tabs */
div[x-show*="currentTab === 'dashboard'"],
div[x-show*="currentTab === 'journal'"],
div[x-show*="currentTab === 'analytics'"],
div[x-show*="currentTab === 'workspace'"],
div[x-show*="currentTab === 'billing'"] {
    transition: none !important;
    animation: none !important;
}

/* Instant background switching for sidebar navigation buttons */
nav.space-y-1 button {
    transition-property: color, border-color, box-shadow, transform, opacity !important;
    transition-duration: 200ms !important;
    transition-timing-function: ease-in-out !important;
}

/* ==========================================
   TRADING PLAN - INSTRUMENTS (DARK THEME)
   ========================================== */

/* Workspace Tabs - Active State */
.theme-dark #workspace-tabs button.bg-slate-900.text-white {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;
}

/* Workspace Tabs - Inactive State */
.theme-dark #workspace-tabs button.bg-white.text-slate-600 {
    background: rgba(30, 30, 32, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #9ca3af !important;
}

.theme-dark #workspace-tabs button.bg-white.text-slate-600:hover {
    background: rgba(40, 40, 42, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #d1d5db !important;
}

/* Trading Plan Main Container */
.theme-dark .bg-white.rounded-2xl.shadow-sm.border.border-slate-200.p-7,
.theme-dark .bg-white.rounded-2xl.shadow-sm.border.border-slate-200.p-6 {
    background: rgba(10, 10, 12, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Add Instrument Button - Dashed Border */
.theme-dark .add-instrument-btn {
    background: rgba(15, 15, 17, 0.6) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #60a5fa !important;
}

.theme-dark .add-instrument-btn:hover {
    background: rgba(20, 20, 22, 0.8) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #93c5fd !important;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.15) !important;
}

/* Instrument Input Field */
.theme-dark input[placeholder*="EUR/USD"],
.theme-dark input[placeholder*="XAU/USD"],
.theme-dark input[placeholder*="BTC/USDT"] {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.theme-dark input[placeholder*="EUR/USD"]:focus,
.theme-dark input[placeholder*="XAU/USD"]:focus,
.theme-dark input[placeholder*="BTC/USDT"]:focus {
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* Quick Add Instrument Pills */
.theme-dark .bg-white.border-2.border-blue-200 {
    background: rgba(30, 41, 59, 0.7) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #e2e8f0 !important;
}

.theme-dark .bg-white.border-2.border-blue-200:hover {
    background: rgba(30, 64, 175, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #93c5fd !important;
}

.theme-dark .bg-white.border-2.border-blue-200 .text-blue-600 {
    color: #60a5fa !important;
}

/* Autocomplete Suggestions Dropdown */
.theme-dark .bg-white.border-2.border-blue-300.shadow-xl {
    background: rgba(5, 5, 7, 0.98) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9) !important;
}

.theme-dark .bg-white.border-2.border-blue-300.shadow-xl button:hover {
    background: rgba(30, 64, 175, 0.25) !important;
}

.theme-dark .bg-white.border-2.border-blue-300.shadow-xl .text-blue-600 {
    color: #60a5fa !important;
}

.theme-dark .bg-white.border-2.border-blue-300.shadow-xl .text-slate-500 {
    color: #9ca3af !important;
}

/* Instrument Cards */
.theme-dark .instrument-card {
    background: rgba(15, 15, 17, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.theme-dark .instrument-card:hover {
    background: rgba(20, 20, 22, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

/* Instrument Card - Expanded State */
.theme-dark .instrument-card .border-t.border-slate-200 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Bias Buttons - Active States */
.theme-dark .bias-button.bg-green-500.text-white {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4), 0 0 20px rgba(16, 185, 129, 0.2) !important;
    color: #ffffff !important;
}

.theme-dark .bias-button.bg-red-500.text-white {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4), 0 0 20px rgba(239, 68, 68, 0.2) !important;
    color: #ffffff !important;
}

.theme-dark .bias-button.bg-slate-500.text-white {
    background: linear-gradient(135deg, #64748b, #475569) !important;
    border: 1px solid rgba(100, 116, 139, 0.5) !important;
    box-shadow: 0 4px 14px rgba(100, 116, 139, 0.4) !important;
    color: #ffffff !important;
}

/* Screenshot Upload Area */
.theme-dark .border-2.border-dashed.border-slate-300 {
    background: rgba(20, 20, 22, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.theme-dark .border-2.border-dashed.border-slate-300:hover {
    background: rgba(30, 30, 32, 0.7) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.theme-dark .border-2.border-dashed.border-slate-300 .text-slate-600 {
    color: #9ca3af !important;
}

.theme-dark .border-2.border-dashed.border-slate-300:hover .text-slate-600 {
    color: #60a5fa !important;
}

/* Screenshot Preview Items */
.theme-dark .screenshot-item {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.theme-dark .screenshot-item:hover {
    border-color: rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2) !important;
}

/* Trading Plan History Sidebar */
.theme-dark .trading-plan-history-panel {
    background: linear-gradient(145deg, rgba(10, 14, 24, 0.85), rgba(8, 12, 20, 0.8)) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* History Panel - Date Pills */
.theme-dark .trading-plan-history-panel .bg-white {
    background: rgba(20, 20, 22, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-dark .trading-plan-history-panel .bg-white:hover {
    background: rgba(30, 30, 32, 0.85) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

/* History Panel - Active Date */
.theme-dark .trading-plan-history-panel .bg-slate-900 {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    border: 1px solid rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4) !important;
}

/* Delete Day Plan Button */
.theme-dark .delete-day-plan-btn {
    background: rgba(20, 20, 22, 0.6) !important;
    color: #9ca3af !important;
}

.theme-dark .delete-day-plan-btn:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Notes Textarea in Instrument Cards */
.theme-dark .instrument-card textarea {
    background: rgba(0, 0, 0, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.theme-dark .instrument-card textarea:focus {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.theme-dark .instrument-card textarea::placeholder {
    color: #6b7280 !important;
}

/* Save Plan Button */
.theme-dark button[class*="bg-slate-900"][class*="shadow-lg"]:not(.bias-button) {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    border: 1px solid rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;
}

.theme-dark button[class*="bg-slate-900"][class*="shadow-lg"]:not(.bias-button):hover {
    background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
    box-shadow: 0 8px 28px rgba(59, 130, 246, 0.5) !important;
}

/* Instrument Symbol Badge */
.theme-dark .instrument-card .text-slate-900.font-black {
    color: #ffffff !important;
}

.theme-dark .instrument-card .text-slate-600 {
    color: #9ca3af !important;
}

.theme-dark .instrument-card .text-slate-500 {
    color: #6b7280 !important;
}

/* Remove Instrument Button */
.theme-dark .instrument-card button.text-slate-400:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.15) !important;
}

/* Expand/Collapse Button */
.theme-dark .instrument-card button.text-blue-600 {
    color: #60a5fa !important;
}

.theme-dark .instrument-card button.text-blue-600:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
}

/* Empty State Messages */
.theme-dark .text-slate-500.text-center {
    color: #9ca3af !important;
}

/* Forex News Calendar Hint Button */
.theme-dark .hint-btn.bg-slate-900 {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
}

.theme-dark .hint-btn.bg-slate-900:hover {
    background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.45) !important;
}

/* Trading Plan - Visual Polish */
.theme-dark .instrument-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.theme-dark .bias-button {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.theme-dark .add-instrument-btn i {
    transition: transform 0.3s ease !important;
}

.theme-dark .add-instrument-btn:hover i {
    transform: scale(1.15) rotate(90deg) !important;
}

/* Trade Modal - Buy/Sell Buttons */
.trade-side-btn-buy-active {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    border: 1px solid rgba(16, 185, 129, 0.4);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35), 0 0 0 1px rgba(16, 185, 129, 0.2) inset;
}

.trade-side-btn-sell-active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    border: 1px solid rgba(239, 68, 68, 0.4);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35), 0 0 0 1px rgba(239, 68, 68, 0.2) inset;
}

.trade-side-btn-inactive {
    background: rgba(30, 30, 32, 0.5) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.trade-side-btn-inactive:hover {
    background: rgba(40, 40, 42, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.15);
    color: #cbd5e1 !important;
}

.theme-dark .trade-side-btn-buy-active {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border: 1px solid rgba(16, 185, 129, 0.5);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4), 0 0 0 1px rgba(16, 185, 129, 0.25) inset;
}

.theme-dark .trade-side-btn-buy-active:hover {
    background: linear-gradient(135deg, #34d399, #10b981) !important;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.5), 0 0 0 1px rgba(52, 211, 153, 0.3) inset;
}

.theme-dark .trade-side-btn-sell-active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border: 1px solid rgba(239, 68, 68, 0.5);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.4), 0 0 0 1px rgba(239, 68, 68, 0.25) inset;
}

.theme-dark .trade-side-btn-sell-active:hover {
    background: linear-gradient(135deg, #f87171, #ef4444) !important;
    box-shadow: 0 8px 22px rgba(239, 68, 68, 0.5), 0 0 0 1px rgba(248, 113, 113, 0.3) inset;
}

.theme-dark .trade-side-btn-inactive {
    background: rgba(20, 20, 22, 0.6) !important;
    color: #6b7280 !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-dark .trade-side-btn-inactive:hover {
    background: rgba(30, 30, 32, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.18);
    color: #9ca3af !important;
}

:root:not(.theme-dark) .trade-side-btn-buy-active {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

:root:not(.theme-dark) .trade-side-btn-sell-active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    border: 1px solid rgba(239, 68, 68, 0.3);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

:root:not(.theme-dark) .trade-side-btn-inactive {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0;
}

:root:not(.theme-dark) .trade-side-btn-inactive:hover {
    background: #e2e8f0 !important;
    color: #64748b !important;
}

/* My Notes Shell - Proper border containment */
.my-notes-shell {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .my-notes-shell {
        margin: 0;
        border-radius: 1rem !important;
    }
}