/* ============================================================ Step 14 — readable text everywhere on the dark admin panel, no phantom auto-refresh, no phone overflow, subtle depth. ============================================================ */ /* ---- admin panel: the overlay is ALWAYS dark, so force light ink ---- */ #adminShell{ color:#e9eef2; } /* plain default — targeted rules live in feat-16 */ #adminShell h1, #adminShell h2, #adminShell h3, #adminShell h4, #adminShell b, #adminShell strong, #adminShell summary, #adminShell .admin-bar h2, #adminShell .big, #adminShell .n, #adminShell [class*="title"], #adminShell [class*="-h"]{ color:#f7fbfd !important; } #adminShell .admin-bar h2{ text-shadow:0 1px 2px rgba(0,0,0,.35); } /* the header action buttons */ #adminShell .admin-btn, #adminShell .admin-btn *{ color:#f4f8fa !important; } #adminShell .admin-btn:not(.ghost):not(.danger):not(.security){ background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06)) !important; border:1px solid rgba(255,255,255,.16) !important; } #adminShell .admin-btn.security{ background:linear-gradient(180deg,rgba(56,189,248,.28),rgba(56,189,248,.12)) !important; border:1px solid rgba(125,211,252,.35) !important; } /* form controls keep dark-on-white of their own */ #adminShell input, #adminShell select, #adminShell textarea{ color:#12202a !important; background:#ffffff !important; border:1px solid rgba(0,0,0,.18) !important; } #adminShell option{ color:#12202a; background:#fff; } /* genuine white cards that sit inside the dark panel keep dark text */ #adminShell [style*="background:#fff"], #adminShell [style*="background: #fff"], #adminShell [style*="background:#fff"] *, #adminShell [style*="background: #fff"] *{ color:#1b2733 !important; } #adminShell .risk-empty, #adminShell .f12-none, #adminShell .apA-empty, #adminShell .pr-empty{ color:#9fb0b6 !important; } /* ---- "Menyuga o'tish" and the top-panel advisor: readable ---- */ .back-menu.to-menu, .back-menu.to-menu *{ color:#ffffff !important; } .back-menu:not(.to-menu), .back-menu:not(.to-menu) *{ color:#1f2a37 !important; } body.tl-dark .back-menu:not(.to-menu), body.tl-dark .back-menu:not(.to-menu) *{ color:#e6eef6 !important; } .tn-advisor, .tn-advisor *{ color:#5b5044 !important; } body.tl-dark .tn-advisor, body.tl-dark .tn-advisor *{ color:#cdd8e0 !important; } /* ---- phone overflow on the survey / test option rows (root fix) ---- */ .tm-opt, .at-opt, .hd-opt, .lt-opt{ min-width:0 !important; } .tm-opts{ flex-wrap:wrap !important; } @media (max-width:620px){ .tm-opts{ flex-direction:column !important; } .tm-opt{ width:100% !important; } .tm-hero h2, .bs-hero h2, .ag-hero h2, .hd-hero h2, .lt-hero h2, .so-hero h2, .tm-hero h2{ font-size:clamp(16px,4.6vw,21px) !important; line-height:1.25 !important; overflow-wrap:anywhere; hyphens:auto; } .tm-hero, .bs-hero, .ag-hero, .hd-hero, .lt-hero, .so-hero, .tm-wrap, .bs-view, .ag-wrap, .hd-wrap, .lt-wrap{ max-width:100% !important; box-sizing:border-box; } .tm-qhead > span:last-child{ overflow-wrap:anywhere; } } /* Nothing should ever push the page sideways. CRITICAL: overflow-x must NEVER be set on . On the root element any non-visible overflow makes overflow-y compute to `auto` (CSS Overflow spec), which turns itself into the scroll container and removes the document root scroller. Mobile browsers bind touch panning to the root scroller, so without it taps still hit-test normally but the page cannot be scrolled or swiped at all, and content is clipped at the viewport edge. Fixed-position panels (sidebar, admin overlay) have their own scrollers and keep working - which is what made this look like a "frozen section" bug. `clip` clips overflow WITHOUT creating a scroll container, so it is safe on the root. Legacy browsers fall back to hidden on only, which propagates to the viewport and also keeps the root scroller intact. */ body{ overflow-x:hidden; } @supports (overflow-x: clip){ html, body{ overflow-x:clip; overflow-y:visible; } #app .content{ overflow-x:clip; } } @supports not (overflow-x: clip){ #app .content{ overflow-x:hidden; } } /* ---- subtle professional depth (no motion cost) ---- */ #adminShell .adm-drop{ box-shadow:0 10px 26px -18px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05); } #adminShell .adm-drop > summary{ transition:background .15s; } #adminShell .adm-drop > summary:hover{ background:rgba(255,255,255,.04); } #adminShell .admin-btn, .start, #loginGo, #regGo{ box-shadow:0 6px 14px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18); } #adminShell .admin-btn:active, .start:active, #loginGo:active, #regGo:active{ transform:translateY(2px); box-shadow:0 2px 6px -4px rgba(0,0,0,.5), inset 0 2px 6px rgba(0,0,0,.25); }