/* * MCU AI Cloud Lab — mobile responsive layer * Shared by public, account, payment, management and demo pages. * Keep this file last in so it can safely correct legacy fixed layouts. */ html { width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { width: 100%; min-width: 0 !important; overflow-wrap: anywhere; } img, video, canvas, svg, iframe, object, embed { max-width: 100%; } img, video { height: auto; } pre, code, .code-editor, .code-editor-wrap, .code-merged-box, .terminal, .log-content { max-width: 100%; } table { max-width: 100%; } button, input, select, textarea { max-width: 100%; font: inherit; } @media (max-width: 900px) { :root { --mobile-gutter: clamp(14px, 4vw, 22px); --mobile-radius: 14px; } body { overflow-x: hidden !important; } body:has(.floating-cta) { padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; } .container, .wrapper, .content, .content-wrapper, .page-container, .auth-container, .form-container, .recharge-container, .admin-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--mobile-gutter) !important; padding-right: var(--mobile-gutter) !important; box-sizing: border-box !important; } .header, .top-nav, .navbar, nav { max-width: 100vw; } .header .container, .top-nav, .navbar { min-height: 58px; height: auto !important; gap: 10px !important; padding-top: 8px !important; padding-bottom: 8px !important; } .logo, .nav-logo { min-width: 0; font-size: 16px !important; line-height: 1.25; } .header-links, .nav-links, .nav-actions, .nav-stats { min-width: 0; gap: 4px !important; } .header-links a, .nav-links a, .nav-btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px !important; font-size: 13px !important; white-space: nowrap; } #betaBanner { height: auto !important; min-height: 46px; line-height: 1.35 !important; padding: 8px 42px 8px 12px !important; font-size: 14px !important; } #betaBanner > div, #betaBanner span { line-height: 1.35 !important; font-size: 14px !important; } body:has(#betaBanner) { padding-top: 54px !important; } body:has(#betaBanner) .header { top: 54px !important; } .hero { min-height: 0 !important; padding: 108px var(--mobile-gutter) 58px !important; } body:has(#betaBanner) .hero { padding-top: 150px !important; } .hero h1, h1 { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.2 !important; text-wrap: balance; } .hero-subtitle, .subtitle { max-width: 36rem; font-size: 16px !important; line-height: 1.7 !important; } h2 { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.3; } h3 { line-height: 1.4; } .btn-main, .btn-login, .submit-btn, .btn-submit, .enter-btn, .price-btn, .path-btn { min-height: 48px !important; padding: 12px 20px !important; font-size: 16px !important; touch-action: manipulation; } .floating-cta { padding: 10px var(--mobile-gutter) calc(10px + env(safe-area-inset-bottom)) !important; } .floating-cta a, .floating-cta button { width: 100%; } .steps-grid, .points-grid, .exp-grid, .pricing-grid, .audience-grid, .mcu-options, .card-grid, .feature-grid, .stats-grid, .form-grid, .ai-content, .main-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; } .step-card, .path-card, .point-card, .exp-card, .price-card, .audience-card, .mcu-card, .card, .panel, .auth-box, .login-box, .recharge-box { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding: clamp(18px, 5vw, 26px) !important; border-radius: var(--mobile-radius) !important; box-sizing: border-box !important; } .main-container, .main-layout, .workspace, .dashboard-layout, .editor-layout, .auth-layout { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; overflow: visible !important; gap: 14px !important; } .main-left, .main-right, .main-third, .sidebar, .exp-sidebar, .editor-panel, .preview-panel, .control-panel { position: static !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; flex: 0 0 auto !important; } .toolbar, .actions, .button-group, .form-actions, .learning-analysis-actions, .code-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } .toolbar > *, .actions > *, .button-group > *, .form-actions > * { flex: 1 1 132px; } input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100% !important; min-width: 0 !important; min-height: 46px; padding: 11px 12px !important; font-size: 16px !important; box-sizing: border-box !important; } input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex: 0 0 20px; } label { line-height: 1.5; } table { display: block; width: 100% !important; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; white-space: nowrap; } th, td { min-width: 96px; padding: 10px 12px !important; } pre, .code-input, .code-highlight, .terminal, .log-content { overflow: auto !important; -webkit-overflow-scrolling: touch; font-size: 13px !important; } .modal, .dialog, .popup, .modal-content, .dialog-content { max-width: calc(100vw - 28px) !important; max-height: calc(100dvh - 28px) !important; overflow: auto !important; margin: 14px auto !important; box-sizing: border-box !important; } .avatar-float { right: 4px !important; bottom: calc(70px + env(safe-area-inset-bottom)) !important; transform: scale(.48); transform-origin: right bottom; } .chat-panel, .learning-analysis-panel, .ai-report-panel { max-width: calc(100vw - 24px) !important; max-height: 75dvh !important; } iframe { width: 100% !important; min-width: 0 !important; } } @media (max-width: 560px) { .header .container, .top-nav, .navbar { align-items: center !important; } .header-links a:not(.btn-login):not(.primary), .nav-links a:not(.active):not(.primary) { display: none !important; } .hero { padding-left: 16px !important; padding-right: 16px !important; } .hero h1 { font-size: clamp(27px, 9vw, 34px) !important; } .section-header, .final-cta { padding-left: 4px; padding-right: 4px; } .price-card.featured { transform: none !important; } .tabs { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 1 0 auto; min-height: 44px; } .toolbar > *, .actions > *, .button-group > *, .form-actions > *, .learning-analysis-actions > * { width: 100% !important; flex-basis: 100% !important; } .footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important; } } @media (hover: none) and (pointer: coarse) { a, button, [role="button"], input, select, textarea { touch-action: manipulation; } button, .btn, [role="button"] { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }