html {
    font-size: 17px; 
}

:root, [data-bs-theme="light"] {
    --bs-font-sans-serif: "Google Sans Flex", system-ui, -apple-system, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);

    --bs-body-bg: #f8f9fa;             
    --bs-body-color: #000000;
    --bs-secondary-color: #71717a;     
    --bs-border-color: #e4e4e7;        
    --bs-tertiary-bg: #ffffff;

    --bs-primary: #FF4500;
    --bs-primary-rgb: 255, 69, 0;

    --bs-link-color: #FF4500;
    --bs-link-hover-color: #FF9550;
    
    --bs-focus-ring-color: rgba(255, 69, 0, 0.25);
}

[data-bs-theme="dark"] {
    --bs-body-bg: #000000;
    --bs-body-color: #e4e4e7;          
    --bs-secondary-color: #a1a1aa;     
    --bs-border-color: #333338;        
    --bs-tertiary-bg: #121212;

    --bs-primary: #FF4500;
    --bs-primary-rgb: 255, 69, 0;

    --bs-link-color: #FF4500;
    --bs-link-hover-color: #FF9550;
}

hr {
    border-color: var(--bs-border-color) !important;
    opacity: 0.5 !important; 
}

[data-bs-theme="dark"] .global-header,
[data-bs-theme="dark"] .global-footer {
    background-color: #000000 !important; 
    border-color: var(--bs-border-color) !important;
    border-bottom-width: 1px;
}

[data-bs-theme="light"] .global-header,
[data-bs-theme="light"] .global-footer {
    background-color: #ffffff !important;
}

.card, .modal-content, .offcanvas, .list-group-item {
    background-color: var(--bs-tertiary-bg) !important;
}

.btn-primary {
    --bs-btn-bg: #FF4500; 
    --bs-btn-border-color: #FF4500;
    --bs-btn-hover-bg: #FF9550; 
    --bs-btn-hover-border-color: #FF9550;
    --bs-btn-color: #ffffff !important; 
    --bs-btn-hover-color: #ffffff !important;
    --bs-btn-active-bg: #E03D00; 
    --bs-btn-active-border-color: #FF9550;
    --bs-btn-active-color: #ffffff !important;
    --bs-btn-focus-shadow-rgb: 255, 69, 0;
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: #FF4500; 
    --bs-btn-border-color: #FF4500;
    --bs-btn-hover-bg: #FF4500; 
    --bs-btn-hover-border-color: #FF4500;
    --bs-btn-hover-color: #ffffff !important;
    --bs-btn-active-bg: #FF9550;
    --bs-btn-active-border-color: #FF9550;
    --bs-btn-active-color: #ffffff !important;
    --bs-btn-focus-shadow-rgb: 255, 69, 0;
    font-weight: 600;
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 69, 0, 0.25) !important;
}

.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.card, .form-control, .form-select, .btn, .modal-content, .list-group-item, .badge {
    border-radius: 4px !important;
}

.card, .modal-content, .global-header {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.hover-border-primary { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.hover-border-primary:hover { border-color: var(--bs-primary) !important; }
.hover-border-primary:active { border-color: #FF9550 !important; }

.theme-switch {
    position: relative; display: inline-flex;
    width: 44px; height: 24px; margin: 0; cursor: pointer;
}

.theme-switch input { opacity: 0; width: 0; height: 0; }

.theme-slider {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--bs-border-color); border-radius: 24px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 5px; transition: background-color 0.3s ease;
}

.theme-slider:before {
    position: absolute; content: ""; height: 16px; width: 16px; 
    left: 4px; bottom: 4px; background-color: #ffffff; border-radius: 50%; z-index: 2;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 0.3s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.theme-slider .icon-wrapper {
    display: flex; align-items: center; justify-content: center; z-index: 1;
    color: var(--bs-secondary-color); transition: color 0.3s ease, opacity 0.3s ease;
}

.theme-slider svg { width: 12px; height: 12px; } 

input:checked + .theme-slider { background-color: #e4e4e7; }
input:checked + .theme-slider:before { transform: translateX(20px); background-color: #000000; }

[data-bs-theme="dark"] .icon-moon { color: #FF4500; opacity: 1; }
[data-bs-theme="dark"] .icon-sun { color: #ffffff; opacity: 0.8; }
[data-bs-theme="light"] .icon-sun { color: #FF4500; opacity: 1; }
[data-bs-theme="light"] .icon-moon { color: #000000; opacity: 0.8; }

.drawer-link {
    display: flex; align-items: center;
    padding: 16px 24px; color: var(--bs-body-color);
    text-decoration: none; font-weight: 500;
    border-bottom: 1px solid var(--bs-border-color);
    transition: background-color 0.2s;
}

.drawer-link:hover { 
    background-color: rgba(0, 0, 0, 0.02);
    color: var(--bs-body-color); 
}
[data-bs-theme="dark"] .drawer-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.accordion-button { font-weight: 600; padding: 16px 24px; color: var(--bs-body-color) !important; background: transparent !important; box-shadow: none !important; }
.accordion-button:not(.collapsed) { color: var(--bs-primary) !important; }
.accordion-button:focus { box-shadow: none !important; }

.drawer-sublink-wrapper {
    margin-left: 28px; border-left: 1px solid var(--bs-border-color);
    padding-left: 0; display: flex; flex-direction: column; margin-bottom: 12px;
}

.drawer-sublink {
    padding: 10px 16px 10px 24px;
    color: var(--bs-secondary-color); text-decoration: none;
    position: relative; font-size: 14px; font-weight: 500; transition: color 0.2s;
}

.drawer-sublink::before {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 12px; height: 1px; background-color: var(--bs-border-color);
}

.drawer-sublink:hover { color: var(--bs-primary); text-decoration: none; }

.editor-textarea { min-height: 40vh; height: 100%; resize: none; background-color: transparent !important; }
.editor-textarea:focus { box-shadow: none !important; background-color: transparent !important; outline: none !important; }
.editor-card { transition: border-color 0.2s ease, box-shadow 0.2s ease; height: 100%; }
.editor-card:focus-within { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 1px var(--bs-primary) !important; }

.divider-with-text {
    display: flex; align-items: center; text-align: center;
    color: var(--bs-secondary-color); cursor: pointer; user-select: none;
    margin: 16px 0; width: 100%; transition: color 0.2s ease;
}

.divider-with-text::before, .divider-with-text::after {
    content: ''; flex: 1; border-bottom: 1px solid var(--bs-border-color);
    transition: border-bottom-color 0.2s ease;
}

.divider-with-text:not(:empty)::before { margin-right: 20px; }
.divider-with-text:not(:empty)::after { margin-left: 20px; }

.divider-with-text:hover { color: var(--bs-primary); }
.divider-with-text:hover::before, .divider-with-text:hover::after {
    border-bottom-color: var(--bs-primary);
}

.list-group-item-action { transition: background-color 0.2s, color 0.2s; }
.list-group-item-action:hover, .list-group-item-action:focus { 
    background-color: var(--bs-border-color) !important; 
    color: var(--bs-body-color) !important; 
}

.active-preset {
    background-color: rgba(255, 69, 0, 0.05) !important;
    border-left: 3px solid var(--bs-primary) !important;
}

body.in-app-fullscreen #tool-header-section,
body.in-app-fullscreen #preset-controls-section {
    display: none !important;
}

body.in-app-fullscreen main {
    padding-top: 1rem !important; 
    padding-bottom: 1rem !important;
}