/* ========================================== Standardized Body & Layout Stylesheet ========================================== */ /* Universal Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: var(--background); background-attachment: fixed; color: var(--text); line-height: 1.5; transition: background var(--transition), color var(--transition); display: flex; flex-direction: column; } /* Custom Scrollbars */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* Shared Layout Paradigms: - Use .layout-scroll on for pages that scroll vertically (beam, pad, todo). - Use .layout-fit on for app views that fit to 100% viewport (grid, trace). */ body.layout-scroll { min-height: 100vh; overflow-y: auto; } body.layout-fit { height: 100vh; overflow: hidden; } #app { height: 100%; display: flex; flex-direction: column; overflow: hidden; } /* Standardized Content Container for scrollable layouts */ .container { max-width: 800px; width: 100%; margin: 0 auto 2rem auto; padding: 0 20px; box-sizing: border-box; display: flex; flex-direction: column; flex: 1; min-height: 0; } /* Standardized App Card wrapper */ .app { padding: 2.5rem; background: var(--container); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: all var(--transition); width: 100%; } /* Standardized spacing wrapper for layout-fit views (grid, trace) */ .app-body { max-width: 100%; margin: 0 auto; padding: 2rem; width: 100%; flex: 1; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; } /* ========================================== Standardized Toast & Notification System ========================================== */ .toast-container { position: fixed; bottom: 2rem; right: 2rem; left: auto; transform: none; display: flex; flex-direction: column; gap: 0.75rem; z-index: 9999; width: 90%; max-width: 320px; pointer-events: none; } .toast { pointer-events: auto; color: #ffffff; font-weight: 600; padding: 0.85rem 1.5rem; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); opacity: 0; transform: translateY(12px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); font-size: 0.9rem; text-align: center; cursor: pointer; word-break: break-word; } /* For state-based show/hide active transition */ .toast.show { opacity: 1; transform: translateY(0); } /* For animation-based alerts */ .toast.animate-slide { animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .toast.success { background-color: rgba(16, 185, 129, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); } .toast.error { background-color: rgba(239, 68, 68, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); } @keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }