:root{--font-body: "Roboto", "Noto Sans Thai", sans-serif;--font-mono: "Roboto Mono", monospace;--transition-speed: .2s;--background-color: #f4f7f9;--surface-color: #ffffff;--primary-color: #3B82F6;--primary-hover-color: #2563EB;--text-color: #1F2937;--text-muted-color: #6B7280;--border-color: #E5E7EB;--shadow-color: rgba(0, 0, 0, .1)}html.dark{--background-color: #111827;--surface-color: #1F2937;--primary-color: #3B82F6;--primary-hover-color: #60A5FA;--text-color: #F9FAFB;--text-muted-color: #9CA3AF;--border-color: #374151;--shadow-color: rgba(0, 0, 0, .2)}body,html{margin:0;padding:0;font-family:var(--font-body);background-color:var(--background-color);color:var(--text-color);transition:background-color var(--transition-speed) ease,color var(--transition-speed) ease}#root{display:flex;flex-direction:column;min-height:100vh}.app-layout{display:flex;flex-direction:column;height:100vh}.app-main{display:flex;flex-grow:1;overflow:hidden}.app-content{flex-grow:1;padding:2rem;overflow-y:auto;display:flex;justify-content:center;align-items:flex-start}.button{padding:.75rem 1.5rem;border:none;border-radius:8px;background-color:var(--primary-color);color:#fff;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color var(--transition-speed) ease}.button:hover{background-color:var(--primary-hover-color)}.button:disabled{background-color:#555;cursor:not-allowed;opacity:.7}@media(max-width:768px){.app-main{flex-direction:column}.app-content{padding:1rem}}html{scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:5px;border:2px solid transparent;background-clip:padding-box;transition:background-color var(--transition-speed) ease}::-webkit-scrollbar-thumb:hover{background-color:var(--text-muted-color)}::-webkit-scrollbar-button{display:none}.sidebar-scroll-container::-webkit-scrollbar-thumb{background-color:transparent}.sidebar-scroll-container:hover::-webkit-scrollbar-thumb,.sidebar-scroll-container.is-scrolling::-webkit-scrollbar-thumb{background-color:var(--border-color)}.sidebar-scroll-container:hover::-webkit-scrollbar-thumb:hover{background-color:var(--text-muted-color)}.sidebar-scroll-container{scrollbar-color:transparent transparent}.sidebar-scroll-container:hover,.sidebar-scroll-container.is-scrolling{scrollbar-color:var(--border-color) transparent}@keyframes confetti-fall{0%{transform:translateY(-10vh) rotate(0);opacity:1}to{transform:translateY(110vh) rotate(720deg);opacity:0}}