/* Global App Size Emulation for Desktop */
html {
background-color: #f1f5f9; /* Soft desktop background */
display: flex;
justify-content: center;
min-height: 100vh;
}
body {
width: 100% !important;
max-width: 450px !important; /* Mobile app width */
min-height: 100vh !important;
margin: 0 auto !important;
position: relative !important;
box-shadow: 0 0 50px rgba(0,0,0,0.08) !important;
overflow-x: hidden !important;
}
/* Ensure fixed elements inside body are constrained to the app width */
.header, .mobile-nav, .bottom-nav, footer, .floating-actions {
max-width: 450px !important;
margin: 0 auto !important;
left: 0 !important;
right: 0 !important;
}
/* Add subtle rounded corners to look like a phone screen on desktop */
@media (min-width: 451px) {
body {
border-right: 1px solid rgba(0,0,0,0.05);
border-left: 1px solid rgba(0,0,0,0.05);
}
}
/* --- Global Skeleton Loaders --- */
.skeleton {
background: #e2e8f0;
background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 8px;
color: transparent !important;
user-select: none;
}
.skeleton::before,
.skeleton::after,
.skeleton * {
visibility: hidden !important;
}
.skeleton-text {
height: 14px;
margin-bottom: 8px;
width: 100%;
}
.skeleton-title {
height: 20px;
margin-bottom: 12px;
width: 60%;
}
.skeleton-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
.skeleton-card {
height: 120px;
width: 100%;
border-radius: 16px;
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
b o d y : : - w e b k i t - s c r o l l b a r { d i s p l a y : n o n e ; } b o d y { - m s - o v e r f l o w - s t y l e : n o n e ; s c r o l l b a r - w i d t h : n o n e ; }
/ * - - - G l o b a l C o p y & D o w n l o a d P r o t e c t i o n - - - * /
* {
- w e b k i t - u s e r - s e l e c t : n o n e ! i m p o r t a n t ;
- m o z - u s e r - s e l e c t : n o n e ! i m p o r t a n t ;
- m s - u s e r - s e l e c t : n o n e ! i m p o r t a n t ;
u s e r - s e l e c t : n o n e ! i m p o r t a n t ;
- w e b k i t - t o u c h - c a l l o u t : n o n e ! i m p o r t a n t ; / * i O S S a f a r i * /
- w e b k i t - u s e r - d r a g : n o n e ! i m p o r t a n t ; / * S a f a r i * /
}
i n p u t , t e x t a r e a {
- w e b k i t - u s e r - s e l e c t : a u t o ! i m p o r t a n t ;
- m o z - u s e r - s e l e c t : a u t o ! i m p o r t a n t ;
- m s - u s e r - s e l e c t : a u t o ! i m p o r t a n t ;
u s e r - s e l e c t : a u t o ! i m p o r t a n t ;
}
i m g , v i d e o {
p o i n t e r - e v e n t s : n o n e ! i m p o r t a n t ; / * P r e v e n t s l o n g - p r e s s t o s a v e i m a g e * /
}