body {
    transition: background-color 0.5s ease;
}

#canvas {
    transition: background-color 0.5s ease;
}

.toolbar {
    transition: background-color 0.5s ease;
}

.tool {
    transition: color 0.5s ease, background-color 0.5s ease;
}

#instructions,
#zoom-percentage {
    transition: color 0.5s ease;
}

body.light-theme {
    background-color: #F9FAFB;
}

body.light-theme #canvas {
    background-color: #F9FAFB;
}

body.light-theme .toolbar {
    border: 1px solid #c8c8c897;
    background: #FCFCFC;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0.1, 0.1, 0, 0.1);
    backdrop-filter: blur(10px);
}

body.light-theme .toolbar-divider {
    background-color: #d4d4d4;
}

body.light-theme .tool {
    color: #000000;
}

body.light-theme .tool:hover {
    background-color: #e0e0e0;
}

body.light-theme .tool.active {
    background-color: #4387f4;
    color: #ffffff;
}

body.light-theme #instructions {
    color: #b3adad;
}

body.light-theme .themebtn {
    color: #000000;
}

body.light-theme .themebtn:hover {
    background-color: #e0e0e0;
}

body.light-theme .zoom-in-btn {
    color: #000000;
}

body.light-theme .zoom-in-btn:hover {
    background-color: #e0e0e0;
    transform: scale(1.1);
}

body.light-theme .zoom-out-btn {
    color: #000000;
}

body.light-theme .zoom-out-btn:hover {
    background-color: #e0e0e0;
    transform: scale(1.1);
}

body.light-theme #zoom-percentage {
    color: #000000;
    border: none;
    backdrop-filter: none;
    border-radius: none;
}

body.light-theme #strokeWidth {
    color: #000000;
    background-color: #FCFCFC;
}

body.light-theme .floating-tab {
    background: #FCFCFC;
    border: 1px solid #c8c8c897;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.light-theme .floating-tab-divider {
    background: #dfdfdf;
}

body.light-theme .shape-btn {
    background: #f0f0f0;
    color: #000000;
    border: 1px solid #e0e0e0;
}

body.light-theme .shape-btn:hover {
    background: #e0e0e0;
}

body.light-theme .shape-btn.active {
    background-color: #4387f4;
    color: #ffffff;
}

.light-theme .width-opacity-wrapper {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

body.light-theme .color-btn {
    border: 1px solid #717171;
    box-shadow: none;
}

body.light-theme .width-btn {
    background: #f0f0f0;
    color: #000000;
    border: 1px solid #e0e0e0;
}

body.light-theme .width-btn:hover {
    background: #e0e0e0;
}

body.light-theme .width-btn.active {
    background: #3182ED;
    color: #ffffff;
}

.light-theme .opacity-slider {
    background: #e0e0e0;
}

body.light-theme .search-dropdown {
    background: #FCFCFC;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.light-theme .search-input-wrapper {
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
}

body.light-theme .search-input-wrapper input {
    color: #000000;
}

body.light-theme .search-input-wrapper input::placeholder {
    color: #666666;
}

body.light-theme .search-input-wrapper i {
    color: #666666;
}

body.light-theme .search-results::-webkit-scrollbar-thumb {
    background: #e0e0e0;
}

body.light-theme .search-item {
    color: #000000;
}

body.light-theme .search-item:hover {
    background: #f0f0f0;
}

body.light-theme .search-category {
    color: #666666;
}

body.light-theme .sidebarbtn {
    color: #000000;
}

body.light-theme .sidebarbtn:hover {
    background-color: #e0e0e0;
}

body.light-theme .sidebar-dropdown {
    background: #FCFCFC;
    border: 1px solid #c8c8c897;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.light-theme .sidebar-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .sidebar-header h3 {
    color: rgba(0, 0, 0, 0.9);
}

body.light-theme #close-sidebar {
    color: rgba(0, 128, 255, 0.6);
}

body.light-theme #close-sidebar:hover {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(255, 0, 0, 0.9);
}

body.light-theme .menu-item a {
    color: #000000;
}

body.light-theme .menu-section h4 {
    color: rgba(0, 0, 0, 0.4);
}

body.light-theme .menu-divider {
    background: rgba(0, 0, 0, 0.08);
}

body.light-theme .menu-item {
    color: rgba(0, 0, 0, 0.9);
}

body.light-theme .menu-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

body.light-theme .menu-item i {
    color: rgba(0, 0, 0, 0.7);
}

body.light-theme .menu-item .shortcut {
    color: rgba(0, 0, 0, 0.4);
}

body.light-theme .edit-dropdown,
body.light-theme .view-dropdown,
body.light-theme .export-dropdown {
    background: #FCFCFC;
    border: 1px solid #c8c8c897;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.light-theme .edit-dropdown .menu-item,
body.light-theme .view-dropdown .menu-item,
body.light-theme .export-dropdown .menu-item {
    color: rgba(0, 0, 0, 0.9);
}

body.light-theme .edit-dropdown .menu-item:hover,
body.light-theme .view-dropdown .menu-item:hover,
body.light-theme .export-dropdown .menu-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

body.light-theme .edit-dropdown .shortcut,
body.light-theme .view-dropdown .shortcut,
body.light-theme .export-dropdown .shortcut {
    color: rgba(0, 0, 0, 0.4);
}

body.light-theme .edit-dropdown .menu-divider,
body.light-theme .view-dropdown .menu-divider,
body.light-theme .export-dropdown .menu-divider {
    background: rgba(0, 0, 0, 0.08);
}

/* Light theme account card styles */
body.light-theme .account-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.light-theme .profile-info .name {
    color: #333333;
}

body.light-theme .profile-info .username {
    color: #666666;
}

body.light-theme .actions-section {
    border-top: 1px solid #e0e0e0;
}

body.light-theme .settings-btn {
    background: #e5e5e5;
    color: #000000;
}

body.light-theme .settings-btn:hover {
    background: rgba(179, 177, 177, 0.654);
}

body.light-theme .logout-btn {
    color: #dc3545;
}

body.light-theme .logout-btn:hover {
    background: rgba(255, 68, 68, 0.462);
}

body.light-theme .divider {
    color: #e0e0e0;
}

body.light-theme #color-palate {
    border: 1px solid #c8c8c897;
    background: #FCFCFC;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

body.light-theme .colorpalatebtn {
    color: #000000;
}

body.light-theme .colorpalatebtn:hover {
    background-color: #e0e0e0;
}

body.light-theme .colorpalatebtn.active {
    transform: scale(1.1);
}

body.light-theme .sidebar {
    background-color: #FCFCFC;
    border: 1px solid #c8c8c897;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

body.light-theme .sidebar-btn {
    color: #000000;
}

body.light-theme .sidebar-btn:hover {
    background-color: #e0e0e0;
    transform: scale(1.1);
}

body.light-theme .theme-toggle {
    background-color: #FCFCFC;
    border: 1px solid #c8c8c897;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

body.light-theme .theme-btn {
    color: #000000;
}

body.light-theme .theme-btn:hover {
    background-color: #e0e0e0;
    transform: scale(1.1);
}

body.light-theme .undoredo {
    background-color: #FCFCFC;
    border: 1px solid #c8c8c897;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

body.light-theme .undo-btn {
    color: #000000;
}

body.light-theme .undo-btn:hover {
    background-color: #e0e0e0;
}

body.light-theme .redo-btn {
    color: #000000;
}

body.light-theme .redo-btn:hover {
    background-color: #e0e0e0;
}

body.light-theme .delete {
    background-color: #FCFCFC;
    border: 1px solid #c8c8c897;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

body.light-theme .delete-btn {
    color: #000000;
}

body.light-theme .delete-btn:hover {
    background-color: #e0e0e0;
}

body.light-theme .zoom-toolbar {
    background-color: #FCFCFC;
    border: 1px solid #c8c8c897;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

body.light-theme .floating-notification {
    background: rgba(255, 255, 255, 0.98);
    color: #333333;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

body.light-theme .notification-content i {
    color: #4387f4;
}

body.light-theme .notification-progress {
    background: linear-gradient(90deg, #4387f4, #8860D0);
}

body.light-theme .layout-dropdown {
    background: #FCFCFC;
    border: 1px solid #c8c8c897;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.light-theme .layout-dropdown .menu-item {
    color: rgba(0, 0, 0, 0.9);
}

body.light-theme .layout-dropdown .menu-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

body.light-theme .layout-dropdown .shortcut {
    color: rgba(0, 0, 0, 0.4);
}

body.light-theme .layout-dropdown .menu-divider {
    background: rgba(0, 0, 0, 0.08);
}

body.light-theme .language-dropdown {
    background: #FCFCFC;
    border: 1px solid #c8c8c897;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.light-theme .language-item {
    color: rgba(0, 0, 0, 0.9);
}

body.light-theme .language-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

body.light-theme .language-name {
    color: #333333;
}

body.light-theme .language-icon {
    color: #888;
    font-weight: 400;
}

body.light-theme .menu-item .language-shortcut {
    color: rgba(0, 0, 0, 0.4);
}

body.light-theme .keyboard-dropdown {
    background: #FCFCFC;
    border: 1px solid #c8c8c897;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.light-theme .keyboard-section h4 {
    color: rgba(0, 0, 0, 0.4);
}

body.light-theme .keyboard-item {
    color: rgba(0, 0, 0, 0.9);
}

body.light-theme .keyboard-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

body.light-theme .keyboard-item .key-combo {
    color: rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.06);
}

body.light-theme .keyboard-dropdown::-webkit-scrollbar-thumb {
    background: #e0e0e0;
}

body.light-theme .fill-btn {
    background: #f0f0f0;
    color: #000000;
    border: 1px solid #e0e0e0;
}

body.light-theme .fill-btn:hover {
    background: #e0e0e0;
}

body.light-theme .fill-btn.active {
    background-color: #4387f4;
    color: #ffffff;
}

body.light-theme .fill-btn img {
    filter: brightness(0);
}

body.light-theme .fill-btn:hover img {
    filter: brightness(0) opacity(0.8);
}

body.light-theme .fill-btn.active img {
    filter: brightness(0) invert(1);
}

body.light-theme .fill-btn.active {
    background-color: #4387f4;
    color: #ffffff;
}

body.light-theme .section-header {
    color: rgba(0, 0, 0, 0.469);
}