body {
    margin: 0; display: flex; flex-direction: column; align-items: center;
    font-family: var(--font-ui);
    background: var(--bg); 
    color: var(--text);
    height: 100vh; height: 100dvh; 
    width: 100vw; overflow: hidden;
    touch-action: none; user-select: none; -webkit-user-select: none;
    transition: color 0.15s ease; 
}

.low-power body { background-image: none !important; background-color: var(--bg); }
.low-power .glass-panel { backdrop-filter: none !important; background: var(--surface); opacity: 0.98; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.low-power .mesh-gradient { display: none !important; animation: none !important; }
.low-power *, .low-power *::before, .low-power *::after {
    animation: none !important;
    transition: none !important;
}

/* Android (Chromium) compositors can visibly flicker when backdrop-filter
   layers sample a canvas that repaints on every draw. Fall back to solid
   theme surfaces so the UI stays stable on those devices. */
.android .glass-panel,
.android .bottom-sheet,
.android .btn-icon-only,
.android .toast,
.android .custom-popup,
.android .collab-indicator,
.android .pc-popup {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.android .glass-panel { background: var(--surface); }

.special-bg-layer { position: fixed; inset: -20%; width: 140%; height: 140%; z-index: -2; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; will-change: auto; display: none; }
.mesh-gradient {
    background: radial-gradient(circle at 20% 40%, rgba(0, 122, 255, 0.5), transparent 30%),
                radial-gradient(circle at 80% 20%, rgba(100, 200, 255, 0.35), transparent 30%),
                radial-gradient(circle at 50% 80%, rgba(200, 230, 255, 0.5), transparent 35%);
    background-color: #f0f4fa; filter: blur(16px); animation: none;
    transform: translateZ(0);
}
.noise-overlay {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    transition: opacity 0.2s ease;
}
@keyframes meshFlow { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-20px, 20px) scale(1.05); } }

@keyframes morph { 0% { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; } 100% { border-radius: 40% 60%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}