/* --- Base & Custom Styles --- */
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.glass-effect { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }

/* --- Animations & Transitions --- */
.animate-fade-in { animation: fadeIn 0.15s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
#tree-svg-path { stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 25s linear; }
.tree-wither { animation: wither 2s forwards; }
@keyframes wither { from { stroke: #4ade80; } to { stroke: #94a3b8; } }

/* --- Sidebar & Main Content Layout --- */
#sidebar { transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1); }
button, .nav-link, .nav-link-bottom { transition: all 150ms; }

/* Desktop Default State (Expanded) */
@media (min-width: 768px) {
    #sidebar { width: 16rem; }
}

/* Desktop Collapsed State */
body.sidebar-collapsed #sidebar { width: 5rem; }
body.sidebar-collapsed .nav-text, body.sidebar-collapsed #user-details { display: none; }
body.sidebar-collapsed .nav-link, body.sidebar-collapsed .nav-link-bottom, body.sidebar-collapsed #sidebar-toggle-desktop { justify-content: center; }

/* Mobile Sidebar (off-canvas) */
@media (max-width: 767px) {
    main { margin-left: 0 !important; }
    #sidebar {
        position: fixed; top: 0; left: 0; height: 100%;
        transform: translateX(-100%); z-index: 40; width: 16rem;
    }
    #sidebar.is-open { transform: translateX(0); }
    #sidebar-overlay {
        position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); z-index: 30;
        opacity: 0; transition: opacity 300ms ease-in-out; pointer-events: none;
    }
    #sidebar-overlay.is-active { opacity: 1; pointer-events: auto; }
}

/* --- Drag & Drop Styles --- */
.dragging { opacity: 0.5; transform: rotate(2deg); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.drag-over { border: 2px dashed #38bdf8; background-color: #f0f9ff; }

/* --- Form & Utility Styles --- */
[contenteditable][placeholder]:empty:before { content: attr(placeholder); color: #94a3b8; pointer-events: none; display: block; }
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type='number'] { -moz-appearance: textfield; }
.custom-checkbox:checked + label:before { background-color: #3b82f6; border-color: #3b82f6; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); }
.custom-checkbox:checked + label { text-decoration: line-through; color: #64748b; }
.custom-checkbox + label:before { content: ''; display: inline-block; width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; border-radius: 0.375rem; border: 2px solid #cbd5e1; vertical-align: middle; transition: all 150ms; flex-shrink: 0; }
.custom-checkbox { display: none; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .chevron-icon { transform: rotate(90deg); }

/* --- Calculator --- */
#calculator-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.calc-btn { transition: background-color 100ms; }