:root {
    --bg-dark: #1e1e24;
    --bg-panel: #25252b;
    --bg-canvas: #18181b;
    --border: #333338;
    --accent: #007acc;
    --accent-light: #007acc;
    --accent-light2: #007acc;
    --ai-model-select: #cdcdcd;
    --accent-hover: #0062a3;
    --text-main: #e1e1e1;
    --text-muted: #888888;
    --sidebar-left-width: 250px;
    --sidebar-right-width: 300px;
    --header-height: 50px;
    --footer-height: 25px;
    --input-bg: #18181b;
    --radius: 4px;
    --hover-bg: rgba(255, 255, 255, 0.05);
    --hover-bg-strong: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --sidebar-header-bg: #2a2a2e;
    --thumb-img-bg: #2a2a2e;
    --props-img-bg: #2a2a2e;
    --scrollbar-thumb: #444;
    --menu-item-bg: #3a3a40;
    --menu-item-hover: #4a4a50;
    --btn-secondary-hover: #4a4a50;
    --tooltip-bg: #1a1a1e;
    --box-border: #444;
    --box-border-dim: #555;
    --content-box-bg: #333;
    --box-focus-bg: #222;
    --class-tag-bg: #1e293b;
    --class-tag-border: #334155;
    --class-tag-text: #e2e8f0;
    --class-tag-hover-bg: #0f172a;
    --thumb-btn-bg: rgba(25, 25, 30, 0.9);
    --icon-fill: #e3e3e3;
}

/* Light Theme */
[data-theme="light"] {
    --bg-dark: #e8e8ec;
    --bg-panel: #f5f5f7;
    --bg-canvas: #dcdce0;
    --border: #c8c8cc;
    --accent:  #0069b4;
    --accent-light: rgba(0, 122, 204, 0.26); 
    --accent-light2: rgba(0, 122, 204, 0.4); 
    --ai-model-select: #2c2c2c;
    --accent-hover: #005a9e;
    --text-main: #1a1a1a;
    --text-muted: #666666;
    --input-bg: #ffffff;
    --hover-bg: rgba(0, 0, 0, 0.04);
    --hover-bg-strong: rgba(0, 0, 0, 0.08);
    --shadow-color: rgba(0, 0, 0, 0.12);
    --sidebar-header-bg: #ebebef;
    --thumb-img-bg: #ebebef;
    --props-img-bg: #ebebef;
    --scrollbar-thumb: #bbb;
    --menu-item-bg: #e8e8ec;
    --menu-item-hover: #dcdce0;
    --btn-secondary-hover: #dcdce0;
    --tooltip-bg: #f0f0f4;
    --box-border: #bbb;
    --box-border-dim: #ccc;
    --content-box-bg: #ddd;
    --box-focus-bg: #fff;
    --class-tag-bg: #e1e8f0;
    --class-tag-border: #c0cfe0;
    --class-tag-text: #1e293b;
    --class-tag-hover-bg: #d0dff0;
    --thumb-btn-bg: rgba(255, 255, 255, 0.9);
    --icon-fill: #333333;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg-dark); color: var(--text-main); height: 100vh; overflow: hidden; }

/* Layout */
#app { display: flex; flex-direction: column; height: 100vh; }

/* Main Area */
#main-content { flex: 1; display: flex; overflow: hidden; }

.hidden { display: none !important; }
.mt-1 { margin-top: 5px; }

/* Light mode: override inline SVG fills in the top bar and sidebar buttons */
[data-theme="light"] #top-bar svg[fill="#e3e3e3"],
[data-theme="light"] .sidebar-header svg[fill="#e3e3e3"] { fill: var(--icon-fill); }
[data-theme="light"] .modal-overlay svg[fill="#e3e3e3"] { fill: var(--icon-fill); }

/* Theme Toggle Button */
.btn-theme-toggle {
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    cursor: pointer;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-theme-toggle:hover {
    color: var(--text-main);
    background: var(--btn-secondary-hover);
}
.btn-theme-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.btn-theme-toggle .icon-sun { display: none; }
.btn-theme-toggle .icon-moon { display: block; }
[data-theme="light"] .btn-theme-toggle .icon-sun { display: block; }
[data-theme="light"] .btn-theme-toggle .icon-moon { display: none; }