:root { --bg-main: #020617; --bg-sidebar: #0f172a; --bg-input: #1e293b; --border-color: #334155; --text-main: #cbd5e1; --text-highlight: #3b82f6; --text-muted: #64748b; --accent: #3b82f6; --glass-bg: rgba(15, 23, 42, 0.8); --transition-speed: 0.3s; } .light-mode { --bg-main: #f8fafc; --bg-sidebar: #eff6ff; --bg-input: #f1f5f9; --border-color: #cbd5e1; --text-main: #1e293b; --text-highlight: #1d4ed8; --text-muted: #475569; --accent: #1e40af; --glass-bg: rgba(239, 246, 255, 0.95); } body { margin: 0; background-color: var(--bg-main); color: var(--text-main); transition: background-color var(--transition-speed), color var(--transition-speed); } .cursor-grab { cursor: grab; } .cursor-grabbing { cursor: grabbing; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-sidebar); } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } @media (max-width: 768px) { .mobile-fixed-header { position: fixed; top: 0; left: 0; right: 0; height: 50px; z-index: 50; background: var(--bg-sidebar); border-bottom: 1px solid var(--border-color); } .mobile-fixed-viewport { position: fixed; top: 50px; left: 0; right: 0; height: 30vh; z-index: 40; background: var(--bg-main); border-bottom: 1px solid var(--border-color); } .mobile-fixed-properties { position: fixed; top: calc(50px + 30vh); left: 0; right: 0; z-index: 60; background: var(--bg-sidebar); padding: 8px 16px; border-bottom: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .mobile-scroll-container { margin-top: calc(50px + 30vh + 65px); height: calc(100vh - (50px + 30vh + 65px)) !important; overflow-y: auto !important; flex: 1; } } @media (max-width: 930px) and (orientation: landscape) { body::after { content: "Please rotate your device to Portrait mode for the best experience."; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--bg-main); color: var(--text-highlight); display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px; font-weight: bold; z-index: 9999; font-size: 16px; } #root { display: none; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.4s ease-out forwards; } input { transition: all 0.2s ease; } input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); } button { transition: transform 0.1s active; } button:active { transform: scale(0.95); }