/* ==========================================================================
Elite Mods - Global / AppGhor | Morphe.software Modern Solid Stylesheet
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600;700&display=swap');
:root {
--accent: #1E5AA8;
--accent-dark: #15427D;
--accent-light: #4A7FC8;
--accent-gradient: linear-gradient(135deg, #1E5AA8 0%, #00AFAE 100%);
--accent-teal: #00AFAE;
--on-accent: #FFFFFF;
--gold: #F59E0B;
--lime: #10B981;
--red: #EF4444;
--blue-fab: #1E5AA8;
--spring: cubic-bezier(0.25, 1.15, 0.45, 1);
--spring-soft: cubic-bezier(0.2, 1.05, 0.35, 1);
--smooth-ease: cubic-bezier(0.16, 1, 0.3, 1);
--font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-body: 'Plus Jakarta Sans', 'Hind Siliguri', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
/* Universal SVG Icon Engine */
.emg-svg-icon {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
line-height: 1;
flex-shrink: 0;
}
.emg-svg-icon svg {
display: block;
stroke: currentColor;
}
/* Theme: Light (Morphe Clean Solid) - Default */
:root, body, body[data-theme="light"] {
--bg: #FFFFFF;
--bg-ambient: none;
--surface: #FAFAFA;
--surface-2: #F4F4F5;
--surface-3: #E4E4E7;
--text-main: #18181B;
--text-muted: #71717A;
--text-sub: #52525B;
--border: #E4E4E7;
--border-hover: #1E5AA8;
--card-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
--card-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
--taskbar-bg: rgba(255, 255, 255, 0.98);
--taskbar-border: rgba(228, 228, 231, 0.9);
--taskbar-glow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
/* Theme: Dark (Transparent Blur Liquid Glass 3D Theme) */
body[data-theme="dark"] {
--bg: #101014;
--bg-ambient: url('../assets/dark-bg.png');
--surface: rgba(30, 30, 42, 0.65);
--surface-2: rgba(20, 20, 30, 0.55);
--surface-3: rgba(45, 45, 62, 0.65);
--text-main: #FAFAFA;
--text-muted: #A1A1AA;
--text-sub: #D4D4D8;
--border: rgba(255, 255, 255, 0.12);
--border-hover: rgba(74, 127, 200, 0.65);
--card-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 6px 20px rgba(0, 0, 0, 0.45);
--card-shadow-hover: inset 0 1px 2px rgba(255, 255, 255, 0.25), 0 14px 32px rgba(0, 0, 0, 0.65), 0 0 16px rgba(74, 127, 200, 0.25);
--taskbar-bg: #13131C;
--taskbar-border: rgba(255, 255, 255, 0.18);
--taskbar-glow: 0 16px 45px rgba(0, 0, 0, 0.9);
}
/* Mobile Dark Mode Background */
@media (max-width: 768px) {
body[data-theme="dark"] {
--bg-ambient: url('../assets/dark-bg-mobile.png');
}
}
/* Dark Mode Liquid Glassmorphic 3D Tabs, Pills & Cards */
body[data-theme="dark"] .chip-pill {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.14);
border-top: 1px solid rgba(255, 255, 255, 0.28);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.35);
color: #E4E4E7;
}
body[data-theme="dark"] .chip-pill:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%);
border-color: rgba(74, 127, 200, 0.45);
border-top: 1px solid rgba(255, 255, 255, 0.4);
transform: translateY(-2px);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 8px 20px rgba(0, 0, 0, 0.45);
color: #FFFFFF;
}
body[data-theme="dark"] .chip-pill.active {
background: linear-gradient(135deg, rgba(30, 90, 168, 0.85) 0%, rgba(0, 175, 174, 0.75) 100%);
border: 1px solid rgba(255, 255, 255, 0.28);
border-top: 1px solid rgba(255, 255, 255, 0.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 6px 20px rgba(30, 90, 168, 0.55);
color: #FFFFFF;
transform: translateY(-1px);
}
body[data-theme="dark"] .bottom-nav-pill {
background: #12121A;
border: 1.5px solid rgba(255, 255, 255, 0.16);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
box-shadow:
0 14px 40px rgba(0, 0, 0, 0.85),
0 4px 14px rgba(0, 0, 0, 0.6),
inset 0 1px 1px rgba(255, 255, 255, 0.12);
}
body[data-theme="dark"] .nav-pill-btn.active .nav-pill-icon-bubble {
background: var(--accent-gradient);
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow:
inset 0 0 12px rgba(255, 255, 255, 0.25),
0 4px 14px rgba(30, 90, 168, 0.5);
transform: none;
}
body[data-theme="dark"] .nav-pill-btn:not(.active):hover .nav-pill-icon-bubble {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.12);
color: #FFFFFF;
transform: scale(1.04);
}
body[data-theme="dark"] .nav-pill-btn.active .nav-pill-label {
color: #38BDF8;
font-weight: 700;
text-shadow: none;
}
body[data-theme="dark"] .admin-nav-tab {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.14);
border-top: 1px solid rgba(255, 255, 255, 0.28);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.35);
color: #D4D4D8;
}
body[data-theme="dark"] .admin-nav-tab:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%);
border-color: rgba(74, 127, 200, 0.45);
border-top: 1px solid rgba(255, 255, 255, 0.4);
transform: translateY(-2px);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 8px 20px rgba(0, 0, 0, 0.45);
color: #FFFFFF;
}
body[data-theme="dark"] .admin-nav-tab.active {
background: linear-gradient(135deg, rgba(30, 90, 168, 0.85) 0%, rgba(0, 175, 174, 0.75) 100%);
border: 1px solid rgba(255, 255, 255, 0.28);
border-top: 1px solid rgba(255, 255, 255, 0.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 6px 20px rgba(30, 90, 168, 0.55);
color: #FFFFFF;
transform: translateY(-1px);
}
body[data-theme="dark"] .prompt-card {
background: linear-gradient(180deg, rgba(35, 35, 48, 0.65) 0%, rgba(22, 22, 32, 0.78) 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-top: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.45);
}
body[data-theme="dark"] .prompt-card:hover {
background: linear-gradient(180deg, rgba(45, 45, 60, 0.75) 0%, rgba(28, 28, 40, 0.85) 100%);
border-color: rgba(74, 127, 200, 0.5);
border-top: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25), 0 14px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(74, 127, 200, 0.2);
}
body[data-theme="dark"] .search-input-box input {
background: linear-gradient(135deg, rgba(35, 35, 48, 0.6) 0%, rgba(20, 20, 30, 0.72) 100%);
border: 1px solid rgba(255, 255, 255, 0.14);
border-top: 1px solid rgba(255, 255, 255, 0.28);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 4px 14px rgba(0, 0, 0, 0.35);
}
body[data-theme="dark"] .reaction-pill-btn {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.14);
border-top: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.3);
}
body[data-theme="dark"] .reaction-pill-btn.active {
background: linear-gradient(135deg, rgba(30, 90, 168, 0.85) 0%, rgba(0, 175, 174, 0.75) 100%);
border: 1px solid rgba(255, 255, 255, 0.25);
border-top: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 6px 18px rgba(30, 90, 168, 0.5);
}
body[data-theme="dark"] .site-header,
body[data-theme="dark"] .admin-topbar {
background: rgba(20, 20, 30, 0.72);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
body[data-theme="dark"] .telegram-vip-banner,
body[data-theme="dark"] .announcement-bar,
body[data-theme="dark"] .notice-install-box,
body[data-theme="dark"] .admin-stat-card,
body[data-theme="dark"] .admin-table-container,
body[data-theme="dark"] .drawer-brand-card {
background: linear-gradient(180deg, rgba(35, 35, 48, 0.65) 0%, rgba(22, 22, 32, 0.78) 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-top: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.45);
}
/* Base Reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
html {
scroll-behavior: smooth;
color-scheme: dark light;
}
html.instant-scroll,
html.instant-scroll *,
html.instant-scroll body {
scroll-behavior: auto !important;
}
body {
background-color: var(--bg);
background-image: var(--bg-ambient);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: var(--text-main);
font-family: var(--font-body);
line-height: 1.5;
min-height: 100vh;
padding-bottom: 105px;
transition: background-color 0.35s var(--smooth-ease), color 0.35s var(--smooth-ease);
overflow-x: hidden;
position: relative;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; background: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select {
font-family: inherit;
color: var(--text-main);
outline: none;
border: 1.5px solid var(--border);
background: var(--surface-2);
border-radius: 14px;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
input:focus, textarea:focus, select:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}
/* ==========================================================================
Fluid Animations & Keyframes (60 FPS GPU Accelerated)
========================================================================== */
@keyframes pageSlideUp {
0% {
opacity: 0;
transform: translateY(18px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pageSlideBack {
0% {
opacity: 0;
transform: translateY(-12px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pageTabSwitch {
0% {
opacity: 0;
transform: translateY(18px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes detailCascade {
0% {
opacity: 0;
transform: translateY(16px) scale(0.99);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes cardCascade {
0% {
opacity: 0;
transform: translateY(16px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes buttonShimmer {
0% { transform: translateX(-100%) rotate(25deg); }
100% { transform: translateX(200%) rotate(25deg); }
}
@keyframes fabBounceIn {
0% { transform: scale(0) rotate(-45deg); opacity: 0; }
70% { transform: scale(1.08) rotate(6deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes fabFloatingGlow {
0%, 100% {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
50% {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
}
@keyframes taskbarEntrance {
0% {
opacity: 0;
transform: translate(-50%, 35px) scale(0.96);
}
70% {
opacity: 1;
transform: translate(-50%, -1.5px) scale(1.005);
}
100% {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
}
@keyframes iconJellyBounce {
0% { transform: scale(1); }
30% { transform: scale(1.08, 0.94); }
60% { transform: scale(0.98, 1.02); }
85% { transform: scale(1.01, 0.995); }
100% { transform: scale(1); }
}
@keyframes activeBubbleGlow {
0%, 100% {
box-shadow: none;
}
50% {
box-shadow: none;
}
}
@keyframes themeToggleSwipe {
0% {
transform: rotate(-90deg);
opacity: 0.35;
}
100% {
transform: rotate(0deg);
opacity: 1;
}
}
.theme-toggle-anim svg,
.theme-toggle-anim .emg-active-theme-icon,
.theme-toggle-anim span {
display: inline-flex;
align-items: center;
justify-content: center;
animation: themeToggleSwipe 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes labelSlideUp {
0% {
opacity: 0;
transform: translateY(6px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.page-slide-up {
animation: pageSlideUp 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
will-change: transform, opacity;
}
.page-slide-back {
animation: pageSlideBack 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
will-change: transform, opacity;
}
/* Silent Instant Static Render (Used on Page Load, Page Reload, and Background Sync) */
.page-no-anim,
.main-wrap.page-no-anim {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
.main-wrap.page-no-anim .card-stagger,
.main-wrap.page-no-anim .stagger-item,
.main-wrap.page-no-anim .chip-stagger,
.main-wrap.page-no-anim .search-cat-card,
.main-wrap.page-no-anim .suggested-app-card,
.main-wrap.page-no-anim .gplay-app-row,
.main-wrap.page-no-anim .recent-search-row,
.main-wrap.page-no-anim .app-card,
.main-wrap.page-no-anim .prompt-card,
.main-wrap.page-no-anim .rail-card-item,
.main-wrap.page-no-anim .home-stagger,
.main-wrap.page-no-anim .category-chips-row > *,
.main-wrap.page-no-anim .liteapks-spotlight-section {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
.page-tab-switch {
animation: pageTabSwitch 0.44s cubic-bezier(0.16, 1, 0.3, 1) both;
will-change: transform, opacity;
}
.page-enter-active {
animation: pageSlideUp 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
will-change: transform, opacity;
}
.detail-container {
animation: detailCascade 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
will-change: transform, opacity;
}
.card-stagger,
.stagger-item,
.chip-stagger,
.search-cat-card,
.suggested-app-card,
.gplay-app-row,
.recent-search-row,
.app-card,
.prompt-card,
.rail-card-item,
.home-stagger {
animation: cardCascade 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
will-change: transform, opacity;
}
/* Category Filter Chips Sequential Cascade (Ekta ekta kore smooth wave) */
.category-chips-row > * {
animation: cardCascade 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
will-change: transform, opacity;
}
.category-chips-row > *:nth-child(1) { animation-delay: 0.06s; }
.category-chips-row > *:nth-child(2) { animation-delay: 0.13s; }
.category-chips-row > *:nth-child(3) { animation-delay: 0.20s; }
.category-chips-row > *:nth-child(4) { animation-delay: 0.27s; }
.category-chips-row > *:nth-child(5) { animation-delay: 0.34s; }
.category-chips-row > *:nth-child(6) { animation-delay: 0.41s; }
.category-chips-row > *:nth-child(7) { animation-delay: 0.48s; }
.category-chips-row > *:nth-child(8) { animation-delay: 0.55s; }
.category-chips-row > *:nth-child(9) { animation-delay: 0.62s; }
.category-chips-row > *:nth-child(10) { animation-delay: 0.69s; }
.category-chips-row > *:nth-child(11) { animation-delay: 0.76s; }
.category-chips-row > *:nth-child(12) { animation-delay: 0.83s; }
/* Home Section Stagger Cascade Delays (Gentle fluid wave) */
.home-delay-1 { animation-delay: 0.06s; }
.home-delay-2 { animation-delay: 0.13s; }
.home-delay-3 { animation-delay: 0.20s; }
.home-delay-4 { animation-delay: 0.27s; }
.home-delay-5 { animation-delay: 0.34s; }
.home-delay-6 { animation-delay: 0.41s; }
.home-delay-7 { animation-delay: 0.48s; }
/* Admin Hub Pills & Overview Sequential Cascade */
.emg-menu-pill-list > .emg-menu-pill:nth-child(1) { animation: cardCascade 0.48s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.06s; }
.emg-menu-pill-list > .emg-menu-pill:nth-child(2) { animation: cardCascade 0.48s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.12s; }
.emg-menu-pill-list > .emg-menu-pill:nth-child(3) { animation: cardCascade 0.48s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.18s; }
.emg-menu-pill-list > .emg-menu-pill:nth-child(4) { animation: cardCascade 0.48s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.24s; }
.emg-menu-pill-list > .emg-menu-pill:nth-child(5) { animation: cardCascade 0.48s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.30s; }
.emg-menu-pill-list > .emg-menu-pill:nth-child(6) { animation: cardCascade 0.48s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.36s; }
.emg-menu-pill-list > .emg-menu-pill:nth-child(7) { animation: cardCascade 0.48s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.42s; }
.emg-overview-card:nth-child(1) { animation: cardCascade 0.48s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.08s; }
.emg-overview-card:nth-child(2) { animation: cardCascade 0.48s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.16s; }
.emg-overview-card:nth-child(3) { animation: cardCascade 0.48s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.24s; }
.emg-overview-card:nth-child(4) { animation: cardCascade 0.48s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.32s; }
/* Staggered sequential cascade delay defaults (Fluid & gentle wave) */
.search-category-grid > *:nth-child(1) { animation-delay: 0.06s; }
.search-category-grid > *:nth-child(2) { animation-delay: 0.12s; }
.search-category-grid > *:nth-child(3) { animation-delay: 0.18s; }
.search-category-grid > *:nth-child(4) { animation-delay: 0.24s; }
.search-category-grid > *:nth-child(5) { animation-delay: 0.30s; }
.search-category-grid > *:nth-child(6) { animation-delay: 0.36s; }
.search-category-grid > *:nth-child(7) { animation-delay: 0.42s; }
.search-category-grid > *:nth-child(8) { animation-delay: 0.48s; }
.search-category-grid > *:nth-child(9) { animation-delay: 0.54s; }
.search-category-grid > *:nth-child(10) { animation-delay: 0.60s; }
.search-category-grid > *:nth-child(11) { animation-delay: 0.66s; }
.search-category-grid > *:nth-child(12) { animation-delay: 0.72s; }
.apps-grid > *:nth-child(1) { animation-delay: 0.08s; }
.apps-grid > *:nth-child(2) { animation-delay: 0.16s; }
.apps-grid > *:nth-child(3) { animation-delay: 0.24s; }
.apps-grid > *:nth-child(4) { animation-delay: 0.32s; }
.apps-grid > *:nth-child(5) { animation-delay: 0.40s; }
.apps-grid > *:nth-child(6) { animation-delay: 0.48s; }
.apps-grid > *:nth-child(7) { animation-delay: 0.56s; }
.apps-grid > *:nth-child(8) { animation-delay: 0.64s; }
.apps-grid > *:nth-child(9) { animation-delay: 0.72s; }
.apps-grid > *:nth-child(10) { animation-delay: 0.80s; }
.apps-grid > *:nth-child(11) { animation-delay: 0.88s; }
.apps-grid > *:nth-child(12) { animation-delay: 0.96s; }
.prompts-grid > *:nth-child(1) { animation-delay: 0.08s; }
.prompts-grid > *:nth-child(2) { animation-delay: 0.16s; }
.prompts-grid > *:nth-child(3) { animation-delay: 0.24s; }
.prompts-grid > *:nth-child(4) { animation-delay: 0.32s; }
.prompts-grid > *:nth-child(5) { animation-delay: 0.40s; }
.prompts-grid > *:nth-child(6) { animation-delay: 0.48s; }
.prompts-grid > *:nth-child(7) { animation-delay: 0.56s; }
.prompts-grid > *:nth-child(8) { animation-delay: 0.64s; }
.recent-searches-list > *:nth-child(1) { animation-delay: 0.07s; }
.recent-searches-list > *:nth-child(2) { animation-delay: 0.14s; }
.recent-searches-list > *:nth-child(3) { animation-delay: 0.21s; }
.recent-searches-list > *:nth-child(4) { animation-delay: 0.28s; }
.shimmer-btn {
position: relative;
overflow: hidden;
}
.shimmer-btn::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
60deg,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.25) 50%,
rgba(255, 255, 255, 0) 70%
);
transform: rotate(25deg);
animation: buttonShimmer 3.5s infinite;
pointer-events: none;
}
/* Unified 1:1 Aspect Ratio App Icon & Logo Helper */
.arch-icon {
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
border-radius: 20%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: var(--font-heading);
font-weight: 700;
overflow: hidden;
flex-shrink: 0;
text-transform: uppercase;
transition: transform 0.25s var(--spring);
box-sizing: border-box;
}
img.arch-icon {
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
display: block;
flex-shrink: 0;
}
.arch-icon:hover {
transform: scale(1.05);
}
/* ==========================================================================
Header Component
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 30;
background: var(--surface);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: background 0.3s ease, border-color 0.3s ease;
}
.header-inner {
max-width: 1024px;
margin: 0 auto;
padding: 0.75rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.brand-logo-btn {
display: flex;
align-items: center;
gap: 0.6rem;
text-align: left;
transition: transform 0.2s var(--spring);
}
.brand-logo-btn:active {
transform: scale(0.95);
}
/* Site Branding & Avatar Profile */
.brand-logo-btn {
display: flex;
align-items: center;
gap: 0.6rem;
text-align: left;
transition: transform 0.2s var(--spring);
}
.brand-logo-btn:active {
transform: scale(0.95);
}
.site-profile-avatar-wrap {
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
}
.site-profile-avatar-img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
transform: scale(1.08);
transform-origin: center center;
border: none;
box-shadow: none;
flex-shrink: 0;
display: block;
transition: transform 0.25s var(--spring);
}
.site-profile-avatar-placeholder {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 900;
font-size: 1.05rem;
color: #FFFFFF;
border: none;
box-shadow: none;
flex-shrink: 0;
}
.drawer-brand-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 18px;
margin-bottom: 1.25rem;
}
.drawer-brand-avatar-wrap {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
}
.drawer-brand-avatar-img {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
transform: scale(1.08);
transform-origin: center center;
border: none;
box-shadow: none;
flex-shrink: 0;
display: block;
}
.drawer-brand-avatar-placeholder {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 900;
font-size: 1.25rem;
color: #FFFFFF;
border: none;
box-shadow: none;
flex-shrink: 0;
}
.admin-avatar-preview-box {
width: 84px;
height: 84px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--accent);
box-shadow: none;
margin: 0 auto 0.75rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-2);
font-size: 2.3rem;
font-family: var(--font-heading);
font-weight: 900;
color: #fff;
overflow: hidden;
}
.brand-logo-title {
font-family: var(--font-heading);
font-weight: 900;
font-size: 1.35rem;
letter-spacing: 0.5px;
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.brand-logo-title span {
color: var(--text-main);
-webkit-text-fill-color: var(--text-main);
}
.header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-icon-circle {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
color: var(--text-main);
background: var(--surface-2);
transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}
.btn-icon-circle:active {
transform: scale(0.85);
}
.btn-accent-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--accent-gradient);
color: var(--on-accent);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
box-shadow: none;
transition: transform 0.2s var(--spring);
}
.btn-accent-circle:active {
transform: scale(0.85);
}
.header-accent-line {
height: 3px;
width: 90px;
margin: 0 1rem;
background: var(--accent-gradient);
border-radius: 9999px;
transition: width 0.3s ease;
}
/* Header Search Input */
.header-search-wrap {
max-width: 1024px;
margin: 0 auto;
padding: 0.5rem 1rem 0.75rem;
}
.search-input-box {
position: relative;
width: 100%;
display: flex;
align-items: center;
}
.search-input-box input {
width: 100%;
padding: 0.72rem 2.5rem 0.72rem 2.85rem;
border-radius: 9999px;
font-size: 0.88rem;
border: 1.5px solid var(--border);
background: var(--surface-2);
color: var(--text-main);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.search-input-box input:focus {
border-color: var(--accent);
transform: scale(1.01);
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25);
}
.search-input-box .search-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 2;
opacity: 0.92;
transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.search-input-box .search-icon svg {
display: block;
width: 18px;
height: 18px;
stroke: var(--accent);
}
.search-input-box:focus-within .search-icon {
opacity: 1;
transform: translateY(-50%) scale(1.1);
}
.search-input-box .clear-btn {
position: absolute;
right: 0.85rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 0.85rem;
background: none;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s var(--spring), color 0.2s ease;
}
.search-input-box .clear-btn:hover {
color: var(--text-main);
}
.search-input-box .clear-btn:active {
transform: translateY(-50%) scale(0.8);
}
/* ==========================================================================
Google Play Store Style Search Hub (Feature 4 & Categories)
========================================================================== */
.search-category-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.65rem;
}
.search-cat-card {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 16px;
padding: 0.85rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
cursor: pointer;
box-shadow: var(--card-shadow);
transition: transform 0.22s var(--spring), box-shadow 0.22s ease, border-color 0.22s ease;
min-height: 60px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.search-cat-card:hover {
transform: translateY(-2px);
border-color: var(--accent);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.search-cat-card:active {
transform: scale(0.96);
}
.search-cat-name {
font-weight: 800;
font-size: 0.88rem;
color: var(--text-main);
line-height: 1.25;
padding-right: 0.4rem;
}
.search-cat-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.suggested-app-card {
transition: transform 0.22s var(--spring), box-shadow 0.22s ease, border-color 0.22s ease;
}
.suggested-app-card:hover {
transform: translateY(-2px);
border-color: var(--accent);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}
.suggested-app-card:active {
transform: scale(0.98);
}
/* ==========================================================================
Google Play Store Active Search Page & Recent Searches
========================================================================== */
.recent-searches-list {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.recent-search-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 0.6rem;
border-radius: 14px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
transition: background 0.18s ease, transform 0.18s var(--spring);
}
.recent-search-row:hover {
background: var(--surface-2);
}
.recent-search-row:active {
background: var(--surface-3);
transform: scale(0.985);
}
.recent-search-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
flex-shrink: 0;
}
.recent-search-text {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-main);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.recent-search-arrow {
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding-left: 0.5rem;
}
.gplay-app-row {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.65rem 0.5rem;
border-radius: 16px;
cursor: pointer;
transition: background 0.18s ease, transform 0.18s var(--spring);
}
.gplay-app-row:hover {
background: var(--surface-2);
transform: translateX(3px);
}
.gplay-app-row:active {
transform: scale(0.985);
}
.gplay-app-icon {
width: 48px;
height: 48px;
border-radius: 12px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.gplay-app-title {
font-weight: 800;
font-size: 0.92rem;
color: var(--text-main);
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gplay-app-meta {
display: flex;
align-items: center;
gap: 0.45rem;
margin-top: 3px;
font-size: 0.74rem;
color: var(--text-muted);
flex-wrap: wrap;
}
/* ==========================================================================
Announcement Banner (With Magical Dust Dissolve Effect)
========================================================================== */
.announcement-bar {
display: flex;
align-items: center;
gap: 0.6rem;
border-radius: 9999px;
padding: 0.65rem 1.25rem;
margin-bottom: 1.25rem;
background: rgba(30, 90, 168, 0.08);
border: 1px solid rgba(30, 90, 168, 0.2);
color: var(--text-main);
font-size: 0.85rem;
box-shadow: var(--card-shadow);
max-height: 120px;
overflow: hidden;
position: relative;
transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, margin-bottom 0.45s cubic-bezier(0.16, 1, 0.3, 1), padding 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s ease;
}
/* Magical Dust Dissolve Keyframe Animation */
.announcement-bar.dust-dissolving {
animation: dustParticleDissolve 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
pointer-events: none;
}
@keyframes dustParticleDissolve {
0% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0px) brightness(1);
max-height: 120px;
}
30% {
opacity: 0.95;
transform: translateY(-2px) scale(1.02);
filter: blur(1px) brightness(1.4);
box-shadow: 0 0 25px rgba(217, 184, 122, 0.65), inset 0 0 15px rgba(255, 255, 255, 0.6);
border-color: rgba(217, 184, 122, 0.8);
}
65% {
opacity: 0.5;
transform: translateY(-10px) scale(0.97);
filter: blur(6px) brightness(1.8);
letter-spacing: 1.5px;
}
100% {
opacity: 0;
transform: translateY(-24px) scale(0.9);
filter: blur(16px) brightness(2.2);
max-height: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
border-color: transparent;
}
}
/* Floating Golden Dust Particles & Sparks */
.dust-particle-container {
position: fixed;
pointer-events: none;
z-index: 99999;
}
.dust-spark {
position: absolute;
border-radius: 50%;
pointer-events: none;
animation: dustFlyAway ease-out forwards;
}
@keyframes dustFlyAway {
0% {
opacity: 1;
transform: translate(0, 0) scale(1);
}
50% {
opacity: 0.85;
transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6)) scale(1.35);
}
100% {
opacity: 0;
transform: translate(var(--dx), var(--dy)) scale(0.2);
}
}
/* ==========================================================================
Main Layout & Category Chips
========================================================================== */
.main-wrap {
max-width: 1024px;
margin: 0 auto;
padding: 1rem 1rem 6.5rem;
}
.category-chips-row {
display: flex;
gap: 0.5rem;
overflow-x: auto;
padding-bottom: 0.35rem;
scrollbar-width: none;
}
.category-chips-row::-webkit-scrollbar { display: none; }
.chip-pill {
padding: 0.45rem 1rem;
border-radius: 9999px;
font-size: 0.78rem;
font-weight: 700;
border: 1.5px solid var(--border);
color: var(--text-muted);
background: var(--surface-2);
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
transition: background-color 0.25s ease, color 0.25s ease, transform 0.22s var(--spring-soft), border-color 0.25s ease, box-shadow 0.2s ease;
}
.chip-pill:hover {
border-color: var(--border-hover);
color: var(--text-main);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.chip-pill:active {
transform: scale(0.95);
}
.chip-pill.active {
border-color: transparent;
background: var(--accent-gradient);
color: var(--on-accent);
box-shadow: 0 4px 14px rgba(30, 90, 168, 0.38), 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* ==========================================================================
Universal 1:1 Aspect Ratio Lock for All App Logos & Icons
Ensures app icons never stretch vertically (lombate) on any device
========================================================================== */
.arch-icon,
img.arch-icon,
.playstore-icon-wrap,
.playstore-icon-wrap img,
.playstore-icon-wrap .arch-icon,
.liteapks-card-icon-wrap,
.liteapks-card-icon-wrap img,
.liteapks-card-icon-wrap .arch-icon,
.emg-app-row-icon,
.emg-app-row-icon img,
.app-meta-icon-col,
.app-meta-icon-col img,
.app-meta-icon-col .arch-icon,
.gplay-app-icon,
.gplay-app-row .arch-icon,
.gplay-app-row img,
.detail-header-card .arch-icon,
.detail-header-card img,
.search-dropdown-item .arch-icon,
.search-dropdown-item img,
.rail-icon-box,
#appIconPreviewContainer,
#appIconPreviewContainer img {
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
flex-shrink: 0 !important;
}
/* ==========================================================================
Apps Section (Catalog): Classic Square Cards (3-col mobile, auto-fill desktop)
========================================================================== */
.catalog-apps-grid,
.apps-grid:not(.home-apps-grid) {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important;
column-gap: 1.15rem !important;
row-gap: 1.65rem !important;
padding: 0.35rem 0.15rem 1.5rem !important;
}
@media (min-width: 1024px) {
.catalog-apps-grid,
.apps-grid:not(.home-apps-grid) {
grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)) !important;
column-gap: 1.4rem !important;
row-gap: 1.85rem !important;
}
}
/* ==========================================================================
Home Section: 2-Column Rectangular Cards on Desktop, 1-Column on Mobile
========================================================================== */
.home-apps-grid,
.apps-grid.home-apps-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
column-gap: 1.25rem !important;
row-gap: 0.75rem !important;
padding: 0.35rem 0.15rem 1.5rem !important;
}
@media (max-width: 768px) {
.home-apps-grid,
.apps-grid.home-apps-grid {
grid-template-columns: 1fr !important;
row-gap: 0.5rem !important;
column-gap: 0 !important;
}
}
@media (max-width: 768px) {
.apps-grid:not(.home-apps-grid),
.catalog-apps-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 1.1rem 0.65rem !important;
padding: 0.35rem 0.1rem 1.5rem !important;
}
}
@media (max-width: 480px) {
.apps-grid:not(.home-apps-grid),
.catalog-apps-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0.95rem 0.5rem !important;
}
}
@media (max-width: 340px) {
.apps-grid:not(.home-apps-grid),
.catalog-apps-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0.85rem 0.45rem !important;
}
}
/* Play Store Direct App Item (100% borderless, transparent, no card box or hover shape) */
.app-card,
.playstore-app-item,
.app-card:hover,
.playstore-app-item:hover,
.app-card.card-tilt-3d,
.app-card.card-tilt-3d:hover,
.playstore-app-item.card-tilt-3d,
.playstore-app-item.card-tilt-3d:hover {
position: relative;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-color: transparent !important;
box-shadow: none !important;
outline: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 0 !important;
border-radius: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.app-card .card-tilt-glare,
.playstore-app-item .card-tilt-glare {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
.playstore-icon-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1 !important;
margin-bottom: 0.35rem;
flex-shrink: 0;
overflow: hidden;
border-radius: 22% !important;
background: transparent !important;
box-sizing: border-box !important;
}
.playstore-icon-wrap .arch-icon,
.playstore-icon-wrap img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
aspect-ratio: 1 / 1 !important;
border-radius: inherit !important;
object-fit: cover !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
display: block !important;
transition: transform 0.15s ease !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
}
body[data-theme="dark"] .playstore-icon-wrap .arch-icon,
body[data-theme="dark"] .playstore-icon-wrap img {
border: none !important;
box-shadow: none !important;
}
/* Play Store Metric Button in App Detail */
.app-metric-playstore {
cursor: pointer !important;
transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease !important;
border-radius: 12px !important;
padding: 2px 4px !important;
}
.app-metric-playstore:hover {
transform: translateY(-2px);
background: rgba(16, 185, 129, 0.08);
}
.app-metric-playstore:active {
transform: scale(0.95);
}
@media (hover: hover) and (pointer: fine) {
.playstore-app-item:hover .playstore-icon-wrap .arch-icon,
.playstore-app-item:hover .playstore-icon-wrap img {
transform: scale(1.02) !important;
}
.playstore-app-item:hover .playstore-app-name {
color: var(--accent) !important;
}
}
.playstore-app-item:active .playstore-icon-wrap .arch-icon,
.playstore-app-item:active .playstore-icon-wrap img {
transform: scale(0.96) !important;
transition-duration: 0.1s;
}
.playstore-app-item:active {
opacity: 1 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
}
.playstore-app-info {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.playstore-app-name {
font-size: 0.75rem;
font-weight: 500;
line-height: 1.25;
color: var(--text-main);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
height: 2.5em;
min-height: 2.5em;
max-height: 2.5em;
width: 100%;
text-align: left;
margin-top: 0.15rem;
margin-bottom: 0.1rem;
letter-spacing: -0.01em;
transition: color 0.15s ease;
}
.playstore-app-size {
font-size: 0.6875rem;
font-weight: 400;
color: var(--text-muted);
margin-top: 0.05rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
text-align: left;
line-height: 1.2;
}
.playstore-mini-badge {
position: absolute;
top: -3px;
right: -3px;
background: linear-gradient(135deg, #EF4444, #DC2626);
color: #FFFFFF;
font-size: 8px;
font-weight: 900;
padding: 1px 5px;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(220, 38, 38, 0.45);
letter-spacing: 0.3px;
text-transform: uppercase;
}
/* ==========================================================================
Google Play Store Card Tabs (Styled Like Search View Category Tabs)
========================================================================== */
.playstore-list-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 0.85rem !important;
padding: 0.8rem 1rem !important;
border-radius: 18px !important;
background: var(--surface) !important;
border: 1.5px solid var(--border) !important;
box-shadow: var(--card-shadow) !important;
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
cursor: pointer !important;
user-select: none !important;
-webkit-tap-highlight-color: transparent !important;
text-align: left !important;
position: relative !important;
overflow: hidden !important;
}
.playstore-list-item:hover {
transform: translateY(-2px) !important;
border-color: var(--accent) !important;
box-shadow: 0 8px 24px rgba(30, 90, 168, 0.16), 0 0 10px rgba(30, 90, 168, 0.1) !important;
background: var(--surface) !important;
}
.playstore-list-item:active {
transform: translateY(0) !important;
box-shadow: 0 2px 8px rgba(30, 90, 168, 0.1) !important;
transition-duration: 0.08s !important;
}
body[data-theme="dark"] .playstore-list-item {
background: rgba(30, 30, 42, 0.65) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
body[data-theme="dark"] .playstore-list-item:hover {
border-color: var(--accent-light) !important;
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 16px rgba(74, 127, 200, 0.35) !important;
}
.playstore-list-icon {
width: 54px !important;
min-width: 54px !important;
max-width: 54px !important;
height: 54px !important;
aspect-ratio: 1 / 1 !important;
border-radius: 20% !important;
overflow: hidden !important;
flex-shrink: 0 !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
}
.playstore-list-icon img,
.playstore-list-icon .arch-icon {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
aspect-ratio: 1 / 1 !important;
border-radius: inherit !important;
object-fit: cover !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
transition: transform 0.22s ease !important;
}
.playstore-list-body {
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 0.16rem !important;
text-align: left !important;
overflow: hidden !important;
}
.playstore-list-title {
font-size: 0.95rem !important;
font-weight: 700 !important;
color: var(--text-main) !important;
line-height: 1.25 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
display: block !important;
letter-spacing: -0.01em !important;
transition: color 0.18s ease !important;
}
.playstore-list-item:hover .playstore-list-title {
color: var(--accent) !important;
}
.playstore-list-desc {
font-size: 0.78rem !important;
font-weight: 400 !important;
color: var(--text-muted) !important;
line-height: 1.35 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
display: block !important;
}
.playstore-list-meta {
display: flex !important;
align-items: center !important;
gap: 0.45rem !important;
flex-wrap: wrap !important;
font-size: 0.75rem !important;
color: var(--text-muted) !important;
margin-top: 0.18rem !important;
line-height: 1 !important;
}
.gplay-rating-chip {
display: inline-flex !important;
align-items: center !important;
gap: 0.2rem !important;
font-weight: 600 !important;
color: var(--text-main) !important;
}
.gplay-rating-chip svg {
color: #01875f !important;
}
.gplay-meta-sep {
opacity: 0.45 !important;
font-size: 0.7rem !important;
}
.gplay-size-chip {
font-weight: 500 !important;
color: var(--text-muted) !important;
}
.gplay-pill-badge {
display: inline-flex !important;
align-items: center !important;
gap: 0.2rem !important;
padding: 0.15rem 0.45rem !important;
border-radius: 6px !important;
font-size: 0.68rem !important;
font-weight: 600 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.gplay-pill-badge.gplay-badge-verified {
color: #1a73e8 !important;
background: rgba(26, 115, 232, 0.08) !important;
border: 1px solid rgba(26, 115, 232, 0.25) !important;
}
.gplay-pill-badge.gplay-badge-mod {
color: #8b5cf6 !important;
background: rgba(139, 92, 246, 0.08) !important;
border: 1px solid rgba(139, 92, 246, 0.25) !important;
}
body[data-theme="dark"] .gplay-pill-badge.gplay-badge-verified {
color: #8ab4f8 !important;
background: rgba(138, 180, 248, 0.14) !important;
border-color: rgba(138, 180, 248, 0.3) !important;
}
body[data-theme="dark"] .gplay-pill-badge.gplay-badge-mod {
color: #c4b5fd !important;
background: rgba(196, 181, 253, 0.14) !important;
border-color: rgba(196, 181, 253, 0.3) !important;
}
/* ==========================================================================
AI Prompt Cards & Pinterest Masonry Waterfall Layout
========================================================================== */
.prompts-grid {
columns: 1;
column-gap: 1.25rem;
width: 100%;
}
@media (min-width: 640px) {
.prompts-grid {
columns: 2;
column-gap: 1.25rem;
}
}
@media (min-width: 1024px) {
.prompts-grid {
columns: 3;
column-gap: 1.35rem;
}
}
.prompt-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 1.1rem;
margin-bottom: 1.35rem;
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
display: inline-block;
width: 100%;
box-sizing: border-box;
box-shadow: var(--card-shadow);
transition: transform 0.3s var(--spring), box-shadow 0.3s ease, border-color 0.25s ease;
}
.prompt-card:hover {
transform: translateY(-5px);
box-shadow: var(--card-shadow-hover);
border-color: var(--border-hover);
}
.prompt-thumb-banner {
width: 100%;
height: auto;
margin-bottom: 0.85rem;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
color: #fff;
font-size: 2.2rem;
background: #0C0A18;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.prompt-thumb-banner img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 16px;
display: block;
image-rendering: -webkit-optimize-contrast;
image-rendering: high-quality;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: transform 0.3s ease;
}
.prompt-thumb-banner:hover img {
transform: scale(1.02);
}
.prompt-serial-badge {
position: absolute;
top: 9px;
left: 10px;
z-index: 5;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 900;
padding: 2px 8px;
border-radius: 8px;
background: rgba(12, 9, 24, 0.85);
color: #C4B5FD;
border: 1px solid rgba(139, 92, 246, 0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
letter-spacing: 0.5px;
}
.prompt-card-cat {
display: inline-block;
font-size: 10px;
font-weight: 800;
padding: 3px 9px;
border-radius: 6px;
margin-bottom: 0.5rem;
}
.prompt-card-title {
font-weight: 700;
font-size: 0.95rem;
margin-bottom: 0.5rem;
line-height: 1.35;
color: var(--text-main);
display: flex;
align-items: baseline;
gap: 0.4rem;
}
.prompt-title-serial {
font-family: var(--font-mono);
font-size: 0.88rem;
font-weight: 900;
color: var(--accent-light);
flex-shrink: 0;
}
.prompt-card-text {
font-family: var(--font-mono);
font-size: 0.8rem;
line-height: 1.55;
color: var(--text-muted);
margin-bottom: 0.95rem;
background: var(--surface-2);
padding: 0.75rem;
border-radius: 12px;
border: 1px solid var(--border);
}
.prompt-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.btn-get-prompt {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 1rem;
border-radius: 9999px;
font-size: 0.78rem;
font-weight: 800;
background: var(--accent-gradient);
color: var(--on-accent);
box-shadow: 0 4px 14px rgba(30, 90, 168, 0.38);
transition: transform 0.2s var(--spring), box-shadow 0.2s ease;
}
.btn-get-prompt:active { transform: scale(0.92); }
/* ==========================================================================
AI Prompt Cards & Premium Circular SVG Countdown
========================================================================== */
.countdown-ring-box {
position: relative;
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.countdown-pulse-ring {
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid rgba(139, 92, 246, 0.5);
animation: countdownRipple 1.6s cubic-bezier(0.25, 1, 0.5, 1) infinite;
pointer-events: none;
}
@keyframes countdownRipple {
0% {
transform: scale(0.85);
opacity: 0.9;
}
100% {
transform: scale(1.45);
opacity: 0;
}
}
@keyframes timerDigitPop {
0% {
transform: scale(1.45);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes promptUnlockedGlow {
0% {
box-shadow: 0 0 0 rgba(124, 58, 237, 0);
transform: scale(0.98);
}
50% {
box-shadow: 0 0 28px rgba(124, 58, 237, 0.55);
transform: scale(1.02);
}
100% {
box-shadow: 0 0 0 rgba(124, 58, 237, 0);
transform: scale(1);
}
}
.countdown-ring-box svg {
transform: rotate(-90deg);
filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.55));
}
.countdown-ring-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
font-weight: 900;
font-family: var(--font-mono);
color: var(--accent-light);
animation: timerDigitPop 0.35s var(--spring) both;
}
.prompt-unlocked-reveal {
animation: cardCascade 0.45s var(--spring) both, promptUnlockedGlow 1.2s ease-out;
}
/* ==========================================================================
Prompt Detail View
========================================================================== */
/* ==========================================================================
Prompt Detail View & AI Neural Stream Reveal (from lv_0_20260823131632.mp4)
========================================================================== */
.prompt-detail-banner {
width: 100%;
height: auto;
min-height: 220px;
margin-bottom: 1.25rem;
border-radius: 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
color: #fff;
font-size: 4.2rem;
background: #0C0A18;
border: 1px solid var(--border);
box-shadow: var(--card-shadow);
}
.prompt-detail-banner img {
width: 100%;
height: auto;
object-fit: contain;
border-radius: 24px;
display: block;
image-rendering: -webkit-optimize-contrast;
image-rendering: high-quality;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
cursor: zoom-in;
transition: transform 0.25s ease;
}
.prompt-detail-banner img:hover {
transform: scale(1.01);
}
.countdown-detail-wrapper {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 24px;
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 1rem;
margin-bottom: 1.25rem;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: var(--card-shadow);
}
/* AI Neural Orb Animation during Countdown */
.ai-countdown-orb-container {
position: relative;
width: 130px;
height: 130px;
margin: 0 auto 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.ai-orb-ring-outer {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px dashed rgba(139, 92, 246, 0.45);
animation: orbSpin 18s linear infinite;
}
.ai-orb-ring-middle {
position: absolute;
inset: 14px;
border-radius: 50%;
border: 2px solid rgba(99, 102, 241, 0.55);
box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
animation: orbSpinReverse 13s linear infinite;
}
.ai-orb-particle-core {
width: 64px;
height: 64px;
border-radius: 50%;
background: radial-gradient(circle, #FFFFFF 0%, #A78BFA 35%, #7C3AED 75%, transparent 100%);
box-shadow: 0 0 35px rgba(167, 139, 250, 0.85), 0 0 60px rgba(124, 58, 237, 0.55);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.55rem;
font-weight: 900;
font-family: var(--font-mono);
color: #080612;
animation: orbPulse 3.5s ease-in-out infinite alternate;
}
@keyframes orbSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes orbSpinReverse {
0% { transform: rotate(360deg); }
100% { transform: rotate(0deg); }
}
@keyframes orbPulse {
0% { transform: scale(0.94); box-shadow: 0 0 22px rgba(167, 139, 250, 0.6); }
100% { transform: scale(1.06); box-shadow: 0 0 45px rgba(167, 139, 250, 1), 0 0 75px rgba(124, 58, 237, 0.75); }
}
/* ==========================================================================
AI Neural Stream Reveal Terminal (from lv_0_20260823131632.mp4)
========================================================================== */
.ai-stream-terminal-box {
background: rgba(12, 9, 24, 0.92);
border: 1.5px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
padding: 1.5rem;
position: relative;
overflow: hidden;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75), 0 0 35px rgba(124, 58, 237, 0.22);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
margin-bottom: 1.25rem;
animation: cardCascade 0.8s cubic-bezier(0.16, 1, 0.25, 1) both;
}
.ai-stream-terminal-box::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.16), transparent 70%);
pointer-events: none;
z-index: 0;
}
/* Conversational Prompt Chat Bubble (Top-Right) */
.ai-prompt-chat-wrap {
display: flex;
justify-content: flex-end;
margin-bottom: 1.5rem;
position: relative;
z-index: 1;
}
.ai-prompt-chat-bubble {
background: rgba(38, 30, 56, 0.92);
border: 1.5px solid rgba(255, 255, 255, 0.18);
border-radius: 22px 22px 4px 22px;
padding: 0.85rem 1.4rem;
max-width: 90%;
color: #FFFFFF;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.45;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
animation: chatBubblePop 0.8s cubic-bezier(0.16, 1, 0.25, 1) both;
}
@keyframes chatBubblePop {
0% {
opacity: 0;
transform: translateY(12px) scale(0.94);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* AI Stream Output Text with Radiant Scanline Glow */
.ai-stream-output-wrap {
position: relative;
z-index: 1;
font-family: var(--font-mono);
font-size: 0.92rem;
line-height: 1.8;
margin-bottom: 1.25rem;
min-height: 100px;
user-select: text;
}
.ai-stream-line {
margin-bottom: 0.65rem;
transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.2s ease;
color: rgba(255, 255, 255, 0.85);
}
/* Active Line Radiant Bloom (Exact match to video style) */
.ai-stream-line.active-stream-line {
color: #FFFFFF;
font-weight: 700;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.95), 0 0 22px rgba(167, 139, 250, 0.9), 0 0 40px rgba(124, 58, 237, 0.7);
transform: translateX(4px);
}
.ai-stream-cursor {
display: inline-block;
width: 8px;
height: 1.15em;
background: var(--accent-light);
vertical-align: text-bottom;
margin-left: 4px;
border-radius: 2px;
box-shadow: 0 0 12px var(--accent-light);
animation: streamCursorBlink 0.75s ease-in-out infinite;
}
@keyframes streamCursorBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* ==========================================================================
App Detail View
========================================================================== */
.detail-container {
max-width: 680px;
margin: 0 auto;
}
.detail-header-card {
display: flex;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1.25rem;
}
.detail-info-table {
flex: 1;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
padding: 0.4rem 1.1rem;
}
.info-table-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.55rem 0;
border-bottom: 1px solid var(--border);
font-size: 0.85rem;
}
.info-table-row:last-child { border-bottom: none; }
.notice-install-box {
border-radius: 18px;
border: 1px solid var(--border);
padding: 1.1rem;
margin-bottom: 1.25rem;
background: var(--surface);
box-shadow: var(--card-shadow);
}
.btn-main-download {
width: 100%;
padding: 0.95rem 1.5rem;
border-radius: 9999px;
font-weight: 800;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
box-shadow: 0 2px 8px rgba(30, 90, 168, 0.2);
background: var(--accent-gradient);
color: var(--on-accent);
margin-bottom: 1.1rem;
transition: transform 0.2s var(--spring);
}
.btn-main-download:active { transform: scale(0.96); }
.social-share-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
margin-bottom: 1.5rem;
}
.btn-share-social {
padding: 0.65rem;
border-radius: 9999px;
font-weight: 700;
font-size: 0.8rem;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
transition: transform 0.2s var(--spring);
}
.btn-share-social:active { transform: scale(0.92); }
/* Star Rating Stars */
.star-interactive {
cursor: pointer;
font-size: 34px;
color: rgba(255, 255, 255, 0.2);
transition: transform 0.15s var(--spring), color 0.15s ease;
user-select: none;
display: inline-block;
line-height: 1;
}
.star-interactive.active {
color: var(--gold);
text-shadow: 0 0 14px rgba(167, 139, 250, 0.7);
}
.star-interactive:active {
transform: scale(0.85);
}
.star-interactive:hover {
transform: scale(1.2);
}
.star-interactive.star-pop {
animation: starPopBounce 0.32s var(--spring) both;
}
@keyframes starPopBounce {
0% { transform: scale(1); }
50% { transform: scale(1.35); }
100% { transform: scale(1); }
}
.review-card-item {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 14px;
padding: 0.85rem 1.1rem;
margin-bottom: 0.65rem;
transition: transform 0.2s ease;
}
/* Multi-Step Review Wizard */
.review-wizard-card {
background: var(--surface-2);
border: 1.5px solid var(--border);
border-radius: 18px;
padding: 1.25rem;
margin-top: 1rem;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.review-step-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 1rem;
}
.step-dot {
width: 24px;
height: 5px;
border-radius: 9999px;
background: var(--border);
transition: all 0.3s var(--spring);
}
.step-dot.active {
background: var(--accent);
width: 40px;
box-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
}
.step-dot.completed {
background: #6D28D9;
}
/* ==========================================================================
Floating Bottom Taskbar Navigation Pill (Ultra-Smooth Animation)
========================================================================== */
.bottom-nav-pill-wrap {
position: fixed;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 40;
width: 95%;
max-width: 460px;
animation: taskbarEntrance 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
will-change: transform, opacity;
}
.bottom-nav-pill {
background: var(--taskbar-bg);
border: 1.5px solid var(--taskbar-border);
border-radius: 9999px;
padding: 6px 8px 5px;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: var(--taskbar-glow), 0 4px 16px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
position: relative;
transition: transform 0.3s var(--smooth-ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.nav-pill-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
min-width: 0;
padding: 2px 2px 3px;
position: relative;
cursor: pointer;
background: none;
border: none;
transition: transform 0.24s var(--spring-soft);
}
.nav-pill-btn:active {
transform: scale(0.94);
}
.nav-pill-icon-bubble {
width: 34px;
height: 30px;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: width 320ms var(--smooth-ease), background-color 250ms ease, color 200ms ease, transform 0.26s var(--spring-soft);
}
.nav-pill-btn.active .nav-pill-icon-bubble {
width: 44px;
background: var(--accent-gradient);
color: var(--on-accent);
box-shadow: 0 4px 12px rgba(30, 90, 168, 0.45);
}
.nav-pill-btn.active .nav-pill-icon-bubble svg {
animation: iconJellyBounce 0.48s cubic-bezier(0.2, 1.12, 0.35, 1) both;
}
.nav-pill-btn:not(.active) .nav-pill-icon-bubble {
color: var(--text-muted);
}
.nav-pill-btn:not(.active):hover .nav-pill-icon-bubble {
color: var(--text-main);
transform: scale(1.05);
}
.nav-pill-label {
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
opacity: 0.85;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s ease, font-weight 0.2s ease, opacity 0.2s ease, transform 0.22s var(--spring-soft);
line-height: 1.15;
display: block;
max-width: 100%;
text-align: center;
}
.nav-pill-btn.active .nav-pill-label {
color: var(--accent-light);
font-weight: 900;
opacity: 1;
transform: scale(1.02);
}
.nav-pill-btn:not(.active):hover .nav-pill-label {
color: var(--text-main);
opacity: 1;
}
/* ==========================================================================
Side Drawer
========================================================================== */
.side-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
z-index: 100;
display: none;
opacity: 0;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: opacity 0.3s ease;
}
.side-drawer-backdrop.show {
display: flex;
opacity: 1;
}
.side-drawer-panel {
width: 280px;
max-width: 82%;
height: 100%;
background: var(--surface);
border-right: 1px solid var(--border);
padding: 1.25rem;
overflow-y: auto;
box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
animation: pageSlideIn 0.3s var(--smooth-ease) both;
}
.drawer-link-btn {
width: 100%;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 0.95rem;
border-radius: 14px;
font-size: 0.9rem;
font-weight: 600;
color: var(--text-main);
transition: background 0.2s ease, transform 0.15s var(--spring);
}
.drawer-link-btn:active { transform: scale(0.96); }
.drawer-link-btn.active {
background: rgba(224, 168, 60, 0.15);
color: var(--accent);
font-weight: 700;
}
.lang-option-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.55rem 0.85rem;
border-radius: 10px;
font-size: 0.85rem;
color: var(--text-main);
transition: background 0.2s ease, transform 0.15s ease;
}
.lang-option-btn:active { transform: scale(0.96); }
.lang-option-btn.active {
background: rgba(224, 168, 60, 0.15);
color: var(--accent);
font-weight: 700;
}
/* ==========================================================================
Toast Notification
========================================================================== */
.toast-bar {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 99999;
padding: 0.75rem 1.6rem;
border-radius: 9999px;
background: rgba(15, 23, 42, 0.92);
color: #F8FAFC;
backdrop-filter: blur(20px) saturate(190%);
-webkit-backdrop-filter: blur(20px) saturate(190%);
border: 1.5px solid rgba(59, 130, 246, 0.5);
font-weight: 700;
font-size: 0.88rem;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), 0 0 20px rgba(59, 130, 246, 0.25);
pointer-events: none;
animation: emgToastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* ==========================================================================
Telegram VIP Community Banner Component (Morphe Solid Style)
========================================================================== */
.telegram-vip-banner {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
padding: 1.1rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
box-shadow: var(--card-shadow);
position: relative;
overflow: hidden;
}
.telegram-icon-box {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
background: transparent;
}
.telegram-icon-box img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.btn-telegram-join {
background: #229ED9;
color: #FFFFFF;
font-weight: 800;
font-size: 0.88rem;
padding: 0.55rem 1.35rem;
border-radius: 9999px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(34, 158, 217, 0.4);
transition: transform 0.2s var(--spring), box-shadow 0.2s ease, background 0.2s ease;
flex-shrink: 0;
text-decoration: none;
}
.btn-telegram-join:hover {
background: #1B88BD;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(34, 158, 217, 0.55);
}
.btn-telegram-join:active {
transform: scale(0.96);
}
/* ==========================================================================
Admin Analytics Charts & Metric Bars
========================================================================== */
.analytics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
margin-bottom: 2rem;
}
.analytics-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 1.5rem;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: var(--card-shadow);
}
.analytics-bar-item {
margin-bottom: 1rem;
}
.analytics-bar-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.82rem;
font-weight: 700;
margin-bottom: 0.35rem;
}
.analytics-bar-track {
width: 100%;
height: 10px;
background: var(--surface-2);
border-radius: 9999px;
overflow: hidden;
position: relative;
}
.analytics-bar-fill {
height: 100%;
border-radius: 9999px;
background: var(--accent-gradient);
transition: width 0.8s cubic-bezier(0.16, 1, 0.25, 1);
}
/* ==========================================================================
PWA Installable App Banner & Modal
========================================================================== */
.pwa-install-banner {
position: fixed;
bottom: 95px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 2rem);
max-width: 480px;
background: var(--surface);
border: 1.5px solid var(--accent);
border-radius: 20px;
padding: 1rem 1.2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(124, 58, 237, 0.3);
z-index: 95;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
animation: pageSlideUp 0.5s cubic-bezier(0.16, 1, 0.25, 1) both;
}
.btn-pwa-install {
background: var(--accent-gradient);
color: #FFFFFF;
font-weight: 800;
font-size: 0.82rem;
padding: 0.55rem 1rem;
border-radius: 9999px;
display: inline-flex;
align-items: center;
gap: 0.35rem;
box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4);
flex-shrink: 0;
}
.btn-pwa-dismiss {
color: var(--text-muted);
font-size: 1.1rem;
padding: 4px;
cursor: pointer;
flex-shrink: 0;
}
/* ==========================================================================
Android Cyber Download Matrix & 5-Second APK Packaging Animation
========================================================================== */
.android-download-matrix-wrapper {
background: var(--surface);
border: 1.5px solid rgba(16, 185, 129, 0.35);
border-radius: 24px;
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 1rem;
margin-bottom: 1.25rem;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 35px rgba(16, 185, 129, 0.18);
position: relative;
overflow: hidden;
}
.android-download-matrix-wrapper::before {
content: '';
position: absolute;
top: -50%;
left: -20%;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(16, 185, 129, 0.25), transparent 70%);
pointer-events: none;
}
.android-orb-container {
position: relative;
width: 136px;
height: 136px;
margin: 0 auto 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.android-orb-ring-outer {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px dashed rgba(16, 185, 129, 0.55);
box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
animation: orbSpin 14s linear infinite;
}
.android-orb-ring-middle {
position: absolute;
inset: 12px;
border-radius: 50%;
border: 2px solid rgba(56, 189, 248, 0.6);
box-shadow: 0 0 25px rgba(16, 185, 129, 0.45);
animation: orbSpinReverse 10s linear infinite;
}
.android-orb-core {
width: 72px;
height: 72px;
border-radius: 50%;
background: radial-gradient(circle, #FFFFFF 0%, #34D399 35%, #059669 80%, #064E3B 100%);
box-shadow: 0 0 35px rgba(52, 211, 153, 0.85), 0 0 65px rgba(16, 185, 129, 0.6);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
animation: androidBotPulse 2.8s ease-in-out infinite alternate;
}
.android-orb-bot-icon {
font-size: 1.65rem;
line-height: 1;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.android-orb-digit-badge {
position: absolute;
bottom: -6px;
background: #080612;
border: 1.5px solid #10B981;
color: #34D399;
font-family: var(--font-mono);
font-weight: 900;
font-size: 0.85rem;
padding: 1px 8px;
border-radius: 9999px;
box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}
@keyframes androidBotPulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 24px rgba(52, 211, 153, 0.6);
}
100% {
transform: scale(1.06);
box-shadow: 0 0 45px rgba(52, 211, 153, 1), 0 0 75px rgba(16, 185, 129, 0.7);
}
}
.android-progress-track {
width: 100%;
max-width: 320px;
height: 8px;
background: var(--surface-2);
border-radius: 9999px;
overflow: hidden;
margin: 0.5rem auto 0;
border: 1px solid var(--border);
}
.android-progress-bar {
height: 100%;
border-radius: 9999px;
background: linear-gradient(90deg, #10B981 0%, #38BDF8 50%, #8B5CF6 100%);
box-shadow: 0 0 14px rgba(16, 185, 129, 0.6);
transition: width 1s linear;
}
/* Unlocked Android APK Card */
.android-unlocked-card {
background: var(--surface);
border: 1.5px solid rgba(16, 185, 129, 0.4);
border-radius: 22px;
padding: 1.5rem;
margin-bottom: 1.25rem;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 30px rgba(16, 185, 129, 0.2);
animation: cardCascade 0.5s cubic-bezier(0.16, 1, 0.25, 1) both;
}
.android-verified-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.65rem 1rem;
border-radius: 14px;
background: rgba(16, 185, 129, 0.14);
border: 1px solid rgba(16, 185, 129, 0.35);
margin-bottom: 1rem;
font-size: 0.82rem;
font-weight: 700;
color: #10B981;
}
.btn-android-download-ready {
background: linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%);
color: #FFFFFF;
font-weight: 900;
font-size: 0.95rem;
width: 100%;
padding: 0.85rem 1.5rem;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45);
transition: transform 0.25s var(--spring), box-shadow 0.25s ease;
margin-bottom: 0.6rem;
}
.btn-android-download-ready:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(16, 185, 129, 0.65);
}
.btn-android-download-ready:active {
transform: scale(0.97);
}
/* ==========================================================================
LiteAPKs Home Spotlight Banner ("Indispensable on your phone")
========================================================================== */
.liteapks-spotlight-section {
margin-bottom: 1.5rem;
position: relative;
}
.liteapks-section-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.85rem;
}
.liteapks-section-fire {
font-size: 1.25rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.liteapks-section-title {
font-family: var(--font-heading);
font-size: 1.12rem;
font-weight: 900;
color: var(--text-main);
letter-spacing: -0.2px;
margin: 0;
}
.liteapks-carousel-wrapper {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 24px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.liteapks-carousel-track {
display: flex;
width: 100%;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.liteapks-carousel-card {
min-width: 100%;
width: 100%;
height: 195px;
position: relative;
border-radius: 24px;
overflow: hidden;
cursor: pointer;
background: #0C0A14;
user-select: none;
-webkit-user-select: none;
transition: transform 0.2s ease;
}
@media (min-width: 640px) {
.liteapks-carousel-card {
height: 250px;
}
}
.liteapks-carousel-card:active {
transform: scale(0.985);
}
.liteapks-card-banner-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
background-position: center;
}
.liteapks-banner-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.liteapks-carousel-card:hover .liteapks-banner-img {
transform: scale(1.03);
}
.liteapks-banner-abstract-pattern {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Frosted Glass Bottom Overlay Bar (Exact LiteAPKs style) */
.liteapks-card-overlay-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.65rem 0.95rem;
background: linear-gradient(180deg, rgba(20, 20, 30, 0.35) 0%, rgba(12, 12, 20, 0.85) 100%);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-top: 1px solid rgba(255, 255, 255, 0.16);
display: flex;
align-items: center;
gap: 0.75rem;
z-index: 2;
}
body[data-theme="light"] .liteapks-card-overlay-bar {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(245, 245, 250, 0.92) 100%);
border-top: 1px solid rgba(255, 255, 255, 0.75);
}
.liteapks-card-icon-wrap {
width: 44px;
height: 44px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
}
.liteapks-card-icon-wrap .arch-icon,
.liteapks-card-icon-wrap img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
display: block !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
border-radius: 12px !important;
padding: 0 !important;
margin: 0 !important;
}
.liteapks-card-info-wrap {
flex: 1;
min-width: 0;
}
.liteapks-card-app-title {
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 800;
color: #FFFFFF;
line-height: 1.25;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
body[data-theme="light"] .liteapks-card-app-title {
color: #0F172A;
text-shadow: none;
}
.liteapks-card-app-cat {
font-size: 0.78rem;
font-weight: 700;
color: #10B981;
margin-top: 2px;
text-transform: capitalize;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Dots Indicator */
.liteapks-carousel-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 0.75rem;
}
.liteapks-carousel-dot {
width: 8px;
height: 8px;
border-radius: 9999px;
background: var(--border);
border: none;
padding: 0;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.liteapks-carousel-dot.active {
width: 24px;
background: #10B981;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}
/* ==========================================================================
LiteAPKs 3-Step Download Flow & Detail Page (media_1788174673339.png & media_1788174689942.png)
========================================================================== */
/* Smooth Sequential Staggered Entrance Engine */
@keyframes detailFadeSlideUp {
0% {
opacity: 0;
transform: translateY(18px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes detailIconPop {
0% {
opacity: 0;
transform: scale(0.75) translateY(14px);
}
70% {
transform: scale(1.04) translateY(-1px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes detailButtonPop {
0% {
opacity: 0;
transform: translateY(20px) scale(0.94);
}
70% {
transform: translateY(-2px) scale(1.02);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.detail-stagger {
opacity: 0;
animation: detailFadeSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
will-change: transform, opacity;
}
.detail-stagger-icon {
opacity: 0;
animation: detailIconPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
will-change: transform, opacity;
}
.detail-stagger-btn {
opacity: 0;
animation: detailButtonPop 0.55s cubic-bezier(0.34, 1.35, 0.64, 1) forwards;
will-change: transform, opacity;
}
/* Stagger Delay Hierarchy */
.delay-1 { animation-delay: 0.03s; }
.delay-2 { animation-delay: 0.07s; }
.delay-3 { animation-delay: 0.11s; }
.delay-4 { animation-delay: 0.15s; }
.delay-5 { animation-delay: 0.19s; }
.delay-6 { animation-delay: 0.23s; }
.delay-7 { animation-delay: 0.27s; }
.delay-8 { animation-delay: 0.31s; }
.delay-9 { animation-delay: 0.35s; }
.delay-10 { animation-delay: 0.39s; }
.delay-11 { animation-delay: 0.43s; }
.delay-12 { animation-delay: 0.47s; }
.delay-13 { animation-delay: 0.51s; }
.delay-14 { animation-delay: 0.55s; }
.delay-15 { animation-delay: 0.59s; }
.delay-16 { animation-delay: 0.63s; }
/* 1. Optional Hero Cover Banner */
.app-detail-hero-banner-box {
position: relative;
width: calc(100% + 2rem);
margin-left: -1rem;
margin-right: -1rem;
margin-top: -1rem;
height: 190px;
overflow: hidden;
margin-bottom: 0.85rem;
background: #0C0A14;
}
@media (min-width: 640px) {
.app-detail-hero-banner-box {
width: 100%;
margin-left: 0;
margin-right: 0;
margin-top: 0;
height: 250px;
border-radius: 24px;
margin-bottom: 1.25rem;
}
}
.app-detail-hero-banner-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.app-detail-hero-banner-fade {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16, 16, 20, 0.1) 0%, rgba(16, 16, 20, 0.65) 60%, var(--bg) 100%);
pointer-events: none;
}
body[data-theme="light"] .app-detail-hero-banner-fade {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.75) 60%, #FFFFFF 100%);
}
/* App Detail Hero Banner Overlay Navigation (Back Button & Category Pill) */
.app-detail-banner-nav {
position: absolute;
top: 14px;
left: 14px;
right: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
z-index: 5;
pointer-events: auto;
}
.app-detail-banner-back-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.42rem 0.95rem;
border-radius: 9999px;
background: rgba(15, 23, 42, 0.68);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.22);
color: #FFFFFF;
font-size: 0.88rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.app-detail-banner-back-btn:hover {
background: rgba(15, 23, 42, 0.88);
border-color: rgba(255, 255, 255, 0.45);
transform: translateX(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
}
.app-detail-banner-back-btn:active {
transform: scale(0.95);
}
html[dir="rtl"] .app-detail-banner-back-btn svg {
transform: rotate(180deg);
}
.app-detail-banner-cat-pill {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 800;
padding: 4px 12px;
border-radius: 9999px;
background: rgba(15, 23, 42, 0.68);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #FFFFFF;
letter-spacing: 0.3px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
/* 2. Breadcrumb Navigation */
.app-breadcrumb-nav {
display: flex;
align-items: center;
gap: 0.45rem;
flex-wrap: wrap;
font-size: 0.86rem;
font-weight: 700;
line-height: 1.4;
margin-bottom: 0.75rem;
}
.breadcrumb-link {
color: #10B981;
text-decoration: none;
transition: opacity 0.2s ease;
}
.breadcrumb-link:hover {
text-decoration: underline;
opacity: 0.85;
}
.breadcrumb-sep {
color: #71717A;
font-size: 0.85rem;
font-weight: 600;
}
.breadcrumb-current {
color: #F59E0B;
font-weight: 800;
}
/* 3. App Meta Box (Icon + Title + Developer + Badges) */
.app-meta-hero-box {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 0.5rem;
}
.app-meta-icon-col {
flex-shrink: 0;
}
.app-meta-content-col {
flex: 1;
min-width: 0;
}
.app-detail-main-title {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 900;
color: var(--text-main);
line-height: 1.25;
margin: 0 0 0.35rem 0;
letter-spacing: -0.3px;
}
.app-detail-dev-name {
color: #10B981;
font-weight: 700;
font-size: 0.88rem;
margin-bottom: 0.5rem;
}
.app-detail-badges-row {
display: flex;
align-items: center;
gap: 0.45rem;
flex-wrap: wrap;
}
.badge-pill {
font-size: 0.72rem;
font-weight: 800;
padding: 3px 10px;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.3px;
display: inline-flex;
align-items: center;
}
.badge-editors-choice {
background: #EA580C;
color: #FFFFFF;
box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3);
}
.badge-premium {
background: #16A34A;
color: #FFFFFF;
box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}
.badge-hot {
background: #EF4444;
color: #FFFFFF;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}
/* 4. MOD Info Line */
.app-mod-info-line {
color: #F59E0B;
font-style: italic;
font-weight: 800;
font-size: 0.95rem;
margin: 0.85rem 0 0.4rem;
}
/* 5. Short Description */
.app-detail-desc-italic {
color: var(--text-muted);
font-style: italic;
font-size: 0.88rem;
line-height: 1.55;
margin: 0 0 1.25rem 0;
}
/* 6. Key Stats / Metrics Row (Version, Size, Playstore, Last Update, Rating) */
.app-metrics-grid {
display: flex;
align-items: center;
justify-content: space-around;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
padding: 0.85rem 0.35rem;
margin-bottom: 1.25rem;
box-shadow: var(--card-shadow);
text-align: center;
gap: 0.15rem;
}
.app-metric-col {
flex: 1;
min-width: 0;
padding: 0 2px;
}
.app-metric-divider {
width: 1px;
height: 30px;
background: var(--border);
flex-shrink: 0;
}
.metric-val {
font-family: var(--font-heading);
font-size: 1.02rem;
font-weight: 900;
color: var(--text-main);
line-height: 1.1;
margin-bottom: 0.25rem;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
}
.metric-lbl {
font-size: 0.72rem;
color: var(--text-muted);
font-weight: 600;
white-space: nowrap;
}
@media (max-width: 480px) {
.app-metrics-grid {
padding: 0.75rem 0.2rem;
}
.metric-val {
font-size: 0.88rem;
}
.metric-lbl {
font-size: 0.65rem;
}
}
/* 7. Primary Action Button */
.btn-download-apk-primary {
width: 100%;
border-radius: 9999px;
background: #22C55E;
color: #FFFFFF;
font-family: var(--font-heading);
font-weight: 900;
font-size: 1.08rem;
padding: 0.92rem 1.5rem;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
transition: transform 0.22s var(--spring), box-shadow 0.22s ease;
margin-bottom: 0.85rem;
}
.btn-download-apk-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(34, 197, 94, 0.55);
}
.btn-download-apk-primary:active {
transform: scale(0.98);
}
/* 8. Secondary Actions Row */
.app-detail-secondary-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 2.5rem;
margin-bottom: 0.75rem;
}
.btn-detail-sec-action {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.95rem;
font-weight: 800;
font-family: var(--font-heading);
transition: transform 0.2s ease, opacity 0.2s ease;
padding: 0.4rem 0.6rem;
border-radius: 8px;
}
.btn-detail-sec-action:hover {
opacity: 0.8;
transform: translateY(-1px);
}
.btn-detail-sec-action.sec-share {
color: #22C55E;
}
.btn-detail-sec-action.sec-update {
color: #EA580C;
}
/* Step 2: Download Versions / Variants Cards */
.download-variant-card {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 20px;
padding: 1.25rem 1.4rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
cursor: pointer;
transition: transform 0.25s var(--spring), border-color 0.2s ease, box-shadow 0.25s ease;
box-shadow: var(--card-shadow);
}
.download-variant-card:hover {
transform: translateY(-3px);
border-color: rgba(16, 185, 129, 0.6);
box-shadow: 0 14px 35px rgba(16, 185, 129, 0.18);
}
.download-variant-card:active {
transform: scale(0.98);
}
.variant-tag-badge {
background: rgba(16, 185, 129, 0.14);
color: #10B981;
font-size: 0.72rem;
font-weight: 800;
padding: 3px 9px;
border-radius: 9999px;
border: 1px solid rgba(16, 185, 129, 0.3);
}
/* Step 3: Final Ready Page matching Screenshot (2).png */
.download-ready-wrapper {
max-width: 640px;
margin: 0 auto;
text-align: center;
padding: 1rem 0 2rem;
}
.download-ready-title {
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 900;
color: var(--text-main);
line-height: 1.2;
margin-bottom: 0.85rem;
letter-spacing: -0.5px;
}
.download-ready-tag-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(16, 185, 129, 0.1);
border: 1.5px solid rgba(16, 185, 129, 0.35);
color: #10B981;
font-weight: 800;
font-size: 0.88rem;
padding: 0.45rem 1.25rem;
border-radius: 9999px;
margin-bottom: 1.75rem;
}
.download-ready-card {
background: var(--surface);
border: 1.5px solid rgba(16, 185, 129, 0.25);
border-radius: 28px;
padding: 2.2rem 1.8rem;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 0 30px rgba(16, 185, 129, 0.08);
position: relative;
overflow: hidden;
margin-bottom: 1.75rem;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.download-ready-progress-track {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: rgba(16, 185, 129, 0.15);
overflow: hidden;
}
.download-ready-progress-line {
height: 100%;
background: linear-gradient(90deg, #10B981, #059669);
width: 0%;
transition: width 1s linear;
}
.download-ready-file-box {
background: var(--surface-2);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 0.85rem 1.2rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
color: var(--text-main);
font-weight: 800;
font-size: 0.95rem;
width: 100%;
max-width: 480px;
margin: 0 auto 1.25rem;
}
.download-ready-instruction {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-sub);
margin-bottom: 1.5rem;
transition: color 0.3s ease;
}
@keyframes buttonReadyPop {
0% {
transform: scale(0.92);
opacity: 0.7;
}
60% {
transform: scale(1.04);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.btn-download-now-green {
background: #00875A;
color: #FFFFFF;
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 900;
padding: 0.95rem 2.8rem;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
box-shadow: 0 8px 24px rgba(0, 135, 90, 0.4);
transition: transform 0.2s var(--spring), background 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
min-width: 240px;
margin-bottom: 1.5rem;
}
.btn-download-now-green:hover {
background: #006644;
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(0, 135, 90, 0.55);
}
.btn-download-now-green:active {
transform: scale(0.97);
}
.btn-download-now-green.btn-counting {
background: rgba(16, 185, 129, 0.4);
cursor: not-allowed;
box-shadow: none;
}
.download-fallback-link {
display: inline-block;
color: var(--text-muted);
font-size: 0.85rem;
text-decoration: underline;
transition: color 0.2s ease;
}
.download-fallback-link:hover {
color: #10B981;
}
/* ==========================================================================
Sequential Staggered Waterfall Animations for Download Page
========================================================================== */
@keyframes dlItemEntrance {
0% {
opacity: 0;
transform: translateY(24px) scale(0.975);
}
60% {
transform: translateY(-2px) scale(1.006);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.dl-stagger {
opacity: 0;
animation: dlItemEntrance 0.52s cubic-bezier(0.16, 1, 0.3, 1) forwards;
will-change: transform, opacity;
}
.dl-delay-1 { animation-delay: 0.04s; }
.dl-delay-2 { animation-delay: 0.09s; }
.dl-delay-3 { animation-delay: 0.14s; }
.dl-delay-4 { animation-delay: 0.19s; }
.dl-delay-5 { animation-delay: 0.24s; }
.dl-delay-6 { animation-delay: 0.29s; }
.dl-delay-7 { animation-delay: 0.34s; }
.dl-delay-8 { animation-delay: 0.39s; }
.dl-delay-9 { animation-delay: 0.44s; }
.dl-delay-10 { animation-delay: 0.49s; }
.dl-delay-11 { animation-delay: 0.54s; }
.dl-delay-12 { animation-delay: 0.59s; }
.dl-delay-13 { animation-delay: 0.64s; }
.dl-delay-14 { animation-delay: 0.69s; }
.dl-delay-15 { animation-delay: 0.74s; }
.dl-delay-16 { animation-delay: 0.79s; }
.dl-delay-17 { animation-delay: 0.84s; }
.dl-delay-18 { animation-delay: 0.89s; }
.dl-delay-19 { animation-delay: 0.94s; }
.dl-delay-20 { animation-delay: 0.99s; }
.detail-container.has-stagger,
.about-modern-wrap.has-stagger {
animation: none !important;
transform: none !important;
}
.main-wrap.page-tab-switch > .about-modern-wrap.has-stagger,
.main-wrap.page-slide-up > .detail-container.has-stagger,
.main-wrap.page-slide-up > .about-modern-wrap.has-stagger,
.main-wrap.page-slide-back > .about-modern-wrap.has-stagger {
animation: none !important;
transform: none !important;
}
/* ==========================================================================
Hero Spotlight Carousel (Feature 1)
========================================================================== */
.hero-carousel-container {
position: relative;
width: 100%;
margin-bottom: 1.5rem;
border-radius: 26px;
overflow: hidden;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 0 25px rgba(139, 92, 246, 0.12);
border: 1px solid var(--border);
background: var(--surface);
}
.hero-carousel-track {
display: flex;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.25, 1);
width: 100%;
}
.hero-carousel-slide {
min-width: 100%;
width: 100%;
box-sizing: border-box;
padding: 1.6rem 1.4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
min-height: 180px;
cursor: pointer;
}
.hero-slide-bg-glow {
position: absolute;
right: -30px;
top: -30px;
width: 200px;
height: 200px;
border-radius: 50%;
opacity: 0.16;
pointer-events: none;
}
.hero-carousel-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
padding: 0.5rem 0 0.75rem;
background: var(--surface);
}
.hero-dot {
width: 7px;
height: 7px;
border-radius: 9999px;
background: var(--border);
cursor: pointer;
transition: width 0.3s var(--spring), background-color 0.3s ease;
}
.hero-dot.active {
width: 22px;
background: var(--accent);
}
/* ==========================================================================
Horizontal Swipeable Mini-Rails (Feature 2)
========================================================================== */
.horizontal-rail-section {
margin-bottom: 1.75rem;
}
.rail-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.85rem;
}
.rail-title {
font-size: 1.12rem;
font-weight: 800;
color: var(--text-main);
display: flex;
align-items: center;
gap: 0.4rem;
}
.horizontal-rail-track {
display: flex;
gap: 0.85rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.5rem;
scrollbar-width: none;
}
.horizontal-rail-track::-webkit-scrollbar {
display: none;
}
.rail-card-item {
flex: 0 0 100px;
width: 100px;
max-width: 100px;
scroll-snap-align: start;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
cursor: pointer;
box-shadow: none !important;
transition: opacity 0.15s ease;
}
@media (min-width: 640px) {
.rail-card-item {
flex: 0 0 115px;
width: 115px;
max-width: 115px;
}
}
.rail-card-item:hover {
transform: none;
box-shadow: none !important;
border-color: transparent !important;
}
.rail-card-item:active {
opacity: 1 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
}
.rail-icon-box {
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
font-weight: 900;
color: #fff;
margin-bottom: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
/* ==========================================================================
Live Instant Predictive Search Dropdown (Feature 4)
========================================================================== */
.search-dropdown-overlay {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--surface);
border: 1.5px solid var(--accent);
border-radius: 18px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), 0 0 25px rgba(139, 92, 246, 0.15);
z-index: 100;
max-height: 330px;
overflow-y: auto;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
animation: pageSlideUp 0.25s cubic-bezier(0.16, 1, 0.25, 1) both;
}
.search-dropdown-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 0.18s ease;
}
.search-dropdown-item:last-child {
border-bottom: none;
}
.search-dropdown-item:hover, .search-dropdown-item:focus {
background: var(--surface-2);
}
/* ==========================================================================
VirusTotal Security Modal (Feature 5)
========================================================================== */
.security-badge-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.95rem;
border-radius: 9999px;
background: rgba(16, 185, 129, 0.12);
border: 1.5px solid rgba(16, 185, 129, 0.35);
color: #10B981;
font-weight: 800;
font-size: 0.8rem;
cursor: pointer;
transition: transform 0.2s var(--spring), box-shadow 0.2s ease;
}
.security-badge-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(16, 185, 129, 0.3);
}
.security-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 110;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
animation: fadeIn 0.25s ease both;
}
.security-modal-card {
background: var(--surface);
border: 1.5px solid rgba(16, 185, 129, 0.4);
border-radius: 26px;
padding: 1.75rem;
max-width: 480px;
width: 100%;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 35px rgba(16, 185, 129, 0.2);
animation: pageSlideUp 0.35s cubic-bezier(0.16, 1, 0.25, 1) both;
}
.security-engine-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.55rem 0.75rem;
background: var(--surface-2);
border-radius: 10px;
margin-bottom: 0.4rem;
font-size: 0.82rem;
font-weight: 700;
}
/* ==========================================================================
Skeleton Shimmer Loading Engine (Feature 7)
========================================================================== */
.skeleton-shimmer {
background: linear-gradient(90deg, var(--surface-2) 0%, rgba(255,255,255,0.1) 50%, var(--surface-2) 100%);
background-size: 200% 100%;
animation: skeletonSweep 1.5s infinite linear;
border-radius: 12px;
}
@keyframes skeletonSweep {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 1rem;
min-height: 110px;
display: flex;
gap: 0.85rem;
margin-bottom: 1rem;
}
/* ==========================================================================
Floating Island Dock Active Glow Dot (Feature 8)
========================================================================== */
.dock-active-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 0 8px #FFFFFF, 0 0 14px var(--accent-light);
margin-top: 2px;
animation: activeBubbleGlow 2s infinite;
}
/* ==========================================================================
Admin Panel & Security Vault Dedicated Styles
========================================================================== */
.admin-body {
background-color: #F8FAFC;
color: var(--text-main);
font-family: 'Plus Jakarta Sans', sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.admin-lockscreen-wrap {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem 1rem;
background-color: #EEF4FB;
background-image: url('../assets/admin-login-bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
box-sizing: border-box;
}
.admin-top-badge {
position: absolute;
top: 1.5rem;
right: 2rem;
display: flex;
align-items: center;
gap: 0.5rem;
color: #475569;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.2px;
user-select: none;
z-index: 10;
}
@media (max-width: 640px) {
.admin-top-badge {
top: 1rem;
right: 1.25rem;
font-size: 0.85rem;
}
}
.admin-lock-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 2px solid rgba(255, 255, 255, 0.95);
border-radius: 36px;
padding: 2.75rem 2.25rem 2rem;
max-width: 440px;
width: 100%;
text-align: center;
box-shadow: 0 30px 80px rgba(37, 99, 235, 0.16), 0 10px 30px rgba(0, 0, 0, 0.04);
position: relative;
box-sizing: border-box;
animation: pageSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (max-width: 480px) {
.admin-lock-card {
padding: 2rem 1.4rem 1.75rem;
border-radius: 28px;
}
}
.admin-shield-icon-box {
width: 84px;
height: 84px;
border-radius: 26px;
background: linear-gradient(145deg, #EFF6FF 0%, #DBEAFE 100%);
border: 2px solid #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
box-shadow: 0 14px 30px rgba(37, 99, 235, 0.22), inset 0 2px 5px rgba(255, 255, 255, 0.9);
position: relative;
transition: transform 0.3s var(--spring);
}
.admin-shield-icon-box:hover {
transform: scale(1.05) translateY(-2px);
}
.admin-shield-svg {
filter: drop-shadow(0 4px 10px rgba(37, 99, 235, 0.3));
}
.admin-auth-brand-title {
font-family: var(--font-heading);
font-size: 2.15rem;
font-weight: 900;
color: #1E293B;
margin: 0 0 0.25rem 0;
letter-spacing: -0.6px;
line-height: 1.15;
}
.admin-auth-subtitle {
font-size: 1.1rem;
font-weight: 700;
color: #64748B;
margin-bottom: 0.35rem;
}
.admin-auth-tagline {
font-size: 0.88rem;
color: #94A3B8;
font-weight: 500;
margin: 0 0 1.75rem 0;
}
.admin-input-group {
position: relative;
margin-bottom: 1.1rem;
text-align: left;
}
.admin-input-icon {
position: absolute;
left: 1.15rem;
top: 50%;
transform: translateY(-50%);
color: #64748B;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
transition: color 0.2s ease;
}
.admin-pill-input {
width: 100%;
padding: 0.9rem 1.25rem 0.9rem 3.1rem;
border-radius: 9999px;
border: 1.5px solid #E2E8F0;
background: #F8FAFC;
color: #1E293B;
font-size: 0.94rem;
font-weight: 500;
outline: none;
box-sizing: border-box;
transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.admin-pill-input:focus {
border-color: #3B82F6;
background: #FFFFFF;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}
.admin-pill-input.static-admin-pill {
background: #F1F5F9;
color: #1E293B;
font-weight: 700;
cursor: default;
user-select: none;
border-color: #E2E8F0;
padding-right: 3rem;
pointer-events: none;
}
.admin-pill-input.static-admin-pill:focus {
border-color: #E2E8F0;
background: #F1F5F9;
box-shadow: none;
}
.admin-verified-badge {
position: absolute;
right: 1.15rem;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.admin-input-group:focus-within .admin-input-icon {
color: #2563EB;
}
.admin-pill-input.has-eye {
padding-right: 3.2rem;
}
/* Suppress Microsoft Edge / IE native reveal/clear buttons to prevent duplicate eye icons */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="text"]::-ms-reveal,
input[type="text"]::-ms-clear {
display: none !important;
width: 0 !important;
height: 0 !important;
}
.btn-toggle-eye-pill {
position: absolute;
right: 0.85rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
padding: 0;
color: #64748B;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
z-index: 5;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.btn-toggle-eye-pill svg {
pointer-events: none;
display: block;
transition: transform 0.15s ease;
}
.btn-toggle-eye-pill:hover {
color: #1E293B;
background-color: rgba(0, 0, 0, 0.05);
transform: translateY(-50%) scale(1.08);
}
.btn-toggle-eye-pill:active {
transform: translateY(-50%) scale(0.95);
}
.btn-toggle-eye-pill.is-active-eye {
color: #2563EB;
background-color: rgba(37, 99, 235, 0.08);
}
.btn-toggle-eye-pill.is-active-eye:hover {
color: #1D4ED8;
background-color: rgba(37, 99, 235, 0.14);
}
.btn-admin-login-submit {
width: 100%;
border-radius: 9999px;
background: linear-gradient(90deg, #3B82F6 0%, #1D4ED8 100%);
color: #FFFFFF;
font-weight: 700;
font-size: 1.05rem;
padding: 0.92rem 1.5rem;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
box-shadow: 0 10px 25px rgba(37, 99, 235, 0.38);
transition: transform 0.22s var(--spring), box-shadow 0.22s ease, filter 0.2s ease;
margin-top: 1.25rem;
box-sizing: border-box;
}
.btn-admin-login-submit:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(37, 99, 235, 0.48);
}
.btn-admin-login-submit:active {
transform: scale(0.97);
}
.admin-auth-options-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1.1rem;
font-size: 0.86rem;
}
.admin-remember-label {
display: flex;
align-items: center;
gap: 0.45rem;
color: #475569;
font-weight: 600;
cursor: pointer;
user-select: none;
}
.admin-custom-checkbox {
accent-color: #2563EB;
width: 16px;
height: 16px;
cursor: pointer;
border-radius: 4px;
}
.admin-forgot-link {
color: #2563EB;
font-weight: 700;
text-decoration: none;
transition: color 0.2s ease, text-decoration 0.2s ease;
}
.admin-forgot-link:hover {
text-decoration: underline;
color: #1D4ED8;
}
.admin-auth-divider {
display: flex;
align-items: center;
gap: 0.85rem;
margin: 1.5rem 0 1.25rem;
color: #94A3B8;
font-size: 0.82rem;
font-weight: 500;
}
.admin-auth-divider-line {
flex: 1;
height: 1px;
background: #E2E8F0;
}
.admin-card-footer {
text-align: center;
}
.admin-card-footer-title {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
font-size: 0.85rem;
font-weight: 700;
color: #475569;
margin-bottom: 0.25rem;
}
.admin-card-footer-sub {
font-size: 0.76rem;
color: #94A3B8;
font-weight: 500;
}
.admin-dashboard-wrap {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--bg);
}
.admin-topbar {
position: sticky;
top: 0;
z-index: 50;
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 0.85rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.admin-nav-tabs {
background: var(--surface-2);
border-bottom: 1px solid var(--border);
padding: 0.5rem 1.5rem;
display: flex;
gap: 0.75rem;
overflow-x: auto;
scrollbar-width: none;
}
.admin-nav-tabs::-webkit-scrollbar { display: none; }
.admin-nav-tab {
padding: 0.65rem 1.25rem;
border-radius: 9999px;
font-size: 0.85rem;
font-weight: 700;
background: var(--surface);
color: var(--text-muted);
border: 1.5px solid var(--border);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.45rem;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
}
.admin-nav-tab:hover {
color: var(--text-main);
border-color: var(--border-hover);
background: var(--surface);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.admin-nav-tab.active {
background: var(--accent-gradient);
color: #FFFFFF;
border-color: transparent;
box-shadow: 0 4px 14px rgba(30, 90, 168, 0.42);
}
.admin-content-area {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 1.5rem;
flex: 1;
}
.admin-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.admin-stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.15rem 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: var(--card-shadow);
}
.stat-icon-box {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
}
.stat-value {
font-family: var(--font-heading);
font-size: 1.45rem;
font-weight: 900;
color: var(--text-main);
line-height: 1.1;
}
.stat-label {
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 0.2rem;
}
.admin-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.25rem;
flex-wrap: wrap;
gap: 0.75rem;
}
.admin-table-container {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
overflow-x: auto;
box-shadow: var(--card-shadow);
}
.admin-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 0.85rem;
}
.admin-table th {
background: var(--surface-2);
padding: 0.85rem 1rem;
font-size: 0.75rem;
font-weight: 800;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--border);
}
.admin-table td {
padding: 0.9rem 1rem;
border-bottom: 1px solid var(--border);
vertical-align: middle;
color: var(--text-main);
}
.admin-table tr:last-child td {
border-bottom: none;
}
.admin-table tr:hover td {
background: var(--surface-2);
}
/* Modals */
.admin-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 100;
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
transition: opacity 0.25s ease;
}
.admin-modal-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 1.75rem;
max-width: 580px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
animation: pageSlideUp 0.3s cubic-bezier(0.16, 1, 0.25, 1) both;
}
.admin-modal-card input[type="text"],
.admin-modal-card input[type="password"],
.admin-modal-card input[type="number"],
.admin-modal-card select,
.admin-modal-card textarea {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--text-main);
font-size: 0.85rem;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-modal-card input:focus,
.admin-modal-card select:focus,
.admin-modal-card textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(30, 90, 168, 0.2);
}
/* Admin Tab Counters & Badges */
.admin-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 800;
padding: 1px 7px;
border-radius: 9999px;
background: var(--surface-2);
color: var(--text-main);
border: 1px solid var(--border);
margin-left: 4px;
}
.admin-nav-tab.active .admin-tab-badge {
background: rgba(255, 255, 255, 0.25);
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.4);
}
.admin-tab-badge.pending {
background: linear-gradient(90deg, #F43F5E, #E11D48);
color: #FFFFFF;
border-color: transparent;
animation: activeBubbleGlow 1.5s infinite;
}
/* Toolbar & Filter Rows */
.admin-toolbar-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.admin-search-box-wrap {
flex: 1;
min-width: 200px;
}
.admin-search-box-wrap input {
width: 100%;
padding: 0.55rem 0.95rem;
border-radius: 12px;
font-size: 0.85rem;
background: var(--surface);
border: 1.5px solid var(--border);
color: var(--text-main);
}
.admin-toolbar-row select {
padding: 0.55rem 0.85rem;
border-radius: 12px;
font-size: 0.85rem;
background: var(--surface);
border: 1.5px solid var(--border);
color: var(--text-main);
font-weight: 600;
}
/* Request & Review Status Badges */
.request-status-badge {
font-size: 0.72rem;
font-weight: 800;
padding: 3px 8px;
border-radius: 9999px;
display: inline-flex;
align-items: center;
gap: 3px;
}
.request-status-badge.pending {
background: rgba(245, 158, 11, 0.18);
color: #F59E0B;
border: 1px solid rgba(245, 158, 11, 0.35);
}
.request-status-badge.completed {
background: rgba(16, 185, 129, 0.18);
color: #10B981;
border: 1px solid rgba(16, 185, 129, 0.35);
}
.request-status-badge.dismissed {
background: rgba(244, 63, 94, 0.18);
color: #F43F5E;
border: 1px solid rgba(244, 63, 94, 0.35);
}
/* ==========================================================================
Universal Glassmorphism Toast Engine & Notifications System
========================================================================== */
.emg-toast-container {
position: fixed;
top: 24px;
right: 24px;
z-index: 100000;
display: flex;
flex-direction: column;
gap: 12px;
pointer-events: none;
align-items: flex-end;
max-width: 420px;
width: calc(100% - 48px);
}
@media (max-width: 640px) {
.emg-toast-container {
top: 18px;
right: 0;
left: 0;
margin: 0 auto;
align-items: center;
max-width: 94%;
width: 94%;
}
}
.emg-toast-card {
pointer-events: auto;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
border-radius: 16px;
background: rgba(15, 23, 42, 0.88);
color: #F8FAFC;
backdrop-filter: blur(20px) saturate(190%);
-webkit-backdrop-filter: blur(20px) saturate(190%);
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
font-family: var(--font-main, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
font-size: 0.88rem;
font-weight: 600;
line-height: 1.4;
border: 1.5px solid rgba(255, 255, 255, 0.12);
animation: emgToastSlideIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
transition: transform 0.25s ease, opacity 0.25s ease;
cursor: default;
user-select: none;
}
[data-theme="light"] .emg-toast-card,
.light-mode .emg-toast-card {
background: rgba(255, 255, 255, 0.94);
color: #0F172A;
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
border-color: rgba(0, 0, 0, 0.08);
}
.emg-toast-card.emg-toast-leaving {
animation: emgToastSlideOut 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.emg-toast-glow {
position: absolute;
top: -50%;
left: -20%;
width: 140%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.emg-toast-icon-wrap {
width: 34px;
height: 34px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.emg-toast-content {
flex: 1;
min-width: 0;
word-break: break-word;
}
.emg-toast-close-btn {
background: none;
border: none;
color: inherit;
opacity: 0.55;
font-size: 1.1rem;
cursor: pointer;
padding: 2px 4px;
margin-left: 4px;
border-radius: 6px;
transition: opacity 0.2s ease, transform 0.15s ease;
line-height: 1;
}
.emg-toast-close-btn:hover {
opacity: 1;
transform: scale(1.15);
}
.emg-toast-progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .emg-toast-progress,
.light-mode .emg-toast-progress {
background: rgba(0, 0, 0, 0.06);
}
.emg-toast-progress-bar {
height: 100%;
width: 100%;
animation: emgToastProgress linear forwards;
}
/* Success Toast */
.emg-toast-success {
border-color: rgba(16, 185, 129, 0.45);
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45), 0 0 20px rgba(16, 185, 129, 0.2);
}
.emg-toast-success .emg-toast-icon-wrap {
background: rgba(16, 185, 129, 0.18);
color: #10B981;
}
.emg-toast-success .emg-toast-progress-bar {
background: linear-gradient(90deg, #10B981, #34D399);
}
/* Error Toast */
.emg-toast-error {
border-color: rgba(244, 63, 94, 0.45);
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45), 0 0 20px rgba(244, 63, 94, 0.2);
}
.emg-toast-error .emg-toast-icon-wrap {
background: rgba(244, 63, 94, 0.18);
color: #F43F5E;
}
.emg-toast-error .emg-toast-progress-bar {
background: linear-gradient(90deg, #F43F5E, #FB7185);
}
/* Warning Toast */
.emg-toast-warning {
border-color: rgba(245, 158, 11, 0.45);
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45), 0 0 20px rgba(245, 158, 11, 0.2);
}
.emg-toast-warning .emg-toast-icon-wrap {
background: rgba(245, 158, 11, 0.18);
color: #F59E0B;
}
.emg-toast-warning .emg-toast-progress-bar {
background: linear-gradient(90deg, #F59E0B, #FBBF24);
}
/* Info Toast */
.emg-toast-info {
border-color: rgba(14, 165, 233, 0.45);
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45), 0 0 20px rgba(14, 165, 233, 0.2);
}
.emg-toast-info .emg-toast-icon-wrap {
background: rgba(14, 165, 233, 0.18);
color: #0EA5E9;
}
.emg-toast-info .emg-toast-progress-bar {
background: linear-gradient(90deg, #0EA5E9, #38BDF8);
}
/* Fallback backward compatibility for .admin-toast-item */
.admin-toast-item {
background: var(--surface);
border: 1.5px solid var(--accent);
color: var(--text-main);
padding: 0.75rem 1.25rem;
border-radius: 14px;
font-size: 0.88rem;
font-weight: 700;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
gap: 0.5rem;
animation: emgToastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
pointer-events: auto;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.admin-toast-item.success { border-color: #10B981; background: rgba(16, 185, 129, 0.18); color: #10B981; }
.admin-toast-item.error { border-color: #F43F5E; background: rgba(244, 63, 94, 0.18); color: #F43F5E; }
.admin-toast-item.info { border-color: #38BDF8; background: rgba(56, 189, 248, 0.18); color: #38BDF8; }
/* Toast Animations */
@keyframes emgToastSlideIn {
from {
opacity: 0;
transform: translateY(-16px) scale(0.93);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes emgToastSlideOut {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(-12px) scale(0.92);
}
}
@keyframes emgToastProgress {
from {
width: 100%;
}
to {
width: 0%;
}
}
/* ==========================================================================
Admin Panel Comprehensive Staggered Waterfall Animations
========================================================================== */
/* Topbar Header Entrance */
.admin-topbar {
animation: pageSlideUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
will-change: transform, opacity;
}
/* Navigation Tabs Waterfall (Cascades One by One) */
.admin-nav-tabs .admin-nav-tab {
animation: cardCascade 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
will-change: transform, opacity;
}
.admin-nav-tabs .admin-nav-tab:nth-child(1) { animation-delay: 0.04s; }
.admin-nav-tabs .admin-nav-tab:nth-child(2) { animation-delay: 0.08s; }
.admin-nav-tabs .admin-nav-tab:nth-child(3) { animation-delay: 0.12s; }
.admin-nav-tabs .admin-nav-tab:nth-child(4) { animation-delay: 0.16s; }
.admin-nav-tabs .admin-nav-tab:nth-child(5) { animation-delay: 0.20s; }
.admin-nav-tabs .admin-nav-tab:nth-child(6) { animation-delay: 0.24s; }
/* Stat Cards Waterfall (Cascades One by One) */
.admin-stats-grid .admin-stat-card {
animation: cardCascade 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
will-change: transform, opacity;
}
.admin-stats-grid .admin-stat-card:nth-child(1) { animation-delay: 0.06s; }
.admin-stats-grid .admin-stat-card:nth-child(2) { animation-delay: 0.12s; }
.admin-stats-grid .admin-stat-card:nth-child(3) { animation-delay: 0.18s; }
.admin-stats-grid .admin-stat-card:nth-child(4) { animation-delay: 0.24s; }
.admin-stats-grid .admin-stat-card:nth-child(5) { animation-delay: 0.30s; }
/* Tab Content Smooth Entrance */
.admin-tab-content.admin-tab-animating,
.admin-tab-content {
animation: pageSlideUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
will-change: transform, opacity;
}
/* Tab Header & Action Bar */
.admin-tab-content .admin-section-header {
animation: cardCascade 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
will-change: transform, opacity;
}
/* Toolbar & Filters Row */
.admin-tab-content .admin-toolbar-row {
animation: cardCascade 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both;
will-change: transform, opacity;
}
/* Table Container */
.admin-tab-content .admin-table-container {
animation: cardCascade 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
will-change: transform, opacity;
}
/* Stagger Table Rows (Waterfall entrance row by row) */
.admin-table tbody tr {
animation: cardCascade 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
will-change: transform, opacity;
}
.admin-table tbody tr:nth-child(1) { animation-delay: 0.04s; }
.admin-table tbody tr:nth-child(2) { animation-delay: 0.08s; }
.admin-table tbody tr:nth-child(3) { animation-delay: 0.12s; }
.admin-table tbody tr:nth-child(4) { animation-delay: 0.16s; }
.admin-table tbody tr:nth-child(5) { animation-delay: 0.20s; }
.admin-table tbody tr:nth-child(6) { animation-delay: 0.24s; }
.admin-table tbody tr:nth-child(7) { animation-delay: 0.28s; }
.admin-table tbody tr:nth-child(8) { animation-delay: 0.32s; }
.admin-table tbody tr:nth-child(9) { animation-delay: 0.36s; }
.admin-table tbody tr:nth-child(10) { animation-delay: 0.40s; }
.admin-table tbody tr:nth-child(n+11) { animation-delay: 0.44s; }
/* Settings & Backup Tab Cards Waterfall */
#tabSettings > div > div,
#tabBackup > div > div {
animation: cardCascade 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
will-change: transform, opacity;
}
#tabSettings > div > div:nth-child(1),
#tabBackup > div > div:nth-child(1) { animation-delay: 0.06s; }
#tabSettings > div > div:nth-child(2),
#tabBackup > div > div:nth-child(2) { animation-delay: 0.14s; }
#tabSettings > div > div:nth-child(3),
#tabBackup > div > div:nth-child(3) { animation-delay: 0.22s; }
#tabBackup > div > div:nth-child(4) { animation-delay: 0.30s; }
/* ==========================================================================
Interactive Emoji Reactions (Feature 3: 🔥 🚀 ❤️ 👏)
========================================================================== */
.reaction-bar-container {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 1.1rem 1.25rem;
margin-bottom: 1.5rem;
box-shadow: var(--card-shadow);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
position: relative;
overflow: hidden;
}
.reaction-bar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.reaction-bar-title {
font-size: 0.88rem;
font-weight: 800;
color: var(--text-main);
display: flex;
align-items: center;
gap: 0.4rem;
}
.reaction-bar-subtitle {
font-size: 0.75rem;
color: var(--text-muted);
}
.reaction-pills-row {
display: flex;
align-items: center;
gap: 0.65rem;
flex-wrap: wrap;
}
.reaction-pill-btn {
flex: 1;
min-width: 70px;
background: var(--surface-2);
border: 1.5px solid var(--border);
border-radius: 9999px;
padding: 0.5rem 0.85rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
cursor: pointer;
user-select: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
transition: transform 0.22s var(--spring), border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
position: relative;
}
.reaction-pill-btn:hover {
border-color: var(--border-hover);
background: var(--surface);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.reaction-pill-btn:active {
transform: scale(0.88);
}
.reaction-pill-btn.active {
border-color: transparent;
background: var(--accent-gradient);
color: #FFFFFF;
box-shadow: 0 4px 14px rgba(30, 90, 168, 0.38);
transform: scale(1.03);
}
.reaction-pill-btn.active .reaction-count {
color: #FFFFFF;
}
.reaction-pill-btn.active .reaction-emoji {
animation: reactionEmojiBounce 0.45s var(--spring) both;
}
.reaction-emoji {
font-size: 1.25rem;
line-height: 1;
display: inline-block;
transition: transform 0.2s var(--spring);
}
.reaction-count {
font-family: var(--font-mono);
font-size: 0.85rem;
font-weight: 800;
color: var(--text-main);
display: inline-block;
min-width: 14px;
text-align: center;
}
.reaction-pill-btn.active .reaction-count {
color: #FFFFFF !important;
font-weight: 900 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
@keyframes reactionEmojiBounce {
0% { transform: scale(1); }
40% { transform: scale(1.45) rotate(-12deg); }
75% { transform: scale(0.9) rotate(8deg); }
100% { transform: scale(1) rotate(0deg); }
}
.reaction-particle-fly {
position: fixed;
pointer-events: none;
z-index: 999;
font-size: 1.5rem;
animation: reactionFloatFade 0.8s ease-out forwards;
}
@keyframes reactionFloatFade {
0% {
opacity: 1;
transform: translate(0, 0) scale(0.8);
}
50% {
opacity: 0.9;
transform: translate(var(--tx, 0px), -45px) scale(1.3);
}
100% {
opacity: 0;
transform: translate(var(--tx, 0px), -90px) scale(0.6);
}
}
/* ==========================================================================
User Request Modal & System (Feature 7)
========================================================================== */
.user-request-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
z-index: 120;
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
transition: opacity 0.25s ease;
}
.user-request-modal-card {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 26px;
padding: 2rem 1.75rem;
max-width: 480px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(139, 92, 246, 0.25);
animation: pageSlideUp 0.32s cubic-bezier(0.16, 1, 0.25, 1) both;
}
.request-type-segmented {
display: flex;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 14px;
padding: 4px;
margin-bottom: 1.25rem;
gap: 4px;
}
.request-type-btn {
flex: 1;
padding: 0.6rem 0.5rem;
border-radius: 10px;
font-size: 0.82rem;
font-weight: 700;
color: var(--text-muted);
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
transition: all 0.2s ease;
}
.request-type-btn.active {
background: var(--accent);
color: var(--on-accent);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}
.request-status-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.72rem;
font-weight: 800;
padding: 3px 8px;
border-radius: 9999px;
}
.request-status-badge.pending {
background: rgba(245, 158, 11, 0.15);
color: #F59E0B;
border: 1px solid rgba(245, 158, 11, 0.3);
}
.request-status-badge.completed {
background: rgba(16, 185, 129, 0.15);
color: #10B981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.request-status-badge.dismissed {
background: rgba(244, 63, 94, 0.15);
color: var(--red);
border: 1px solid rgba(244, 63, 94, 0.3);
}
/* ==========================================================================
3D Card Tilt Physics & Dynamic Lighting (Feature 8)
========================================================================== */
.card-tilt-3d {
position: relative;
transform-style: preserve-3d;
perspective: 1000px;
will-change: transform;
transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.4, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.card-tilt-glare {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 65%);
opacity: 0;
transition: opacity 0.25s ease;
mix-blend-mode: overlay;
z-index: 8;
}
.card-tilt-3d:hover .card-tilt-glare {
opacity: 1;
}
.card-tilt-3d:hover {
box-shadow: var(--card-shadow-hover) !important;
border-color: var(--border-hover) !important;
}
/* ==========================================================================
Comprehensive Mobile & Universal Responsive Framework
========================================================================== */
/* Universal Overflow & Media Protection */
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
width: 100%;
max-width: 100vw;
overflow-x: hidden !important;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
img, video, iframe, canvas, svg {
max-width: 100%;
height: auto;
}
/* ==========================================
Breakpoint: Tablets & Small Laptops (<= 1024px)
========================================== */
@media (max-width: 1024px) {
.main-wrap {
max-width: 100%;
padding: 1rem 1.25rem;
}
.home-apps-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.75rem 1rem !important;
}
.apps-grid:not(.home-apps-grid),
.catalog-apps-grid {
grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important;
gap: 1.15rem 0.85rem;
}
.prompts-grid {
columns: 2;
column-gap: 1.15rem;
}
}
/* ==========================================
Breakpoint: Tablets & Large Phones (<= 768px)
========================================== */
@media (max-width: 768px) {
/* Header Responsive Layout */
.site-header {
position: sticky;
top: 0;
z-index: 50;
width: 100%;
}
.header-inner {
padding: 0.6rem 0.85rem;
gap: 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.brand-logo-btn {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
gap: 0.6rem;
}
.brand-logo-title {
font-size: 1.15rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.header-actions {
gap: 0.4rem;
flex-shrink: 0;
}
.btn-icon-circle {
width: 36px;
height: 36px;
min-width: 36px;
}
.btn-accent-circle {
width: 36px;
height: 36px;
min-width: 36px;
}
.header-search-wrap {
padding: 0.35rem 0.85rem 0.65rem;
width: 100%;
}
/* Prevent iOS Safari from auto-zooming on focus */
.search-input-box input {
font-size: 16px;
padding: 0.65rem 2.2rem 0.65rem 2.6rem;
}
.search-dropdown-overlay {
position: absolute;
top: 100%;
left: 0.85rem;
right: 0.85rem;
width: auto;
max-width: calc(100% - 1.7rem);
}
/* Main Container */
.main-wrap {
padding: 0.75rem 0.65rem;
width: 100%;
box-sizing: border-box;
}
/* Announcement Banner */
.announcement-bar {
border-radius: 16px;
padding: 0.6rem 0.9rem;
font-size: 0.82rem;
margin-bottom: 0.85rem;
gap: 0.5rem;
}
/* Category Filter Chips */
.category-chips-row {
display: flex;
gap: 0.45rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
padding: 0.15rem 0.1rem 0.55rem;
margin-bottom: 0.85rem;
scrollbar-width: none;
}
.category-chips-row::-webkit-scrollbar { display: none; }
.chip-pill {
flex-shrink: 0;
padding: 0.42rem 0.9rem;
font-size: 0.78rem;
}
/* Telegram VIP Banner (Compact & Slim) */
.telegram-vip-banner {
padding: 0.5rem 0.85rem;
border-radius: 16px;
margin-bottom: 0.75rem;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
min-height: auto;
}
.telegram-icon-box {
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 10px;
font-size: 1.2rem;
}
.telegram-vip-banner .btn-telegram-join {
padding: 0.38rem 0.75rem;
font-size: 0.75rem;
white-space: nowrap;
flex-shrink: 0;
border-radius: 9999px;
}
/* Hero Spotlight Carousel (Compact & Slim) */
.hero-carousel-container {
border-radius: 18px;
margin-bottom: 0.85rem;
}
.hero-carousel-slide {
padding: 0.75rem 0.85rem 0.65rem;
min-height: auto;
}
.hero-carousel-dots {
padding: 0.25rem 0 0.45rem;
}
/* Horizontal Mini-Rail on Mobile */
.rail-card-item {
flex: 0 0 100px !important;
width: 100px !important;
max-width: 100px !important;
padding: 0 !important;
}
/* Home Section: 1-column rectangular list on Mobile */
.home-apps-grid {
grid-template-columns: 1fr !important;
row-gap: 0.5rem !important;
column-gap: 0 !important;
padding: 0.35rem 0.1rem 1.5rem !important;
}
/* Apps Section: 3-column mobile app grid for classic square items */
.apps-grid:not(.home-apps-grid),
.catalog-apps-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 1.1rem 0.65rem !important;
padding: 0.35rem 0.1rem 1.5rem !important;
}
.playstore-icon-wrap {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
max-height: none !important;
aspect-ratio: 1 / 1 !important;
}
.playstore-icon-wrap .arch-icon,
.playstore-icon-wrap img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
aspect-ratio: 1 / 1 !important;
}
/* AI Prompts Grid: 2-column mobile masonry */
.prompts-grid {
columns: 2 !important;
column-gap: 0.5rem !important;
width: 100% !important;
}
.prompt-card {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 0.55rem !important;
padding: 0.6rem 0.5rem !important;
border-radius: 14px !important;
box-sizing: border-box !important;
display: inline-block !important;
break-inside: avoid !important;
}
.prompt-thumb-banner {
width: 100% !important;
max-height: 180px !important;
min-height: 90px !important;
border-radius: 10px !important;
margin-bottom: 0.4rem !important;
}
.prompt-serial-badge {
font-size: 8.5px !important;
padding: 1.5px 5px !important;
top: 5px !important;
left: 5px !important;
border-radius: 5px !important;
}
.prompt-card-cat {
font-size: 8px !important;
padding: 1.5px 5px !important;
margin-bottom: 0.25rem !important;
}
.prompt-card-title {
font-size: 0.76rem !important;
line-height: 1.25 !important;
margin-bottom: 0.3rem !important;
}
.prompt-title-serial {
font-size: 0.7rem !important;
}
.prompt-card-text {
font-size: 0.68rem !important;
line-height: 1.35 !important;
padding: 0.4rem !important;
margin-bottom: 0.4rem !important;
border-radius: 8px !important;
}
.prompt-card-footer {
flex-wrap: wrap !important;
gap: 0.25rem !important;
justify-content: space-between !important;
}
.prompt-card-footer span {
font-size: 0.65rem !important;
}
.btn-get-prompt {
padding: 0.32rem 0.6rem !important;
font-size: 0.68rem !important;
border-radius: 9999px !important;
}
/* App Detail View */
.detail-container {
width: 100%;
padding: 0.15rem 0;
}
.detail-header-card {
flex-direction: row;
gap: 0.75rem;
align-items: center;
margin-bottom: 1rem;
padding: 1rem 0.85rem;
border-radius: 18px;
}
.detail-icon-wrap {
width: 64px;
height: 64px;
min-width: 64px;
border-radius: 18px;
}
.detail-title {
font-size: 1.15rem;
line-height: 1.25;
}
.detail-badges-row {
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.4rem;
}
.info-table-row {
padding: 0.6rem 0;
font-size: 0.82rem;
gap: 0.5rem;
}
.btn-main-download {
width: 100%;
padding: 0.85rem 1rem;
font-size: 0.92rem;
justify-content: center;
border-radius: 16px;
}
.app-screenshots-carousel {
gap: 0.6rem;
padding-bottom: 0.5rem;
}
.app-screenshots-carousel img {
max-height: 220px;
border-radius: 12px;
}
.reaction-bar {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 0.2rem 0;
gap: 0.4rem;
}
.reaction-pill-btn {
flex: 1 1 auto;
min-width: 54px;
padding: 0.42rem 0.65rem;
font-size: 0.78rem;
}
/* AI Prompt Detail View */
.prompt-detail-banner {
max-height: 420px;
border-radius: 16px;
margin-bottom: 1rem;
}
.prompt-detail-banner img {
max-height: 420px;
width: 100%;
object-fit: contain;
}
.countdown-detail-wrapper {
padding: 1.25rem 0.85rem;
border-radius: 18px;
}
.ai-countdown-orb-container {
width: 110px;
height: 110px;
}
.ai-stream-terminal-box {
padding: 1rem 0.85rem;
border-radius: 18px;
}
.ai-prompt-chat-bubble {
padding: 0.7rem 1rem;
font-size: 0.88rem;
max-width: 95%;
}
.prompt-full-code-box {
font-size: 0.8rem;
padding: 0.75rem;
border-radius: 12px;
}
/* Floating Bottom Taskbar Navigation */
.bottom-nav-pill-wrap {
width: calc(100% - 16px);
max-width: 440px;
bottom: max(10px, env(safe-area-inset-bottom, 10px));
left: 50%;
transform: translateX(-50%);
}
.bottom-nav-pill {
padding: 5px 4px 4px;
border-radius: 9999px;
}
.nav-pill-btn {
padding: 2px 1px;
min-width: 0;
flex: 1;
}
.nav-pill-icon-bubble {
width: 32px;
height: 28px;
font-size: 1rem;
}
.nav-pill-btn.active .nav-pill-icon-bubble {
width: 40px;
}
.nav-pill-label {
font-size: 9.5px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body {
padding-bottom: 88px;
}
/* Side Drawer Panel */
.side-drawer-panel {
width: 85vw;
max-width: 310px;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 1.25rem 1rem;
}
/* User Request Modal */
.user-request-modal {
padding: 0.65rem;
}
.user-request-modal-card {
width: 95vw;
max-width: 440px;
padding: 1.25rem 1rem;
border-radius: 20px;
max-height: 88vh;
}
.user-request-modal-card input,
.user-request-modal-card select,
.user-request-modal-card textarea {
font-size: 16px;
width: 100%;
}
/* HD Lightbox Modal */
#hdImageLightboxModal {
padding: 0.5rem;
}
#hdImageLightboxImg {
max-width: 96vw;
max-height: 75vh;
object-fit: contain;
border-radius: 12px;
}
/* Admin Panel Responsive */
.admin-lock-card {
width: 94vw;
max-width: 400px;
padding: 1.5rem 1.15rem;
border-radius: 20px;
}
.admin-topbar {
padding: 0.65rem 0.85rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.admin-nav-tabs {
padding: 0.4rem 0.65rem;
gap: 0.35rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.admin-nav-tabs::-webkit-scrollbar { display: none; }
.admin-nav-tab {
padding: 0.45rem 0.8rem;
font-size: 0.78rem;
flex-shrink: 0;
border-radius: 10px;
}
.admin-content-area {
padding: 0.85rem 0.65rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.admin-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.6rem;
}
.admin-stat-card {
padding: 0.85rem 0.75rem;
}
.admin-table-container {
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 14px;
margin-top: 0.75rem;
}
.admin-table {
min-width: 540px;
width: 100%;
font-size: 0.8rem;
}
.admin-table th, .admin-table td {
padding: 0.6rem 0.5rem;
}
.admin-modal-card {
width: 95vw;
max-width: 500px;
padding: 1.25rem 1rem;
border-radius: 20px;
}
.admin-modal-card input,
.admin-modal-card select,
.admin-modal-card textarea {
font-size: 16px;
}
}
/* ==========================================
Breakpoint: Small Screen Mobile Phones (<= 400px)
========================================== */
@media (max-width: 400px) {
.header-inner {
padding: 0.5rem 0.65rem;
gap: 0.35rem;
}
.brand-logo-title {
font-size: 1rem;
}
.site-profile-avatar-img,
.site-profile-avatar-placeholder {
width: 32px;
height: 32px;
min-width: 32px;
font-size: 1rem;
}
.btn-icon-circle,
.btn-accent-circle {
width: 34px;
height: 34px;
min-width: 34px;
}
.header-search-wrap {
padding: 0.25rem 0.65rem 0.5rem;
}
.rail-card-item {
flex: 0 0 96px !important;
width: 96px !important;
max-width: 96px !important;
}
.apps-grid:not(.home-apps-grid),
.catalog-apps-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0.95rem 0.5rem !important;
}
.home-apps-grid {
grid-template-columns: 1fr !important;
row-gap: 0.45rem !important;
column-gap: 0 !important;
}
.playstore-icon-wrap {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
max-height: none !important;
aspect-ratio: 1 / 1 !important;
}
.playstore-icon-wrap .arch-icon,
.playstore-icon-wrap img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
aspect-ratio: 1 / 1 !important;
}
.prompts-grid {
columns: 2 !important;
column-gap: 0.4rem !important;
}
.prompt-card {
padding: 0.5rem 0.4rem !important;
border-radius: 12px !important;
}
.bottom-nav-pill-wrap {
width: calc(100% - 10px);
bottom: max(6px, env(safe-area-inset-bottom, 6px));
}
.bottom-nav-pill {
padding: 4px 3px 3px;
}
.nav-pill-icon-bubble {
width: 28px;
height: 25px;
font-size: 0.95rem;
}
.nav-pill-btn.active .nav-pill-icon-bubble {
width: 36px;
}
.nav-pill-label {
font-size: 8.5px;
}
.admin-stats-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================
Breakpoint: Extra Narrow Mobile Phones (<= 340px)
========================================== */
@media (max-width: 340px) {
.brand-logo-title {
font-size: 0.9rem;
}
.chip-pill {
padding: 0.35rem 0.75rem;
font-size: 0.72rem;
}
.rail-card-item {
flex: 0 0 88px !important;
width: 88px !important;
max-width: 88px !important;
}
.apps-grid:not(.home-apps-grid),
.catalog-apps-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0.85rem 0.45rem !important;
}
.home-apps-grid {
grid-template-columns: 1fr !important;
row-gap: 0.4rem !important;
column-gap: 0 !important;
}
.playstore-icon-wrap {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
max-height: none !important;
aspect-ratio: 1 / 1 !important;
}
.playstore-icon-wrap .arch-icon,
.playstore-icon-wrap img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
aspect-ratio: 1 / 1 !important;
}
.playstore-app-name {
font-size: 0.72rem !important;
}
}
/* ==========================================================================
Modern About Page (Exact Match with Reference Design)
========================================================================== */
.about-modern-wrap {
max-width: 580px;
margin: 0 auto;
padding: 0.25rem 0.25rem 2.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.about-top-bar {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.25rem 0.15rem;
}
.about-top-back-btn {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-main);
cursor: pointer;
transition: transform 0.2s var(--spring), background 0.2s ease;
}
.about-top-back-btn:hover {
transform: scale(1.08);
background: var(--surface-2);
}
.about-top-title {
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: 800;
color: var(--text-main);
margin: 0;
}
.about-card-modern {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 24px;
padding: 1.35rem 1.4rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.about-card-modern:hover {
border-color: rgba(59, 130, 246, 0.35);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}
.about-hero-center {
text-align: center;
padding: 2.2rem 1.4rem 1.75rem;
}
.about-avatar-circle-wrap {
display: inline-flex;
justify-content: center;
align-items: center;
margin-bottom: 1.1rem;
position: relative;
width: 88px;
height: 88px;
border-radius: 50%;
overflow: hidden;
background: #FFFFFF;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.about-avatar-circle-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
transform: scale(1.08);
transform-origin: center center;
border: none;
outline: none;
display: block;
transition: transform 0.3s var(--spring);
}
.about-avatar-circle-img:hover {
transform: scale(1.14);
}
.about-avatar-circle-placeholder {
width: 88px;
height: 88px;
border-radius: 50%;
background: linear-gradient(135deg, #2563EB, #1D4ED8);
color: #FFFFFF;
font-size: 2.2rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
border: none;
outline: none;
}
.about-hero-title {
font-family: var(--font-heading);
font-size: 1.55rem;
font-weight: 900;
color: var(--text-main);
margin: 0 0 0.35rem 0;
letter-spacing: -0.3px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
.about-hero-title span {
color: #2563EB;
}
[data-theme="dark"] .about-hero-title span {
color: #38BDF8;
}
.about-hero-tagline {
font-size: 0.88rem;
color: var(--text-muted);
margin: 0 0 1.5rem 0;
font-weight: 500;
}
.about-status-pills-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.35rem;
width: 100%;
margin-top: 1rem;
box-sizing: border-box;
}
.about-status-pill {
display: flex;
align-items: center;
justify-content: center;
gap: 0.28rem;
padding: 0.36rem 0.25rem;
border-radius: 9999px;
background: rgba(30, 90, 168, 0.08);
border: 1px solid rgba(30, 90, 168, 0.2);
color: #1E5AA8;
font-size: 0.66rem;
font-weight: 700;
white-space: nowrap;
box-sizing: border-box;
min-width: 0;
text-decoration: none;
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
[data-theme="dark"] .about-status-pill {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(96, 165, 250, 0.22);
color: #60A5FA;
}
.about-status-pill:hover {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(30, 90, 168, 0.15);
}
.about-status-pill svg {
flex-shrink: 0;
}
.about-status-pill span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (min-width: 600px) {
.about-status-pills-row {
gap: 0.65rem;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.about-status-pill {
font-size: 0.78rem;
padding: 0.42rem 0.65rem;
gap: 0.38rem;
}
.about-status-pill svg {
width: 14px;
height: 14px;
}
}
@media (max-width: 360px) {
.about-status-pill {
font-size: 0.62rem;
padding: 0.32rem 0.15rem;
gap: 0.2rem;
}
.about-status-pill svg {
width: 11px;
height: 11px;
}
}
.about-card-heading {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 800;
color: var(--text-main);
margin: 0 0 0.75rem 0;
letter-spacing: -0.2px;
}
.about-card-desc {
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
.about-list-group {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.about-list-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.72rem 0.5rem;
border-radius: 14px;
text-decoration: none;
color: var(--text-main);
transition: background 0.2s ease, transform 0.2s var(--spring);
cursor: pointer;
}
.about-list-row:hover {
background: var(--surface-2);
transform: translateX(3px);
}
.about-list-row-left {
display: flex;
align-items: center;
gap: 0.85rem;
}
.about-list-icon-box {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.about-list-label {
font-size: 0.94rem;
font-weight: 700;
color: var(--text-main);
}
.about-list-arrow {
color: var(--text-muted);
display: flex;
align-items: center;
opacity: 0.55;
transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.about-list-row:hover .about-list-arrow {
opacity: 1;
transform: translateX(2px);
color: #2563EB;
}
.about-copyright-area {
text-align: center;
padding: 0.75rem 0 1.25rem;
color: var(--text-muted);
font-size: 0.8rem;
line-height: 1.5;
}
/* ==========================================================================
Admin Panel: Executive Hub & Dark/Light Mode Engine
========================================================================== */
/* Executive Navigation Hub Grid (Main Dashboard Page) */
.admin-hub-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.25rem;
margin-top: 1.5rem;
}
.admin-hub-card {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 20px;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.25s var(--spring), box-shadow 0.25s ease, border-color 0.25s ease;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: var(--card-shadow);
}
.admin-hub-card:hover {
transform: translateY(-4px);
border-color: var(--accent-light);
box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18);
}
.admin-hub-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.admin-hub-icon-wrap {
width: 52px;
height: 52px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
flex-shrink: 0;
}
.admin-hub-badge {
font-size: 0.75rem;
font-weight: 800;
padding: 3px 10px;
border-radius: 9999px;
background: rgba(37, 99, 235, 0.12);
color: #3B82F6;
border: 1px solid rgba(37, 99, 235, 0.25);
}
.admin-hub-title {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 800;
color: var(--text-main);
margin: 0 0 0.35rem 0;
}
.admin-hub-desc {
font-size: 0.84rem;
color: var(--text-muted);
line-height: 1.5;
margin: 0 0 1.25rem 0;
flex: 1;
}
.admin-hub-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.7rem 1.15rem;
border-radius: 12px;
font-size: 0.85rem;
font-weight: 800;
background: var(--surface-2);
color: var(--text-main);
border: 1px solid var(--border);
transition: all 0.2s ease;
box-sizing: border-box;
}
.admin-hub-card:hover .admin-hub-btn {
background: var(--accent);
color: #FFFFFF;
border-color: transparent;
}
/* Dedicated Page Navigation Back Bar */
.admin-page-back-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
gap: 0.75rem;
}
.btn-admin-back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.1rem;
border-radius: 12px;
font-size: 0.85rem;
font-weight: 700;
background: var(--surface);
color: var(--text-main);
border: 1.5px solid var(--border);
cursor: pointer;
transition: all 0.2s ease;
}
.btn-admin-back:hover {
background: var(--surface-2);
border-color: var(--accent-light);
color: var(--accent);
transform: translateX(-2px);
}
.admin-breadcrumb {
font-size: 0.84rem;
color: var(--text-muted);
}
/* Executive Welcome Banner */
.admin-welcome-hero {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
border: 1.5px solid rgba(59, 130, 246, 0.25);
border-radius: 20px;
padding: 1.75rem;
margin-bottom: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1.25rem;
position: relative;
overflow: hidden;
}
/* Theme Switching Overrides for Admin Panel (Dashboard Only - Lockscreen remains untouched) */
body[data-theme="dark"] .admin-dashboard-wrap {
background-color: #090D16 !important;
color: #F8FAFC !important;
}
body[data-theme="dark"] .admin-topbar {
background: rgba(15, 23, 42, 0.95) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body[data-theme="dark"] .admin-nav-tabs {
background: #0B1120 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body[data-theme="dark"] .admin-nav-tab {
background: #111827 !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #94A3B8 !important;
}
body[data-theme="dark"] .admin-nav-tab:hover {
background: #1F2937 !important;
color: #F8FAFC !important;
border-color: rgba(56, 189, 248, 0.4) !important;
}
body[data-theme="dark"] .admin-stat-card,
body[data-theme="dark"] .admin-hub-card {
background: #111827 !important;
border-color: rgba(255, 255, 255, 0.08) !important;
color: #F8FAFC !important;
}
body[data-theme="dark"] .admin-table-container {
background: #111827 !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
body[data-theme="dark"] .admin-table th {
background: #162032 !important;
color: #94A3B8 !important;
border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body[data-theme="dark"] .admin-table td {
border-bottom-color: rgba(255, 255, 255, 0.06) !important;
color: #E2E8F0 !important;
}
body[data-theme="dark"] .admin-table tr:hover td {
background: rgba(255, 255, 255, 0.03) !important;
}
body[data-theme="dark"] .admin-modal-card {
background: #111827 !important;
border-color: rgba(255, 255, 255, 0.12) !important;
color: #F8FAFC !important;
}
body[data-theme="dark"] .admin-dashboard-wrap .admin-input,
body[data-theme="dark"] .admin-dashboard-wrap .admin-select,
body[data-theme="dark"] .admin-dashboard-wrap .admin-textarea,
body[data-theme="dark"] .admin-dashboard-wrap input[type="text"],
body[data-theme="dark"] .admin-dashboard-wrap input[type="password"],
body[data-theme="dark"] .admin-dashboard-wrap input[type="number"],
body[data-theme="dark"] .admin-dashboard-wrap input[type="url"],
body[data-theme="dark"] .admin-dashboard-wrap select,
body[data-theme="dark"] .admin-dashboard-wrap textarea {
background: #0B1120 !important;
border-color: rgba(255, 255, 255, 0.12) !important;
color: #F8FAFC !important;
}
/* ==========================================================================
EliteMods Global - New Mobile/Card Admin Panel UI (Website Color Tune)
========================================================================== */
.emg-admin-body {
min-height: 100vh;
background: #101014;
background-image: url('../assets/dark-bg.png');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 1.5rem 1rem;
box-sizing: border-box;
font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
color: #FAFAFA;
transition: background 0.3s ease, color 0.3s ease;
}
@media (max-width: 768px) {
.emg-admin-body {
background-image: url('../assets/dark-bg-mobile.png');
padding: 1rem 0.65rem;
}
}
body[data-theme="light"] .emg-admin-body,
html[data-theme="light"] body.admin-body {
background: #F4F4F5 !important;
background-image: radial-gradient(circle at 50% 0%, rgba(30, 90, 168, 0.08) 0%, transparent 60%) !important;
color: #18181B !important;
}
/* Floating Glass Card Shell */
.emg-admin-shell {
width: 100%;
max-width: 480px;
background: rgba(18, 18, 26, 0.88);
border: 1px solid rgba(255, 255, 255, 0.12);
border-top: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 28px;
padding: 1.5rem 1.35rem 1.65rem;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(30, 90, 168, 0.15);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-sizing: border-box;
position: relative;
overflow: hidden;
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
body[data-theme="light"] .emg-admin-shell {
background: #FFFFFF !important;
border: 1.5px solid #E4E4E7 !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
color: #18181B !important;
}
/* Screen Internal Header */
.emg-screen-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
gap: 0.75rem;
}
.emg-screen-header-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.emg-cube-logo {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px;
background: linear-gradient(135deg, #1E5AA8 0%, #00AFAE 100%);
box-shadow: 0 4px 14px rgba(30, 90, 168, 0.4);
flex-shrink: 0;
}
.emg-header-title {
font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
font-size: 1.28rem;
font-weight: 800;
color: #FFFFFF;
margin: 0;
letter-spacing: -0.01em;
}
body[data-theme="light"] .emg-header-title {
color: #18181B;
}
.emg-brand-gradient-text {
background: linear-gradient(135deg, #4A7FC8 0%, #00D8D6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
body[data-theme="light"] .emg-brand-gradient-text {
background: linear-gradient(135deg, #1E5AA8 0%, #00AFAE 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.emg-header-icon-btn {
width: 38px;
height: 38px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-top: 1px solid rgba(255, 255, 255, 0.22);
color: #F8FAFC;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.1rem;
transition: all 0.2s ease;
}
.emg-header-icon-btn:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(0, 175, 174, 0.45);
transform: scale(1.05);
}
body[data-theme="light"] .emg-header-icon-btn {
background: #F4F4F5;
border-color: #E4E4E7;
color: #18181B;
}
body[data-theme="light"] .emg-header-icon-btn:hover {
background: #E4E4E7;
border-color: #1E5AA8;
}
/* Compact Theme Toggle inside Card */
.emg-card-theme-toggle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.75rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #A1A1AA;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
}
.emg-card-theme-toggle:hover {
background: rgba(255, 255, 255, 0.12);
color: #FFFFFF;
border-color: rgba(0, 175, 174, 0.45);
}
body[data-theme="light"] .emg-card-theme-toggle {
background: #F4F4F5;
border-color: #E4E4E7;
color: #52525B;
}
body[data-theme="light"] .emg-card-theme-toggle:hover {
background: #E4E4E7;
color: #18181B;
}
/* Full Width Sub-Header Back Pill */
.emg-back-pill-btn {
width: 100%;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.1rem;
border-radius: 16px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.2);
color: #E4E4E7;
font-size: 0.94rem;
font-weight: 700;
cursor: pointer;
margin-bottom: 1.15rem;
box-sizing: border-box;
transition: all 0.2s ease;
}
.emg-back-pill-btn:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
border-color: rgba(0, 175, 174, 0.4);
transform: translateX(-2px);
color: #FFFFFF;
}
body[data-theme="light"] .emg-back-pill-btn {
background: #FAFAFA;
border-color: #E4E4E7;
color: #18181B;
}
body[data-theme="light"] .emg-back-pill-btn:hover {
background: #FFFFFF;
border-color: #1E5AA8;
color: #1E5AA8;
}
/* Vertical Menu Pills on Main Hub */
.emg-menu-pill-list {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.emg-menu-pill {
width: 100%;
display: flex;
align-items: center;
gap: 1rem;
padding: 0.95rem 1.25rem;
border-radius: 18px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #FAFAFA;
font-size: 0.98rem;
font-weight: 700;
cursor: pointer;
box-sizing: border-box;
transition: all 0.2s ease;
text-decoration: none;
user-select: none;
}
.emg-menu-pill:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
border-color: rgba(0, 175, 174, 0.5);
border-top: 1px solid rgba(255, 255, 255, 0.35);
transform: translateY(-2px);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 8px 20px rgba(0, 0, 0, 0.4);
color: #FFFFFF;
}
.emg-menu-pill:active {
transform: scale(0.98);
}
body[data-theme="light"] .emg-menu-pill {
background: #FAFAFA;
border: 1px solid #E4E4E7;
color: #18181B;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
body[data-theme="light"] .emg-menu-pill:hover {
background: #FFFFFF;
border-color: #1E5AA8;
color: #1E5AA8;
box-shadow: 0 6px 16px rgba(30, 90, 168, 0.1);
}
/* Highlighted View Website Pill (Website Signature Gradient) */
.emg-menu-pill-highlight {
background: linear-gradient(135deg, #1E5AA8 0%, #00AFAE 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
color: #FFFFFF !important;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 10px 24px rgba(30, 90, 168, 0.45) !important;
}
.emg-menu-pill-highlight:hover {
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 14px 30px rgba(0, 175, 174, 0.55) !important;
transform: translateY(-2px);
color: #FFFFFF !important;
}
.emg-pill-icon {
font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
flex-shrink: 0;
}
.emg-pill-text {
flex: 1;
text-align: left;
}
.emg-pill-badge {
font-size: 0.72rem;
font-weight: 800;
padding: 2px 8px;
border-radius: 9999px;
background: rgba(30, 90, 168, 0.3);
border: 1px solid rgba(0, 175, 174, 0.35);
color: #00D8D6;
}
body[data-theme="light"] .emg-pill-badge {
background: rgba(30, 90, 168, 0.1);
border: 1px solid rgba(30, 90, 168, 0.25);
color: #1E5AA8;
}
/* Total Apps / Overview Hero Card */
.emg-stat-hero-card {
background: linear-gradient(145deg, rgba(30, 90, 168, 0.22) 0%, rgba(0, 175, 174, 0.12) 100%);
border: 1px solid rgba(0, 175, 174, 0.35);
border-top: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 22px;
padding: 1.2rem;
margin-bottom: 0.95rem;
box-sizing: border-box;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.4);
}
body[data-theme="light"] .emg-stat-hero-card {
background: linear-gradient(145deg, rgba(30, 90, 168, 0.08) 0%, rgba(0, 175, 174, 0.05) 100%);
border: 1px solid rgba(30, 90, 168, 0.2);
box-shadow: 0 4px 16px rgba(30, 90, 168, 0.08);
}
.emg-stat-hero-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.1rem;
}
.emg-stat-hero-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.emg-stat-hero-icon-box {
width: 44px;
height: 44px;
border-radius: 14px;
background: rgba(30, 90, 168, 0.2);
border: 1px solid rgba(0, 175, 174, 0.4);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
color: #00D8D6;
flex-shrink: 0;
}
.emg-stat-hero-title {
font-size: 1.08rem;
font-weight: 800;
color: #FFFFFF;
}
body[data-theme="light"] .emg-stat-hero-title {
color: #18181B;
}
.emg-stat-hero-badge {
background: rgba(16, 16, 24, 0.7);
border: 1.2px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
padding: 0.35rem 0.95rem;
font-size: 1.25rem;
font-weight: 900;
color: #FFFFFF;
font-family: var(--font-mono, monospace);
}
body[data-theme="light"] .emg-stat-hero-badge {
background: #FFFFFF;
border-color: #CBD5E1;
color: #18181B;
}
/* Gradient Action Button (Website Accent Gradient) */
.emg-btn-add-gradient {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 0.85rem 1.25rem;
border-radius: 16px;
background: linear-gradient(135deg, #1E5AA8 0%, #00AFAE 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #FFFFFF;
font-size: 0.96rem;
font-weight: 800;
cursor: pointer;
box-shadow: 0 8px 20px rgba(30, 90, 168, 0.4);
transition: all 0.2s ease;
}
.emg-btn-add-gradient:hover {
box-shadow: 0 12px 28px rgba(0, 175, 174, 0.5);
transform: translateY(-2px);
}
.emg-btn-add-gradient:active {
transform: scale(0.98);
}
/* Manage All Apps / Sub-nav Link Card */
.emg-nav-action-card {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.9rem 1.15rem;
border-radius: 18px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.2);
color: #FFFFFF;
cursor: pointer;
box-sizing: border-box;
margin-bottom: 1.15rem;
transition: all 0.2s ease;
}
.emg-nav-action-card:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
border-color: rgba(0, 175, 174, 0.45);
transform: translateY(-1px);
}
body[data-theme="light"] .emg-nav-action-card {
background: #FAFAFA;
border-color: #E4E4E7;
color: #18181B;
}
body[data-theme="light"] .emg-nav-action-card:hover {
background: #FFFFFF;
border-color: #1E5AA8;
color: #1E5AA8;
}
.emg-nav-card-left {
display: flex;
align-items: center;
gap: 0.85rem;
}
.emg-nav-card-icon-box {
width: 38px;
height: 38px;
border-radius: 12px;
background: rgba(30, 90, 168, 0.2);
border: 1px solid rgba(0, 175, 174, 0.35);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: #00D8D6;
flex-shrink: 0;
}
.emg-nav-card-title {
font-size: 0.96rem;
font-weight: 800;
}
.emg-nav-card-chevron {
color: #A1A1AA;
font-size: 1.25rem;
font-weight: 700;
}
/* Manage View App / Prompt Card Item (Mobile-first Base) */
.emg-app-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* Card Container */
.emg-app-row-card {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0.85rem 1rem;
border-radius: 18px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.09);
border-top: 1px solid rgba(255, 255, 255, 0.18);
box-sizing: border-box;
transition: all 0.2s ease;
}
.emg-app-row-card:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
border-color: rgba(0, 175, 174, 0.4);
}
body[data-theme="light"] .emg-app-row-card {
background: #FAFAFA;
border-color: #E4E4E7;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
body[data-theme="light"] .emg-app-row-card:hover {
background: #FFFFFF;
border-color: #1E5AA8;
box-shadow: 0 4px 12px rgba(30, 90, 168, 0.08);
}
/* Tier 1: Main Info (Icon + Text + Meta) */
.emg-app-row-info,
.emg-card-main-info {
display: flex;
align-items: center;
gap: 0.85rem;
min-width: 0;
width: 100%;
}
.emg-app-row-icon {
width: 46px;
height: 46px;
min-width: 46px;
min-height: 46px;
border-radius: 14px;
background: linear-gradient(135deg, #1E5AA8 0%, #00AFAE 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
color: #FFFFFF;
flex-shrink: 0;
overflow: hidden;
box-shadow: 0 4px 12px rgba(30, 90, 168, 0.3);
}
.emg-app-row-icon img {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
}
.emg-app-row-text {
min-width: 0;
flex: 1;
overflow: hidden;
}
.emg-app-title-line {
display: flex;
align-items: center;
gap: 0.45rem;
flex-wrap: wrap;
}
.emg-app-name {
font-size: 0.96rem;
font-weight: 800;
color: #FFFFFF;
line-height: 1.3;
word-break: normal;
overflow-wrap: break-word;
display: block;
}
body[data-theme="light"] .emg-app-name {
color: #18181B;
}
.emg-app-sub {
font-size: 0.74rem;
color: #A1A1AA;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
body[data-theme="light"] .emg-app-sub {
color: #71717A;
}
.emg-app-meta-row {
display: flex;
align-items: center;
gap: 0.45rem;
flex-wrap: wrap;
margin-top: 0.3rem;
}
.emg-meta-pill {
font-size: 0.7rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 6px;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.emg-meta-version {
background: rgba(255, 255, 255, 0.08);
color: #E2E8F0;
font-family: var(--font-mono, monospace);
}
body[data-theme="light"] .emg-meta-version {
background: #E4E4E7;
color: #3F3F46;
}
.emg-meta-category {
background: rgba(30, 90, 168, 0.2);
color: #60A5FA;
border: 1px solid rgba(74, 127, 200, 0.3);
}
body[data-theme="light"] .emg-meta-category {
background: rgba(30, 90, 168, 0.1);
color: #1E5AA8;
border-color: rgba(30, 90, 168, 0.2);
}
.emg-meta-mod {
background: rgba(0, 175, 174, 0.16);
color: #00D8D6;
border: 1px solid rgba(0, 175, 174, 0.3);
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body[data-theme="light"] .emg-meta-mod {
background: rgba(0, 175, 174, 0.08);
color: #0D9488;
border-color: rgba(0, 175, 174, 0.22);
}
.emg-meta-sub {
font-size: 0.72rem;
color: #94A3B8;
}
.emg-badge-hot {
background: linear-gradient(135deg, #EF4444, #F43F5E);
color: #FFFFFF;
font-size: 0.65rem;
font-weight: 900;
padding: 1.5px 6px;
border-radius: 9999px;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}
/* Tier 2: Action Buttons Group (Mobile default: full-width horizontal button bar) */
.emg-action-buttons-group {
display: flex;
align-items: center;
gap: 0.45rem;
width: 100%;
padding-top: 0.55rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
box-sizing: border-box;
}
body[data-theme="light"] .emg-action-buttons-group {
border-top-color: #E4E4E7;
}
.emg-btn-action {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.4rem;
height: 38px;
padding: 0.45rem 0.65rem;
border-radius: 12px;
font-size: 0.76rem;
font-weight: 800;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease;
border-width: 1.2px;
border-style: solid;
box-sizing: border-box;
white-space: nowrap;
}
.emg-btn-action svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
/* Edit Button (Royal Blue) */
.emg-btn-edit {
background: rgba(30, 90, 168, 0.18);
border-color: rgba(74, 127, 200, 0.45);
color: #60A5FA;
}
.emg-btn-edit:hover {
background: rgba(30, 90, 168, 0.32);
color: #93C5FD;
border-color: #4A7FC8;
transform: translateY(-1px);
}
body[data-theme="light"] .emg-btn-edit {
background: rgba(30, 90, 168, 0.1);
border-color: rgba(30, 90, 168, 0.25);
color: #1E5AA8;
}
body[data-theme="light"] .emg-btn-edit:hover {
background: rgba(30, 90, 168, 0.18);
color: #15427D;
}
/* Del Button (Red - Highlighted) */
.emg-btn-del,
.emg-btn-delete {
background: rgba(239, 68, 68, 0.18) !important;
border-color: rgba(239, 68, 68, 0.5) !important;
color: #F87171 !important;
}
.emg-btn-del:hover,
.emg-btn-delete:hover {
background: rgba(239, 68, 68, 0.38) !important;
color: #FFFFFF !important;
border-color: #EF4444 !important;
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
transform: translateY(-1px);
}
body[data-theme="light"] .emg-btn-del,
body[data-theme="light"] .emg-btn-delete {
background: rgba(239, 68, 68, 0.12) !important;
border-color: rgba(239, 68, 68, 0.4) !important;
color: #DC2626 !important;
}
body[data-theme="light"] .emg-btn-del:hover,
body[data-theme="light"] .emg-btn-delete:hover {
background: #DC2626 !important;
border-color: #B91C1C !important;
color: #FFFFFF !important;
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);
}
/* View Button (Vibrant Teal / Cyan) */
.emg-btn-view {
background: rgba(0, 175, 174, 0.18);
border-color: rgba(0, 175, 174, 0.45);
color: #00D8D6;
}
.emg-btn-view:hover {
background: rgba(0, 175, 174, 0.32);
color: #5EEAD4;
border-color: #00AFAE;
transform: translateY(-1px);
}
body[data-theme="light"] .emg-btn-view {
background: rgba(0, 175, 174, 0.1);
border-color: rgba(0, 175, 174, 0.28);
color: #0D9488;
}
body[data-theme="light"] .emg-btn-view:hover {
background: rgba(0, 175, 174, 0.18);
color: #0F766E;
}
/* Executive Manage Toolbar (Mobile default: stacked) */
.emg-manage-toolbar {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin-bottom: 1rem;
}
.emg-toolbar-search-box {
width: 100%;
}
.emg-toolbar-actions {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
}
.emg-toolbar-select {
flex: 1;
margin-bottom: 0 !important;
}
.emg-toolbar-add-btn {
flex: 1;
margin-bottom: 0 !important;
padding: 0.75rem 1rem !important;
font-size: 0.88rem !important;
height: 44px;
}
/* Executive Overview Grid (Mobile default: single column) */
.emg-overview-grid {
display: flex;
flex-direction: column;
gap: 0.95rem;
margin-bottom: 1.15rem;
}
/* Search input inside card */
.emg-card-search-wrap {
margin-bottom: 0.95rem;
}
.emg-card-search-input {
width: 100%;
padding: 0.75rem 1rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #FFFFFF;
font-size: 0.88rem;
box-sizing: border-box;
transition: all 0.2s ease;
}
.emg-card-search-input:focus {
outline: none;
border-color: #00AFAE;
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 14px rgba(0, 175, 174, 0.3);
}
body[data-theme="light"] .emg-card-search-input {
background: #FFFFFF;
border-color: #E4E4E7;
color: #18181B;
}
body[data-theme="light"] .emg-card-search-input:focus {
border-color: #1E5AA8;
background: #FFFFFF;
box-shadow: 0 0 12px rgba(30, 90, 168, 0.2);
}
/* View transition animation */
.emg-view-pane {
display: none;
animation: emgFadeSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.emg-view-pane.active {
display: block;
}
@keyframes emgFadeSlideIn {
from {
opacity: 0;
transform: translateY(8px) scale(0.99);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Backup Layout (Mobile Default: Single Column) */
.emg-backup-layout {
display: flex;
flex-direction: column;
gap: 1rem;
}
.emg-backup-col {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* ==========================================================================
Dedicated Desktop / PC View System (Screens >= 769px)
========================================================================== */
@media (min-width: 769px) {
.emg-admin-body {
padding: 2.5rem 1.5rem 3.5rem;
}
/* Expand Card Shell to wide desktop format */
.emg-admin-shell {
max-width: 1160px;
padding: 2.25rem 2.5rem 2.75rem;
border-radius: 32px;
}
/* Header enhancements on PC */
.emg-screen-header {
margin-bottom: 1.75rem;
padding-bottom: 1.1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body[data-theme="light"] .emg-screen-header {
border-bottom-color: #E4E4E7;
}
.emg-header-title {
font-size: 1.5rem;
}
.emg-cube-logo {
width: 40px;
height: 40px;
border-radius: 12px;
}
.emg-header-icon-btn {
width: 42px;
height: 42px;
border-radius: 14px;
font-size: 1.2rem;
}
/* Desktop Back Pill: Compact inline pill instead of 1040px wide bar */
.emg-back-pill-btn {
width: auto !important;
display: inline-flex !important;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1.25rem;
font-size: 0.88rem;
border-radius: 14px;
margin-bottom: 1.35rem;
}
/* VIEW 1: Main Admin Hub on PC (Modern 2-Column Grid) */
#viewHub .emg-menu-pill-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.1rem;
}
#viewHub .emg-menu-pill-highlight {
grid-column: 1 / -1;
padding: 1.2rem 1.6rem;
font-size: 1.05rem;
border-radius: 20px;
}
#viewHub .emg-menu-pill {
padding: 1.1rem 1.4rem;
font-size: 1.02rem;
border-radius: 20px;
}
#viewHub button[onclick*="handleAdminLogout"] {
grid-column: 1 / -1;
margin-top: 0.5rem;
padding: 1.1rem;
}
/* VIEW 2 & 4: Overview Screens on PC (2-Column Side-by-Side Grid) */
.emg-overview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.35rem;
margin-bottom: 1.5rem;
}
.emg-overview-grid .emg-stat-hero-card,
.emg-overview-grid .emg-nav-action-card {
margin-bottom: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.emg-stat-hero-card {
padding: 1.5rem 1.85rem;
border-radius: 24px;
}
.emg-stat-hero-top {
margin-bottom: 1.25rem;
}
.emg-btn-add-gradient {
width: 100%;
padding: 0.9rem 1.5rem;
font-size: 0.98rem;
border-radius: 16px;
}
.emg-nav-action-card {
padding: 1.5rem 1.85rem;
border-radius: 24px;
}
/* Executive Toolbar on PC: Single Clean Line */
.emg-manage-toolbar {
flex-direction: row;
align-items: center;
gap: 0.85rem;
margin-bottom: 1.35rem;
}
.emg-toolbar-search-box {
flex: 1;
}
.emg-toolbar-actions {
width: auto;
gap: 0.75rem;
}
.emg-toolbar-select {
flex: initial;
width: auto;
min-width: 170px;
}
.emg-toolbar-add-btn {
flex: initial;
width: auto;
min-width: 150px;
padding: 0.75rem 1.35rem !important;
}
/* VIEW 3, 4B, 5, 6: Management Cards on PC */
.emg-app-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
gap: 1.15rem;
}
/* On PC: Horizontal Card Row */
.emg-app-row-card {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.95rem 1.25rem;
border-radius: 20px;
}
.emg-app-row-info,
.emg-card-main-info {
flex: 1;
min-width: 0;
gap: 0.95rem;
}
.emg-app-row-icon {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
border-radius: 15px;
font-size: 1.45rem;
}
.emg-app-name {
font-size: 1.02rem;
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
}
.emg-action-buttons-group {
width: auto;
padding-top: 0;
border-top: none;
gap: 0.4rem;
flex-shrink: 0;
}
.emg-btn-action {
flex: initial;
height: 36px;
padding: 0.4rem 0.65rem;
font-size: 0.78rem;
min-width: auto;
border-radius: 11px;
gap: 0.35rem;
}
.emg-btn-action svg {
width: 14px;
height: 14px;
}
/* VIEW 7: Settings Form on PC (2-Column Side-by-Side) */
#siteSettingsForm {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.35rem;
align-items: start;
}
#siteSettingsForm > div {
margin-bottom: 0 !important;
box-sizing: border-box;
}
#siteSettingsForm > button[type="submit"] {
grid-column: 1 / -1;
margin-top: 0.75rem;
padding: 1rem;
font-size: 1.02rem;
}
/* VIEW 8: Backup & Security on PC (2-Column Side-by-Side) */
.emg-backup-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.35rem;
align-items: start;
}
.emg-backup-col {
display: flex;
flex-direction: column;
gap: 1.35rem;
}
}
/* ==========================================================================
Website Main Navigation Tabs in Home View
========================================================================== */
.home-main-tabs-bar {
display: flex;
align-items: center;
gap: 0.5rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 0.35rem 0.2rem 0.75rem 0.2rem;
margin: 0.25rem 0 0.5rem 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.home-main-tabs-bar::-webkit-scrollbar {
display: none;
}
.home-main-tab-item {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 0.95rem;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 999px;
color: var(--text-main);
font-size: 0.85rem;
font-weight: 700;
font-family: inherit;
cursor: pointer;
white-space: nowrap;
user-select: none;
transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
flex-shrink: 0;
outline: none;
}
.home-main-tab-item:hover {
background: var(--surface-2);
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(30, 90, 168, 0.12);
}
.home-main-tab-item:active {
transform: scale(0.96);
}
.home-main-tab-item.active {
background: var(--accent);
color: #ffffff;
border-color: var(--accent);
box-shadow: 0 4px 14px rgba(30, 90, 168, 0.32);
}
.home-main-tab-icon {
font-size: 1rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.home-main-tab-label {
letter-spacing: -0.01em;
}
body[data-theme="dark"] .home-main-tab-item {
background: rgba(30, 30, 45, 0.65);
border-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
body[data-theme="dark"] .home-main-tab-item:hover {
background: rgba(45, 45, 65, 0.85);
border-color: var(--accent-light);
}
body[data-theme="dark"] .home-main-tab-item.active {
background: var(--accent);
color: #ffffff;
border-color: var(--accent-light);
box-shadow: 0 4px 16px rgba(74, 127, 200, 0.4);
}
/* ==========================================================================
Clean Rectangular Cards in Home View (No Clutter Text)
========================================================================== */
.playstore-list-item-clean {
padding: 0.75rem 1rem !important;
min-height: 72px !important;
display: flex !important;
align-items: center !important;
border-radius: 18px !important;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s ease, border-color 0.22s ease !important;
}
.playstore-list-item-clean .playstore-list-title {
font-size: 1rem !important;
font-weight: 750 !important;
color: var(--text-main) !important;
margin: 0 !important;
line-height: 1.3 !important;
}
.playstore-list-item-clean:hover {
transform: translateY(-2px) !important;
border-color: var(--accent) !important;
box-shadow: 0 8px 22px rgba(30, 90, 168, 0.14) !important;
}
.playstore-list-arrow {
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
color: var(--text-muted);
opacity: 0.55;
transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
flex-shrink: 0;
}
.playstore-list-item-clean:hover .playstore-list-arrow {
transform: translateX(3px);
opacity: 1;
color: var(--accent);
}
/* ==========================================================================
Cyber Defense Threat Scare Trap Modal & HUD
========================================================================== */
.cyber-defense-modal-overlay {
position: fixed;
inset: 0;
z-index: 999999;
background: rgba(10, 0, 0, 0.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
display: none;
align-items: center;
justify-content: center;
padding: 1.25rem;
box-sizing: border-box;
animation: cyberFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.cyber-defense-modal-overlay.active {
display: flex;
}
body.cyber-lockdown-active {
overflow: hidden !important;
}
@keyframes cyberFadeIn {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
.cyber-modal-container {
position: relative;
max-width: 580px;
width: 100%;
background: #0d0709;
border: 2px solid #ef4444;
border-radius: 20px;
box-shadow: 0 0 45px rgba(239, 68, 68, 0.5), inset 0 0 25px rgba(239, 68, 68, 0.15);
padding: 1.5rem;
color: #fca5a5;
font-family: 'JetBrains Mono', monospace, -apple-system, BlinkMacSystemFont, sans-serif;
box-sizing: border-box;
overflow: hidden;
}
.cyber-modal-scanlines {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
rgba(18, 16, 16, 0) 50%,
rgba(0, 0, 0, 0.25) 50%
), linear-gradient(
90deg,
rgba(255, 0, 0, 0.04),
rgba(255, 0, 0, 0.01),
rgba(255, 0, 0, 0.04)
);
background-size: 100% 3px, 6px 100%;
z-index: 1;
opacity: 0.7;
}
.cyber-modal-header {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.25rem;
border-bottom: 1px dashed rgba(239, 68, 68, 0.35);
padding-bottom: 1rem;
}
.cyber-pulse-radar {
width: 54px;
height: 54px;
min-width: 54px;
border-radius: 50%;
background: rgba(239, 68, 68, 0.18);
border: 2px solid #ef4444;
display: flex;
align-items: center;
justify-content: center;
position: relative;
animation: cyberRadarPulse 1.4s infinite;
}
@keyframes cyberRadarPulse {
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
70% { box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); }
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.cyber-radar-icon {
font-size: 1.6rem;
animation: cyberIconFlicker 0.6s infinite alternate;
}
@keyframes cyberIconFlicker {
0% { opacity: 0.8; transform: scale(0.95); }
100% { opacity: 1; transform: scale(1.05); }
}
.cyber-header-texts {
flex: 1;
min-width: 0;
}
.cyber-hud-badge {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.12em;
color: #f87171;
background: rgba(239, 68, 68, 0.15);
display: inline-block;
padding: 0.15rem 0.5rem;
border-radius: 4px;
margin-bottom: 0.25rem;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.cyber-title {
font-size: 1.15rem;
font-weight: 800;
color: #ffffff;
margin: 0;
font-family: 'Hind Siliguri', 'Plus Jakarta Sans', sans-serif;
line-height: 1.35;
text-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}
.cyber-subtitle {
font-size: 0.68rem;
color: #fca5a5;
margin: 0.2rem 0 0 0;
opacity: 0.85;
letter-spacing: 0.04em;
}
.cyber-terminal-hud {
position: relative;
z-index: 2;
background: #000000;
border: 1px solid rgba(239, 68, 68, 0.4);
border-radius: 12px;
overflow: hidden;
margin-bottom: 1.15rem;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
}
.cyber-terminal-top {
background: #18080a;
padding: 0.45rem 0.85rem;
display: flex;
align-items: center;
gap: 0.4rem;
border-bottom: 1px solid rgba(239, 68, 68, 0.25);
}
.terminal-dot {
width: 9px;
height: 9px;
border-radius: 50%;
}
.terminal-dot.red { background: #ef4444; }
.terminal-dot.yellow { background: #f59e0b; }
.terminal-dot.green { background: #10b981; }
.terminal-title {
font-size: 0.68rem;
font-weight: 700;
color: #f87171;
margin-left: 0.4rem;
letter-spacing: 0.08em;
}
.cyber-terminal-body {
padding: 0.85rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
font-size: 0.78rem;
}
.term-line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.45rem;
line-height: 1.45;
}
.term-tag {
color: #9ca3af;
font-weight: 700;
}
.term-tag.alert {
color: #ef4444;
font-weight: 800;
}
.term-tag.status {
color: #34d399;
}
.term-val-alert {
color: #f87171;
font-weight: 700;
}
.term-val-success {
color: #34d399;
font-weight: 700;
}
.term-code {
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.35);
padding: 0.1rem 0.45rem;
border-radius: 4px;
color: #fecaca;
word-break: break-all;
font-size: 0.74rem;
}
.cyber-warning-box {
position: relative;
z-index: 2;
background: rgba(239, 68, 68, 0.09);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 12px;
padding: 0.75rem 0.95rem;
display: flex;
gap: 0.75rem;
align-items: flex-start;
margin-bottom: 1.25rem;
}
.cyber-warning-icon {
font-size: 1.4rem;
line-height: 1;
}
.cyber-warning-text {
font-family: 'Hind Siliguri', sans-serif;
font-size: 0.82rem;
color: #fee2e2;
line-height: 1.5;
}
.cyber-modal-actions {
position: relative;
z-index: 2;
}
.cyber-btn-abort {
width: 100%;
padding: 0.85rem 1.2rem;
background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
border: 1px solid #f87171;
border-radius: 12px;
color: #ffffff;
font-family: 'Hind Siliguri', 'Plus Jakarta Sans', sans-serif;
font-size: 0.95rem;
font-weight: 800;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
box-shadow: 0 4px 20px rgba(220, 38, 38, 0.45);
transition: transform 0.18s ease, filter 0.18s ease;
}
.cyber-btn-abort:hover {
filter: brightness(1.15);
transform: translateY(-1px);
box-shadow: 0 6px 25px rgba(220, 38, 38, 0.6);
}
.cyber-btn-abort:active {
transform: scale(0.98);
}
.cyber-countdown-pill {
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: 0.82rem;
font-family: 'JetBrains Mono', monospace;
font-weight: 800;
color: #fecaca;
}
/* ==========================================================================
IMAGE 1 STYLES: App Detail Stats Grid, Download APK, Telegram & Play Store
========================================================================== */
.sojib-stats-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.55rem;
margin: 1.15rem 0;
width: 100%;
box-sizing: border-box;
}
.date-compact {
display: none;
}
.date-full {
display: inline;
}
@media (max-width: 680px) {
.sojib-stats-grid {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 3px !important;
width: 100% !important;
margin: 0.95rem 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow-x: visible !important;
}
.sojib-stats-grid::-webkit-scrollbar {
display: none !important;
}
.sojib-stat-card {
flex: none !important;
min-width: 0 !important;
width: 100% !important;
padding: 0.55rem 1.5px !important;
border-radius: 12px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
.sojib-stat-lbl {
font-size: 0.51rem !important;
font-weight: 750 !important;
letter-spacing: -0.015em !important;
margin-bottom: 0.2rem !important;
line-height: 1.15 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
max-width: 100% !important;
text-align: center !important;
}
.sojib-stat-val {
font-size: 0.78rem !important;
font-weight: 800 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
max-width: 100% !important;
text-align: center !important;
}
.sojib-stat-val.sojib-stat-date {
font-size: 0.73rem !important;
letter-spacing: -0.02em !important;
}
.sojib-stat-date .date-compact {
display: inline !important;
}
.sojib-stat-date .date-full {
display: none !important;
}
}
@media (max-width: 360px) {
.sojib-stats-grid {
gap: 2px !important;
}
.sojib-stat-card {
padding: 0.45rem 1px !important;
border-radius: 10px !important;
}
.sojib-stat-lbl {
font-size: 0.47rem !important;
letter-spacing: -0.02em !important;
}
.sojib-stat-val {
font-size: 0.72rem !important;
}
.sojib-stat-val.sojib-stat-date {
font-size: 0.67rem !important;
}
}
.sojib-stat-card {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 0.75rem 0.5rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
min-width: 0;
}
.sojib-stat-card:hover {
transform: translateY(-2px);
border-color: #05c167;
box-shadow: 0 4px 14px rgba(5, 193, 103, 0.15);
}
.sojib-stat-lbl {
font-size: 0.65rem;
font-weight: 750;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.sojib-stat-val {
font-size: 0.95rem;
font-weight: 800;
color: var(--text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
body[data-theme="dark"] .sojib-stat-card {
background: rgba(30, 30, 45, 0.75);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.sojib-download-apk-btn {
width: 100%;
padding: 0.95rem 1.25rem;
background: #05c167;
color: #ffffff;
font-family: inherit;
font-size: 1.05rem;
font-weight: 800;
border: none;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
cursor: pointer;
box-shadow: 0 8px 24px rgba(5, 193, 103, 0.35);
transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
margin-bottom: 0.75rem;
user-select: none;
}
.sojib-download-apk-btn:hover {
background: #04af5d;
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(5, 193, 103, 0.45);
}
.sojib-download-apk-btn:active {
transform: scale(0.98);
}
.sojib-actions-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 1.25rem;
width: 100%;
box-sizing: border-box;
}
.sojib-sub-action-btn {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 0.75rem 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
color: var(--text-main);
font-size: 0.92rem;
font-weight: 750;
font-family: inherit;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
user-select: none;
}
.sojib-sub-action-btn:hover {
background: var(--surface-2);
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.sojib-sub-action-btn:active {
transform: scale(0.98);
}
body[data-theme="dark"] .sojib-sub-action-btn {
background: rgba(30, 30, 45, 0.75);
border-color: rgba(255, 255, 255, 0.12);
}
body[data-theme="dark"] .sojib-sub-action-btn:hover {
background: rgba(45, 45, 65, 0.85);
border-color: rgba(255, 255, 255, 0.25);
}
/* ==========================================================================
IMAGE 2 STYLES: Centered Floating Download Modal Card with Countdown
========================================================================== */
.sojib-download-view-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.25rem;
min-height: calc(100vh - 150px);
padding: 1.5rem 0.5rem;
box-sizing: border-box;
width: 100%;
}
.sojib-download-modal-card {
position: relative;
max-width: 420px;
width: 100%;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 26px;
padding: 2.25rem 1.5rem 2rem 1.5rem;
text-align: center;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(0, 0, 0, 0.04);
box-sizing: border-box;
margin: 0 auto;
animation: cardCascade 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (max-width: 480px) {
.sojib-download-view-wrap {
padding: 1rem 0;
}
.sojib-download-modal-card {
padding: 2rem 1.15rem 1.75rem 1.15rem;
border-radius: 22px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
}
body[data-theme="dark"] .sojib-download-modal-card {
background: #181824;
border-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
.sojib-card-close-btn {
position: absolute;
top: 18px;
right: 18px;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--surface-2);
border: none;
font-size: 14px;
font-weight: 700;
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.sojib-card-close-btn:hover {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
transform: rotate(90deg);
}
.sojib-card-icon-wrap {
width: 86px;
height: 86px;
margin: 0 auto 1.15rem auto;
border-radius: 24%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
.sojib-card-icon-wrap img,
.sojib-card-icon-wrap .arch-icon {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sojib-card-app-title {
font-size: 1.4rem;
font-weight: 800;
color: var(--text-main);
margin: 0 0 0.35rem 0;
letter-spacing: -0.01em;
}
.sojib-card-app-sub {
font-size: 0.88rem;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 1.35rem;
}
.sojib-status-text {
font-size: 0.95rem;
font-weight: 750;
color: #05c167;
margin-bottom: 1.35rem;
min-height: 24px;
transition: color 0.3s ease;
}
.sojib-status-text.ready {
color: #05c167;
animation: pulseReady 1.2s infinite alternate ease-in-out;
}
@keyframes pulseReady {
0% { opacity: 0.85; transform: scale(0.98); }
100% { opacity: 1; transform: scale(1.02); }
}
.sojib-telegram-pill-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
background: #f0f4f9;
border-radius: 9999px;
padding: 0.8rem 1.25rem;
text-decoration: none;
color: #0f172a;
font-weight: 750;
font-size: 0.92rem;
width: 100%;
box-sizing: border-box;
margin-bottom: 0.55rem;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.sojib-telegram-pill-btn:hover {
background: #e2e8f0;
transform: translateY(-1px);
border-color: rgba(2, 132, 199, 0.3);
}
body[data-theme="dark"] .sojib-telegram-pill-btn {
background: rgba(255, 255, 255, 0.08);
color: #f1f5f9;
}
body[data-theme="dark"] .sojib-telegram-pill-btn:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.2);
}
.sojib-telegram-hint {
font-size: 0.76rem;
color: var(--text-muted);
margin-bottom: 1.5rem;
line-height: 1.4;
}
.sojib-final-btn-area {
width: 100%;
}
.sojib-btn-download-now {
width: 100%;
padding: 0.92rem 1.25rem;
background: #05c167;
color: #ffffff;
font-family: inherit;
font-size: 1.05rem;
font-weight: 800;
border: none;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
cursor: pointer;
box-shadow: 0 8px 24px rgba(5, 193, 103, 0.35);
transition: all 0.2s ease;
user-select: none;
}
.sojib-btn-download-now:hover:not(:disabled) {
background: #04af5d;
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(5, 193, 103, 0.45);
}
.sojib-btn-download-now:active:not(:disabled) {
transform: scale(0.98);
}
.sojib-btn-download-now.btn-counting {
background: rgba(5, 193, 103, 0.45);
cursor: not-allowed;
box-shadow: none;
}
/* ==========================================================================
NON-INTRUSIVE SPECIFIC SPONSOR ADS SYSTEM (AUTO-SIZING & MULTI-AD ENGINE)
========================================================================== */
.emg-ads-group {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.15rem;
width: 100%;
margin: 1.25rem auto;
box-sizing: border-box;
}
.emg-ad-slot {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: fit-content;
max-width: 100%;
margin: 0 auto;
padding: 0;
background: transparent;
border: none;
border-radius: 12px;
box-shadow: none;
box-sizing: border-box;
overflow: visible;
transition: transform 0.2s ease;
}
.emg-ad-slot:hover {
box-shadow: none;
}
.emg-ad-download {
max-width: 100%;
margin: 0 auto;
}
.emg-ad-header {
display: none;
}
.emg-ad-badge {
display: none;
}
.emg-ad-banner-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
max-width: 100%;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
transition: transform 0.25s ease;
}
.emg-ad-banner-link:hover {
transform: scale(1.01);
}
.emg-ad-banner-img {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: none;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.emg-ad-embed {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: fit-content;
max-width: 100%;
min-height: auto;
overflow: visible;
border-radius: 12px;
}
.emg-ad-frame {
display: block;
width: 100%;
border: none;
overflow: hidden;
background: transparent;
transition: height 0.2s ease, width 0.2s ease;
}
.emg-ad-embed iframe,
.emg-ad-embed ins,
.emg-ad-embed img {
max-width: 100% !important;
border-radius: 12px;
border: none;
}
.emg-ad-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1.15rem;
background: var(--surface-2);
border-radius: 14px;
flex-wrap: wrap;
box-sizing: border-box;
}
.emg-ad-card-info {
min-width: 180px;
text-align: left;
}
.emg-ad-card-title {
font-weight: 800;
font-size: 0.95rem;
color: var(--text-main);
margin-bottom: 2px;
}
.emg-ad-card-subtitle {
font-size: 0.76rem;
color: var(--text-muted);
}
.emg-ad-card-btn {
padding: 0.55rem 1.15rem;
border-radius: 10px;
background: var(--accent-gradient);
color: #FFFFFF !important;
font-weight: 750;
font-size: 0.82rem;
text-decoration: none;
white-space: nowrap;
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.emg-ad-card-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(30, 90, 168, 0.3);
}
body[data-theme="dark"] .emg-ad-slot {
background: transparent;
border-color: transparent;
box-shadow: none;
}
body[data-theme="dark"] .emg-ad-card {
background: rgba(255, 255, 255, 0.04);
}
/* ==========================================================================
Admin Ads Master Switch & Individual ON/OFF Toggles
========================================================================== */
.emg-master-ads-card {
background: rgba(255, 255, 255, 0.03);
border: 1.5px solid rgba(255, 255, 255, 0.09);
border-radius: 20px;
padding: 1.15rem;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.85rem;
box-sizing: border-box;
transition: all 0.25s ease;
}
.emg-master-ads-card.is-master-off {
border-color: rgba(239, 68, 68, 0.35);
background: rgba(239, 68, 68, 0.04);
}
.emg-ad-toggle-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 10px 4px 5px;
border-radius: 9999px;
border: 1.5px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
cursor: pointer;
font-family: var(--font-sans);
font-size: 0.76rem;
font-weight: 800;
transition: all 0.22s ease;
user-select: none;
}
.emg-ad-toggle-btn:hover {
transform: scale(1.03);
}
.emg-ad-toggle-btn .emg-toggle-track {
width: 34px;
height: 18px;
border-radius: 9999px;
background: #64748B;
position: relative;
transition: background 0.25s ease;
display: inline-block;
flex-shrink: 0;
}
.emg-ad-toggle-btn .emg-toggle-knob {
width: 14px;
height: 14px;
border-radius: 50%;
background: #FFFFFF;
position: absolute;
top: 2px;
left: 2px;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.emg-ad-toggle-btn.is-active {
background: rgba(16, 185, 129, 0.14);
border-color: rgba(16, 185, 129, 0.45);
color: #10B981;
}
.emg-ad-toggle-btn.is-active .emg-toggle-track {
background: #10B981;
}
.emg-ad-toggle-btn.is-active .emg-toggle-knob {
transform: translateX(16px);
}
.emg-ad-toggle-btn.is-inactive {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.28);
color: #EF4444;
}
.emg-ad-toggle-btn.is-inactive .emg-toggle-track {
background: #475569;
}
.emg-ad-toggle-btn.is-inactive .emg-toggle-knob {
transform: translateX(0);
}
.emg-btn-batch-on {
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.35);
color: #10B981;
font-weight: 800;
border-radius: 10px;
padding: 0.42rem 0.8rem;
font-size: 0.74rem;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 4px;
}
.emg-btn-batch-on:hover {
background: rgba(16, 185, 129, 0.28);
transform: scale(1.02);
}
.emg-btn-batch-off {
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.35);
color: #EF4444;
font-weight: 800;
border-radius: 10px;
padding: 0.42rem 0.8rem;
font-size: 0.74rem;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 4px;
}
.emg-btn-batch-off:hover {
background: rgba(239, 68, 68, 0.28);
transform: scale(1.02);
}
.emg-ads-paused-banner {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.75rem 1rem;
background: rgba(239, 68, 68, 0.12);
border: 1.5px solid rgba(239, 68, 68, 0.35);
border-radius: 14px;
color: #FCA5A5;
font-size: 0.82rem;
font-weight: 600;
margin-bottom: 1rem;
animation: fadeIn 0.3s ease;
}
/* ==========================================================================
Prompt Auxiliary Actions Row (Watch Tutorial & Join Prompt Channel)
========================================================================== */
.prompt-auxiliary-actions-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.85rem;
width: 100%;
}
.prompt-auxiliary-actions-row.single-action {
grid-template-columns: 1fr;
}
.prompt-aux-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
padding: 0.78rem 1.15rem;
border-radius: 14px;
font-size: 0.92rem;
font-weight: 800;
text-decoration: none;
cursor: pointer;
transition: all 0.22s var(--spring);
box-sizing: border-box;
min-height: 48px;
position: relative;
overflow: hidden;
}
.prompt-aux-btn .aux-btn-icon {
width: 24px;
height: 24px;
object-fit: contain;
display: block;
flex-shrink: 0;
}
.prompt-aux-btn .aux-btn-text {
line-height: 1.2;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* YouTube Watch Tutorial Button */
.prompt-btn-tutorial {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(220, 38, 38, 0.05));
border: 1.5px solid rgba(239, 68, 68, 0.38);
color: #DC2626;
}
body[data-theme="dark"] .prompt-btn-tutorial {
color: #FFA3A3;
}
.prompt-btn-tutorial:hover {
background: linear-gradient(135deg, #EF4444, #DC2626);
border-color: #EF4444;
color: #FFFFFF !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.32);
}
.prompt-btn-tutorial:active {
transform: scale(0.98);
}
/* Telegram Join Prompt Channel Button */
.prompt-btn-telegram {
background: linear-gradient(135deg, rgba(42, 171, 238, 0.14), rgba(37, 99, 235, 0.06));
border: 1.5px solid rgba(42, 171, 238, 0.4);
color: #0284C7;
}
body[data-theme="dark"] .prompt-btn-telegram {
color: #60CDFF;
}
.prompt-btn-telegram:hover {
background: linear-gradient(135deg, #2AABEE, #1E88E5);
border-color: #2AABEE;
color: #FFFFFF !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(42, 171, 238, 0.32);
}
.prompt-btn-telegram:active {
transform: scale(0.98);
}
@media (max-width: 520px) {
.prompt-auxiliary-actions-row {
grid-template-columns: 1fr;
gap: 0.6rem;
}
.prompt-aux-btn {
padding: 0.7rem 1rem;
font-size: 0.88rem;
}
}
/* ==========================================================================
Google Play Store Recommendations in Detail View (Similar Apps & Suggested)
========================================================================== */
.gplay-rec-section {
margin-top: 1.5rem;
padding-top: 0.5rem;
}
.gplay-rec-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
padding: 0 0.2rem;
}
.gplay-rec-heading {
font-size: 1.05rem;
font-weight: 800;
color: var(--text-main);
margin: 0;
letter-spacing: -0.2px;
}
.gplay-rec-arrow-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.gplay-rec-arrow-btn:hover {
background: var(--accent);
color: #ffffff;
border-color: var(--accent);
transform: translateX(2px);
}
.gplay-rec-scroll-row {
display: flex;
gap: 0.85rem;
overflow-x: auto;
padding: 0.25rem 0.2rem 0.65rem;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y;
cursor: grab;
user-select: none;
}
.gplay-rec-scroll-row:active {
cursor: grabbing;
}
.gplay-rec-scroll-row::-webkit-scrollbar {
display: none;
}
.gplay-rec-card {
flex: 0 0 84px !important;
width: 84px !important;
min-width: 84px !important;
max-width: 84px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
cursor: pointer;
scroll-snap-align: start;
user-select: none !important;
-webkit-user-select: none !important;
-webkit-touch-callout: none !important;
-webkit-tap-highlight-color: transparent !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
}
.gplay-rec-card:hover {
transform: none !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
outline: none !important;
}
.gplay-rec-card:focus,
.gplay-rec-card:active,
.gplay-rec-card:focus-visible,
.gplay-rec-card:focus-within {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
outline: none !important;
border: none !important;
-webkit-tap-highlight-color: transparent !important;
opacity: 1 !important;
transform: none !important;
}
.gplay-rec-icon-wrap {
width: 100% !important;
aspect-ratio: 1 / 1 !important;
border-radius: 22% !important;
overflow: hidden;
margin-bottom: 0.45rem;
box-shadow: none !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
outline: none !important;
position: relative;
box-sizing: border-box !important;
flex-shrink: 0 !important;
}
.gplay-rec-icon-wrap img,
.gplay-rec-icon-wrap .arch-icon {
width: 100% !important;
height: 100% !important;
aspect-ratio: 1 / 1 !important;
border-radius: 22% !important;
object-fit: cover !important;
display: block !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
transition: transform 0.15s ease !important;
-webkit-touch-callout: none !important;
-webkit-user-drag: none !important;
user-select: none !important;
pointer-events: none !important;
}
body[data-theme="dark"] .gplay-rec-card,
body[data-theme="dark"] .gplay-rec-icon-wrap,
body[data-theme="dark"] .gplay-rec-icon-wrap img,
body[data-theme="dark"] .gplay-rec-icon-wrap .arch-icon {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
@media (hover: hover) and (pointer: fine) {
.gplay-rec-card:hover .gplay-rec-icon-wrap img,
.gplay-rec-card:hover .gplay-rec-icon-wrap .arch-icon {
transform: scale(1.02) !important;
}
.gplay-rec-card:hover .gplay-rec-title {
color: var(--accent) !important;
}
}
.gplay-rec-card:active .gplay-rec-icon-wrap img,
.gplay-rec-card:active .gplay-rec-icon-wrap .arch-icon {
transform: scale(0.96) !important;
transition-duration: 0.1s;
}
.gplay-rec-title {
font-size: 0.78rem;
font-weight: 700;
color: var(--text-main);
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
min-height: 2em;
width: 100%;
transition: color 0.15s ease;
}
.gplay-rec-meta {
display: flex;
align-items: center;
gap: 0.3rem;
margin-top: 0.25rem;
font-size: 0.7rem;
color: var(--text-muted);
width: 100%;
}
.gplay-rec-rating {
font-weight: 800;
color: #F59E0B;
}
.gplay-rec-size {
font-size: 0.68rem;
opacity: 0.8;
}
/* ==========================================================================
Universal Mobile Tap-and-Hold Shape / Shadow Suppression Across All Tabs
========================================================================== */
.app-card,
.playstore-app-item,
.gplay-rec-card,
.rail-card-item,
.playstore-list-item,
.playstore-list-item-clean,
.prompt-card,
.liteapks-carousel-card,
.search-cat-card,
.suggested-app-card,
.gplay-app-row,
.gplay-prompt-row {
-webkit-tap-highlight-color: transparent !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
outline: none !important;
}
.app-card:focus,
.app-card:active,
.app-card:focus-visible,
.app-card:focus-within,
.playstore-app-item:focus,
.playstore-app-item:active,
.playstore-app-item:focus-visible,
.playstore-app-item:focus-within,
.gplay-rec-card:focus,
.gplay-rec-card:active,
.gplay-rec-card:focus-visible,
.gplay-rec-card:focus-within,
.rail-card-item:focus,
.rail-card-item:active,
.rail-card-item:focus-visible,
.rail-card-item:focus-within {
outline: none !important;
outline-color: transparent !important;
box-shadow: none !important;
background: transparent !important;
background-color: transparent !important;
-webkit-tap-highlight-color: transparent !important;
opacity: 1 !important;
}
.playstore-icon-wrap img,
.playstore-icon-wrap .arch-icon,
.gplay-rec-icon-wrap img,
.gplay-rec-icon-wrap .arch-icon,
.playstore-list-icon img,
.playstore-list-icon .arch-icon,
.rail-icon-box img,
.rail-icon-box .arch-icon,
.prompt-card img,
.liteapks-carousel-card img {
-webkit-touch-callout: none !important;
-webkit-user-drag: none !important;
-webkit-user-select: none !important;
user-select: none !important;
pointer-events: none !important;
}
/* ==========================================================================
Admin Search Suite (Instant Clear Button, Count Badges, Hub Search)
========================================================================== */
.emg-search-box-wrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.emg-search-box-wrap .emg-card-search-input {
padding-right: 2.6rem !important;
}
.emg-search-clear-btn {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.12);
border: none;
color: #94A3B8;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s ease;
z-index: 5;
padding: 0;
line-height: 1;
}
body[data-theme="light"] .emg-search-clear-btn {
background: #E2E8F0;
color: #64748B;
}
.emg-search-clear-btn:hover {
background: #EF4444 !important;
color: #FFFFFF !important;
transform: translateY(-50%) scale(1.1);
}
.emg-search-count-badge {
font-size: 0.76rem;
font-weight: 600;
color: #00AFAE;
background: rgba(0, 175, 174, 0.12);
border: 1px solid rgba(0, 175, 174, 0.25);
padding: 0.25rem 0.65rem;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.75rem;
animation: fadeIn 0.2s ease;
}
body[data-theme="light"] .emg-search-count-badge {
background: rgba(30, 90, 168, 0.1);
border-color: rgba(30, 90, 168, 0.25);
color: #1E5AA8;
}
.emg-hub-search-section {
margin-bottom: 1.25rem;
}
.emg-hub-search-results {
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
padding: 0.75rem;
margin-top: 0.65rem;
max-height: 380px;
overflow-y: auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
body[data-theme="light"] .emg-hub-search-results {
background: #FFFFFF;
border-color: #E2E8F0;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
/* ==========================================================================
Dashboard Report (ড্যাশবোর্ড রিপোর্ট - Real Views Telemetry) Styles
========================================================================== */
/* 1. Hub Menu Pill Accent */
.emg-menu-pill-report {
border-color: rgba(59, 130, 246, 0.35) !important;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.08)) !important;
}
.emg-menu-pill-report:hover {
border-color: #3B82F6 !important;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(139, 92, 246, 0.15)) !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
}
body[data-theme="light"] .emg-menu-pill-report {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.05)) !important;
border-color: rgba(59, 130, 246, 0.3) !important;
}
body[data-theme="light"] .emg-menu-pill-report:hover {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.09)) !important;
border-color: #2563EB !important;
}
/* 2. Audit Notice Banner */
.emg-report-audit-banner {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1.15rem;
background: rgba(30, 90, 168, 0.12);
border: 1px solid rgba(0, 175, 174, 0.25);
border-radius: 16px;
margin-bottom: 1.25rem;
backdrop-filter: blur(12px);
}
.emg-report-audit-icon {
font-size: 1.35rem;
flex-shrink: 0;
}
.emg-report-audit-text {
flex: 1;
font-size: 0.83rem;
line-height: 1.45;
color: var(--text-main);
}
.emg-report-live-pulse-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.65rem;
border-radius: 9999px;
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.35);
color: #10B981;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.emg-live-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 8px #10B981;
animation: livePulse 1.8s infinite ease-in-out;
}
@keyframes livePulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
/* 3. Primary Toggle Bar (Apps vs Prompts) */
.emg-report-toggle-bar {
display: flex;
gap: 0.75rem;
margin-bottom: 1.35rem;
}
.emg-report-tab-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
padding: 0.85rem 1.25rem;
background: rgba(255, 255, 255, 0.05);
border: 1.5px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
color: var(--text-muted);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.emg-report-tab-btn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
color: var(--text-main);
}
.emg-report-tab-btn.active {
background: linear-gradient(135deg, #1E5AA8, #00AFAE);
border-color: #00AFAE;
color: #FFFFFF;
box-shadow: 0 6px 20px rgba(0, 175, 174, 0.3);
transform: translateY(-2px);
}
.emg-report-tab-icon {
font-size: 1.15rem;
}
.emg-report-tab-title {
font-weight: 800;
}
.emg-report-tab-badge {
font-size: 0.75rem;
font-family: var(--font-mono);
padding: 0.18rem 0.55rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.2);
color: inherit;
font-weight: 800;
}
/* 4. Summary Metric Cards */
.emg-report-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.9rem;
margin-bottom: 1.25rem;
}
.emg-report-stat-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.15rem 1.25rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
backdrop-filter: blur(12px);
transition: all 0.2s ease;
}
.emg-report-stat-card:hover {
border-color: rgba(255, 255, 255, 0.16);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.emg-report-stat-icon-box {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.45rem;
flex-shrink: 0;
}
.emg-report-stat-info {
min-width: 0;
flex: 1;
}
.emg-report-stat-title {
font-size: 0.76rem;
font-weight: 700;
color: var(--text-muted);
display: block;
margin-bottom: 0.2rem;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.emg-report-stat-value {
font-size: 1.35rem;
font-weight: 900;
font-family: var(--font-mono);
color: var(--text-main);
line-height: 1.2;
}
.emg-report-stat-unit {
font-size: 0.82rem;
font-weight: 600;
color: var(--text-muted);
}
.emg-report-stat-sub {
font-size: 0.72rem;
color: var(--text-muted);
display: block;
margin-top: 0.15rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 5. Report List Container & Ranked Cards */
.emg-report-list-container {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.emg-report-row-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.1rem;
padding: 1rem 1.25rem;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.emg-report-row-card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.16);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.emg-report-row-left {
display: flex;
align-items: center;
gap: 0.9rem;
min-width: 0;
flex: 1;
}
.emg-report-rank-badge {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 900;
font-family: var(--font-mono);
flex-shrink: 0;
border: 1px solid transparent;
}
.emg-report-rank-badge.rank-gold {
background: rgba(234, 179, 8, 0.18);
border-color: rgba(234, 179, 8, 0.5);
color: #FACC15;
box-shadow: 0 0 14px rgba(234, 179, 8, 0.25);
}
.emg-report-rank-badge.rank-silver {
background: rgba(203, 213, 225, 0.15);
border-color: rgba(203, 213, 225, 0.4);
color: #F1F5F9;
box-shadow: 0 0 10px rgba(203, 213, 225, 0.18);
}
.emg-report-rank-badge.rank-bronze {
background: rgba(249, 115, 22, 0.15);
border-color: rgba(249, 115, 22, 0.4);
color: #FB923C;
box-shadow: 0 0 10px rgba(249, 115, 22, 0.18);
}
.emg-report-rank-badge.rank-default {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.1);
color: #94A3B8;
}
.emg-report-thumb-box {
width: 48px;
height: 48px;
border-radius: 13px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.emg-report-meta-info {
min-width: 0;
flex: 1;
}
.emg-report-item-title-row {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.25rem;
}
.emg-report-item-title {
font-size: 0.98rem;
font-weight: 800;
color: var(--text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.emg-report-cat-tag {
font-size: 0.68rem;
font-weight: 700;
padding: 0.15rem 0.5rem;
border-radius: 6px;
background: rgba(30, 90, 168, 0.15);
border: 1px solid rgba(0, 175, 174, 0.25);
color: #00AFAE;
text-transform: capitalize;
}
.emg-report-item-sub {
font-size: 0.76rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
}
.emg-report-item-sub .meta-dot {
opacity: 0.5;
}
.emg-report-row-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.35rem;
flex-shrink: 0;
min-width: 220px;
}
.emg-report-metrics-wrap {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.emg-report-dl-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.75rem;
border-radius: 12px;
background: rgba(16, 185, 129, 0.14);
border: 1.2px solid rgba(16, 185, 129, 0.38);
color: #10B981;
}
.emg-report-dl-pill .dl-icon {
font-size: 0.85rem;
}
.emg-report-dl-pill .dl-num {
font-family: var(--font-mono);
font-weight: 900;
font-size: 1.02rem;
color: #10B981;
}
.emg-report-dl-pill .dl-label {
font-size: 0.74rem;
font-weight: 700;
color: #34D399;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.emg-report-views-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.75rem;
border-radius: 12px;
background: linear-gradient(135deg, rgba(0, 175, 174, 0.15), rgba(30, 90, 168, 0.15));
border: 1.2px solid rgba(0, 175, 174, 0.35);
color: #00E5FF;
}
.emg-report-views-pill .views-eye {
font-size: 0.95rem;
}
.emg-report-views-pill .views-num {
font-family: var(--font-mono);
font-weight: 900;
font-size: 1.02rem;
color: #00E5FF;
}
.emg-report-views-pill .views-compact {
font-family: var(--font-mono);
font-size: 0.76rem;
color: #94A3B8;
font-weight: 700;
}
.emg-report-views-pill .views-label {
font-size: 0.74rem;
font-weight: 700;
color: #00AFAE;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.emg-report-bar-wrap {
width: 100%;
height: 6px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.emg-report-bar-fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #1E5AA8, #00AFAE);
transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.emg-report-lock-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.68rem;
color: #94A3B8;
font-weight: 600;
padding: 0.15rem 0.45rem;
border-radius: 6px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
}
/* Light Theme Support */
body[data-theme="light"] .emg-report-audit-banner {
background: rgba(30, 90, 168, 0.06);
border-color: rgba(30, 90, 168, 0.2);
}
body[data-theme="light"] .emg-report-tab-btn {
background: #FFFFFF;
border-color: #E2E8F0;
color: #64748B;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body[data-theme="light"] .emg-report-tab-btn:hover {
background: #F8FAFC;
color: #0F172A;
}
body[data-theme="light"] .emg-report-tab-btn.active {
background: linear-gradient(135deg, #1E5AA8, #00AFAE);
border-color: #00AFAE;
color: #FFFFFF;
box-shadow: 0 6px 20px rgba(0, 175, 174, 0.25);
}
body[data-theme="light"] .emg-report-stat-card {
background: #FFFFFF;
border-color: #E2E8F0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
body[data-theme="light"] .emg-report-row-card {
background: #FFFFFF;
border-color: #E2E8F0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
body[data-theme="light"] .emg-report-row-card:hover {
background: #F8FAFC;
border-color: #CBD5E1;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}
body[data-theme="light"] .emg-report-dl-pill {
background: rgba(16, 185, 129, 0.08);
border-color: rgba(16, 185, 129, 0.3);
color: #059669;
}
body[data-theme="light"] .emg-report-dl-pill .dl-num {
color: #059669;
}
body[data-theme="light"] .emg-report-dl-pill .dl-label {
color: #10B981;
}
body[data-theme="light"] .emg-report-views-pill {
background: rgba(30, 90, 168, 0.08);
border-color: rgba(30, 90, 168, 0.25);
color: #1E5AA8;
}
body[data-theme="light"] .emg-report-views-pill .views-num {
color: #1E5AA8;
}
body[data-theme="light"] .emg-report-bar-wrap {
background: #E2E8F0;
}
body[data-theme="light"] .emg-report-lock-badge {
background: #F1F5F9;
border-color: #E2E8F0;
color: #64748B;
}
/* Mobile Responsiveness for Report Rows */
@media (max-width: 640px) {
.emg-report-row-card {
flex-direction: column;
align-items: stretch;
gap: 0.85rem;
}
.emg-report-row-right {
align-items: stretch;
min-width: 0;
width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 0.75rem;
}
body[data-theme="light"] .emg-report-row-right {
border-top-color: #E2E8F0;
}
.emg-report-metrics-wrap {
display: flex;
gap: 0.45rem;
width: 100%;
}
.emg-report-metrics-wrap .emg-report-views-pill,
.emg-report-metrics-wrap .emg-report-dl-pill {
flex: 1;
justify-content: center;
box-sizing: border-box;
}
.emg-report-views-pill {
justify-content: center;
width: 100%;
box-sizing: border-box;
}
.emg-report-lock-badge {
justify-content: center;
}
}
/* ==========================================================================
Top Notification / Social Slider Ad System (Slide Down from Top)
========================================================================== */
.emg-top-notification-slot {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 99999;
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
padding: 10px 14px;
box-sizing: border-box;
}
.emg-top-notify-card {
pointer-events: auto;
width: 100%;
max-width: 500px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28), 0 4px 14px rgba(0, 0, 0, 0.12);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
box-sizing: border-box;
animation: emgSlideDownTopNotification 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
margin-bottom: 8px;
position: relative;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
}
body[data-theme="dark"] .emg-top-notify-card {
background: rgba(26, 26, 38, 0.88);
border-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
.emg-top-notify-card.emg-notify-dismissing {
animation: emgSlideUpTopNotification 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
@keyframes emgSlideDownTopNotification {
0% {
transform: translateY(-130%) scale(0.96);
opacity: 0;
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
}
@keyframes emgSlideUpTopNotification {
0% {
transform: translateY(0) scale(1);
opacity: 1;
}
100% {
transform: translateY(-130%) scale(0.96);
opacity: 0;
}
}
.emg-top-notify-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.emg-top-notify-icon-box {
width: 38px;
height: 38px;
border-radius: 12px;
background: linear-gradient(135deg, #1E5AA8, #00AFAE);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(30, 90, 168, 0.3);
}
.emg-top-notify-content {
display: flex;
flex-direction: column;
min-width: 0;
text-align: left;
}
.emg-top-notify-badge {
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--accent);
margin-bottom: 2px;
}
body[data-theme="dark"] .emg-top-notify-badge {
color: #38BDF8;
}
.emg-top-notify-title {
font-size: 0.84rem;
font-weight: 700;
color: var(--text-main);
line-height: 1.25;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.emg-top-notify-title:hover {
color: var(--accent);
}
.emg-top-notify-media {
flex-shrink: 0;
max-width: 70px;
max-height: 42px;
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.emg-top-notify-img {
max-width: 100%;
max-height: 42px;
object-fit: cover;
border-radius: 8px;
}
.emg-top-notify-close {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.06);
border: none;
color: var(--text-muted);
font-size: 0.85rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
body[data-theme="dark"] .emg-top-notify-close {
background: rgba(255, 255, 255, 0.1);
color: #A1A1AA;
}
.emg-top-notify-close:hover {
background: rgba(239, 68, 68, 0.2);
color: #EF4444;
}
/* ==========================================================================
MINIMAL ADMIN LISTS (v3.4)
Scope: All Apps / Manage All Apps / All Prompts / Manage All Prompts only
(.emg-minimal-pane). Same colours and same animations as before - only the
look is flatter: no glow, no glass, thin borders, plain text, small chips.
To go back to the old look just remove this block.
========================================================================== */
body .emg-minimal-pane {
--mp-card: rgba(255, 255, 255, 0.035);
--mp-card-hover: rgba(255, 255, 255, 0.06);
--mp-band: rgba(255, 255, 255, 0.025);
--mp-line: rgba(255, 255, 255, 0.11);
--mp-line-soft: rgba(255, 255, 255, 0.07);
--mp-chip: rgba(255, 255, 255, 0.08);
--mp-tile: rgba(255, 255, 255, 0.07);
--mp-text: #F4F4F5;
--mp-muted: #A1A1AA;
--mp-link: var(--accent-light, #4A7FC8);
--mp-danger: #F87171;
--mp-danger-bg: rgba(239, 68, 68, 0.12);
--mp-danger-line: rgba(239, 68, 68, 0.35);
}
body[data-theme="light"] .emg-minimal-pane {
--mp-card: #FFFFFF;
--mp-card-hover: #FAFAFA;
--mp-band: #F7F8FA;
--mp-line: #E1E4E8;
--mp-line-soft: #ECEEF1;
--mp-chip: #F0F1F4;
--mp-tile: #F1F2F5;
--mp-text: #18181B;
--mp-muted: #71717A;
--mp-link: var(--accent, #1E5AA8);
--mp-danger: #DC2626;
--mp-danger-bg: #FEF2F2;
--mp-danger-line: #FECACA;
}
/* ---- Header: plain "‹ Back Title" ------------------------------------- */
body .emg-minimal-pane .emg-back-pill-btn { display: none !important; }
body .emg-minimal-pane .emg-screen-header {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 1.1rem;
}
body .emg-minimal-pane .emg-screen-header-left { gap: 0.85rem; min-width: 0; }
body .emg-minimal-pane .emg-screen-header-left > .emg-header-icon-btn {
width: auto;
height: 36px;
padding: 0 0.4rem 0 0.1rem;
gap: 0.1rem;
border: none;
background: transparent;
border-radius: 10px;
color: var(--mp-link);
font-family: var(--font-body, inherit);
box-shadow: none;
}
body .emg-minimal-pane .emg-screen-header-left > .emg-header-icon-btn::after {
content: 'Back';
font-size: 1rem;
font-weight: 600;
}
body .emg-minimal-pane .emg-screen-header-left > .emg-header-icon-btn:hover {
background: transparent;
transform: translateX(-2px);
}
body .emg-minimal-pane .emg-header-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--mp-text);
}
body .emg-minimal-pane .emg-screen-header > .emg-theme-toggle-btn {
width: 36px;
height: 36px;
border-radius: 10px;
background: transparent;
border: 1px solid var(--mp-line);
color: var(--mp-muted);
box-shadow: none;
}
body .emg-minimal-pane .emg-screen-header > .emg-theme-toggle-btn:hover {
background: var(--mp-card-hover);
border-color: var(--mp-link);
color: var(--mp-text);
}
/* ---- Overview: "Total" card + "Manage" card ---------------------------- */
body .emg-minimal-pane .emg-overview-grid { gap: 0.8rem; margin-bottom: 1.2rem; }
body .emg-minimal-pane .emg-stat-hero-card {
padding: 0;
overflow: hidden;
margin-bottom: 0;
background: var(--mp-card);
border: 1px solid var(--mp-line);
border-radius: 14px;
box-shadow: none;
}
body .emg-minimal-pane .emg-stat-hero-top { padding: 0.8rem 1rem; margin-bottom: 0; }
body .emg-minimal-pane .emg-stat-hero-left { gap: 0.8rem; }
body .emg-minimal-pane .emg-stat-hero-icon-box,
body .emg-minimal-pane .emg-nav-card-icon-box {
width: 42px;
height: 42px;
border-radius: 10px;
background: var(--mp-tile);
border: none;
box-shadow: none;
}
body .emg-minimal-pane .emg-stat-hero-title,
body .emg-minimal-pane .emg-nav-card-title {
font-size: 1rem;
font-weight: 600;
color: var(--mp-text);
}
body .emg-minimal-pane .emg-stat-hero-badge {
background: var(--mp-chip);
border: none;
border-radius: 8px;
padding: 0.2rem 0.7rem;
font-size: 1rem;
font-weight: 700;
color: var(--mp-text);
font-family: var(--font-body, inherit);
}
body .emg-minimal-pane .emg-stat-hero-footer {
padding: 0.75rem 1rem;
background: var(--mp-band);
border-top: 1px solid var(--mp-line-soft);
}
body .emg-minimal-pane .emg-nav-action-card {
margin-bottom: 0;
padding: 0.8rem 1rem;
background: var(--mp-card);
border: 1px solid var(--mp-line);
border-radius: 14px;
box-shadow: none;
color: var(--mp-text);
}
body .emg-minimal-pane .emg-nav-action-card:hover {
background: var(--mp-card-hover);
border-color: var(--mp-link);
color: var(--mp-text);
}
body .emg-minimal-pane .emg-nav-card-chevron {
display: flex;
align-items: center;
color: var(--mp-muted);
}
/* ---- Buttons: same brand gradient, flat ------------------------------- */
body .emg-minimal-pane .emg-btn-add-gradient {
border: none;
border-radius: 10px;
padding: 0.78rem 1rem;
font-size: 0.95rem;
font-weight: 600;
box-shadow: none;
}
body .emg-minimal-pane .emg-btn-add-gradient:hover {
box-shadow: none;
filter: brightness(1.08);
transform: translateY(-1px);
}
/* ---- Search + category + add ------------------------------------------ */
body .emg-minimal-pane .emg-manage-toolbar { gap: 0.6rem; margin-bottom: 0.9rem; }
body .emg-minimal-pane .emg-card-search-input {
height: 46px;
padding: 0 1rem;
background-color: var(--mp-card);
border: 1px solid var(--mp-line);
border-radius: 10px;
color: var(--mp-text);
font-size: 0.95rem;
box-shadow: none;
}
body .emg-minimal-pane .emg-card-search-input::placeholder { color: var(--mp-muted); }
body .emg-minimal-pane .emg-card-search-input:focus {
background-color: var(--mp-card);
border-color: var(--mp-link);
box-shadow: none;
}
body .emg-minimal-pane .emg-search-box-wrap .emg-card-search-input {
padding-left: 2.75rem !important;
padding-right: 2.6rem !important;
}
body .emg-minimal-pane .emg-search-lead-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--mp-muted);
pointer-events: none;
z-index: 2;
}
body .emg-minimal-pane .emg-toolbar-select {
height: 44px;
padding: 0 2.3rem 0 0.9rem;
font-size: 0.95rem;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px 16px;
cursor: pointer;
}
body[data-theme="light"] .emg-minimal-pane .emg-toolbar-select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px 16px;
}
body .emg-minimal-pane .emg-toolbar-add-btn {
height: 44px;
border-radius: 10px;
font-size: 0.95rem !important;
font-weight: 600;
}
body .emg-minimal-pane .emg-search-count-badge {
background: transparent;
border: none;
padding: 0;
color: var(--mp-muted);
font-weight: 500;
}
/* ---- List rows (cards) -------------------------------------------------- */
body .emg-minimal-pane .emg-app-list { gap: 0.7rem; }
body .emg-minimal-pane .emg-app-row-card {
gap: 0.8rem;
padding: 0.9rem;
background: var(--mp-card);
border: 1px solid var(--mp-line);
border-radius: 14px;
box-shadow: none;
}
body .emg-minimal-pane .emg-app-row-card:hover {
background: var(--mp-card-hover);
border-color: rgba(0, 175, 174, 0.45);
box-shadow: none;
}
body[data-theme="light"] .emg-minimal-pane .emg-app-row-card:hover { border-color: var(--accent, #1E5AA8); }
body .emg-minimal-pane .emg-app-row-card.emg-app-row-link {
flex-direction: row;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
body .emg-minimal-pane .emg-row-chevron { display: flex; align-items: center; color: var(--mp-muted); flex-shrink: 0; }
body .emg-minimal-pane .emg-app-row-info,
body .emg-minimal-pane .emg-card-main-info { gap: 0.85rem; }
body .emg-minimal-pane .emg-app-row-icon {
width: 52px;
height: 52px;
min-width: 52px;
min-height: 52px;
border-radius: 12px;
box-shadow: none;
font-size: 1.3rem;
}
body .emg-minimal-pane .emg-app-name {
font-size: 1.02rem;
font-weight: 700;
color: var(--mp-text);
}
body .emg-minimal-pane .emg-app-sub {
color: var(--mp-muted);
font-size: 0.82rem;
}
body .emg-minimal-pane .emg-badge-hot {
font-size: 0.6rem;
padding: 1px 6px;
box-shadow: none;
}
body .emg-minimal-pane .emg-app-meta-row { gap: 0.4rem; margin-top: 0.4rem; }
body .emg-minimal-pane .emg-meta-pill {
background: var(--mp-chip) !important;
border: none !important;
color: var(--mp-muted) !important;
border-radius: 8px;
padding: 3px 9px;
font-size: 0.78rem;
font-weight: 500;
font-family: var(--font-body, inherit) !important;
gap: 0.35rem;
text-transform: none;
letter-spacing: 0;
}
body .emg-minimal-pane .emg-meta-pill svg { flex-shrink: 0; }
/* ---- Edit / Copy / Delete / View ---------------------------------------- */
body .emg-minimal-pane .emg-action-buttons-group {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 0.5rem;
padding-top: 0;
border-top: none;
}
body .emg-minimal-pane .emg-btn-action {
height: 42px;
padding: 0 0.5rem;
border-width: 1px;
border-radius: 10px;
font-size: 0.88rem;
font-weight: 600;
gap: 0.4rem;
box-shadow: none;
}
body .emg-minimal-pane .emg-btn-action svg { width: 16px; height: 16px; }
body .emg-minimal-pane .emg-btn-edit,
body .emg-minimal-pane .emg-btn-copy {
background: transparent !important;
border-color: var(--mp-line) !important;
color: var(--mp-text) !important;
}
body .emg-minimal-pane .emg-btn-edit:hover,
body .emg-minimal-pane .emg-btn-copy:hover {
background: var(--mp-card-hover) !important;
border-color: var(--mp-link) !important;
color: var(--mp-text) !important;
box-shadow: none;
}
body .emg-minimal-pane .emg-btn-del,
body .emg-minimal-pane .emg-btn-delete {
background: var(--mp-danger-bg) !important;
border-color: var(--mp-danger-line) !important;
color: var(--mp-danger) !important;
box-shadow: none !important;
}
body .emg-minimal-pane .emg-btn-del:hover,
body .emg-minimal-pane .emg-btn-delete:hover {
background: #DC2626 !important;
border-color: #DC2626 !important;
color: #FFFFFF !important;
box-shadow: none !important;
}
body .emg-minimal-pane .emg-btn-view {
background: var(--accent-gradient, linear-gradient(135deg, #1E5AA8 0%, #00AFAE 100%)) !important;
background-origin: border-box !important;
background-clip: border-box !important;
border-color: transparent !important;
color: #FFFFFF !important;
}
body .emg-minimal-pane .emg-btn-view:hover {
filter: brightness(1.1);
color: #FFFFFF !important;
box-shadow: none;
}
/* Narrow phones: 4 buttons (prompts) need a little less padding */
@media (max-width: 420px) {
body .emg-minimal-pane .emg-btn-action { font-size: 0.82rem; gap: 0.3rem; padding: 0 0.3rem; }
body .emg-minimal-pane .emg-btn-action svg { width: 15px; height: 15px; }
}
/* ---- Desktop: keep the existing row / grid layout --------------------- */
@media (min-width: 769px) {
body .emg-minimal-pane .emg-screen-header { margin-bottom: 1.5rem; padding-bottom: 0; border-bottom: none; }
body .emg-minimal-pane .emg-header-title { font-size: 1.4rem; }
body .emg-minimal-pane .emg-screen-header > .emg-theme-toggle-btn { width: 38px; height: 38px; border-radius: 10px; }
body .emg-minimal-pane .emg-overview-grid { gap: 1rem; }
body .emg-minimal-pane .emg-stat-hero-card,
body .emg-minimal-pane .emg-nav-action-card { border-radius: 14px; }
body .emg-minimal-pane .emg-nav-action-card { padding: 0.8rem 1rem; }
body .emg-minimal-pane .emg-stat-hero-top { padding: 0.9rem 1.1rem; }
body .emg-minimal-pane .emg-stat-hero-footer { padding: 0.8rem 1.1rem; }
body .emg-minimal-pane .emg-app-row-card { border-radius: 14px; padding: 0.9rem 1.1rem; }
body .emg-minimal-pane .emg-app-row-icon { width: 52px; height: 52px; min-width: 52px; min-height: 52px; border-radius: 12px; }
body .emg-minimal-pane .emg-action-buttons-group { display: flex; grid-auto-flow: row; }
body .emg-minimal-pane .emg-btn-action { height: 38px; padding: 0 0.9rem; font-size: 0.86rem; }
body .emg-minimal-pane .emg-btn-action svg { width: 15px; height: 15px; }
body .emg-minimal-pane .emg-app-row-card.emg-app-row-link { flex-direction: row; }
}
/* ---- Finishing touches (v3.4.1) ----------------------------------------- */
/* Same teal accent as before for the small line icons (a bit deeper on white so it stays readable) */
body .emg-minimal-pane { --mp-icon: #00D8D6; }
body[data-theme="light"] .emg-minimal-pane { --mp-icon: #0D9488; }
body .emg-minimal-pane .emg-stat-hero-icon-box,
body .emg-minimal-pane .emg-nav-card-icon-box { color: var(--mp-icon); }
/* "Hot" tag: flat, same red */
body .emg-minimal-pane .emg-badge-hot { background: #EF4444; }
/* An uploaded app icon sits on a quiet neutral tile (the brand gradient stays only behind the default icon) */
body .emg-minimal-pane .emg-app-row-icon:has(> img) { background: var(--mp-tile); }
/* Overview screens: just the two cards (Total + Manage). The "recent" preview list was a second way to open
the same Manage screen, so it is hidden here. To bring it back, delete the next 3 lines. */
body .emg-minimal-pane .emg-overview-grid + .emg-app-list { display: none; }
/* ==========================================================================
UPGRADED DUAL-MODE ADS STUDIO & LIVE DRAG-AND-DROP BANNER PLACEMENT ENGINE
========================================================================== */
.emg-banner-studio-card {
background: linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(30, 41, 59, 0.65));
border: 1.5px solid rgba(139, 92, 246, 0.35);
border-radius: 22px;
padding: 1.25rem;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25);
}
.emg-banner-studio-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.emg-banner-step-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 16px;
padding: 1rem;
transition: all 0.25s ease;
}
.emg-next-process-box {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(2, 132, 199, 0.1));
border: 1.5px solid rgba(16, 185, 129, 0.4);
}
.emg-banner-step-badge-row {
display: flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
margin-bottom: 0.85rem;
}
.emg-step-pill {
font-size: 0.7rem;
font-weight: 800;
padding: 3px 10px;
border-radius: 999px;
background: rgba(56, 189, 248, 0.18);
color: #38BDF8;
border: 1px solid rgba(56, 189, 248, 0.35);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.emg-step-pill.success {
background: rgba(16, 185, 129, 0.2);
color: #10B981;
border-color: rgba(16, 185, 129, 0.45);
}
.emg-size-pill-badge {
margin-left: auto;
font-size: 0.72rem;
font-weight: 800;
font-family: var(--font-mono);
padding: 3px 10px;
border-radius: 8px;
background: rgba(139, 92, 246, 0.2);
color: #C084FC;
border: 1px solid rgba(139, 92, 246, 0.4);
}
.emg-verify-status-box {
padding: 0.85rem 1rem;
border-radius: 14px;
margin-bottom: 0.75rem;
}
.emg-verify-status-box.is-success {
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.35);
}
.emg-verify-status-box.is-error {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.35);
}
.emg-banner-preview-stage-wrap {
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 0.85rem;
}
.emg-banner-live-preview-stage {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Website Live Banner Placement Mode Dock */
body.emg-banner-placement-active {
padding-top: 168px !important;
}
.emg-banner-placement-dock {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9990;
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 2px solid rgba(56, 189, 248, 0.45);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
padding: 0.65rem 1rem;
color: #F8FAFC;
font-family: var(--font-sans);
}
.emg-bpd-inner {
max-width: 1080px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.emg-bpd-top-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.emg-bpd-title-wrap {
display: flex;
align-items: center;
gap: 0.6rem;
min-width: 0;
}
.emg-bpd-live-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 10px #10B981;
flex-shrink: 0;
animation: livePulse 1.6s infinite;
}
.emg-bpd-title {
font-size: 0.86rem;
font-weight: 800;
color: #FFFFFF;
}
.emg-bpd-sub {
font-size: 0.73rem;
color: #94A3B8;
}
.emg-bpd-sub strong {
color: #38BDF8;
}
.emg-bpd-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.emg-bpd-btn-save {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0.5rem 1rem;
border-radius: 12px;
border: none;
background: linear-gradient(135deg, #10B981, #059669);
color: #FFFFFF;
font-weight: 800;
font-size: 0.8rem;
cursor: pointer;
box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
}
.emg-bpd-btn-cancel {
padding: 0.5rem 0.85rem;
border-radius: 12px;
border: 1px solid rgba(239, 68, 68, 0.4);
background: rgba(239, 68, 68, 0.14);
color: #FCA5A5;
font-weight: 700;
font-size: 0.78rem;
cursor: pointer;
}
.emg-bpd-pages-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding-top: 0.35rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.emg-bpd-row-lbl {
font-size: 0.72rem;
font-weight: 800;
color: #38BDF8;
white-space: nowrap;
}
.emg-bpd-pills-scroll {
display: flex;
align-items: center;
gap: 0.4rem;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
}
.emg-bpd-page-pill {
padding: 0.3rem 0.7rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.05);
color: #CBD5E1;
font-size: 0.73rem;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: all 0.2s ease;
}
.emg-bpd-page-pill.active {
background: linear-gradient(135deg, #2563EB, #00AFAE);
border-color: #38BDF8;
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}
.emg-bpd-controls-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
}
.emg-bpd-mini-btn {
padding: 0.24rem 0.6rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.06);
color: #E2E8F0;
font-size: 0.71rem;
font-weight: 700;
cursor: pointer;
}
.emg-bpd-mini-btn.active {
background: rgba(56, 189, 248, 0.22);
border-color: #38BDF8;
color: #38BDF8;
}
/* Live Displacing Banner Slot on Website */
.emg-live-banner-displacement-slot {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 0.85rem 0;
padding: 4px;
box-sizing: border-box;
transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
animation: emgSpaceExpand 0.26s cubic-bezier(0.16, 1, 0.3, 1);
touch-action: none;
user-select: none;
}
@keyframes emgSpaceExpand {
from {
opacity: 0.4;
transform: scaleY(0.75);
}
to {
opacity: 1;
transform: scaleY(1);
}
}
.emg-draggable-banner-widget {
border: 2px dashed #10B981;
border-radius: 16px;
background: rgba(16, 185, 129, 0.08);
box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
overflow: hidden;
cursor: grab;
transition: transform 0.2s ease, box-shadow 0.2s ease;
max-width: 100%;
}
.emg-live-banner-displacement-slot.is-dragging-active .emg-draggable-banner-widget {
cursor: grabbing;
border-color: #38BDF8;
background: rgba(56, 189, 248, 0.12);
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.25), 0 14px 36px rgba(2, 132, 199, 0.3);
}
.emg-draggable-banner-handle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.4rem 0.75rem;
background: linear-gradient(90deg, #059669, #0284C7);
color: #FFFFFF;
font-size: 0.73rem;
font-weight: 800;
}
.emg-drag-handle-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.emg-drag-size-tag {
font-family: var(--font-mono);
font-size: 0.68rem;
background: rgba(0, 0, 0, 0.35);
padding: 2px 7px;
border-radius: 6px;
flex-shrink: 0;
}
.emg-draggable-banner-body {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
}
.emg-draggable-banner-content {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.emg-draggable-banner-shield {
position: absolute;
inset: 0;
z-index: 10;
cursor: grab;
background: transparent;
}
.emg-displaced-neighbor-highlight {
outline: 2px dashed rgba(56, 189, 248, 0.55) !important;
outline-offset: 4px !important;
transition: transform 0.22s ease !important;
}
.emg-banner-drag-ghost {
position: fixed;
z-index: 10000;
transform: translate(-50%, -50%);
pointer-events: none;
background: rgba(15, 23, 42, 0.92);
border: 2px solid #38BDF8;
border-radius: 14px;
padding: 0.6rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
backdrop-filter: blur(10px);
}
.emg-saved-banner-return-bar {
position: fixed;
bottom: 84px;
left: 50%;
transform: translateX(-50%);
z-index: 9995;
width: min(94vw, 620px);
background: rgba(15, 23, 42, 0.96);
border: 1.5px solid #10B981;
border-radius: 16px;
padding: 0.75rem 1rem;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(12px);
}
@media (max-width: 640px) {
.emg-banner-form-grid,
.emg-banner-next-grid {
grid-template-columns: 1fr !important;
}
body.emg-banner-placement-active {
padding-top: 195px !important;
}
}