:root {
    --md-sys-color-primary: #0d9488;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #ccfbf1;
    --md-sys-color-surface: #f0f9ff; /* Light Sky Blue */
    --md-sys-color-surface-variant: #f0fdf4; /* Light Mint Green */
    --md-sys-color-on-surface: #1c1917;
    --md-sys-color-on-surface-variant: #57534e;
    --md-sys-color-outline: #d6d3d1;
    --md-sys-color-error: #e11d48;
    --md-sys-color-warning: #f97316;
    --md-sys-color-success: #16a34a;
    --md-sys-color-info: #0284c7;
    --md-sys-color-shadow: rgba(0, 0, 0, 0.1);
    --md-sys-elevation-level-1: 0 1px 3px 0 var(--md-sys-color-shadow), 0 1px 2px -1px var(--md-sys-color-shadow);
    --md-sys-elevation-level-2: 0 4px 6px -1px var(--md-sys-color-shadow), 0 2px 4px -2px var(--md-sys-color-shadow);
}
body { font-family: 'Roboto', sans-serif; background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); }
#mainAppSection, #loginSection { background-color: var(--md-sys-color-surface-variant); border-radius: 1.5rem; box-shadow: var(--md-sys-elevation-level-2); }
h1,h2,h3,h4,h5,h6 { color: var(--md-sys-color-on-surface); }
button, .button { border-radius: 9999px; font-weight: 500; padding: 0.625rem 1.5rem; transition: all 0.2s ease-in-out; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: var(--md-sys-elevation-level-1); }
button:hover, .button:hover { box-shadow: var(--md-sys-elevation-level-2); transform: translateY(-1px); }
button:disabled { opacity: 0.7; cursor: not-allowed; box-shadow: none; transform: none; }
#loginShoonyaBtn, #fetchAISignalBtn { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
#loginShoonyaBtn:hover, #fetchAISignalBtn:hover { background-color: #0f766e; }
#manualBuyBtn { background-color: var(--md-sys-color-success); color: var(--md-sys-color-on-primary); }
#manualSellBtn { background-color: var(--md-sys-color-error); color: var(--md-sys-color-on-primary); }
#logoutBtn { background-color: var(--md-sys-color-error); color: var(--md-sys-color-on-primary); }
input, select { border-radius: 0.5rem; border: 1px solid var(--md-sys-color-outline); background-color: #ffffff; transition: all 0.2s; color: #1f2937 }
input:focus, select:focus { outline: none; border-color: var(--md-sys-color-primary); box-shadow: 0 0 0 3px var(--md-sys-color-primary-container); }

.loading-spinner { border-top: 5px solid var(--md-sys-color-primary); }
.tab-button.active { color: var(--md-sys-color-primary); border-bottom-color: var(--md-sys-color-primary); }
.watchlist-row.primary { background-color: var(--md-sys-color-primary-container) !important; font-weight: bold; border-left: 4px solid var(--md-sys-color-primary); }

.signal-card { background-color: #ffffff; }
.signal-card-buy { background-color: rgba(22, 163, 74, 0.08); border-color: var(--md-sys-color-success); }
.signal-card-buy h4 { color: #14532d; }
.signal-card-sell { background-color: rgba(225, 29, 72, 0.08); border-color: var(--md-sys-color-error); }
.signal-card-sell h4 { color: #881337; }
.signal-card-monitoring { background-color: rgba(2, 132, 199, 0.08); border-color: var(--md-sys-color-info); }
.signal-card-monitoring h4 { color: #0c4a6e; }
.signal-card-hold { background-color: rgba(87, 83, 78, 0.08); border-color: var(--md-sys-color-on-surface-variant); }

.positive-pnl { background-color: rgba(22, 163, 74, 0.1); color: #14532d; }
.negative-pnl { background-color: rgba(225, 29, 72, 0.1); color: #881337; }
.status-dot.connected { background-color: var(--md-sys-color-success); }
.status-dot.disconnected { background-color: var(--md-sys-color-error); }
.positive-change { color: var(--md-sys-color-success) !important; }
.negative-change { color: var(--md-sys-color-error) !important; }

.score-bar { background: linear-gradient(to right, var(--md-sys-color-error), var(--md-sys-color-warning), var(--md-sys-color-success)); }
.side-column-container { background-color: var(--md-sys-color-primary-container); }
.signal-checklist-item { border-bottom: 1px solid #f3f4f6; }

/* --- Colorful Theme: Specific Box & Background Colors --- */

/* Main Containers */
body { background-color: #f0f9ff; /* Light Sky Blue */ }
#mainAppSection, #loginSection { background-color: #f0fdf4; /* Light Mint Green */ }

/* Left & Right Side Columns */
.side-column-container { background-color: #fefce8; /* Light Yellow */ }
.side-column-container .p-4.bg-white.rounded-lg.border { background-color: #ffffff; /* Inner cards in side columns are white */ }

/* Center Column Panels */
.col-span-12.lg\:col-span-7 > .p-4.bg-gray-50 {
    background-color: #faf5ff; /* Light Purple */
}
#manualSignalDisplay, #autoMonitorDisplay {
    background-color: transparent;
}
.col-span-12.lg\:col-span-7 > div:last-child {
     background-color: #fff7ed; /* Light Orange */
}

/* Specific Status Boxes */
.status-box { background-color: #ffffff; border-color: var(--md-sys-color-outline); }
#aiSignalStatus.status-box { background-color: #fef2f2; /* Light Red */ }
#manualOrderStatus.status-box { background-color: #f0f9ff; /* Light Blue */ }

/* Settings Page */
#settingsTabContent { background-color: #fafaf9; /* Light Stone */}
.settings-group { background-color: #ffffff; }