/* OPERIX premium design layer: visual-only overrides shared by every HTML page. */ :root { color-scheme: dark; --opx-ink: #040a14; --opx-panel: rgba(10, 18, 31, .88); --opx-line: rgba(148, 163, 184, .16); --opx-gold: #f7b955; --opx-cyan: #67e8f9; --opx-muted: #9aabc0; } html { scroll-behavior: smooth; } body:not(:has(.cert-container)) { font-family: 'IBM Plex Sans Arabic', 'Tajawal', Arial, sans-serif; } body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) { background-color: var(--opx-ink); background-image: radial-gradient(ellipse at 88% 0%, rgba(247,185,85,.13), transparent 34rem), radial-gradient(ellipse at 8% 82%, rgba(34,211,238,.09), transparent 32rem), linear-gradient(180deg, #040a14, #07111f 48%, #040a14); color: #e5e7eb; background-attachment: fixed; } body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) main { position: relative; isolation: isolate; width: min(100%, 1180px); margin-inline: auto; padding-inline: clamp(16px, 3.5vw, 44px); } body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) main > nav, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .hero, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .faq, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .contact, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .release, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .item, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .status, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .table, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .note, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .panel, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) main > section { border-color: var(--opx-line); background-color: rgba(10, 18, 31, .7); box-shadow: 0 22px 58px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .hero, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .panel { background-image: radial-gradient(ellipse at 100% 0%, rgba(247,185,85,.1), transparent 60%), linear-gradient(150deg, rgba(17,28,44,.94), rgba(6,13,23,.97)); } body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) h1, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) h2, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) h3 { text-wrap: balance; } body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) a { transition: color .2s ease, opacity .2s ease; } body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) a:hover { color: #ffe1a1; } body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) button, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) input, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) select { transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; } body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) button:focus-visible, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) a:focus-visible { outline: 2px solid var(--opx-gold); outline-offset: 3px; } body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) table { border-color: var(--opx-line); } body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) th { color: #f8d58d; } body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) :is(button, a, input, select, textarea):focus-visible { outline: 2px solid rgba(255,231,176,.92); outline-offset: 3px; } body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) table { display: block; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; } /* Authenticated app: consistent surfaces across every in-page view. */ #appView { max-width: 820px; } #appView .glass-card, #appView .mission-card, #appView .stats-card, #appView .wallet-panel, #appView .profile-card, #appView .social-post-card, #appView .opx-market-card { border-color: rgba(148,163,184,.16); box-shadow: 0 18px 48px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035); } #appView .glass-card:hover, #appView .mission-card:hover, #appView .social-post-card:hover { border-color: rgba(247,185,85,.28); } #appView input:not([type="checkbox"]):not([type="radio"]), #appView select, #appView textarea { border-color: rgba(148,163,184,.2); background-color: rgba(3,9,18,.78); } #appView input:focus, #appView select:focus, #appView textarea:focus { border-color: rgba(247,185,85,.72); box-shadow: 0 0 0 3px rgba(247,185,85,.1), 0 0 24px rgba(247,185,85,.06); } #appView button:not(:disabled):focus-visible { outline: 2px solid var(--opx-gold); outline-offset: 2px; } #appView [id^="view-"] > section, #appView [id^="view-"] > .glass-card { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } #appView .opx-market-card, #appView .task-hero, #appView .team-code-card { position: relative; isolation: isolate; } #appView .opx-market-card::before, #appView .task-hero::before, #appView .team-code-card::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse at 100% 0%, rgba(103,232,249,.08), transparent 58%); } #appNavBar { border-color: rgba(148,163,184,.18) !important; box-shadow: 0 -18px 48px rgba(0,0,0,.36); } /* Community: composer's surface, member cards, tabs and post interactions. */ #view-feed .social-feed-tabs { padding: 5px; border: 1px solid rgba(103,232,249,.14); border-radius: 17px; background: linear-gradient(145deg, rgba(12,24,39,.96), rgba(4,10,19,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } #view-feed .social-feed-tab { min-height: 42px; border-radius: 13px; } #view-feed .social-feed-mode-active, #view-feed .social-feed-tab:hover { background: linear-gradient(135deg, rgba(34,211,238,.17), rgba(34,211,238,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } #view-feed .social-post-card, #view-feed .twitter-feed { background: linear-gradient(155deg, rgba(13,22,36,.98), rgba(4,9,17,.98)); border-color: rgba(103,232,249,.15); box-shadow: 0 24px 64px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.035); } #view-feed .twitter-compose, #view-feed .social-post-card > header { background: linear-gradient(120deg, rgba(14,28,44,.82), rgba(4,10,19,.88)); } #view-feed .twitter-composer-box textarea { min-height: 104px; border-radius: 20px; background: rgba(3,9,18,.88); } #view-feed .social-community-card { border-color: rgba(103,232,249,.14); background: linear-gradient(150deg, rgba(13,24,39,.92), rgba(4,10,19,.94)); box-shadow: 0 12px 26px rgba(0,0,0,.16); transition: transform .2s ease, border-color .2s ease; } #view-feed .social-community-card:hover { transform: translateY(-2px); border-color: rgba(103,232,249,.32); } #view-feed .social-post-actions button, #view-feed .social-post-button-group button, #view-feed .social-post-menu-group button { transition: color .2s ease, background .2s ease, border-color .2s ease; } #view-feed .social-floating-compose { width: 54px; height: 54px; background: linear-gradient(145deg, #a5f3fc, #22d3ee 58%, #0891b2); box-shadow: 0 16px 36px rgba(8,145,178,.32), inset 0 1px 0 rgba(255,255,255,.42); } #view-feed .twitter-post { background: rgba(7,13,23,.74); } #view-feed .twitter-post:hover { background: rgba(14,24,39,.96); } /* Financial modals: premium shells, clear hierarchy; all existing inputs/actions retained. */ #depositModal, #withdrawModal, #historyModal, #platformConfirmModal, #privateMessagesModal, #notificationsModal, #supportModal, #forgotPasswordModal, #changePasswordModal, #activeSessionsModal, #authenticatorSetupModal, #gameResultModal { background: rgba(2,7,15,.78); backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%); } #depositModal > div, #withdrawModal > div, #historyModal > div, #platformConfirmModal > div, #privateMessagesModal > div, #notificationsModal > div, #supportModal > div, #forgotPasswordModal > div, #changePasswordModal > div, #activeSessionsModal > div, #authenticatorSetupModal > div, #gameResultModal > div { border: 1px solid rgba(247,185,85,.23) !important; background: radial-gradient(ellipse at 100% 0%, rgba(247,185,85,.1), transparent 46%), linear-gradient(155deg, rgba(16,26,42,.98), rgba(5,11,20,.99)) !important; box-shadow: 0 30px 90px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.025), inset 0 1px 0 rgba(255,255,255,.055) !important; } #depositModal > div > div:first-child, #withdrawModal > div > div:first-child { border-color: rgba(148,163,184,.16); } #depositModal .bg-slate-950, #withdrawModal .bg-slate-950, #historyModal #historyList { background-color: rgba(2,7,15,.72); } #depositModal [class*="border-emerald-500"], #withdrawModal [class*="border-amber-500"] { box-shadow: inset 0 1px 0 rgba(255,255,255,.035); } #depositModal button, #withdrawModal button, #historyModal button { min-height: 42px; } #depositModal input, #withdrawModal input, #withdrawModal select { min-height: 44px; border-radius: 13px; } #historyModal #historyList > * { border-color: rgba(148,163,184,.12); border-radius: 14px; } #privateMessagesModal > div { border-color: rgba(103,232,249,.25) !important; } #socialUserCardModal > div, #socialCoverCropModal > div { border-color: rgba(103,232,249,.24) !important; background: linear-gradient(155deg, rgba(16,26,42,.98), rgba(5,11,20,.99)) !important; box-shadow: 0 30px 90px rgba(0,0,0,.56); } /* Admin workspace: preserve permission states and responsive table handling. */ #sidebar { background: linear-gradient(180deg, rgba(11,20,33,.97), rgba(5,11,20,.99)); border-color: rgba(148,163,184,.15); } #sidebar nav button { min-height: 46px; border: 1px solid transparent; } #sidebar nav button:not(.bg-amber-500):hover { background: rgba(148,163,184,.07); border-color: rgba(148,163,184,.14); } #admin-overview .glass-card, #admin-analytics .glass-card, #admin-users .glass-card, #admin-withdrawals .glass-card { border-color: rgba(148,163,184,.16); } #admin-users table tbody tr, #admin-withdrawals table tbody tr, #admin-audit table tbody tr, #admin-referrals table tbody tr { transition: background-color .18s ease; } #admin-users table tbody tr:hover, #admin-withdrawals table tbody tr:hover, #admin-audit table tbody tr:hover, #admin-referrals table tbody tr:hover { background: rgba(247,185,85,.05); } #adminConfirmModal, .admin-modal { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } @media (max-width: 640px) { #appView { padding-inline: 12px; } #view-feed .social-floating-compose { inset-inline-end: 14px; } #depositModal, #withdrawModal, #historyModal { align-items: flex-end; padding: 12px !important; } #depositModal > div, #withdrawModal > div, #historyModal > div { width: 100%; max-height: calc(100dvh - 24px); overflow-y: auto; border-radius: 26px 26px 18px 18px !important; } body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) main { padding-inline: 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* High-visibility refinement pass: stronger hierarchy, brighter edge lighting, and richer surfaces. */ .company-intro { position: relative; } .company-intro > div > header { position: sticky; top: 10px; z-index: 20; padding: 12px 16px; border: 1px solid rgba(247,185,85,.24); border-radius: 22px; background: rgba(5,11,20,.84); box-shadow: 0 16px 42px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter: blur(22px); } .company-intro .trust-strip { gap: 2px; padding: 2px; border-color: rgba(103,232,249,.3); background: linear-gradient(110deg, rgba(34,211,238,.38), rgba(247,185,85,.38), rgba(34,211,238,.18)); box-shadow: 0 14px 36px rgba(0,0,0,.26), 0 0 35px rgba(34,211,238,.07); } .company-intro .trust-item { min-height: 66px; background: linear-gradient(135deg, rgba(8,22,34,.98), rgba(5,12,22,.98)); } .company-intro .rewards-campaign { border: 1px solid rgba(255,211,128,.48); border-radius: 32px; padding: clamp(22px, 4vw, 42px); background: radial-gradient(ellipse at 100% 0%, rgba(247,185,85,.2), transparent 40%), radial-gradient(ellipse at 0% 100%, rgba(34,211,238,.12), transparent 38%), linear-gradient(145deg, #11192a 0%, #090f1d 54%, #071822 100%); box-shadow: 0 30px 90px rgba(0,0,0,.42), 0 0 55px rgba(247,185,85,.08), inset 0 1px 0 rgba(255,255,255,.1); } .company-intro .reward-campaign-heading { align-items: center; padding-bottom: 22px; border-bottom: 1px solid rgba(148,163,184,.16); } .company-intro .reward-campaign-kicker { padding: 9px 14px; border-color: rgba(255,211,128,.42); background: rgba(247,185,85,.13); font-size: 11px; box-shadow: 0 0 24px rgba(247,185,85,.08); } .company-intro .reward-campaign-title { font-size: clamp(26px,4vw,38px); letter-spacing: -.025em; } .company-intro .reward-campaign-subtitle { font-size: 14px; } .company-intro .reward-prize-grid { gap: 16px; } .company-intro .reward-prize-card { border-color: rgba(148,163,184,.24); border-radius: 24px; background: linear-gradient(155deg, rgba(22,32,50,.98), rgba(5,12,23,.98)); box-shadow: 0 18px 42px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.07); } .company-intro .reward-prize-card--grand { border-color: rgba(255,211,128,.55); box-shadow: 0 20px 48px rgba(0,0,0,.3), 0 0 28px rgba(247,185,85,.1), inset 0 1px 0 rgba(255,255,255,.1); } .company-intro .reward-prize-art { height: 178px; background-color: rgba(3,8,16,.7); } .company-intro .reward-prize-art img { height: 168px; } .company-intro .reward-prize-copy { padding: 18px; } .company-intro .reward-prize-name { font-size: 17px; } .company-intro .reward-prize-detail { font-size: 11px; } .company-intro .reward-points { padding: 8px 12px; font-size: 11px; } .company-intro .about-panel, .company-intro .intro-feature { border-color: rgba(148,163,184,.2); background: linear-gradient(145deg, rgba(15,27,43,.92), rgba(5,12,22,.96)); } .company-intro .product-preview { border-color: rgba(247,185,85,.4); box-shadow: 0 35px 90px rgba(0,0,0,.48), 0 0 44px rgba(34,211,238,.08); } .company-intro .intro-feature { min-height: 96px; padding: 20px; border-radius: 22px; } #authView .auth-panel { padding: clamp(24px,5vw,36px); border-color: rgba(247,185,85,.34); background: radial-gradient(ellipse at 50% 0%, rgba(247,185,85,.14), transparent 44%), linear-gradient(155deg, rgba(15,24,39,.98), rgba(4,10,19,.99)); box-shadow: 0 32px 90px rgba(0,0,0,.46), 0 0 45px rgba(247,185,85,.07), inset 0 1px 0 rgba(255,255,255,.08); } #authView input { min-height: 48px; border-radius: 14px; } #authView #tabLoginBtn, #authView #tabRegisterBtn { min-height: 44px; } #appView { max-width: 860px; padding-top: 18px; } #appView .operix-app-header { min-height: 72px; padding: 14px 18px; border: 1px solid rgba(247,185,85,.32); border-radius: 22px; background: radial-gradient(ellipse at 100% 0%, rgba(247,185,85,.16), transparent 48%), linear-gradient(110deg, rgba(13,29,45,.98), rgba(5,12,22,.98)); box-shadow: 0 18px 44px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08); } #view-home .operix-wallet { border: 1px solid rgba(255,211,128,.48) !important; border-radius: 30px !important; padding: clamp(18px,3.5vw,28px) !important; box-shadow: 0 28px 72px rgba(0,0,0,.35), 0 0 42px rgba(247,185,85,.1), inset 0 1px 0 rgba(255,255,255,.09) !important; } #view-home .operix-wallet #lblWalletBalance { font-size: clamp(42px,8vw,58px); letter-spacing: -.05em; text-shadow: 0 0 32px rgba(247,185,85,.18); } #view-home .balance-summary-card, #view-profile .balance-summary-card { min-height: 98px; padding: 14px; border: 1px solid rgba(148,163,184,.22); background: linear-gradient(145deg, rgba(15,28,44,.95), rgba(4,11,21,.98)); } #view-home .balance-card-value, #view-profile .balance-card-value { font-size: clamp(17px,3vw,22px); } #view-home .operix-wallet > .grid button { min-height: 50px; font-size: 12px; font-weight: 900; } #view-home .home-referral-campaign { border-color: rgba(255,211,128,.36); box-shadow: 0 24px 58px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.07); } #view-home .opx-market-card { border-color: rgba(103,232,249,.3); box-shadow: 0 22px 56px rgba(0,0,0,.28), 0 0 34px rgba(34,211,238,.06); } #appView [id^="view-"] > .glass-card, #appView [id^="view-"] > section.glass-card { border-radius: 24px; } #view-travel .task-hero { border: 1px solid rgba(255,211,128,.4); border-radius: 28px; } #view-travel #taskBoard .task-card, #view-travel #dailyTaskList [data-task-card] { border-color: rgba(148,163,184,.23); } #view-profile > .glass-card:first-child { border-color: rgba(255,211,128,.34); border-radius: 28px; } #view-feed .twitter-shell { max-width: 800px; } #view-feed .social-feed-tabs { border-color: rgba(103,232,249,.3); box-shadow: 0 12px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06); } #view-feed > section.glass-card { border-color: rgba(103,232,249,.24); border-radius: 24px; box-shadow: 0 20px 48px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.055); } #view-feed .twitter-post { border-bottom-color: rgba(103,232,249,.12); } #view-feed .twitter-post-inner { padding: 20px; } #view-feed .twitter-user-meta strong { font-size: 14px; } #view-feed .twitter-post-body p { font-size: 14px; line-height: 1.9; } #view-feed .twitter-composer-box textarea { border-color: rgba(103,232,249,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); } #view-feed .twitter-submit { background: linear-gradient(135deg, #a5f3fc, #22d3ee 58%, #0891b2); box-shadow: 0 10px 26px rgba(8,145,178,.2); } #depositModal > div, #withdrawModal > div, #historyModal > div { position: relative; overflow: hidden; border-radius: 28px !important; padding: 24px !important; } #depositModal > div::before, #withdrawModal > div::before, #historyModal > div::before, #privateMessagesModal > div::before { content: ''; position: absolute; top: 0; right: 7%; left: 7%; height: 2px; background: linear-gradient(90deg, transparent, #ffe1a1 28%, #f7b955 52%, #67e8f9 76%, transparent); box-shadow: 0 0 20px rgba(247,185,85,.38); } #depositModal > div > div:first-child, #withdrawModal > div > div:first-child { padding-bottom: 14px; } #depositModal > div > div:first-child h3, #withdrawModal > div > div:first-child h3 { font-size: 16px; } #depositModal .bg-slate-950, #withdrawModal .bg-slate-950 { border-color: rgba(148,163,184,.24); border-radius: 18px; } #depositModal [class*="border-emerald-500"] { padding: 14px; border-color: rgba(52,211,153,.32); background: linear-gradient(130deg, rgba(16,185,129,.12), rgba(3,16,21,.76)); font-size: 12px; line-height: 1.9; } #withdrawModal #withdrawFeeSummary { padding: 9px 11px; border: 1px solid rgba(247,185,85,.22); border-radius: 12px; background: rgba(247,185,85,.06); color: #f8d58d; } #depositModal button.gold-gradient, #withdrawModal button.gold-gradient, #withdrawModal #btnSubmitWithdraw { min-height: 50px; border-radius: 15px; box-shadow: 0 12px 28px rgba(247,185,85,.18); } #privateMessagesModal > div { position: relative; overflow: hidden; border-radius: 28px; box-shadow: 0 34px 95px rgba(0,0,0,.58), 0 0 38px rgba(34,211,238,.08); } #sidebar { border-inline-start: 1px solid rgba(247,185,85,.22); } #sidebar nav button.bg-amber-500 { border-radius: 15px; } #admin-overview .ops-status { border-color: rgba(52,211,153,.25); background: linear-gradient(120deg, rgba(16,185,129,.1), rgba(3,10,19,.7)); } #admin-overview > .grid .glass-card { border-radius: 24px; } #admin-users .glass-card, #admin-withdrawals .glass-card { border-radius: 24px; } @media (max-width: 640px) { .company-intro .rewards-campaign { padding: 18px 14px; border-radius: 24px; } .company-intro .reward-campaign-title { font-size: 25px; } .company-intro .reward-prize-art { min-height: 134px; } .company-intro .reward-prize-card { min-height: 138px; } #appView .operix-app-header { border-radius: 19px; } #view-home .operix-wallet { border-radius: 24px !important; } #view-feed .twitter-post-inner { padding: 15px; } #depositModal > div, #withdrawModal > div, #historyModal > div { padding: 20px !important; } } #view-ai .ai-quick-action { display: flex; min-width: 0; min-height: 46px; align-items: center; gap: 9px; border: 1px solid rgba(148,163,184,.16); border-radius: 14px; padding: 10px 11px; background: linear-gradient(135deg, rgba(15,27,43,.88), rgba(5,12,22,.92)); color: #dbe5f2; font-size: 10px; font-weight: 800; text-align: right; transition: border-color .18s ease, background .18s ease, transform .18s ease; } #view-ai .ai-quick-action:hover { transform: translateY(-1px); border-color: rgba(247,185,85,.38); background: linear-gradient(135deg, rgba(247,185,85,.09), rgba(5,12,22,.96)); } #view-ai .ai-quick-action > i:first-child { font-size: 13px; } #view-ai .ai-mode-button { min-height: 38px; border: 1px solid transparent; border-radius: 12px; background: rgba(15,23,42,.68); color: #9aabc0; font-size: 10px; font-weight: 800; transition: color .18s ease, background .18s ease, border-color .18s ease; } #view-ai .ai-mode-button:hover { color: #fff; border-color: rgba(148,163,184,.2); } #view-ai .ai-mode-button.is-active { border-color: rgba(247,185,85,.28); background: linear-gradient(120deg, rgba(247,185,85,.19), rgba(247,185,85,.08)); color: #ffe1a1; } #view-ai #aiChatBox { scrollbar-color: rgba(148,163,184,.35) transparent; scrollbar-width: thin; } #view-ai .ai-assistant-message { display: flex; align-items: flex-start; gap: 10px; border: 1px solid rgba(148,163,184,.14); border-radius: 17px; padding: 12px; background: linear-gradient(135deg, rgba(15,27,43,.88), rgba(8,15,26,.92)); } #view-ai .ai-assistant-avatar { display: flex; width: 30px; height: 30px; flex: 0 0 30px; align-items: center; justify-content: center; border: 1px solid rgba(247,185,85,.22); border-radius: 10px; background: rgba(247,185,85,.09); color: #f8d58d; font-size: 11px; } #view-ai .ai-user-message { max-width: 88%; margin-inline-start: auto; border: 1px solid rgba(34,211,238,.2); border-radius: 17px 17px 5px 17px; padding: 11px 13px; background: linear-gradient(135deg, rgba(8,47,73,.64), rgba(15,23,42,.88)); color: #f1f5f9; } #view-ai .ai-response-text { white-space: pre-wrap; line-height: 1.85; } #view-ai .ai-response-tools button { transition: color .18s ease; } #view-ai .ai-response-tools button:hover { color: #f8d58d; } @media (max-width: 420px) { #view-ai .ai-quick-action { gap: 7px; padding-inline: 8px; font-size: 9px; } #view-ai .ai-user-message { max-width: 94%; } } /* OPERIX Signature Reserve: final luxury polish. */ :root { --opx-champagne: #ffe7b0; --opx-gold-bright: #f6c76d; --opx-gold-deep: #9b672b; --opx-velvet: #070b13; --opx-surface: #0c1421; } .company-intro > div > header { border-color: rgba(255,231,176,.34); background: linear-gradient(110deg, rgba(7,11,19,.95), rgba(13,20,31,.88)); box-shadow: 0 18px 54px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,231,176,.08); } .company-intro .rewards-campaign { isolation: isolate; overflow: hidden; border-color: rgba(255,231,176,.56); background: radial-gradient(ellipse at 80% -10%, rgba(255,231,176,.18), transparent 34%), radial-gradient(ellipse at 0% 100%, rgba(34,211,238,.1), transparent 36%), linear-gradient(145deg, #111722 0%, #080d16 52%, #0a1720 100%); box-shadow: 0 36px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,231,176,.06), 0 0 68px rgba(247,185,85,.11), inset 0 1px 0 rgba(255,255,255,.12); } .company-intro .rewards-campaign::after { content: ''; position: absolute; z-index: -1; inset: 9px; border: 1px solid rgba(255,231,176,.1); border-radius: 25px; pointer-events: none; } .company-intro .reward-campaign-heading { border-bottom-color: rgba(255,231,176,.18); } .company-intro .reward-campaign-kicker { color: var(--opx-champagne); border-color: rgba(255,231,176,.45); background: linear-gradient(110deg, rgba(247,185,85,.16), rgba(247,185,85,.045)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 22px rgba(247,185,85,.08); } .company-intro .reward-campaign-title { color: #fffaf0; text-shadow: 0 5px 28px rgba(255,231,176,.13); } .company-intro .reward-campaign-cta, #view-home .operix-wallet > .grid button:nth-child(2), #depositModal button.gold-gradient, #withdrawModal #btnSubmitWithdraw { position: relative; overflow: hidden; border: 1px solid rgba(255,244,214,.62); background: linear-gradient(135deg, #fff0c7 0%, #f5ca76 26%, #d99b44 62%, #b9792d 100%); color: #21170b; box-shadow: 0 14px 32px rgba(185,121,45,.24), inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(111,66,20,.24); } .company-intro .reward-campaign-cta::after, #view-home .operix-wallet > .grid button:nth-child(2)::after, #depositModal button.gold-gradient::after, #withdrawModal #btnSubmitWithdraw::after { content: ''; position: absolute; top: -50%; bottom: -50%; left: -70%; width: 42%; transform: rotate(22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent); transition: left .55s cubic-bezier(.22,1,.36,1); pointer-events: none; } .company-intro .reward-campaign-cta:hover::after, #view-home .operix-wallet > .grid button:nth-child(2):hover::after, #depositModal button.gold-gradient:hover::after, #withdrawModal #btnSubmitWithdraw:hover::after { left: 130%; } .company-intro .reward-prize-card { border-color: rgba(255,231,176,.18); background: linear-gradient(155deg, rgba(21,29,42,.98), rgba(6,11,19,.99)); box-shadow: 0 20px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.085); } .company-intro .reward-prize-art { position: relative; background: radial-gradient(ellipse at 50% 100%, rgba(247,185,85,.18), transparent 65%), linear-gradient(180deg, rgba(12,19,30,.9), rgba(4,8,15,.95)); } .company-intro .reward-prize-art::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.055); border-radius: 15px; pointer-events: none; } .company-intro .reward-prize-card--grand .reward-prize-art { background: radial-gradient(ellipse at 50% 100%, rgba(247,185,85,.3), transparent 65%), linear-gradient(180deg, rgba(30,25,18,.88), rgba(8,10,15,.98)); } .company-intro .reward-prize-card:hover { transform: translateY(-6px); border-color: rgba(255,231,176,.54); box-shadow: 0 28px 64px rgba(0,0,0,.42), 0 0 34px rgba(247,185,85,.13), inset 0 1px 0 rgba(255,255,255,.12); } .company-intro .reward-prize-card--grand .reward-prize-name { color: var(--opx-champagne); } .company-intro .reward-points { border-color: rgba(255,231,176,.35); background: rgba(247,185,85,.1); color: var(--opx-champagne); } .company-intro .about-panel, .company-intro .intro-feature { box-shadow: 0 20px 55px rgba(0,0,0,.29), inset 0 1px 0 rgba(255,255,255,.06); } .company-intro footer { padding-top: 20px; } #authView .auth-panel, #view-home .operix-wallet, #view-feed > section.glass-card, #view-travel .task-hero, #view-profile > .glass-card:first-child { box-shadow: 0 30px 84px rgba(0,0,0,.4), 0 0 46px rgba(247,185,85,.075), inset 0 1px 0 rgba(255,255,255,.095) !important; } #appView .operix-app-header { border-color: rgba(255,231,176,.34); } #view-home .balance-summary-card, #view-profile .balance-summary-card { background: linear-gradient(145deg, rgba(19,29,43,.98), rgba(5,10,18,.99)); box-shadow: 0 14px 32px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.065); } #view-home .balance-usdt { border-top-color: rgba(103,232,249,.52); } /* Keep the complete withdrawal flow reachable on short and mobile viewports. */ #withdrawModal > div { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(247,185,85,.42) transparent; } #view-home .balance-deposit { border-top-color: rgba(52,211,153,.52); } #view-home .balance-profit { border-top-color: rgba(255,231,176,.58); } #view-home .balance-opx { border-top-color: rgba(167,139,250,.5); } #view-home .operix-wallet > .grid button:first-child { border-color: rgba(52,211,153,.38); background: linear-gradient(140deg, rgba(16,185,129,.2), rgba(6,20,24,.88)); } #view-home .operix-wallet > .grid button:last-child { border-color: rgba(148,163,184,.24); background: linear-gradient(140deg, rgba(30,41,59,.9), rgba(7,13,22,.96)); } #view-feed .twitter-feed, #view-feed .social-community-card { box-shadow: 0 24px 64px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.065); } #view-feed .social-community-avatar { border-color: rgba(255,231,176,.35); background: linear-gradient(145deg, rgba(247,185,85,.17), rgba(34,211,238,.12)); color: var(--opx-champagne); } #view-feed .twitter-post-actions button:hover { color: var(--opx-champagne); text-shadow: 0 0 18px rgba(247,185,85,.26); } #view-feed .social-floating-compose { border: 1px solid rgba(255,255,255,.42); background: linear-gradient(145deg, #e6fbff, #67e8f9 48%, #0891b2); box-shadow: 0 18px 42px rgba(8,145,178,.38), inset 0 1px 0 rgba(255,255,255,.72); } #depositModal > div, #withdrawModal > div, #historyModal > div, #privateMessagesModal > div { border-color: rgba(255,231,176,.38) !important; box-shadow: 0 38px 110px rgba(0,0,0,.68), 0 0 50px rgba(247,185,85,.1), inset 0 1px 0 rgba(255,255,255,.1) !important; } #depositModal input, #withdrawModal input, #withdrawModal select { border-color: rgba(255,231,176,.18); background: linear-gradient(145deg, rgba(4,9,16,.96), rgba(10,18,29,.98)); } #depositModal [class*="border-emerald-500"] { border-inline-start: 3px solid #4ade80; } #withdrawModal [class*="border-amber-500"] { border-inline-start: 3px solid var(--opx-gold-bright); } #historyModal #historyList > div { padding: 12px; background: linear-gradient(120deg, rgba(16,26,40,.9), rgba(5,10,18,.92)); } #appNavBar { border-top-color: rgba(255,231,176,.2) !important; background: linear-gradient(180deg, rgba(10,15,24,.94), rgba(3,6,12,.99)) !important; } #appNavBar .app-nav-item.is-active { box-shadow: inset 0 -2px 0 var(--opx-champagne), 0 0 24px rgba(247,185,85,.08); } #sidebar { box-shadow: 14px 0 54px rgba(0,0,0,.24), inset -1px 0 rgba(255,231,176,.08); } #sidebar nav button.bg-amber-500 { background: linear-gradient(135deg, #fff0c7, #f5ca76 52%, #d99b44); color: #21170b; } #admin-overview .glass-card, #admin-analytics .glass-card, #admin-users .glass-card, #admin-withdrawals .glass-card { box-shadow: 0 20px 52px rgba(0,0,0,.29), inset 0 1px 0 rgba(255,255,255,.055); } @media (prefers-reduced-motion: no-preference) { .company-intro .reward-prize-art img { transition: transform .45s cubic-bezier(.22,1,.36,1), filter .45s ease; } .company-intro .reward-prize-card:hover .reward-prize-art img { transform: translateY(-4px) scale(1.045); filter: drop-shadow(0 17px 18px rgba(0,0,0,.42)); } } @media (max-width: 640px) { .company-intro .rewards-campaign::after { inset: 6px; border-radius: 19px; } .company-intro .reward-prize-card:hover { transform: none; } } @media (max-width: 640px) { #view-home .premium-status-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; } #view-home .status-pill { min-height: 58px; padding: 7px 8px; gap: 5px; border-radius: 14px; } #view-home .status-pill i { width: 25px; height: 25px; border-radius: 9px; font-size: 10px; } #view-home .status-pill span { font-size: 8px; white-space: nowrap; } #view-home .status-pill strong { font-size: 13px; } } @media (max-width: 480px) { #view-home .balance-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; } #view-home .operix-wallet { padding: 14px !important; } #view-home .operix-wallet > :nth-child(2) { padding: 0 0 8px; } #view-home .operix-wallet > :nth-child(4), #view-home .operix-wallet > :nth-child(5), #view-home .operix-wallet > :nth-child(6), #view-home .operix-wallet > :nth-child(7), #view-home .operix-wallet > :nth-child(8), #view-home .operix-wallet > :nth-child(9) { margin-top: 8px; } #view-home #lblWalletBalance { font-size: 34px; } #view-home .balance-summary-card { min-height: 76px; padding: 9px; border-radius: 14px; } #view-home .balance-summary-card .balance-card-head { font-size: 9px; } #view-home .balance-summary-card .balance-card-value { margin-top: 4px; font-size: 15px; line-height: 1.25; } #view-home .balance-summary-card .balance-card-value small { font-size: 9px; } #view-home .balance-summary-card .balance-card-note { margin-top: 2px; font-size: 8px; } } /* Keep the deposit wallet instructions and QR reachable on short screens. */ #depositModal > .deposit-modal-shell { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* OPERIX Atelier: restrained champagne accents and consistent surface depth. */ :root { --opx-line-soft: rgba(255,231,176,.12); --opx-shadow-card: 0 18px 46px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.045); } #appView [id^="view-"] > .glass-card, #appView [id^="view-"] > section.glass-card, #appView [id^="view-"] > .task-hero { border-color: var(--opx-line-soft); box-shadow: var(--opx-shadow-card); } #appView .app-tab-view > .glass-card, #appView .app-tab-view > section, #appView .app-tab-view [data-panel] { border-color: rgba(148,163,184,.15); box-shadow: 0 14px 38px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035); } #view-home .premium-status-strip .status-pill { border-color: rgba(255,231,176,.14); background: linear-gradient(150deg, rgba(17,25,37,.96), rgba(6,11,19,.98)); box-shadow: 0 12px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.055); } #view-home .premium-status-strip .status-pill::before { height: 1px; opacity: .56; } #view-home .premium-status-strip .status-pill strong { font-variant-numeric: tabular-nums; } #view-home .balance-summary-card { border-color: rgba(255,231,176,.16); } #view-travel .task-hero, #view-profile > .glass-card:first-child { background-image: radial-gradient(ellipse at 92% 0%, rgba(255,231,176,.1), transparent 48%), linear-gradient(150deg, rgba(16,24,36,.98), rgba(5,10,18,.99)); } #view-travel #taskBoard .task-card, #view-travel #dailyTaskList [data-task-card] { border-color: rgba(255,231,176,.13); background: linear-gradient(150deg, rgba(15,23,35,.97), rgba(5,10,18,.99)); box-shadow: 0 12px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035); } #view-travel #taskBoard .task-card:hover, #view-travel #dailyTaskList [data-task-card]:hover { border-color: rgba(255,231,176,.32); box-shadow: 0 18px 38px rgba(0,0,0,.28), 0 0 24px rgba(247,185,85,.045); } #appNavBar .app-nav-item { border-color: rgba(255,231,176,.075); } #appNavBar .app-nav-item.is-active { border-color: rgba(255,231,176,.24); background: linear-gradient(180deg, rgba(247,185,85,.14), rgba(9,14,22,.96)); } #sidebar nav button.bg-amber-500 { background: linear-gradient(135deg, #fff1cf, #f1c879 58%, #c18a43); box-shadow: 0 10px 24px rgba(185,121,45,.18), inset 0 1px 0 rgba(255,255,255,.65); } #admin-overview > .grid .glass-card, #admin-analytics .glass-card, #admin-users .glass-card, #admin-withdrawals .glass-card { border-color: rgba(255,231,176,.12); box-shadow: 0 16px 40px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.04); } body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) main > section, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .faq, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .contact, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .release, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .status, body:not(:has(#appView)):not(:has(#sidebar)):not(:has(.cert-container)) .panel { border-radius: 20px; box-shadow: 0 18px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04); } #appView :is(button, a, input, select, textarea):focus-visible, #sidebar button:focus-visible { outline: 2px solid rgba(255,231,176,.88); outline-offset: 3px; } @media (max-width: 640px) { #appView [id^="view-"] > .glass-card, #appView [id^="view-"] > section.glass-card { border-radius: 20px; } } @media (prefers-reduced-motion: reduce) { #view-travel #taskBoard .task-card, #view-travel #dailyTaskList [data-task-card] { transition: none; } } /* Community timeline: familiar microblog hierarchy, with OPERIX branding. */ @media (min-width: 900px) { #appView:has(#view-feed:not(.hide)) { max-width: 1180px; } } #view-feed.twitter-shell { display: grid; width: min(100%, 1120px); max-width: none; margin-inline: auto; grid-template-columns: minmax(0, 650px) minmax(250px, 320px); grid-template-areas: "timeline-tabs community-stats" "timeline-compose community-members" "timeline-posts community-members"; align-items: start; gap: 12px 22px; } #view-feed > .social-feed-tabs { grid-area: timeline-tabs; } #view-feed > section:has(#socialStatPosts) { grid-area: community-stats; } #view-feed > section:has(#socialCommunityList) { grid-area: community-members; } #view-feed > section:has(#socialPostContent) { grid-area: timeline-compose; } #view-feed > section:has(#socialFeedList) { grid-area: timeline-posts; min-width: 0; } #view-feed > section.grid { display: none; } #view-feed > .social-feed-tabs { position: sticky; top: 0; z-index: 5; gap: 0; padding: 0; border: 1px solid rgba(255,255,255,.09); border-radius: 17px 17px 0 0; background: rgba(5,11,20,.94); box-shadow: 0 12px 28px rgba(0,0,0,.2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } #view-feed .social-feed-tab { position: relative; min-height: 56px; border-radius: 0; color: #8b98a9; font-size: 12px; transition: color .18s ease, background .18s ease; } #view-feed .social-feed-tab:hover { color: #f8fafc; background: rgba(255,255,255,.035); } #view-feed .social-feed-tab.social-feed-mode-active { color: #fff; background: transparent; box-shadow: none; } #view-feed .social-feed-tab.social-feed-mode-active::after { content: ''; position: absolute; inset-inline: 24%; bottom: 0; height: 4px; border-radius: 999px 999px 0 0; background: linear-gradient(90deg, #f7b955, #ffe7b0); box-shadow: 0 0 16px rgba(247,185,85,.24); } #view-feed > section:has(#socialPostContent) { padding: 14px !important; border-color: rgba(255,255,255,.1); border-radius: 18px; background: linear-gradient(155deg, rgba(14,22,34,.98), rgba(5,10,18,.99)); box-shadow: 0 16px 38px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.045); } #view-feed > section:has(#socialPostContent) > div:first-child { display: none; } #view-feed > section:has(#socialPostContent) form { position: relative; } #view-feed > section:has(#socialPostContent) form .social-compose-avatar { position: absolute; inset-inline-start: 0; top: 3px; display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; border: 1px solid rgba(255,231,176,.35); border-radius: 50%; background: linear-gradient(145deg, #ffe7b0, #c18a43); color: #17120b; font-family: Georgia, serif; font-size: 20px; font-weight: 900; box-shadow: 0 5px 16px rgba(0,0,0,.28); } #view-feed .social-compose-avatar img { width: 100%; height: 100%; object-fit: cover; } #view-feed #socialPostContent { min-height: 76px; padding: 12px 60px 12px 14px; border: 1px solid rgba(148,163,184,.14); border-radius: 16px; background: rgba(2,7,14,.68); font-size: 13px; line-height: 1.8; resize: vertical; } #view-feed #socialPostContent:focus { border-color: rgba(247,185,85,.42); } #view-feed #socialPostSubmit { min-width: 86px; min-height: 38px; border-radius: 999px; background: linear-gradient(135deg, #ffe7b0, #e7b85f 62%, #c18a43); color: #1a140b; box-shadow: 0 8px 20px rgba(185,121,45,.2), inset 0 1px 0 rgba(255,255,255,.55); } #view-feed #socialPostSubmit:disabled { opacity: .55; } #view-feed label[for="socialImageInput"] { border-color: rgba(255,231,176,.18); border-radius: 999px; } #view-feed > section:has(#socialStatPosts), #view-feed > section:has(#socialCommunityList) { border-color: rgba(255,255,255,.1); border-radius: 18px; background: linear-gradient(155deg, rgba(14,22,34,.96), rgba(5,10,18,.98)); box-shadow: 0 14px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04); } #view-feed > section:has(#socialStatPosts) { padding: 14px !important; } #view-feed #communityPulseState, #view-feed #communityPulseTitle, #view-feed #communityPulseMeta { display: none; } #view-feed #socialCommunityList { grid-template-columns: minmax(0,1fr); max-height: min(54vh, 520px); gap: 6px; } #view-feed #socialCommunityList .social-community-card { padding: 8px; border-radius: 14px; } #view-feed #socialCommunityList .social-community-cover { height: 30px; margin: -8px -8px 7px; } #view-feed .social-follow-button { min-height: 30px; padding-inline: 12px; border-color: rgba(255,255,255,.72); background: #f8fafc; color: #10151c; font-size: 10px; font-weight: 900; } #view-feed .social-follow-button:hover { background: #dbe4ed; color: #10151c; } #view-feed .social-follow-button.is-following { border-color: rgba(148,163,184,.28); background: rgba(148,163,184,.1); color: #cbd5e1; } #view-feed > section:has(#socialFeedList) { padding: 0; } #view-feed > section:has(#socialFeedList) > div:first-child { min-height: 54px; padding: 0 16px; border: 1px solid rgba(255,255,255,.1); border-bottom: 0; border-radius: 18px 18px 0 0; background: rgba(5,11,20,.94); } #view-feed > section:has(#socialFeedList) > div:first-child h3 { font-size: 15px; } #view-feed #socialFeedList { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 0 0 18px 18px; background: rgba(5,10,18,.96); } #view-feed #socialFeedList > .twitter-post { border-bottom-color: rgba(255,255,255,.085); } #view-feed .twitter-post-inner { gap: 12px; padding: 16px; } #view-feed .twitter-avatar-badge { border-color: rgba(255,231,176,.22); } #view-feed .twitter-user-meta strong, #view-feed .twitter-user-meta .twitter-author-button { font-size: 13px; } #view-feed .twitter-post-body { margin-top: 5px; } #view-feed .twitter-post-body p { color: #e7edf4; font-size: 14px; line-height: 1.85; } #view-feed .twitter-post-media { border-color: rgba(255,255,255,.12); border-radius: 17px; } #view-feed .twitter-post .social-post-actions { padding: 8px 16px 12px; } #view-feed .twitter-post .social-post-button-group { justify-content: space-between; width: 100%; } #view-feed .twitter-post .social-post-actions .social-like-button, #view-feed .twitter-post .social-post-actions .social-comment-button, #view-feed .twitter-post .social-post-actions .social-mini-button { min-width: 54px; min-height: 36px; justify-content: center; border: 0; background: transparent; color: #8492a4; font-size: 10px; } #view-feed .twitter-post .social-post-actions .social-like-button:hover { color: #fb7185; background: rgba(251,113,133,.08); } #view-feed .twitter-post .social-post-actions .social-comment-button:hover { color: #67e8f9; background: rgba(103,232,249,.08); } #view-feed .twitter-post .social-post-actions .social-mini-button:hover { color: #f7c45e; background: rgba(247,185,85,.08); } #view-feed #socialFeedMore { border-color: rgba(255,231,176,.16); color: #f7d994; } @media (max-width: 899px) { #view-feed.twitter-shell { width: 100%; grid-template-columns: minmax(0,1fr); grid-template-areas: "timeline-tabs" "timeline-compose" "timeline-posts" "community-stats" "community-members"; gap: 10px; } #view-feed > .social-feed-tabs { position: sticky; top: 0; } #view-feed > section:has(#socialStatPosts) { padding: 10px 12px !important; } #view-feed > section:has(#socialCommunityList) { padding: 12px !important; } #view-feed #socialCommunityList { grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); max-height: none; } #view-feed #socialCommunityList .social-community-cover { height: 36px; } } @media (max-width: 480px) { #view-feed.twitter-shell { padding-inline: 0; gap: 8px; } #view-feed > section:has(#socialPostContent) { padding: 11px !important; border-radius: 15px; } #view-feed > section:has(#socialPostContent) form .social-compose-avatar { width: 36px; height: 36px; font-size: 17px; } #view-feed #socialPostContent { min-height: 66px; padding: 9px 52px 9px 10px; font-size: 12px; } #view-feed > section:has(#socialFeedList) > div:first-child { min-height: 48px; padding-inline: 12px; } #view-feed #socialFeedList { border-radius: 0 0 15px 15px; } #view-feed .twitter-post-inner { grid-template-columns: 38px minmax(0,1fr); gap: 9px; padding: 13px 11px; } #view-feed .twitter-post .social-post-actions { padding-inline: 8px; } #view-feed .twitter-post .social-post-actions .social-like-button, #view-feed .twitter-post .social-post-actions .social-comment-button, #view-feed .twitter-post .social-post-actions .social-mini-button { min-width: 42px; padding-inline: 5px; } } /* Final community refinement: cleaner timeline, practical discovery, less dashboard clutter. */ #view-feed > section:has(#socialStatPosts) { display: none; } #view-feed.twitter-shell { grid-template-areas: "timeline-tabs community-members" "timeline-compose community-members" "timeline-posts community-members"; column-gap: 24px; } #view-feed > section:has(#socialCommunityList) { position: sticky; top: 14px; padding: 12px !important; } #view-feed > section:has(#socialCommunityList) > div:first-child { align-items: flex-start; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); } #view-feed > section:has(#socialCommunityList) > div:first-child h3 { font-size: 14px; letter-spacing: -.01em; } #view-feed > section:has(#socialCommunityList) > div:first-child p { max-width: 210px; line-height: 1.6; } #view-feed #socialCommunityList { max-height: 230px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.24) transparent; } #view-feed #socialCommunityList .social-community-card { padding: 10px 2px; border: 0; border-bottom: 1px solid rgba(255,255,255,.07); border-radius: 0; background: transparent; box-shadow: none; } #view-feed #socialCommunityList .social-community-card:hover { transform: none; } #view-feed #socialCommunityList .social-community-cover { display: none; } #view-feed #socialCommunityList .social-community-user { gap: 9px; padding: 0; border: 0; } #view-feed #socialCommunityList .social-community-avatar { width: 38px; height: 38px; border-color: rgba(255,231,176,.2); background: linear-gradient(145deg, rgba(247,185,85,.18), rgba(34,211,238,.1)); color: #ffe7b0; } #view-feed #socialCommunityList .social-community-user > div:nth-child(2) { overflow: hidden; } #view-feed #socialCommunityList .social-community-user > div:nth-child(2) > b { font-size: 11px; } #view-feed #socialCommunityList .social-community-user > div:nth-child(2) > span { font-size: 9px; } #view-feed #socialCommunityList .social-follow-button { min-height: 28px; padding-inline: 10px; font-size: 9px; } #view-feed .social-floating-compose { display: none; } #view-feed .twitter-post { background: transparent; } #view-feed .twitter-post:hover { background: rgba(255,255,255,.018); } #view-feed .twitter-post .social-post-button-group { max-width: 470px; } #view-feed .twitter-post .social-post-actions .social-like-button, #view-feed .twitter-post .social-post-actions .social-comment-button, #view-feed .twitter-post .social-post-actions .social-mini-button { color: #78879a; } #view-feed .twitter-post .social-post-menu-group { padding-top: 2px; } #view-feed .twitter-post .social-post-menu-group .social-mini-button { min-height: 30px; padding-inline: 8px; font-size: 9px; } #view-feed .twitter-post .social-post-menu-group .social-mini-button.danger { color: #c17e8b; } #view-feed #socialFeedMore { margin-top: 10px; border-radius: 999px; background: rgba(247,185,85,.035); } @media (max-width: 899px) { #view-feed.twitter-shell { grid-template-areas: "timeline-tabs" "timeline-compose" "timeline-posts" "community-members"; } #view-feed > section:has(#socialStatPosts) { display: none; } #view-feed > section:has(#socialCommunityList) { position: static; padding: 10px 12px !important; } #view-feed > section:has(#socialCommunityList) > div:first-child { margin-bottom: 6px; padding-bottom: 6px; } #view-feed > section:has(#socialCommunityList) > div:first-child p { display: none; } #view-feed #socialCommunityList { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 260px); grid-template-columns: none; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: thin; } #view-feed #socialCommunityList .social-community-card { min-width: 0; padding: 7px 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(255,255,255,.018); } #view-feed #socialCommunityList .social-community-user { gap: 7px; } #view-feed #socialCommunityList .social-community-avatar { width: 32px; height: 32px; } #view-feed #socialCommunityList .social-community-user > div:nth-child(2) > span:not(.social-community-handle) { display: none; } } @media (max-width: 480px) { #view-feed .social-floating-compose { display: grid; } #view-feed > section:has(#socialCommunityList) { border-radius: 15px; } #view-feed > section:has(#socialCommunityList) > div:first-child { margin-bottom: 8px; } #view-feed #socialCommunityList { grid-auto-columns: minmax(190px, 78vw); } } /* Games lounge: editorial header, elegant game stages, and clear reward states. */ #view-spin { max-width: 940px; margin-inline: auto; padding-bottom: 12px; } #view-spin > .glass-card:first-child { position: relative; isolation: isolate; overflow: hidden; padding: clamp(18px, 3vw, 26px); border: 1px solid rgba(255,231,176,.24); border-radius: 26px; background: radial-gradient(ellipse at 8% 0%, rgba(255,231,176,.12), transparent 38%), radial-gradient(ellipse at 100% 100%, rgba(103,232,249,.07), transparent 34%), linear-gradient(145deg, rgba(18,25,37,.98), rgba(5,10,18,.99)); box-shadow: 0 24px 62px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.075); } #view-spin > .glass-card:first-child::after { content: ''; position: absolute; z-index: -1; inset: auto 8% 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,231,176,.42), rgba(103,232,249,.25), transparent); } #view-spin > .glass-card:first-child h3 { font-size: clamp(20px, 3vw, 25px); letter-spacing: -.025em; } #view-spin > .glass-card:first-child > p { max-width: 620px; font-size: 11px; line-height: 1.9; } #view-spin #gameReferralRequirement { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,231,176,.18); border-radius: 999px; padding: 7px 11px; background: rgba(247,185,85,.07); color: #f2d89e; white-space: nowrap; } #view-spin #gameConfigStatus, #view-spin #platformStatus { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 9px; border: 1px solid rgba(148,163,184,.12); border-radius: 999px; background: rgba(2,7,14,.42); } #view-spin #platformStatus { color: #92a0b2; } #view-spin > .grid.grid-cols-1.md\:grid-cols-2 { gap: 16px; } #view-spin > .grid.grid-cols-1.md\:grid-cols-2 > .glass-card { --game-accent: #f3c76b; --game-accent-rgb: 243,199,107; position: relative; display: flex; min-width: 0; flex-direction: column; align-items: stretch; overflow: hidden; gap: 18px; padding: clamp(18px, 3vw, 25px); border: 1px solid rgba(var(--game-accent-rgb),.22); border-radius: 26px; background: radial-gradient(ellipse at 50% 42%, rgba(var(--game-accent-rgb),.10), transparent 47%), linear-gradient(155deg, rgba(16,23,35,.98), rgba(5,10,18,.99)); box-shadow: 0 22px 56px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.055); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; } #view-spin > .grid.grid-cols-1.md\:grid-cols-2 > .glass-card::before { content: ''; position: absolute; inset: 0 14% auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--game-accent-rgb),.5), transparent); } #view-spin > .grid.grid-cols-1.md\:grid-cols-2 > .glass-card:hover { transform: translateY(-3px); border-color: rgba(var(--game-accent-rgb),.4); box-shadow: 0 28px 64px rgba(0,0,0,.38), 0 0 32px rgba(var(--game-accent-rgb),.055), inset 0 1px 0 rgba(255,255,255,.075); } #view-spin > .grid.grid-cols-1.md\:grid-cols-2 > .glass-card:nth-child(2) { --game-accent: #b9a1ff; --game-accent-rgb: 157,126,255; } #view-spin > .grid.grid-cols-1.md\:grid-cols-2 > .glass-card > div:first-child { min-height: 48px; align-items: center; } #view-spin > .grid.grid-cols-1.md\:grid-cols-2 > .glass-card > div:first-child h3 { font-size: 16px; letter-spacing: -.015em; } #view-spin > .grid.grid-cols-1.md\:grid-cols-2 > .glass-card > div:first-child p { margin-top: 4px; color: #99a6b7; font-size: 10px; } #view-spin #lblWheelCredits, #view-spin #lblMysteryBoxCredits { font-size: 12px; font-variant-numeric: tabular-nums; } #view-spin .wheel-disc { width: min(100%, 224px); height: auto; aspect-ratio: 1; border-width: 7px; border-color: rgba(255,231,176,.78); background: conic-gradient(from -22.5deg, #f6d990 0 12.5%, #8a5c24 12.5% 25%, #f0bd58 25% 37.5%, #513b25 37.5% 50%, #ffe7b0 50% 62.5%, #855c2b 62.5% 75%, #e8ae48 75% 87.5%, #3d3023 87.5% 100%); box-shadow: 0 0 0 7px rgba(255,231,176,.055), 0 0 38px rgba(247,185,85,.17), inset 0 0 0 3px rgba(31,23,13,.58), inset 0 0 26px rgba(24,17,8,.45); } #view-spin .wheel-disc::before { inset: 12px; border: 1px solid rgba(255,255,255,.35); } #view-spin #spinWheelVisual > div { width: 68px; height: 68px; border: 2px solid #ffe7b0; background: radial-gradient(circle at 35% 25%, #28354a, #080d15 70%); color: #ffe7b0; box-shadow: 0 8px 28px rgba(0,0,0,.52), 0 0 0 6px rgba(255,231,176,.12), inset 0 1px 0 rgba(255,255,255,.16); } #view-spin #spinWheelVisual > div i { font-size: 22px; filter: drop-shadow(0 0 10px rgba(255,231,176,.28)); } #view-spin .fa-caret-down { top: -13px; z-index: 3; color: #fff0c7; filter: drop-shadow(0 4px 7px rgba(0,0,0,.65)); } #view-spin #mysteryBoxVisual { position: relative; width: min(100%, 176px); height: auto; aspect-ratio: 1; border: 1px solid rgba(225,210,255,.5); border-radius: 34px; background: radial-gradient(circle at 34% 22%, rgba(255,255,255,.32), transparent 23%), radial-gradient(circle at 50% 110%, rgba(129,94,255,.7), transparent 54%), linear-gradient(145deg, #372958, #171426 70%); box-shadow: 0 22px 42px rgba(0,0,0,.4), 0 0 44px rgba(139,92,246,.2), inset 0 1px 0 rgba(255,255,255,.23), inset 0 -14px 30px rgba(5,4,15,.44); } #view-spin #mysteryBoxVisual::before, #view-spin #mysteryBoxVisual::after { content: ''; position: absolute; pointer-events: none; } #view-spin #mysteryBoxVisual::before { inset: 12px; border: 1px solid rgba(231,220,255,.17); border-radius: 25px; } #view-spin #mysteryBoxVisual::after { width: 52px; height: 52px; border: 1px solid rgba(255,231,176,.62); border-radius: 16px; background: linear-gradient(145deg, rgba(255,231,176,.24), rgba(92,62,147,.6)); box-shadow: 0 4px 18px rgba(0,0,0,.35); } #view-spin #mysteryBoxVisual i { position: relative; z-index: 1; color: #f5eaff; font-size: 48px; filter: drop-shadow(0 9px 12px rgba(0,0,0,.5)); } #view-spin #wheelGameStatus, #view-spin #boxGameStatus { min-height: 34px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 7px 10px; border: 1px solid rgba(148,163,184,.11); border-radius: 12px; background: rgba(2,7,14,.38); color: #a7b2c1; font-size: 10px; line-height: 1.65; } #view-spin #wheelGameStatus:has(+ button:not(:disabled)), #view-spin #boxGameStatus:has(+ button:not(:disabled)) { border-color: rgba(52,211,153,.17); background: rgba(16,185,129,.055); color: #a7e7c6; } #view-spin #btnLuckySpin, #view-spin #btnMysteryBox { min-height: 48px; margin-top: auto; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; font-size: 12px; letter-spacing: .01em; box-shadow: 0 12px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.24); } #view-spin #btnLuckySpin { background: linear-gradient(135deg, #fff0c7, #f1c66e 55%, #bd8437); } #view-spin #btnMysteryBox { background: linear-gradient(135deg, #d8c8ff, #9c7aff 55%, #6947c1); } #view-spin #btnLuckySpin:disabled, #view-spin #btnMysteryBox:disabled { filter: saturate(.5); box-shadow: none; } #view-spin > section:has(#gameHistoryList), #view-spin > section:has(#gameStatsList) { border-color: rgba(255,231,176,.12); border-radius: 21px; background: linear-gradient(150deg, rgba(12,19,30,.96), rgba(5,10,18,.98)); } #view-spin #gameHistoryList > div, #view-spin #gameStatsList > div { border-color: rgba(148,163,184,.13); border-radius: 14px; background: linear-gradient(135deg, rgba(17,26,39,.82), rgba(6,12,21,.85)); } #view-spin #gameResultModal > div { position: relative; overflow: hidden; border-color: rgba(255,231,176,.32) !important; border-radius: 28px; background: radial-gradient(ellipse at 50% 0%, rgba(52,211,153,.14), transparent 50%), linear-gradient(155deg, #111c2b, #060b13) !important; } #view-spin #gameResultModal > div::before { content: ''; position: absolute; inset: 0 12% auto; height: 2px; background: linear-gradient(90deg, transparent, #ffe7b0, #4ade80, transparent); } #view-spin #gameResultAmount { color: #8af0b6; font-size: clamp(36px, 8vw, 48px); font-variant-numeric: tabular-nums; text-shadow: 0 0 28px rgba(52,211,153,.2); } @media (max-width: 640px) { #view-spin { gap: 10px; } #view-spin > .glass-card:first-child { border-radius: 20px; } #view-spin > .grid.grid-cols-1.md\:grid-cols-2 { gap: 10px; } #view-spin > .grid.grid-cols-1.md\:grid-cols-2 > .glass-card { gap: 15px; padding: 16px; border-radius: 21px; } #view-spin .wheel-disc { width: min(100%, 194px); } #view-spin #mysteryBoxVisual { width: min(100%, 154px); border-radius: 28px; } #view-spin #mysteryBoxVisual i { font-size: 42px; } } @media (prefers-reduced-motion: reduce) { #view-spin > .grid.grid-cols-1.md\:grid-cols-2 > .glass-card { transition: none; } } /* Direct referral rewards: a clear, premium earnings summary. */ #view-team .referral-rewards-card { position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(255,231,176,.25); border-radius: 26px; background: radial-gradient(ellipse at 6% 0%, rgba(255,231,176,.11), transparent 36%), radial-gradient(ellipse at 100% 100%, rgba(52,211,153,.055), transparent 32%), linear-gradient(150deg, rgba(17,24,36,.98), rgba(5,10,18,.99)); box-shadow: 0 24px 62px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.065); } #view-team .referral-rewards-card::before { content: ''; position: absolute; z-index: -1; inset: 0 9% auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,231,176,.55), rgba(52,211,153,.25), transparent); } #view-team .referral-rewards-heading { align-items: center; } #view-team .referral-rewards-heading > div > span { display: inline-flex; align-items: center; gap: 6px; color: #f4d99c; letter-spacing: .04em; } #view-team .referral-rewards-heading > div > span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #f6c76d; box-shadow: 0 0 12px rgba(246,199,109,.52); } #view-team .referral-rewards-heading h3 { margin-top: 5px; font-size: 17px; letter-spacing: -.02em; } #view-team .referral-rewards-caption { margin-top: 5px; color: #8492a4; font-size: 10px; line-height: 1.7; } #view-team .referral-rewards-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 1px solid rgba(255,231,176,.24); border-radius: 15px; background: linear-gradient(145deg, rgba(247,185,85,.18), rgba(247,185,85,.045)); color: #ffe7b0; font-size: 17px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.16); } #view-team .referral-rewards-total { position: relative; min-height: 106px; align-items: center; gap: 9px; margin-top: 16px; padding: 17px 18px; overflow: hidden; border: 1px solid rgba(255,231,176,.17); border-radius: 20px; background: linear-gradient(110deg, rgba(247,185,85,.105), rgba(11,18,28,.58) 64%), rgba(2,7,14,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.045); } #view-team .referral-rewards-total::after { content: 'USDT'; position: absolute; inset-inline-end: 14px; top: 12px; color: rgba(255,231,176,.25); font-size: 9px; font-weight: 900; letter-spacing: .16em; } #view-team #referralRewardsTotal { color: #fff0c7; font-size: clamp(36px, 8vw, 48px); line-height: 1.1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(247,185,85,.18); } #view-team .referral-rewards-total > span { padding-bottom: 4px; color: #aab3c0; font-size: 10px; font-weight: 800; letter-spacing: .06em; } #view-team .referral-reward-levels { gap: 8px; } #view-team .referral-reward-level { min-width: 0; padding: 12px 9px; border-color: rgba(148,163,184,.13); border-radius: 16px; background: linear-gradient(150deg, rgba(18,27,39,.86), rgba(5,10,18,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); transition: border-color .18s ease, transform .18s ease, background .18s ease; } #view-team .referral-reward-level:hover { transform: translateY(-2px); border-color: rgba(255,231,176,.23); background: linear-gradient(150deg, rgba(25,33,43,.94), rgba(6,11,18,.96)); } #view-team .referral-reward-level > span:first-child { color: #a2adbc; font-size: 9px; font-weight: 700; } #view-team .referral-reward-level > b { display: inline-flex; margin-top: 7px; padding: 4px 8px; border: 1px solid rgba(52,211,153,.14); border-radius: 999px; background: rgba(16,185,129,.065); color: #8be1b5; font-size: 10px; } #view-team .referral-reward-level > div { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(148,163,184,.1); } #view-team .referral-reward-level > div span { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 9px; } #view-team .referral-reward-level > div span b { color: #f1f5f9; font-variant-numeric: tabular-nums; } #view-team #referralRewardsHistory { margin-top: 17px; padding-top: 12px; border-top: 1px solid rgba(148,163,184,.12); } #view-team #referralRewardsHistory > div { min-height: 38px; padding: 8px 10px 0; border: 0; border-radius: 11px; background: rgba(255,255,255,.018); } #view-team #referralRewardsHistory > div + div { margin-top: 5px; } #view-team #referralRewardsHistory > div strong { padding: 4px 8px; border: 1px solid rgba(52,211,153,.13); border-radius: 999px; background: rgba(16,185,129,.06); font-variant-numeric: tabular-nums; } @media (max-width: 480px) { #view-team .referral-rewards-card { padding: 16px !important; border-radius: 21px; } #view-team .referral-rewards-total { min-height: 88px; padding: 14px; border-radius: 16px; } #view-team .referral-reward-levels { gap: 6px; } #view-team .referral-reward-level { padding: 10px 6px; border-radius: 13px; } #view-team .referral-reward-level > span:first-child { font-size: 8px; } #view-team .referral-reward-level > div span { font-size: 8px; } } /* Admin overview: structured operations dashboard with no cramped nested grids. */ #admin-overview.admin-overview { width: 100%; max-width: 1480px; margin-inline: auto; padding-bottom: 28px; color: #e8edf5; } #admin-overview .overview-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(17px, 2.4vw, 25px); border: 1px solid rgba(255,231,176,.2); border-radius: 24px; background: radial-gradient(ellipse at 6% 0%, rgba(255,231,176,.1), transparent 39%), radial-gradient(ellipse at 100% 100%, rgba(34,211,238,.06), transparent 34%), linear-gradient(145deg, rgba(16,24,37,.97), rgba(5,10,18,.99)); box-shadow: 0 20px 54px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.055); } #admin-overview .overview-eyebrow { color: #94dfc1; font-size: 9px; font-weight: 900; letter-spacing: .14em; } #admin-overview .overview-header h2 { margin-top: 5px; color: #f8fafc; font-size: clamp(21px, 2.6vw, 28px); font-weight: 900; letter-spacing: -.035em; line-height: 1.25; } #admin-overview .overview-header p { margin-top: 6px; color: #8795a8; font-size: 10px; line-height: 1.7; } #admin-overview .overview-header-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } #admin-overview .overview-header .ops-status { min-height: 38px; padding: 8px 11px; border-color: rgba(52,211,153,.17); background: rgba(2,10,16,.48); font-size: 9px; } #admin-overview .overview-refresh-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(255,231,176,.17); border-radius: 12px; background: rgba(247,185,85,.09); color: #f5d995; font-size: 10px; font-weight: 800; } #admin-overview .overview-refresh-button:hover { border-color: rgba(255,231,176,.34); background: rgba(247,185,85,.15); } #admin-overview .overview-toolbar { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 3px; } #admin-overview .overview-sync { display: inline-flex; align-items: center; gap: 7px; color: #7f8da0; font-size: 9px; } #admin-overview .overview-period-control { display: inline-flex; align-items: center; gap: 8px; color: #8090a4; font-size: 9px; } #admin-overview .overview-period-control select, #admin-overview .overview-accounting-controls select { min-height: 34px; border: 1px solid rgba(148,163,184,.16); border-radius: 10px; padding: 6px 10px; background: rgba(6,12,21,.88); color: #cbd5e1; font-size: 9px; } #admin-overview .overview-support-settings, #admin-overview .overview-accounting-details { overflow: hidden; border: 1px solid rgba(148,163,184,.13); border-radius: 17px; background: linear-gradient(145deg, rgba(12,20,32,.92), rgba(5,10,18,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); } #admin-overview .overview-support-settings summary, #admin-overview .overview-accounting-details summary { display: flex; min-height: 48px; align-items: center; gap: 10px; padding: 11px 15px; color: #cbd5e1; cursor: pointer; list-style: none; } #admin-overview .overview-support-settings summary::-webkit-details-marker, #admin-overview .overview-accounting-details summary::-webkit-details-marker { display: none; } #admin-overview .overview-support-settings summary > span:first-child { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 800; } #admin-overview .overview-support-settings summary > span:first-child i { color: #67e8f9; } #admin-overview .overview-disclosure-chevron { margin-inline-start: auto; color: #708095; font-size: 10px; transition: transform .18s ease; } #admin-overview .overview-support-settings[open] .overview-disclosure-chevron, #admin-overview .overview-accounting-details[open] .overview-disclosure-chevron { transform: rotate(180deg); } #admin-overview .overview-support-body { padding: 0 15px 14px; } #admin-overview .overview-support-body > p:first-child { margin-bottom: 9px; color: #75849a; font-size: 9px; } #admin-overview .overview-support-form { display: flex; gap: 8px; } #admin-overview .overview-support-form input { min-width: 0; } #admin-overview .overview-section { display: grid; gap: 12px; } #admin-overview .overview-section-heading, #admin-overview .overview-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #admin-overview .overview-section-heading { padding-inline: 2px; } #admin-overview .overview-section-heading > div > span { color: #8d9caf; font-size: 9px; font-weight: 800; } #admin-overview .overview-section-heading h3 { margin-top: 3px; color: #f8fafc; font-size: 14px; font-weight: 900; } #admin-overview .overview-section-heading > i { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,231,176,.12); border-radius: 11px; background: rgba(247,185,85,.06); color: #e7c477; font-size: 12px; } #admin-overview .overview-kpis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } #admin-overview .overview-kpi { --kpi-color: 255,231,176; position: relative; display: grid; min-width: 0; min-height: 105px; align-content: space-between; gap: 12px; overflow: hidden; padding: 14px 15px; border: 1px solid rgba(148,163,184,.14); border-radius: 18px; background: linear-gradient(145deg, rgba(15,23,36,.96), rgba(5,10,18,.98)); box-shadow: 0 11px 28px rgba(0,0,0,.19), inset 0 1px 0 rgba(255,255,255,.04); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } #admin-overview .overview-kpi::after { content: ''; position: absolute; inset-inline-start: -25px; top: -39px; width: 100px; height: 100px; border-radius: 50%; background: rgba(var(--kpi-color),.08); filter: blur(24px); pointer-events: none; } #admin-overview .overview-kpi:hover { transform: translateY(-2px); border-color: rgba(var(--kpi-color),.3); box-shadow: 0 17px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05); } #admin-overview .overview-kpi > span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; color: #a9b4c3; font-size: 9px; font-weight: 800; } #admin-overview .overview-kpi > span i { color: rgba(var(--kpi-color),.82); font-size: 10px; } #admin-overview .overview-kpi > strong { position: relative; z-index: 1; display: block; overflow-wrap: anywhere; color: rgb(var(--kpi-color)); font-size: clamp(21px, 2.2vw, 28px); font-weight: 900; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; } #admin-overview .overview-kpi > small { position: relative; z-index: 1; color: #68788d; font-size: 8px; } #admin-overview .overview-kpi-users { --kpi-color: 226,232,240; } #admin-overview .overview-kpi-deposits { --kpi-color: 110,231,183; } #admin-overview .overview-kpi-withdrawals { --kpi-color: 252,211,77; } #admin-overview .overview-kpi-pending { --kpi-color: 253,164,175; } #admin-overview .overview-kpi-active { --kpi-color: 103,232,249; } #admin-overview .overview-kpi-rewards { --kpi-color: 196,181,253; } #admin-overview .overview-primary-grid, #admin-overview .overview-secondary-grid { display: grid; min-width: 0; gap: 12px; } #admin-overview .overview-primary-grid { grid-template-columns: minmax(0,1fr); } #admin-overview .overview-secondary-grid { grid-template-columns: minmax(0,1fr); } #admin-overview .overview-panel { min-width: 0; padding: 16px; border: 1px solid rgba(148,163,184,.14); border-radius: 19px; background: linear-gradient(150deg, rgba(13,21,33,.96), rgba(5,10,18,.98)); box-shadow: 0 13px 34px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04); } #admin-overview .overview-panel-heading { margin-bottom: 14px; } #admin-overview .overview-panel-heading h3 { color: #f1f5f9; font-size: 12px; font-weight: 900; } #admin-overview .overview-panel-heading p { margin-top: 4px; color: #718096; font-size: 8px; line-height: 1.6; } #admin-overview .overview-panel-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid transparent; border-radius: 11px; font-size: 11px; } #admin-overview .overview-icon-emerald { border-color: rgba(52,211,153,.15); background: rgba(16,185,129,.07); color: #6ee7b7; } #admin-overview .overview-icon-amber { border-color: rgba(247,185,85,.15); background: rgba(247,185,85,.07); color: #f6d58d; } #admin-overview .overview-icon-cyan { border-color: rgba(103,232,249,.15); background: rgba(34,211,238,.07); color: #67e8f9; } #admin-overview .overview-chart-panel .ops-chart { height: 145px; gap: 3px; padding: 12px 1px 0; border-color: rgba(148,163,184,.12); } #admin-overview .overview-chart-panel .ops-bar { min-width: 0; max-width: 30px; border-radius: 5px 5px 2px 2px; box-shadow: 0 0 14px rgba(69,214,176,.08); } #admin-overview .overview-chart-labels { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: #708095; font-size: 8px; } #admin-overview .overview-urgent-list { display: grid; gap: 7px; } #admin-overview .overview-urgent-list > button { min-height: 42px; padding: 9px 11px; border-color: rgba(148,163,184,.12); border-radius: 12px; background: rgba(2,7,14,.42); transition: border-color .18s ease, background .18s ease; } #admin-overview .overview-urgent-list > button:hover { border-color: rgba(255,231,176,.25); background: rgba(255,255,255,.025); } #admin-overview .overview-panel-content { min-width: 0; } #admin-overview .overview-panel-content > .grid > div { border: 1px solid rgba(148,163,184,.09); border-radius: 12px; padding: 10px; background: rgba(2,7,14,.42); } #admin-overview .overview-text-button { display: inline-flex; min-height: 32px; align-items: center; gap: 5px; border: 1px solid rgba(255,231,176,.13); border-radius: 10px; padding: 0 9px; background: rgba(247,185,85,.045); color: #e9ca85; font-size: 8px; font-weight: 800; white-space: nowrap; } #admin-overview .overview-text-button:hover { border-color: rgba(255,231,176,.26); background: rgba(247,185,85,.09); } #admin-overview .overview-recent-panel { margin-bottom: 2px; } #admin-overview #overviewRecentActivity > div { min-height: 38px; align-items: center; padding: 8px 3px; border-bottom-color: rgba(148,163,184,.1); } #admin-overview .overview-accounting-details { margin-top: 2px; } #admin-overview .overview-accounting-details summary { min-height: 72px; padding: 14px 16px; } #admin-overview .overview-accounting-title { display: grid; min-width: 0; flex: 1; gap: 4px; } #admin-overview .overview-accounting-title strong { color: #e5edf6; font-size: 11px; font-weight: 900; } #admin-overview .overview-accounting-title small { color: #77869a; font-size: 8px; line-height: 1.5; } #admin-overview .overview-accounting-controls { display: flex; align-items: center; gap: 6px; } #admin-overview .overview-accounting-controls button { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(148,163,184,.14); border-radius: 10px; background: rgba(2,7,14,.55); color: #67e8f9; } #admin-overview .overview-accounting-controls button:hover { border-color: rgba(103,232,249,.3); } #admin-overview .overview-accounting-body { padding: 0 13px 14px; border-top: 1px solid rgba(148,163,184,.1); } /* Admin pro system: shared tab hierarchy, interaction states, and responsive data surfaces. */ body:has(#sidebar) main { width: auto; flex: 1 1 0%; min-width: 0; max-width: 1760px; margin-inline: auto; padding: clamp(18px, 2.6vw, 42px) clamp(16px, 3vw, 48px); scrollbar-width: thin; scrollbar-color: rgba(255,231,176,.24) transparent; } body:has(#sidebar) main > [id^="admin-"]:not(#admin-overview) { width: 100%; max-width: 1480px; min-width: 0; margin-inline: auto; padding-bottom: 28px; } body:has(#sidebar) main > [id^="admin-"] > div:first-child:not(.glass-card) > div:first-child h2, body:has(#sidebar) main > [id^="admin-"] > div:first-child > h2, body:has(#sidebar) main > [id^="admin-"] > h2 { color: #f8fafc; font-size: clamp(20px, 2.2vw, 27px); font-weight: 900; letter-spacing: -.025em; line-height: 1.35; } body:has(#sidebar) main > [id^="admin-"] > div:first-child:not(.glass-card) > div:first-child p, body:has(#sidebar) main > [id^="admin-"] > div:first-child p { max-width: 72ch; color: #8998ab; font-size: 11px; line-height: 1.8; } body:has(#sidebar) #sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; border-radius: 0; scrollbar-width: thin; scrollbar-color: rgba(255,231,176,.2) transparent; } body:has(#sidebar) #sidebar nav { display: grid; gap: 5px; } body:has(#sidebar) #sidebar nav button { min-height: 46px; padding-inline: 13px; border-radius: 13px; font-size: 11px; transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } body:has(#sidebar) #sidebar nav button > i { display: inline-grid; width: 20px; min-width: 20px; place-items: center; font-size: 16px; line-height: 1; } body:has(#sidebar) #sidebar nav button.bg-amber-500 { color: #21170b; } body:has(#sidebar) main .glass-card { animation: none !important; border-color: rgba(255,231,176,.12); box-shadow: 0 17px 44px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.035); } body.admin-shell main { animation: none !important; } body.admin-shell main .glass-card { animation: none !important; } body.admin-shell #sidebar nav button > i { font-size: 16px; line-height: 1; } body:has(#sidebar) main .glass-card:hover { border-color: rgba(255,231,176,.2); } body:has(#sidebar) main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-height: 42px; border-color: rgba(148,163,184,.2); border-radius: 12px; background-color: rgba(3,9,18,.78); color: #e5edf6; font-size: 11px; } body:has(#sidebar) main textarea { min-height: 96px; line-height: 1.75; } body:has(#sidebar) main :is(button, input, select, textarea):focus-visible, body:has(#sidebar) #sidebar button:focus-visible { outline: 2px solid rgba(255,231,176,.9); outline-offset: 3px; } body:has(#sidebar) main button:not(:disabled) { min-height: 38px; } body:has(#sidebar) main button:disabled { cursor: not-allowed; opacity: .48; } body:has(#sidebar) main table { border-collapse: separate; border-spacing: 0; } body:has(#sidebar) main table thead { background: rgba(8,15,25,.96); } body:has(#sidebar) main table th { color: #b7c3d2; font-size: 10px; font-weight: 800; white-space: nowrap; } body:has(#sidebar) main table td { border-color: rgba(148,163,184,.09); vertical-align: middle; } body:has(#sidebar) main table tbody tr:hover { background: rgba(255,231,176,.035); } body:has(#sidebar) main :is(#tblUsersBody, #tblTransactionsBody, #tblInvestmentVaultsBody, #tblAuditBody, #tblReferralsBody, #tblBroadcastsBody, #emailBroadcastHistory, #emailVerificationReminderHistory) > tr > td { padding-block: 13px; font-size: 10px; line-height: 1.65; } body:has(#sidebar) main :is(#tblUsersBody, #tblTransactionsBody, #tblInvestmentVaultsBody, #tblAuditBody, #tblReferralsBody, #tblBroadcastsBody, #emailBroadcastHistory, #emailVerificationReminderHistory) > tr > td:first-child { padding-inline-start: 16px; } body:has(#sidebar) main :is(.overflow-x-auto, table) { scrollbar-width: thin; scrollbar-color: rgba(255,231,176,.25) rgba(2,7,14,.35); } body:has(#sidebar) main .overflow-x-auto { max-width: 100%; overscroll-behavior-inline: contain; } body:has(#sidebar) main :is(#analyticsRoles, #analyticsDaily) { min-height: 110px; } body:has(#sidebar) main #analyticsDaily > div { min-height: 34px; align-items: center; gap: 12px; } body:has(#sidebar) main #plansContainer > .glass-card { border-radius: 20px; } body:has(#sidebar) main #plansContainer > .glass-card h3 { padding-bottom: 10px; border-bottom: 1px solid rgba(148,163,184,.11); } body:has(#sidebar) main #adminSupportList > .glass-card, body:has(#sidebar) main #socialFeedReportsList > article { border-radius: 19px; } body:has(#sidebar) main #adminSupportList > .glass-card { padding: clamp(16px,2.2vw,24px); } body:has(#sidebar) main #adminSupportList textarea { min-height: 84px; } body:has(#sidebar) main #admin-security > .glass-card { width: 100%; max-width: 760px; } body:has(#sidebar) main #admin-security #adminInvitePanel { width: 100%; max-width: 760px; } body:has(#sidebar) main #admin-broadcast > .glass-card.max-w-xl { width: 100%; max-width: 900px; } body:has(#sidebar) main #admin-broadcast section[aria-labelledby] { box-shadow: 0 18px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035); } body:has(#sidebar) :is(#adminConfirmModal, .admin-modal) { padding: clamp(12px,3vw,28px); } body:has(#sidebar) :is(#adminConfirmModal, .admin-modal) > .glass-card { max-height: min(90dvh, 900px); overflow: auto; overscroll-behavior: contain; } body:has(#sidebar) #userDetailsModal > .glass-card { max-height: calc(100dvh - 24px); } body:has(#sidebar) #adminConfirmModal .glass-card { width: min(100%, 460px); } body:has(#sidebar) #toast { max-width: min(92vw, 560px); text-align: center; line-height: 1.6; } @media (min-width: 1024px) { body:has(#sidebar) { align-items: flex-start; } body:has(#sidebar) #sidebar { flex: 0 0 270px; width: 270px; } } @media (max-width: 1023px) { body:has(#sidebar) { display: flex; min-height: 100dvh; flex-direction: column; } body:has(#sidebar) #sidebar { position: relative; top: auto; width: 100%; height: auto; max-height: min(72dvh, 620px); border-radius: 0 0 20px 20px; } body:has(#sidebar) #sidebar nav { grid-template-columns: repeat(2, minmax(0,1fr)); } body:has(#sidebar) main { flex: 1 1 auto; width: 100%; max-width: none; align-self: stretch; padding: 16px 12px calc(28px + env(safe-area-inset-bottom)) !important; } body:has(#sidebar) main > [id^="admin-"]:not(#admin-overview) { padding-bottom: 18px; } body:has(#sidebar) main > [id^="admin-"] > div:first-child:not(.glass-card) { align-items: flex-start; flex-wrap: wrap; } body:has(#sidebar) main > [id^="admin-"] > div:first-child:not(.glass-card) > div:first-child { min-width: 0; } body:has(#sidebar) main > #admin-users > .grid { grid-template-columns: repeat(2,minmax(0,1fr)); } body:has(#sidebar) main > #admin-withdrawals > div:first-child > div:last-child { grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; } body:has(#sidebar) main > #admin-withdrawals > div:first-child > div:last-child > :first-child { grid-column: 1 / -1; } body:has(#sidebar) main > #admin-audit > div:first-child > div:last-child { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } body:has(#sidebar) main > #admin-audit > div:first-child > div:last-child > input:first-of-type { grid-column: 1 / -1; } body:has(#sidebar) main > #admin-referrals > div:first-child > div:last-child { flex-wrap: wrap; } body:has(#sidebar) main > #admin-referrals > div:first-child > div:last-child input { flex: 1 1 100%; width: 100%; } body:has(#sidebar) main > #admin-broadcast > .glass-card.max-w-xl { max-width: none; padding: 18px; } body:has(#sidebar) main .glass-card { border-radius: 18px; } body:has(#sidebar) main table th, body:has(#sidebar) main table td { padding-inline: 11px; } body:has(#sidebar) .admin-modal > .glass-card { width: 100%; max-height: calc(100dvh - 24px); overflow-y: auto; border-radius: 22px 22px 16px 16px; } } @media (max-width: 420px) { body:has(#sidebar) #sidebar nav { grid-template-columns: repeat(2, minmax(0,1fr)); } body:has(#sidebar) main > #admin-users > .grid { grid-template-columns: 1fr; } body:has(#sidebar) main > #admin-withdrawals > div:first-child > div:last-child { grid-template-columns: 1fr; } body:has(#sidebar) main > #admin-withdrawals > div:first-child > div:last-child > :first-child { grid-column: auto; } body:has(#sidebar) main > #admin-audit > div:first-child > div:last-child { grid-template-columns: 1fr; } body:has(#sidebar) main > #admin-audit > div:first-child > div:last-child > input:first-of-type { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { body:has(#sidebar) *, body:has(#sidebar) *::before, body:has(#sidebar) *::after { scroll-behavior: auto !important; } } /* Customer experience refresh: clearer content width, calmer surfaces, and mobile-ready controls. */ body:has(#appView) { background-image: radial-gradient(ellipse at 92% 0%, rgba(247,185,85,.1), transparent 34rem), radial-gradient(ellipse at 5% 55%, rgba(34,211,238,.065), transparent 32rem), linear-gradient(180deg, #040a14 0%, #07111f 48%, #040a14 100%); background-attachment: fixed; } #companyIntroView, #authView, #appView { isolation: isolate; } #companyIntroView { padding-inline: clamp(14px, 3vw, 36px); } #companyIntroView > div { width: min(100%, 1240px); } #companyIntroView > div > header { min-height: 58px; } #companyIntroView .trust-strip { border-radius: 18px; } #companyIntroView .reward-campaign-note { max-width: 100ch; line-height: 1.8; } #companyIntroView :is(button, a):focus-visible, #authView :is(button, a, input):focus-visible, #appView :is(button, a, input, select, textarea):focus-visible { outline: 2px solid rgba(255,231,176,.92); outline-offset: 3px; } #authView { padding: clamp(16px, 4vw, 36px); } #authView .auth-panel { width: min(100%, 500px); } #authView input:not([type="checkbox"]):not([type="radio"]) { min-height: 46px; } #appView { width: min(100%, 980px); max-width: 980px; min-width: 0; padding: clamp(12px, 2.4vw, 28px); padding-bottom: calc(112px + env(safe-area-inset-bottom)); gap: clamp(16px, 2vw, 24px); } #appView [id^="view-"] { min-width: 0; scroll-margin-block: 16px; } #appView :is(h1, h2, h3, h4) { text-wrap: balance; } #appView :is(p, li) { overflow-wrap: anywhere; } #appView input:not([type="checkbox"]):not([type="radio"]), #appView select, #appView textarea { min-height: 44px; border-radius: 13px; } #appView textarea { min-height: 96px; line-height: 1.75; } #appView button:not(:disabled) { min-height: 42px; } #appView button:disabled { cursor: not-allowed; opacity: .56; } #appView .operix-app-header { position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 30; min-height: 62px; border-color: rgba(255,231,176,.18); background: rgba(7,15,26,.9); backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%); } #appView .premium-status-strip { gap: 9px; } #appView .status-pill { min-width: 0; } #appView .operix-wallet { border-radius: 25px; } #appView .balance-summary-card { min-width: 0; } #appView .balance-card-value { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } #appView .glass-card { border-radius: 20px; } #appView .mission-card, #appView [data-task-card] { border-radius: 17px; } #appNavBar { display: flex; width: min(100%, 980px); max-width: 980px; min-height: 68px; justify-content: flex-start !important; gap: 3px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: rgba(255,231,176,.25) transparent; scroll-padding-inline: 12px; padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); background: rgba(4,10,18,.94); -webkit-backdrop-filter: blur(20px) saturate(130%); backdrop-filter: blur(20px) saturate(130%); } #appNavBar > .app-nav-item { flex: 0 0 clamp(64px, 9vw, 96px); min-width: 0; min-height: 52px; justify-content: center; gap: 2px; border: 1px solid transparent; border-radius: 13px; padding: 5px 4px; scroll-snap-align: center; } #appNavBar .app-nav-item > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #appNavBar .app-nav-item.is-active { color: #ffe1a1; border-color: rgba(255,231,176,.2); } #appNavBar .app-nav-item > i { display: block; flex: 0 0 auto; font-size: 19px !important; line-height: 1; transform: none !important; transition: color .16s ease; } #appNavBar .app-nav-item.is-active > i { transform: none !important; } #appNavBar .app-nav-item:focus-visible { outline: 2px solid rgba(255,231,176,.92); outline-offset: -2px; } #appView .twitter-post, #appView .social-post-card { overflow-wrap: anywhere; } #appView .social-post-actions button, #appView .social-post-button-group button { min-height: 42px; } #appView details > summary { min-height: 44px; } #appView table { max-width: 100%; } #appView .overflow-x-auto { max-width: 100%; overscroll-behavior-inline: contain; } #companyIntroView :is(#landing-faq, .campaign-leaderboard, .home-campaign-prizes) > summary { min-height: 44px; } #landing-faq details { overflow: hidden; border-color: rgba(148,163,184,.14); background: rgba(4,10,18,.48); transition: border-color .18s ease, background-color .18s ease; } #landing-faq details[open] { border-color: rgba(103,232,249,.22); background: rgba(4,13,22,.78); } #landing-faq details > summary { min-height: 42px; } #landing-faq details > p { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(148,163,184,.1); line-height: 1.8; } :is(#productTourModal, #onboardingModal, #platformConfirmModal, #depositModal, #withdrawModal, #historyModal, #privateMessagesModal, #notificationsModal, #supportModal, #forgotPasswordModal, #changePasswordModal, #activeSessionsModal, #authenticatorSetupModal, #gameResultModal, #rewardsCampaignModal, #socialUserCardModal, #socialCoverCropModal) { padding: clamp(12px, 3vw, 26px); scroll-padding-block: 20px; } :is(#productTourModal, #onboardingModal, #platformConfirmModal, #depositModal, #withdrawModal, #historyModal, #privateMessagesModal, #notificationsModal, #supportModal, #forgotPasswordModal, #changePasswordModal, #activeSessionsModal, #authenticatorSetupModal, #gameResultModal, #socialUserCardModal, #socialCoverCropModal) > div { max-height: min(92dvh, 900px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } :is(#productTourModal, #onboardingModal) > .glass-card { width: min(100%, 600px); } body:has(#appView) #toast, body:has(#authView) #toast { max-width: min(92vw, 560px); text-align: center; line-height: 1.65; } @media (min-width: 1100px) { #appView { padding-inline: 32px; } #appView:not(:has(#view-feed:not(.hide))) { max-width: 980px; } } @media (max-width: 767px) { #companyIntroView { padding-inline: 12px; } #companyIntroView > div { min-height: auto; } #appView { padding-inline: 12px; padding-top: 12px; } #appView .operix-app-header { top: max(5px, env(safe-area-inset-top)); } #appNavBar { bottom: 0; display: grid !important; min-height: calc(116px + env(safe-area-inset-bottom)); grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-auto-rows: minmax(48px, auto); align-content: center; justify-content: stretch !important; gap: 3px; overflow: hidden; padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)); } #appNavBar button, #appNavBar > .app-nav-item { width: auto; min-width: 0; min-height: 48px; flex: initial; grid-column: auto !important; padding: 4px 2px; gap: 4px; transform: none !important; } #appNavBar button:nth-child(6) { grid-column: auto !important; } #appNavBar > .app-nav-item > span { font-size: 9px; line-height: 1.15; transform: none; } :is(#productTourModal, #onboardingModal, #platformConfirmModal, #depositModal, #withdrawModal, #historyModal, #privateMessagesModal, #notificationsModal, #supportModal, #forgotPasswordModal, #changePasswordModal, #activeSessionsModal, #authenticatorSetupModal, #gameResultModal, #socialUserCardModal, #socialCoverCropModal) { align-items: flex-end; } :is(#productTourModal, #onboardingModal, #platformConfirmModal, #depositModal, #withdrawModal, #historyModal, #privateMessagesModal, #notificationsModal, #supportModal, #forgotPasswordModal, #changePasswordModal, #activeSessionsModal, #authenticatorSetupModal, #gameResultModal, #socialUserCardModal, #socialCoverCropModal) > div { width: 100%; max-height: calc(100dvh - 24px - env(safe-area-inset-top)); border-radius: 24px 24px 16px 16px; } } @media (max-width: 380px) { #appView { padding-inline: 9px; } #appView .operix-wallet { padding: 13px !important; } #appNavBar > .app-nav-item { padding-inline: 1px; } #appNavBar .app-nav-item > i { font-size: 18px !important; } } @media (prefers-reduced-motion: reduce) { #appView *, #appView *::before, #appView *::after, #companyIntroView *, #companyIntroView *::before, #companyIntroView *::after, #authView *, #authView *::before, #authView *::after { scroll-behavior: auto !important; } } @media (min-width: 720px) { #admin-overview .overview-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } #admin-overview .overview-secondary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 1100px) { #admin-overview .overview-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); } #admin-overview .overview-primary-grid { grid-template-columns: minmax(0,1.45fr) minmax(260px,.75fr); } } @media (max-width: 767px) { body:has(#sidebar) main { min-width: 0; padding: 14px 12px calc(24px + env(safe-area-inset-bottom)) !important; } #admin-overview.admin-overview { gap: 15px; } #admin-overview .overview-header { align-items: flex-start; flex-direction: column; border-radius: 20px; } #admin-overview .overview-header-actions { width: 100%; justify-content: space-between; } #admin-overview .overview-header .ops-status { flex: 1; min-width: 0; } #admin-overview .overview-toolbar { min-height: 38px; } #admin-overview .overview-kpis { gap: 8px; } #admin-overview .overview-kpi { min-height: 98px; padding: 12px; border-radius: 15px; } #admin-overview .overview-panel { padding: 13px; border-radius: 16px; } #admin-overview .overview-primary-grid, #admin-overview .overview-secondary-grid { gap: 9px; } #admin-overview .overview-accounting-details summary { flex-wrap: wrap; } } @media (max-width: 380px) { #admin-overview .overview-kpis { grid-template-columns: minmax(0,1fr); } #admin-overview .overview-kpi { min-height: 82px; } #admin-overview .overview-accounting-title { flex-basis: calc(100% - 60px); } #admin-overview .overview-accounting-controls { margin-inline-start: 44px; } } @media (prefers-reduced-motion: reduce) { #admin-overview .overview-kpi, #admin-overview .overview-text-button, #admin-overview .overview-refresh-button { transition: none; } }