/* ================================================================ HitMaker AI — Premium Skin v1 (Phase 10G-R1) Violet Neon Studio — dark premium AI music studio Подключается ПОСЛЕДНИМ в . Переопределяет визуальные стили, НЕ трогая логику. Правила: 1. Использовать только CSS-токены и визуальные классы. 2. НЕ менять .screen, #screen-* display свойства. 3. НЕ менять JS-функции, wizardState, API-вызовы. 4. Не ставить ссылки на несуществующие изображения (404). 5. Все улучшения — через CSS-переопределения. ================================================================ */ /* ═══ DESIGN TOKENS — Violet Neon Studio ═══ */ :root { /* Backgrounds */ --hm-bg-main: #0B0A0F; --hm-bg-deep: #070712; --hm-bg-panel: rgba(18, 18, 34, 0.82); --hm-bg-card: rgba(255, 255, 255, 0.075); /* Text */ --hm-text-main: #FFFFFF; --hm-text-muted: rgba(255, 255, 255, 0.74); --hm-text-secondary: rgba(255, 255, 255, 0.55); /* Accents — Violet Neon Studio palette */ --hm-accent-primary: #8B5CF6; --hm-accent-primary-light: #A78BFA; --hm-accent-primary-dark: #7C3AED; --hm-accent-secondary: #22D3EE; --hm-accent-green: #06D6A0; --hm-accent-gold: #F8C76A; --hm-accent-warm: #F472B6; /* Glass borders */ --hm-border-glass: rgba(255, 255, 255, 0.14); --hm-border-glass-light: rgba(255, 255, 255, 0.06); --hm-border-neon: rgba(139, 92, 246, 0.48); --hm-border-cyan: rgba(34, 211, 238, 0.35); /* Radius */ --hm-radius-xl: 32px; --hm-radius-lg: 26px; --hm-radius-md: 20px; --hm-radius-sm: 14px; --hm-radius-xs: 10px; /* Shadows */ --hm-shadow-card: 0 18px 48px rgba(0, 0, 0, 0.42); --hm-shadow-button: 0 16px 36px rgba(139, 92, 246, 0.38); --hm-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.3); --hm-glow-cyan: 0 0 28px rgba(34, 211, 238, 0.28); --hm-glow-violet: 0 0 34px rgba(139, 92, 246, 0.36); --hm-glow-gold: 0 0 24px rgba(248, 199, 106, 0.2); /* Font weights */ --hm-font-title: 800; --hm-font-button: 700; --hm-font-card: 600; /* Button heights */ --hm-btn-height-primary: 64px; --hm-btn-height-secondary: 54px; --hm-btn-height-mini: 44px; /* Safe area */ --hm-safe-bottom: env(safe-area-inset-bottom); /* Asset slots — none yet, use CSS fallbacks */ --hm-bg-image: none; --hm-hero-image: none; --hm-button-image: none; --hm-card-image: none; --hm-loader-image: none; --hm-slot-image: none; } /* ═══ PREMIUM BACKGROUND — Violet Neon Studio ═══ */ body { background: radial-gradient(circle at 20% 8%, rgba(139, 92, 246, 0.34), transparent 34%), radial-gradient(circle at 82% 18%, rgba(34, 211, 238, 0.22), transparent 32%), radial-gradient(circle at 50% 92%, rgba(248, 199, 106, 0.14), transparent 38%), linear-gradient(180deg, #0B0A0F 0%, #080B18 46%, #050611 100%) !important; background-attachment: fixed !important; } /* Фон приложения — наследует body */ .hm-mobile-body { background: transparent !important; } /* ═══ PREMIUM CARDS — Glassmorphism ═══ */ .hm-mobile-card, .vp-card, .summary-card, .step-indicator, .hm-result-card, .hm-voice-plan-card { background: var(--hm-bg-panel) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid var(--hm-border-glass) !important; border-radius: var(--hm-radius-md) !important; box-shadow: var(--hm-shadow-card) !important; position: relative; overflow: hidden; } /* Subtle top light accent on cards */ .hm-mobile-card::before, .vp-card::before, .summary-card::before, .hm-result-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); pointer-events: none; } /* Premium edit card inside summary */ .edit-card-premium { background: rgba(139, 92, 246, 0.08) !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; border-radius: var(--hm-radius-sm) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ═══ PREMIUM BUTTONS ═══ */ /* Primary button — violet neon gradient */ .btn-primary, .btn-3d, .hm-mobile-primary, .hm-action-primary { background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%) !important; color: #FFFFFF !important; border: none !important; border-radius: var(--hm-radius-sm) !important; min-height: var(--hm-btn-height-primary) !important; font-weight: var(--hm-font-button) !important; box-shadow: var(--hm-shadow-button) !important; position: relative; overflow: hidden; transition: all 0.2s ease !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } /* Primary button hover/active */ .btn-primary:hover, .btn-3d:hover, .hm-mobile-primary:hover, .hm-action-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(139, 92, 246, 0.45) !important; } .btn-primary:active, .btn-3d:active, .hm-mobile-primary:active, .hm-action-primary:active { transform: translateY(1px); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3) !important; } /* Primary button inner glow overlay */ .btn-primary::after, .btn-3d::after, .hm-mobile-primary::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent); pointer-events: none; border-radius: inherit; } /* Secondary button — dark glass */ .btn-secondary, .hm-btn-3d-pad.btn-secondary { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--hm-border-glass) !important; color: var(--hm-text-main) !important; border-radius: var(--hm-radius-sm) !important; min-height: var(--hm-btn-height-secondary) !important; font-weight: var(--hm-font-button) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.2s ease !important; } .btn-secondary:hover, .hm-btn-3d-pad.btn-secondary:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: var(--hm-border-neon) !important; } .btn-secondary:active { transform: scale(0.98); } /* Mini action buttons (edit, delete, etc.) */ .hm-mini-action, .hm-icon-action { min-height: var(--hm-btn-height-mini) !important; min-width: var(--hm-btn-height-mini) !important; background: rgba(139, 92, 246, 0.12) !important; border: 1px solid rgba(139, 92, 246, 0.25) !important; border-radius: var(--hm-radius-xs) !important; color: var(--hm-text-main) !important; font-weight: 600 !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: all 0.2s ease !important; } .hm-mini-action:hover, .hm-icon-action:hover { background: rgba(139, 92, 246, 0.2) !important; border-color: var(--hm-border-neon) !important; box-shadow: var(--hm-glow-violet); } /* Photo button — premium gradient base */ .hm-photo-button { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(34, 211, 238, 0.1)) !important; border: 1px solid var(--hm-border-glass) !important; border-radius: var(--hm-radius-md) !important; transition: all 0.2s ease !important; } .hm-photo-button:hover { border-color: var(--hm-border-neon); box-shadow: var(--hm-glow-violet); } /* ═══ GLASSMORPHISM UTILITY ═══ */ .hm-glass { background: rgba(18, 18, 34, 0.6) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid var(--hm-border-glass) !important; } .hm-glass-strong { background: rgba(18, 18, 34, 0.82) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid var(--hm-border-glass) !important; } /* ═══ BOTTOM SHEET — Premium Skin ═══ */ .hm-bottom-sheet { background: rgba(18, 18, 34, 0.92) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border-radius: var(--hm-radius-lg) var(--hm-radius-lg) 0 0 !important; border: 1px solid var(--hm-border-glass); border-bottom: none; box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5); max-height: 85vh !important; overflow-y: auto; } /* Bottom sheet header */ .hm-bottom-sheet-header { padding: 16px 20px 8px; border-bottom: 1px solid var(--hm-border-glass-light); } /* Bottom sheet title */ .hm-bottom-sheet-title { font-size: 18px; font-weight: 700; color: var(--hm-text-main); } /* Bottom sheet close button */ .hm-bottom-sheet-close { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--hm-border-glass); color: var(--hm-text-muted); display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.2s ease; } .hm-bottom-sheet-close:hover { background: rgba(255, 255, 255, 0.15); color: var(--hm-text-main); } /* Bottom sheet body */ .hm-bottom-sheet-body { padding: 16px 20px; flex: 1; overflow-y: auto; } /* Bottom sheet actions (footer) */ .hm-bottom-sheet-actions { padding: 12px 20px; padding-bottom: calc(12px + var(--hm-safe-bottom)); border-top: 1px solid var(--hm-border-glass-light); display: flex; gap: 12px; } /* Bottom sheet overlay */ .hm-bottom-sheet-overlay { background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Large textarea inside bottom sheet */ .hm-bottom-sheet-body textarea { background: rgba(0, 0, 0, 0.4) !important; border: 1px solid var(--hm-border-glass) !important; border-radius: var(--hm-radius-sm) !important; color: var(--hm-text-main) !important; font-size: 16px !important; line-height: 1.5 !important; padding: 14px !important; width: 100% !important; min-height: 120px !important; resize: vertical !important; } .hm-bottom-sheet-body textarea:focus { border-color: var(--hm-border-neon) !important; box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15) !important; outline: none !important; } /* ═══ LANGUAGE SCREEN — Premium Cards ═══ */ /* Main language buttons — premium cards */ .lang-btn, button[class*="lang-btn"] { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--hm-border-glass) !important; border-radius: var(--hm-radius-sm) !important; color: var(--hm-text-main) !important; font-weight: 600 !important; padding: 14px 18px !important; min-height: 54px !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.25s ease !important; text-align: left; } .lang-btn:hover, button[class*="lang-btn"]:hover { background: rgba(139, 92, 246, 0.12) !important; border-color: var(--hm-border-neon) !important; transform: translateY(-1px); box-shadow: var(--hm-glow-violet); } .lang-btn.active { background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(139, 92, 246, 0.1)) !important; border-color: var(--hm-accent-primary) !important; box-shadow: 0 0 20px rgba(139, 92, 246, 0.2) !important; } /* Language button flag + label layout */ .lang-btn .flag { font-size: 24px; margin-right: 12px; display: inline-block; vertical-align: middle; } .lang-btn .label { font-size: 16px; vertical-align: middle; } /* CIS language sub-grid */ #lang-sng-group .lang-btn { min-height: 48px !important; padding: 10px 14px !important; font-size: 14px; } /* ═══ GENRE / MOOD / VOICE CARDS — Premium ═══ */ /* Genre option buttons */ button[data-value].btn-secondary { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--hm-border-glass) !important; border-radius: var(--hm-radius-sm) !important; color: var(--hm-text-main) !important; font-weight: 600 !important; padding: 16px 20px !important; min-height: 56px !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.25s ease !important; } button[data-value].btn-secondary:hover { background: rgba(139, 92, 246, 0.1) !important; border-color: var(--hm-border-neon) !important; transform: translateY(-1px); } button[data-value].btn-secondary.active { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(34, 211, 238, 0.1)) !important; border-color: var(--hm-accent-primary) !important; box-shadow: 0 0 24px rgba(139, 92, 246, 0.2) !important; } /* Voice option buttons */ .voice-btn-group .btn-secondary { min-height: 60px !important; padding: 16px !important; border-radius: var(--hm-radius-sm) !important; } /* AI button special style */ .btn-ai, button.btn-ai { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(34, 211, 238, 0.15)) !important; border: 1px solid rgba(139, 92, 246, 0.3) !important; color: var(--hm-text-main) !important; font-weight: 700 !important; box-shadow: 0 0 16px rgba(139, 92, 246, 0.15); } .btn-ai:hover { border-color: var(--hm-accent-primary) !important; box-shadow: var(--hm-glow-violet) !important; } /* ═══ LOADING / PROGRESS / WAVEFORM — Premium ═══ */ /* Loading overlay */ .hm-loading-overlay { background: rgba(11, 10, 15, 0.88) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } /* Premium spinner */ .hm-premium-spinner { width: 48px; height: 48px; border: 3px solid rgba(139, 92, 246, 0.15); border-top-color: var(--hm-accent-primary); border-right-color: var(--hm-accent-secondary); border-radius: 50%; animation: hm-spin 0.9s linear infinite; } @keyframes hm-spin { to { transform: rotate(360deg); } } /* Progress bar */ .hm-progress-premium { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .hm-progress-premium .progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--hm-accent-primary), var(--hm-accent-secondary), var(--hm-accent-green)); background-size: 200% 100%; animation: hm-progress-shimmer 2s ease infinite; transition: width 0.5s ease; } @keyframes hm-progress-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Waveform — CSS-only premium bars */ .hm-waveform-premium { display: flex; align-items: center; justify-content: center; gap: 3px; height: 60px; padding: 0 16px; } .hm-waveform-premium .bar { width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--hm-accent-primary), var(--hm-accent-secondary)); animation: hm-waveform 1.2s ease-in-out infinite; } .hm-waveform-premium .bar:nth-child(1) { height: 20px; animation-delay: 0s; } .hm-waveform-premium .bar:nth-child(2) { height: 40px; animation-delay: 0.1s; } .hm-waveform-premium .bar:nth-child(3) { height: 55px; animation-delay: 0.2s; } .hm-waveform-premium .bar:nth-child(4) { height: 45px; animation-delay: 0.3s; } .hm-waveform-premium .bar:nth-child(5) { height: 60px; animation-delay: 0.4s; } .hm-waveform-premium .bar:nth-child(6) { height: 50px; animation-delay: 0.35s; } .hm-waveform-premium .bar:nth-child(7) { height: 35px; animation-delay: 0.25s; } .hm-waveform-premium .bar:nth-child(8) { height: 25px; animation-delay: 0.15s; } .hm-waveform-premium .bar:nth-child(9) { height: 15px; animation-delay: 0.05s; } @keyframes hm-waveform { 0%, 100% { transform: scaleY(0.5); opacity: 0.6; } 50% { transform: scaleY(1); opacity: 1; } } /* Mic button — premium pulse */ .hm-mic-button-premium { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--hm-accent-primary), var(--hm-accent-primary-dark)); border: 2px solid var(--hm-border-neon); box-shadow: var(--hm-glow-violet); display: flex; align-items: center; justify-content: center; font-size: 36px; transition: all 0.2s ease; animation: hm-mic-pulse 2s ease-in-out infinite; } @keyframes hm-mic-pulse { 0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } 50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.5), 0 0 60px rgba(34, 211, 238, 0.15); } } /* Generation progress text */ .hm-generation-status { color: var(--hm-text-muted); font-size: 14px; text-align: center; padding: 8px 16px; } /* ═══ FINAL SUMMARY — Premium Cleanup ═══ */ /* Summary card premium */ .hm-summary-premium { background: rgba(18, 18, 34, 0.85) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid var(--hm-border-glass) !important; border-radius: var(--hm-radius-md) !important; padding: 20px !important; box-shadow: var(--hm-shadow-card) !important; } /* Summary field row */ .summary-field { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hm-border-glass-light); } .summary-field:last-child { border-bottom: none; } .summary-field-label { color: var(--hm-text-muted); font-size: 14px; font-weight: 500; flex: 0 0 100px; } .summary-field-value { color: var(--hm-text-main); font-size: 15px; font-weight: 600; flex: 1; text-align: right; padding: 0 8px; word-break: break-word; } .summary-field-edit { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.25); color: var(--hm-accent-primary-light); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: all 0.2s ease; } .summary-field-edit:hover { background: rgba(139, 92, 246, 0.2); box-shadow: var(--hm-glow-violet); } /* Price display premium */ .hm-price-premium { font-size: 24px; font-weight: 800; color: var(--hm-accent-gold); text-shadow: 0 0 20px rgba(248, 199, 106, 0.2); } /* Main CTA button — "Генерировать хит" */ .cta-generate { background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%) !important; border: none !important; border-radius: var(--hm-radius-sm) !important; min-height: 64px !important; font-size: 18px !important; font-weight: 800 !important; color: #FFFFFF !important; box-shadow: 0 16px 48px rgba(139, 92, 246, 0.4) !important; position: relative; overflow: hidden; transition: all 0.2s ease; } .cta-generate:hover { transform: translateY(-2px); box-shadow: 0 20px 56px rgba(139, 92, 246, 0.5) !important; } .cta-generate::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent); pointer-events: none; border-radius: inherit; } /* ═══ STEP INDICATOR — Premium ═══ */ .step-indicator { padding: 12px 16px !important; border-radius: var(--hm-radius-sm) !important; } .step-indicator .step-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hm-accent-primary) !important; box-shadow: 0 0 8px rgba(139, 92, 246, 0.3); } .step-indicator .step-dot.completed { background: var(--hm-accent-green) !important; box-shadow: 0 0 8px rgba(6, 214, 160, 0.3); } .step-indicator .step-label { font-weight: var(--hm-font-title) !important; color: var(--hm-text-main) !important; font-size: 13px; } /* ═══ TEXT INPUTS — Premium ═══ */ .hm-mobile-textarea, textarea, input[type="text"], input[type="number"] { background: rgba(0, 0, 0, 0.45) !important; border: 1px solid var(--hm-border-glass) !important; border-radius: var(--hm-radius-sm) !important; color: var(--hm-text-main) !important; font-size: 16px !important; padding: 14px !important; transition: all 0.2s ease !important; } .hm-mobile-textarea:focus, textarea:focus, input[type="text"]:focus { border-color: var(--hm-border-neon) !important; box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15) !important; outline: none !important; } /* ═══ HEADERS — Premium ═══ */ .hm-mobile-header h2, .screen-title, .step-label { font-weight: var(--hm-font-title) !important; color: var(--hm-text-main) !important; letter-spacing: -0.3px; } /* ═══ GENERATION RESULT — Premium Player ═══ */ .hm-player-premium { background: rgba(18, 18, 34, 0.85) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid var(--hm-border-glass) !important; border-radius: var(--hm-radius-md) !important; box-shadow: var(--hm-shadow-card) !important; } /* ═══ EMPTY / ERROR STATES — Premium ═══ */ .hm-empty-state { text-align: center; padding: 40px 20px; color: var(--hm-text-muted); } .hm-empty-state .hm-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; } .hm-empty-state h3 { color: var(--hm-text-main); font-weight: 700; margin-bottom: 8px; } /* ═══ MISC ELEMENTS — Premium polish ═══ */ /* Scrollbar styling */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.3); border-radius: 2px; } /* Selection color */ ::selection { background: rgba(139, 92, 246, 0.3); color: #FFFFFF; } /* Focus visible outline */ :focus-visible { outline: 2px solid var(--hm-accent-primary); outline-offset: 2px; } /* Link color */ a { color: var(--hm-accent-primary-light); transition: color 0.2s ease; } a:hover { color: var(--hm-accent-secondary); } /* ═══ ASSET SLOTS — будущие изображения (пока fallback) ═══ */ .hm-bg-visual { background-image: var(--hm-bg-image, none); background-size: cover; background-position: center; } .hm-hero-visual { position: relative; overflow: hidden; background-image: var(--hm-hero-image, none); background-size: cover; background-position: center; } .hm-photo-button { position: relative; overflow: hidden; } .hm-photo-button::before { content: ""; position: absolute; inset: 0; background-image: var(--hm-button-image, none); background-size: cover; background-position: center; opacity: 0.28; pointer-events: none; } .hm-card-visual { position: relative; overflow: hidden; background-image: var(--hm-card-image, none); background-size: cover; background-position: center; } .hm-genre-icon-slot, .hm-card-icon-slot, .hm-hero-visual-slot { width: 42px; height: 42px; flex: 0 0 auto; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: var(--hm-slot-image, none); } .hm-loader-custom { background-image: var(--hm-loader-image, none); background-size: contain; background-position: center; background-repeat: no-repeat; } /* ═══ RESPONSIVE FINE-TUNE ═══ */ @media (max-width: 380px) { .lang-btn { min-height: 48px !important; padding: 10px 14px !important; } .hm-bottom-sheet { max-height: 90vh !important; } } @media (min-width: 768px) { .hm-bottom-sheet { max-width: 480px; margin: 0 auto; } } /* Build badge — unobtrusive version indicator (Phase 10G-T1-CACHEFIX) */ .hm-build-badge { position: fixed; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 9999; font-size: 10px; opacity: 0.45; color: rgba(255, 255, 255, 0.75); pointer-events: none; user-select: none; font-family: monospace; } /* ═══ PHASE 10G-T1 — SUMMARY HUB CLASSES ═══ */ /* Container for the summary hub */ .hm-summary-hub { display: flex; flex-direction: column; gap: 10px; padding-bottom: 120px; /* space for sticky actions */ } /* Hero section — "Сборка трека" */ .hm-summary-hero { text-align: center; padding: 16px 12px 8px; background: linear-gradient(135deg, rgba(139,92,246,0.08) 0%, rgba(236,72,153,0.05) 100%); border-radius: 16px; border: 1px solid rgba(139,92,246,0.12); margin-bottom: 4px; } .hm-summary-hero h2 { font-size: clamp(20px,5.5vw,26px); font-weight: 800; margin: 0; background: linear-gradient(135deg, var(--hm-accent-primary) 0%, var(--hm-accent-pink) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hm-summary-hero p { font-size: clamp(12px,3.2vw,14px); color: var(--hm-text-muted); margin: 6px 0 0; line-height: 1.4; } /* Parameter chips row */ .hm-summary-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; justify-content: center; } /* Individual parameter chip */ .hm-summary-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.2); border-radius: 20px; font-size: clamp(12px,3vw,14px); font-weight: 600; color: var(--hm-text-main); cursor: pointer; transition: all 0.2s ease; user-select: none; -webkit-tap-highlight-color: transparent; white-space: nowrap; } .hm-summary-chip:hover { background: rgba(139,92,246,0.2); border-color: rgba(139,92,246,0.4); transform: translateY(-1px); } .hm-summary-chip:active { background: rgba(139,92,246,0.3); transform: scale(0.96); } /* Chip value text (parameter name or selected value) */ .hm-summary-chip-value { color: var(--hm-accent-pink); font-weight: 700; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* AI prompt preview card */ .hm-summary-prompt-preview { background: linear-gradient(135deg, rgba(139,92,246,0.06) 0%, rgba(59,130,246,0.04) 100%); border: 1px solid rgba(139,92,246,0.15); border-radius: 14px; padding: 14px 16px; margin: 4px 0; } .hm-summary-prompt-preview .card-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--hm-text-muted); margin-bottom: 8px; } .hm-summary-prompt-preview .card-body { font-size: 13px; line-height: 1.5; color: var(--hm-text-secondary); word-break: break-word; max-height: 80px; overflow-y: auto; } /* Price card */ .hm-summary-price-card { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; background: linear-gradient(135deg, rgba(251,191,36,0.1) 0%, rgba(245,158,11,0.05) 100%); border: 1px solid rgba(251,191,36,0.2); border-radius: 14px; margin: 4px 0; font-size: clamp(14px,3.8vw,17px); font-weight: 700; color: var(--hm-text-main); } .hm-summary-price-card .price-icon { font-size: 20px; } .hm-summary-price-card .price-amount { color: var(--hm-accent-gold, #FBBF24); } .hm-summary-price-card .price-balance { font-size: 12px; font-weight: 500; color: var(--hm-text-muted); margin-left: 4px; } /* Sticky bottom action bar */ .hm-summary-sticky-actions { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent 0%, var(--hm-bg-main) 30%); display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .hm-summary-sticky-actions > * { pointer-events: auto; } /* V11-RESCUE-2: Splash video size only patch */ #screen-promo-splash { overflow: hidden !important; background: #050510; touch-action: manipulation; } #screen-promo-splash video, #screen-promo-splash .promo-splash-video, #screen-promo-splash .promo-splash-video video { width: 100% !important; height: 100% !important; max-width: 100vw !important; max-height: 100dvh !important; object-fit: contain !important; object-position: center center !important; display: block !important; margin: 0 auto !important; } #screen-promo-splash video { pointer-events: none; } #screen-promo-splash .promo-splash-overlay, #screen-promo-splash .promo-splash-content { max-width: 100vw; box-sizing: border-box; } .hm-build-badge { pointer-events: none; } /* ═══════════════════════════════════════════════════════════════ V11-RESCUE-4-HOTFIX-4: DISABLE INVISIBLE SPLASH/PRELOAD GLASS SHIELD ═══════════════════════════════════════════════════════════════ */ html.hm-app-entered #instant-preload-screen, body.hm-app-entered #instant-preload-screen, html.hm-app-entered #screen-promo-splash, body.hm-app-entered #screen-promo-splash, .hm-layer-disabled, #instant-preload-screen.hm-layer-disabled, #screen-promo-splash.hm-layer-disabled, .promo-splash.hm-layer-disabled, .promo-splash-overlay.hm-layer-disabled, .boot-loader.hm-layer-disabled, .loading-screen.hm-layer-disabled { pointer-events: none !important; visibility: hidden !important; opacity: 0 !important; z-index: -1 !important; display: none !important; } .screen-stack .screen:not(.active) { pointer-events: none !important; } .screen-stack .screen.active { pointer-events: auto !important; } .screen-leaving, .screen.hidden, .screen.is-hidden, .screen[aria-hidden="true"] { pointer-events: none !important; }