/* ════════════════════════════════════════════════════════
       GLOBAL UX REFACTOR — Mobile Adaptivity & Standardization
       ════════════════════════════════════════════════════════ */
    /* Fix horizontal scroll, layered overlap */
    html, body {
      overflow-x: hidden !important;
      width: 100vw !important;
      max-width: 100% !important;
      box-sizing: border-box;
    }
    *,
    *::before,
    *::after {
      box-sizing: inherit;
    }
    /* Standardized button touch zones */
    .btn-3d,
    .btn-secondary,
    .btn-ai {
      min-height: 48px;
      border-radius: 12px;
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
      hyphens: auto;
    }
    /* ═══ TRACK CARD — my-tracks VERTICAL VARIANTS with covers ═══ */
    .my-track-card {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px;
      border-radius: var(--panel-radius);
      background: var(--graphite);
      border: 1px solid var(--graphite-border);
      margin-bottom: 8px;
    }
    .my-track-card .track-card-header {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .my-track-card .track-card-title {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.3;
      color: var(--text-main);
    }
    .my-track-card .track-card-meta {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.3;
    }
    .my-track-card .track-variant {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 10px;
      padding: 8px;
      background: rgba(255,255,255,0.03);
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.04);
    }
    .my-track-card .track-variant-cover {
      width: 100px;
      height: 100px;
      flex-shrink: 0;
      border-radius: 8px;
      object-fit: cover;
      aspect-ratio: 1/1;
    }
    .my-track-card .track-variant-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .my-track-card .track-variant-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
    }
    .my-track-card .track-card-custom-player {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 2px;
    }
    .my-track-card .track-card-custom-player .custom-player-btn {
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(135deg, #a855f7, #7c3aed);
      color: #fff;
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding: 0;
      box-shadow: 0 2px 6px rgba(168,85,247,0.25);
      -webkit-tap-highlight-color: transparent;
    }
    .my-track-card .track-card-custom-player .custom-player-btn.playing {
      background: linear-gradient(135deg, #f59e0b, #d97706);
    }
    .my-track-card .track-card-custom-player .custom-player-slider {
      flex: 1;
      min-width: 40px;
      height: 3px;
      -webkit-appearance: none;
      appearance: none;
      background: rgba(255,255,255,0.12);
      border-radius: 2px;
      outline: none;
      cursor: pointer;
    }
    .my-track-card .track-card-custom-player .custom-player-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(135deg, #a855f7, #7c3aed);
      border: none;
      cursor: pointer;
    }
    .my-track-card .track-card-custom-player .custom-player-slider::-moz-range-thumb {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(135deg, #a855f7, #7c3aed);
      border: none;
      cursor: pointer;
    }
    .my-track-card .track-card-custom-player .custom-player-time-current,
    .my-track-card .track-card-custom-player .custom-player-time-total,
    .my-track-card .track-card-custom-player .custom-player-time-sep {
      font-size: 10px;
      color: rgba(255,255,255,0.45);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      min-width: 20px;
      text-align: center;
      font-family: 'Exo 2', monospace;
    }
    .my-track-card .track-card-custom-player .custom-player-time-sep {
      min-width: auto;
      color: rgba(255,255,255,0.2);
    }
    .my-track-card .track-card-no-audio {
      font-size: 11px;
      color: #ff6b6b;
      padding: 2px 0;
    }
    .track-card-info {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    /* Showcase card styling */
    .showcase-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px;
      border-radius: var(--panel-radius);
      background: var(--graphite);
      border: 1px solid var(--graphite-border);
    }
    .showcase-card-cover {
      width: 100%;
      max-height: 180px;
      border-radius: var(--btn-radius);
      object-fit: cover;
      aspect-ratio: 1/1;
    }
    .showcase-card-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .showcase-card-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-main);
    }
    .showcase-card-genre {
      font-size: 13px;
      color: var(--amber);
      font-weight: 600;
    }
    .showcase-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .showcase-card-tag {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 8px;
      background: rgba(255,255,255,0.05);
      color: var(--text-muted);
    }
    .showcase-card-actions {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }
    .showcase-card-actions .btn-secondary {
      flex: 1;
      min-height: 40px;
      font-size: 13px;
      padding: 8px 12px;
    }
    #instant-preload-screen {
      position: fixed; inset: 0; width: 100%; height: 100dvh;
      z-index: 2147483647; display: flex;
      flex-direction: column; align-items: center; justify-content: center;
      /* V11-RESCUE-4-HOTFIX-5: более яркий градиент — гарантированно не чёрный */
      background:
        radial-gradient(circle at 50% -10%, rgba(139,92,246,0.35) 0%, transparent 35%),
        radial-gradient(circle at 20% 20%, rgba(0,212,255,0.20) 0%, transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(245,166,35,0.15) 0%, transparent 32%),
        linear-gradient(180deg, #0d0f1a 0%, #12162a 45%, #0a0c18 100%);
      color: #fff; text-align: center; padding: 24px; box-sizing: border-box;
      opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }
    #instant-preload-screen.is-hidden { opacity: 0; pointer-events: none !important; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
    #instant-preload-screen.is-hidden * { pointer-events: none !important; }
    /* V11-RESCUE-4-HOTFIX-3: GLASS SHIELD DEFENSE — все скрытые слои теряют клики */
    .screen-leaving,
    .screen-entering,
    .screen.hidden,
    .screen.is-hidden,
    [aria-hidden="true"],
    [inert] { pointer-events: none !important; }
    .screen.active { pointer-events: auto; }
    /* Если splash закрыт — он не должен ловить клики */
    #screen-promo-splash.hidden,
    #screen-promo-splash.is-hidden,
    #screen-promo-splash:not(.active) { pointer-events: none !important; }
    #screen-promo-splash.active { pointer-events: auto; }
    /* Видео-заставка: гарантируем видимость + заполнение экрана */
    #screen-promo-splash {
      position: relative; overflow: hidden;
      width: 100%; height: 100dvh; min-height: 100dvh;
    }
    .promo-splash-video {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      object-fit: cover; z-index: 0;
    }
    .promo-splash-overlay {
      position: relative; z-index: 1;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      width: 100%; height: 100dvh;
      background: rgba(0,0,0,0.3);
    }
    .promo-splash-logo {
      font-size: clamp(32px, 8vw, 56px); font-weight: 900;
      background: linear-gradient(135deg, #c084fc, #818cf8, #22d3ee);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text; margin-bottom: 12px;
    }
    .promo-splash-title {
      font-size: clamp(16px, 4vw, 22px); color: rgba(255,255,255,0.9);
      font-weight: 600; margin-bottom: 32px;
    }
    .promo-splash-hint {
      font-size: clamp(14px, 3.5vw, 18px); color: rgba(255,255,255,0.6);
      animation: pulse-hint 2s ease-in-out infinite;
    }
    @keyframes pulse-hint {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }
    /* Аварийный display:none для preload после входа */
    #instant-preload-screen[aria-hidden="true"] { display: none !important; }
    #screen-promo-splash[aria-hidden="true"] { display: none !important; }
    .preload-brand {
      font-size: clamp(28px,7vw,40px); font-weight: 950;
      background: linear-gradient(135deg,#c084fc,#818cf8,#22d3ee);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text; letter-spacing: -0.5px; margin-bottom: 8px;
    }
    .preload-sub { font-size: clamp(15px,4vw,19px); color: rgba(255,255,255,0.55); font-weight: 600; margin-bottom: 24px; }
    .preload-spinner {
      width: 40px; height: 40px; border-radius: 50%;
      border: 3px solid rgba(139,92,246,0.15); border-top-color: #a855f7;
      animation: preload-spin 0.9s linear infinite; margin: 0 auto 20px;
    }
    @keyframes preload-spin { to { transform: rotate(360deg); } }
    .preload-version {
      position: fixed; bottom: 12px; left: 0; right: 0;
      text-align: center; font-size: 10px; color: rgba(255,255,255,0.2);
      letter-spacing: 0.5px; pointer-events: none;
    }
    .preload-continue-btn {
      display: none; margin-top: 28px; min-width: 200px; min-height: 54px;
      border-radius: 14px; background: linear-gradient(135deg,#8B5CF6,#7C3AED);
      color: #fff; border: none; font-size: 17px; font-weight: 800;
      cursor: pointer; box-shadow: 0 4px 24px rgba(139,92,246,0.35);
      font-family: inherit; letter-spacing: 0.3px;
    }
    .preload-continue-btn:active { transform: scale(0.97); }
    #instant-preload-screen.show-continue .preload-spinner { display: none; }
    #instant-preload-screen.show-continue .preload-continue-btn { display: inline-block; }
    #instant-preload-screen.show-continue .preload-sub { color: rgba(255,255,255,0.7); }
    html.splash-lock, body.splash-lock {
      position: fixed; width: 100%; height: 100dvh; overflow: hidden;
      margin: 0; padding: 0; top: 0; left: 0; right: 0; bottom: 0;
    }
    /* ════════════════════════════════════════════════════════
       AI STUDIO SYNTHESIS — Design System
       ════════════════════════════════════════════════════════ */
    :root {
      --bg-color: #0a0a10;
      --bg-gradient: radial-gradient(ellipse at 50% 0%, #1a1a2e 0%, #0a0a10 100%);
      --amber: #f5a623;
      --amber-dark: #c47d10;
      --amber-glow: rgba(245, 166, 35, 0.25);
      --cyan: #00d4ff;
      --purple: #a855f7;
      --cyan-glow: rgba(0, 212, 255, 0.2);
      --purple-glow: rgba(168, 85, 247, 0.2);
      --graphite: rgba(30, 30, 40, 0.85);
      --graphite-border: rgba(60, 60, 80, 0.4);
      --glass-bg: rgba(255, 255, 255, 0.03);
      --glass-border: rgba(255, 255, 255, 0.06);
      --text-main: #e8e8ee;
      --text-muted: #7a7a8e;
      --text-dim: #4a4a5a;
      --success: #22c55e;
      --success-glow: rgba(34, 197, 94, 0.2);
      --error: #ef4444;
      --panel-radius: 14px;
      --btn-radius: 10px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      overflow-x: hidden;
      width: 100%;
      max-width: 100%;
      height: 100dvh;
    }

    body {
      margin: 0;
      padding: 0;
      background: var(--bg-gradient);
      background-attachment: fixed;
      color: var(--text-main);
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto;
      height: 100dvh;
      width: 100vw;
      max-width: 100%;
      font-size: clamp(16px, 4.2vw, 18px);
      font-weight: 500;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    /* ═══ APP SHELL ═══ */
    .app, .app-shell {
      max-width: 520px;
      margin: 0 auto;
      width: 100%;
      padding: 0 0 20px 0;
      position: relative;
      min-height: 100vh;
      padding-bottom: env(safe-area-inset-bottom, 20px);
    }

    /* ═══ STUDIO BACKGROUND (subtle grid) ═══ */
    .studio-bg::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
      z-index: 0;
    }

    /* ═══ RACK PANEL (brushed metal) ═══ */
    .glass-panel, .rack-panel {
      background: var(--graphite);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--graphite-border);
      border-radius: var(--panel-radius);
      box-shadow:
        0 4px 24px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 -1px 0 rgba(0,0,0,0.3);
      padding: 18px 16px;
      margin: 10px 12px;
      position: relative;
      overflow: hidden;
    }

    /* subtle metal highlight top edge */
    .glass-panel::before, .rack-panel::before {
      content: '';
      position: absolute;
      top: 0; left: 10%; right: 10%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    }

    /* ═══ BUTTONS ═══ */

    /* Primary Amber Button — mechanical studio button */
    .btn-3d {
      background: linear-gradient(180deg, #f5a623 0%, #d4891a 40%, #b07310 100%);
      color: #0a0a10;
      font-weight: 800;
      font-size: clamp(16px, 4.4vw, 19px);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      border: none;
      border-radius: var(--btn-radius);
      padding: 18px 22px;
      min-height: 60px;
      width: calc(100% - 24px);
      margin: 8px 12px;
      box-shadow:
        0 4px 0 #7a5510,
        0 6px 16px rgba(245, 166, 35, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.2);
      transition: all 0.08s ease;
      cursor: pointer;
      text-align: center;
      display: inline-block;
      position: relative;
      text-shadow: 0 1px 0 rgba(255,255,255,0.15);
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    .btn-3d:active {
      transform: translateY(4px);
      box-shadow:
        0 0 0 #7a5510,
        0 4px 12px rgba(245, 166, 35, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
    }

    .btn-3d:disabled {
      background: linear-gradient(180deg, #2a2a30 0%, #1a1a20 100%);
      color: #5a5a6a;
      box-shadow: 0 3px 0 #0a0a10, 0 4px 8px rgba(0,0,0,0.2);
      transform: none;
      cursor: not-allowed;
      text-shadow: none;
    }

    .btn-3d.small {
      padding: 10px 16px;
      font-size: 12px;
      width: auto;
      margin: 4px 6px;
    }

    /* Secondary Button — graphite metal */
    .btn-secondary {
      background: linear-gradient(180deg, rgba(50,50,65,0.6) 0%, rgba(30,30,45,0.8) 100%);
      border: 1px solid rgba(80,80,100,0.3);
      color: var(--text-main);
      padding: 14px 20px;
      min-height: 54px;
      border-radius: var(--btn-radius);
      transition: all 0.15s ease;
      font-size: clamp(15px, 4vw, 17px);
      font-weight: 600;
      cursor: pointer;
      margin: 4px;
      font-family: inherit;
      position: relative;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    .btn-secondary:hover {
      background: linear-gradient(180deg, rgba(60,60,75,0.6) 0%, rgba(40,40,55,0.8) 100%);
      border-color: rgba(100,100,120,0.4);
    }

    .btn-secondary.active {
      background: linear-gradient(180deg, #f5a623 0%, #d4891a 40%, #b07310 100%);
      color: #0a0a10;
      border-color: var(--amber);
      box-shadow:
        0 0 20px rgba(245, 166, 35, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.2);
      font-weight: 700;
    }

    /* AI Button — cyan/purple glow */
    .btn-ai {
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(168, 85, 247, 0.12));
      border: 1px solid rgba(0, 212, 255, 0.2);
      color: var(--cyan);
      padding: 10px 16px;
      border-radius: var(--btn-radius);
      font-size: 13px;
      cursor: pointer;
      margin: 4px;
      font-family: inherit;
      font-weight: 600;
      transition: all 0.2s ease;
      box-shadow: 0 0 12px rgba(0, 212, 255, 0.08);
      animation: ai-glow-pulse 3s ease-in-out infinite;
    }

    .btn-ai:hover {
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.18), rgba(168, 85, 247, 0.18));
      border-color: rgba(0, 212, 255, 0.35);
      box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
    }

    .btn-ai:active {
      transform: scale(0.97);
    }

    @keyframes ai-glow-pulse {
      0%, 100% { box-shadow: 0 0 12px rgba(0, 212, 255, 0.08); }
      50% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.15); }
    }

    .btn-secondary.active-green {
      background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
      color: #0a0a10;
      border-color: var(--success);
      box-shadow: 0 0 16px var(--success-glow);
      font-weight: 700;
    }

    .btn-secondary.small {
      padding: 6px 12px;
      font-size: 12px;
    }

    .btn-danger {
      background: rgba(239, 68, 68, 0.12);
      border: 1px solid rgba(239, 68, 68, 0.25);
      color: var(--error);
      padding: 10px 16px;
      border-radius: var(--btn-radius);
      transition: 0.2s;
      font-size: 13px;
      cursor: pointer;
      margin: 4px;
      font-family: inherit;
    }

    .btn-danger:hover {
      background: rgba(239, 68, 68, 0.2);
    }

    /* ═══ INPUTS — studio terminal style ═══ */
    textarea, input[type="text"], input[type="number"] {
      width: 100%;
      background: rgba(0,0,0,0.4);
      border: 1px solid rgba(60,60,80,0.3);
      color: var(--text-main);
      border-radius: var(--btn-radius);
      padding: 16px;
      font-family: 'Exo 2', 'Montserrat', monospace;
      font-size: clamp(16px, 4.4vw, 19px);
      font-weight: 600;
      line-height: 1.5;
      box-sizing: border-box;
      resize: none;
      transition: 0.3s;
      box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
    }

    textarea:focus, input[type="text"]:focus, input[type="number"]:focus {
      outline: none;
      border-color: var(--amber);
      box-shadow: inset 0 2px 8px rgba(0,0,0,0.3), 0 0 12px rgba(245, 166, 35, 0.1);
    }

    /* ═══ LAYOUT & SCREENS ═══ */
    .studio-layout {
      height: 100dvh;
      max-height: 100dvh;
      width: 100%;
      background: var(--bg-gradient, #050608);
      display: flex;
      flex-direction: column;
      position: relative;
      isolation: isolate;
      overflow: hidden;
    }

    .screen-stack {
      position: relative;
      width: 100%;
      flex: 1;
      height: 100%;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(5,6,8,0.95), rgba(10,10,16,0.98));
    }

    .screen-stack::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(168,85,247,0.08), transparent 60%);
      opacity: 0.85;
      pointer-events: none;
    }

    .screen {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: none;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(10px) scale(0.995);
      transition: opacity 0.05s ease-out, transform 0.05s ease-out;
      will-change: opacity, transform;
      /* Защита от чёрного экрана: фон наследуется от body */
      background: transparent;
    }

    .screen.active,
    .screen.screen-entering,
    .screen.screen-leaving {
      display: flex;
      flex-direction: column;
      visibility: visible;
    }

    .screen.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: calc(40px + env(safe-area-inset-bottom, 20px));
    }

    .screen.screen-entering {
      opacity: 0.02;
      pointer-events: none;
    }

    .screen.screen-leaving {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-4px) scale(0.995);
    }

    /* ═══ WIZARD HEADER — neon amber title ═══ */
    .wizard-header {
      text-align: center;
      padding: 20px 12px 8px;
    }

    .wizard-header h1 {
      color: var(--amber);
      font-size: 22px;
      font-weight: 800;
      text-shadow: 0 0 20px rgba(245, 166, 35, 0.15);
      letter-spacing: 0.5px;
    }

    .wizard-header .subtitle {
      color: var(--text-muted);
      font-size: 13px;
      margin-top: 4px;
    }

    .wizard-content {
      padding: 0 4px;
    }

    .section-title {
      color: var(--text-main);
      font-size: 13px;
      font-weight: 700;
      margin: 16px 8px 8px;
      letter-spacing: 1px;
      text-transform: uppercase;
      opacity: 0.8;
    }

    .section-subtitle {
      color: var(--text-muted);
      font-size: 12px;
      margin: 0 8px 12px;
    }

    /* ═══ BUTTON GROUP — rack module grid ═══ */
    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      margin: 8px 0;
    }

    .button-group .btn-secondary {
      flex: 0 1 auto;
      min-width: calc(50% - 10px);
    }

    .button-group .btn-secondary.full {
      min-width: calc(100% - 10px);
    }

    .button-group .btn-secondary.third {
      min-width: calc(33% - 8px);
    }

    .button-row {
      display: flex;
      gap: 8px;
      padding: 8px 12px;
    }

    .button-row .btn-3d {
      margin: 0;
      flex: 1;
    }

    .button-row .btn-secondary {
      margin: 0;
      flex: 1;
    }

    /* ═══ NAV — sticky bottom with glass ═══ */
    .nav-buttons {
      display: flex;
      gap: 8px;
      padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
      position: sticky;
      bottom: 0;
      background: linear-gradient(transparent, #0a0a10 25%);
      z-index: 10;
      backdrop-filter: blur(4px);
    }

    .nav-buttons .btn-3d,
    .nav-buttons .btn-primary-vol {
      margin: 0;
      flex: 2;
    }

    .nav-buttons .btn-secondary,
    .nav-buttons .btn-secondary-vol {
      margin: 0;
      flex: 1;
    }

    /* ═══ LOGO / STUDIO BADGE ═══ */
    .logo-badge {
      width: 72px;
      height: 72px;
      border-radius: 20px;
      background: linear-gradient(145deg, #f5a623 0%, #c47d10 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      margin: 0 auto 16px;
      box-shadow:
        0 8px 32px rgba(245, 166, 35, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.2);
      position: relative;
    }

    .logo-badge::after {
      content: '';
      position: absolute;
      top: -2px; left: -2px; right: -2px; bottom: -2px;
      border-radius: 22px;
      background: linear-gradient(145deg, rgba(245,166,35,0.3), transparent);
      z-index: -1;
    }

    /* ═══ SUMMARY — rack configurator ═══ */
    .summary-item {
      display: flex;
      align-items: flex-start;
      padding: 12px 14px;
      margin: 4px 0;
      background: rgba(255,255,255,0.02);
      border-radius: var(--btn-radius);
      border: 1px solid rgba(60,60,80,0.15);
      transition: border-color 0.2s;
    }

    .summary-item:hover {
      border-color: rgba(60,60,80,0.3);
    }

    .summary-item .label {
      flex: 1;
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-weight: 600;
    }

    .summary-item .value {
      font-size: 14px;
      color: var(--text-main);
      font-weight: 600;
      text-align: right;
      max-width: 55%;
    }

    .summary-item .value.auto-val {
      color: var(--amber);
      font-style: italic;
    }

    .summary-item .edit-btn {
      background: rgba(245, 166, 35, 0.08);
      border: 1px solid rgba(245, 166, 35, 0.15);
      color: var(--amber);
      font-size: 14px;
      cursor: pointer;
      padding: 4px 8px;
      margin-left: 8px;
      border-radius: 6px;
      opacity: 0.7;
      transition: all 0.2s;
      font-weight: 600;
      white-space: nowrap;
    }

    .summary-item .edit-btn:hover {
      opacity: 1;
      background: rgba(245, 166, 35, 0.15);
    }

    /* ═══ TOAST ═══ */
    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: rgba(10,10,16,0.95);
      color: var(--text-main);
      padding: 12px 24px;
      border-radius: var(--btn-radius);
      font-size: 14px;
      z-index: 9999;
      opacity: 0;
      transition: all 0.3s ease;
      pointer-events: none;
      white-space: nowrap;
      max-width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid rgba(60,60,80,0.3);
      backdrop-filter: blur(12px);
      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .toast.success {
      border-color: var(--success);
      box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 12px var(--success-glow);
    }

    .toast.error {
      border-color: var(--error);
    }

    /* ═══ AI ADVICE PANEL ═══ */
    .ai-advice-box {
      background: linear-gradient(135deg, rgba(245, 166, 35, 0.06), rgba(168, 85, 247, 0.04));
      border: 1px solid rgba(245, 166, 35, 0.12);
      border-radius: var(--panel-radius);
      padding: 16px;
      margin: 10px 0;
      position: relative;
    }

    .ai-advice-box::before {
      content: '🤖';
      position: absolute;
      top: -8px; right: 12px;
      font-size: 20px;
    }

    .ai-advice-box .advice-title {
      color: var(--amber);
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 8px;
    }

    .ai-advice-box .advice-text {
      font-size: 13px;
      color: var(--text-main);
      line-height: 1.6;
      padding-right: 30px;
    }

    .ai-advice-box .advice-good {
      color: var(--success);
    }

    .ai-advice-box .advice-add {
      color: var(--amber);
    }

    .ai-advice-box .advice-remove {
      color: var(--error);
    }

    .hint-text {
      color: var(--text-muted);
      font-size: 12px;
      margin: 6px 8px;
      line-height: 1.4;
    }

    /* ═══ GENERATION — studio process ═══ */
    .generation-status {
      text-align: center;
      padding: 20px 0;
    }

    .generation-status .status-icon {
      font-size: 48px;
      margin-bottom: 12px;
      display: inline-block;
      animation: gen-pulse 1.5s ease-in-out infinite;
    }

    @keyframes gen-pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.08); opacity: 0.8; }
    }

    .generation-status .status-text {
      font-size: 16px;
      color: var(--text-main);
      font-weight: 600;
    }

    .generation-status .status-sub {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 8px;
    }

    .progress-bar {
      width: calc(100% - 48px);
      margin: 16px 24px;
      height: 6px;
      background: rgba(255,255,255,0.06);
      border-radius: 3px;
      overflow: hidden;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    }

    .progress-bar .fill {
      height: 100%;
      background: linear-gradient(90deg, var(--amber), #f7c948, var(--amber));
      border-radius: 3px;
      transition: width 1s ease;
      width: 0%;
      background-size: 200% 100%;
      animation: progress-shimmer 2s linear infinite;
    }

    @keyframes progress-shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ═══ TAG ═══ */
    .tag {
      display: inline-block;
      background: rgba(245,166,35,0.08);
      color: var(--amber);
      padding: 3px 10px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* ═══ VOICE MODE CARDS ═══ */
    .voice-mode-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(60,60,80,0.2);
      border-radius: var(--panel-radius);
      padding: 14px;
      margin: 6px 0;
      cursor: pointer;
      transition: all 0.2s;
    }

    .voice-mode-card:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(60,60,80,0.3);
    }

    .voice-mode-card.active {
      border-color: var(--amber);
      background: rgba(245,166,35,0.05);
      box-shadow: 0 0 16px rgba(245,166,35,0.08);
    }

    .voice-mode-card .mode-title {
      font-weight: 600;
      font-size: 14px;
    }

    .voice-mode-card .mode-desc {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    /* ═══ REFERENCE PRESETS — rack modules ═══ */
    .ref-category {
      margin: 8px 0;
      border: 1px solid rgba(60,60,80,0.2);
      border-radius: var(--panel-radius);
      overflow: hidden;
      background: rgba(255,255,255,0.02);
    }

    .ref-category-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      cursor: pointer;
      transition: 0.2s;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    
    /* Highlight animation for AI-updated fields */
    @keyframes ai-highlight-pulse {
      0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.6); background-color: rgba(255, 215, 0, 0.15); }
      50% { box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.3); background-color: rgba(255, 215, 0, 0.08); }
      100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); background-color: transparent; }
    }
    .highlight-ai {
      animation: ai-highlight-pulse 1.8s ease-out;
      border-radius: 6px;
    }
    
    /* AI label badges */
    .ai-badge {
      display: inline-block;
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 8px;
      margin-left: 4px;
      vertical-align: middle;
      font-weight: 600;
    }
    .ai-badge-ai {
      background: linear-gradient(135deg, #FFD700, #FFA500);
      color: #000;
    }
    .ai-badge-manual {
      background: rgba(255,255,255,0.1);
      color: var(--text-muted);
    }

    .ref-category-header:hover {
      background: rgba(255,255,255,0.04);
    }

    .ref-category-header .cat-icon {
      font-size: 18px;
      margin-right: 10px;
    }

    .ref-category-header .cat-title {
      flex: 1;
      font-weight: 700;
      font-size: 14px;
      color: var(--text-main);
      letter-spacing: 0.3px;
    }

    .ref-category-header .cat-count {
      font-size: 11px;
      color: var(--text-muted);
      margin-right: 8px;
    }

    .ref-category-header .cat-arrow {
      font-size: 12px;
      color: var(--text-muted);
      transition: transform 0.3s ease;
    }

    .ref-category-header .cat-arrow.open {
      transform: rotate(180deg);
    }

    .ref-category-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }

    .ref-category-body.open {
      max-height: 2000px;
    }

    .ref-category-body-inner {
      padding: 4px 10px 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    .ref-preset-btn {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(60,60,80,0.15);
      color: var(--text-main);
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 11px;
      cursor: pointer;
      transition: all 0.2s;
      font-family: inherit;
      flex: 0 1 auto;
      position: relative;
      text-align: left;
      line-height: 1.3;
    }

    .ref-preset-btn:hover {
      background: rgba(255,255,255,0.06);
      border-color: rgba(245,166,35,0.2);
    }

    .ref-preset-btn.active {
      background: rgba(245,166,35,0.1);
      border-color: var(--amber);
      color: var(--amber);
      font-weight: 600;
      box-shadow: 0 0 8px rgba(245,166,35,0.08);
    }

    .ref-preset-btn .safety-badge {
      display: block;
      font-size: 9px;
      color: var(--text-muted);
      font-weight: 400;
      margin-top: 2px;
      opacity: 0.7;
    }

    .ref-search-box {
      width: 100%;
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(60,60,80,0.2);
      color: var(--text-main);
      border-radius: 8px;
      padding: 10px 12px;
      font-family: inherit;
      font-size: 13px;
      margin-bottom: 8px;
      box-sizing: border-box;
      outline: none;
      transition: 0.3s;
    }

    .ref-search-box:focus {
      border-color: var(--amber);
      box-shadow: 0 0 8px rgba(245,166,35,0.08);
    }

    .ref-selected-bar {
      background: rgba(245,166,35,0.05);
      border: 1px solid rgba(245,166,35,0.12);
      border-radius: var(--btn-radius);
      padding: 10px 14px;
      margin-bottom: 10px;
      display: none;
      font-size: 13px;
    }

    .ref-selected-bar .ref-selected-label {
      color: var(--text-muted);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .ref-selected-bar .ref-selected-value {
      color: var(--amber);
      font-weight: 600;
      margin-top: 2px;
    }

    .ref-selected-bar .ref-selected-safety {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 4px;
      font-style: italic;
    }

    .ref-selected-bar .ref-selected-clear {
      float: right;
      background: none;
      border: none;
      color: var(--error);
      font-size: 18px;
      cursor: pointer;
      padding: 0 4px;
    }

    /* ════════════════════════════════════════════════════════
       AI STUDIO SYNTHESIS — NEW UTILITY CLASSES
       ════════════════════════════════════════════════════════ */

    /* VU Meter — decorative */
    .vu-meter {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 32px;
      padding: 4px 8px;
      margin: 0 auto 8px;
      justify-content: center;
    }

    .vu-meter .vu-bar {
      width: 4px;
      background: linear-gradient(180deg, var(--amber), var(--amber-dark));
      border-radius: 2px;
      animation: vu-dance 1.2s ease-in-out infinite alternate;
      opacity: 0.6;
    }

    .vu-meter .vu-bar:nth-child(1) { height: 40%; animation-delay: 0s; }
    .vu-meter .vu-bar:nth-child(2) { height: 70%; animation-delay: 0.1s; }
    .vu-meter .vu-bar:nth-child(3) { height: 55%; animation-delay: 0.2s; }
    .vu-meter .vu-bar:nth-child(4) { height: 85%; animation-delay: 0.3s; }
    .vu-meter .vu-bar:nth-child(5) { height: 60%; animation-delay: 0.4s; }
    .vu-meter .vu-bar:nth-child(6) { height: 90%; animation-delay: 0.5s; }
    .vu-meter .vu-bar:nth-child(7) { height: 45%; animation-delay: 0.15s; }
    .vu-meter .vu-bar:nth-child(8) { height: 75%; animation-delay: 0.35s; }

    @keyframes vu-dance {
      0% { opacity: 0.3; transform: scaleY(0.6); }
      100% { opacity: 0.9; transform: scaleY(1); }
    }

    /* Waveform decorative line */
    .waveform-line {
      height: 2px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(245,166,35,0.1) 10%,
        rgba(245,166,35,0.3) 30%,
        rgba(245,166,35,0.15) 50%,
        rgba(245,166,35,0.3) 70%,
        rgba(245,166,35,0.1) 90%,
        transparent 100%
      );
      margin: 8px 0;
      border-radius: 1px;
    }

    /* Safety badge */
    .safety-badge {
      display: inline-block;
      background: rgba(34, 197, 94, 0.08);
      color: var(--success);
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border: 1px solid rgba(34, 197, 94, 0.15);
    }

    /* Status pill */
    .status-pill {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
    }

    .status-pill.ready {
      background: rgba(34, 197, 94, 0.1);
      color: var(--success);
      border: 1px solid rgba(34, 197, 94, 0.2);
    }

    .status-pill.warn {
      background: rgba(245, 166, 35, 0.15);
      color: #FFA500;
      border: 1px solid rgba(245, 166, 35, 0.3);
    }

    .status-pill.coming-soon {
      background: rgba(245, 166, 35, 0.1);
      color: var(--amber);
      border: 1px solid rgba(245, 166, 35, 0.2);
    }

    .status-pill.locked {
      background: rgba(239, 68, 68, 0.08);
      color: var(--error);
      border: 1px solid rgba(239, 68, 68, 0.15);
    }

    /* Lyrics box — terminal style */
    .lyrics-box {
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(60,60,80,0.2);
      border-radius: var(--btn-radius);
      padding: 14px;
      font-family: 'Exo 2', monospace;
      font-size: 13px;
      line-height: 1.7;
      color: var(--text-main);
      white-space: pre-wrap;
      max-height: 200px;
      overflow-y: auto;
      box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
    }

    .lyrics-box::-webkit-scrollbar { width: 3px; }
    .lyrics-box::-webkit-scrollbar-thumb { background: rgba(245,166,35,0.2); border-radius: 2px; }

    /* Preview title — neon track name */
    .preview-title {
      font-size: 20px;
      font-weight: 800;
      color: var(--amber);
      text-shadow: 0 0 20px rgba(245, 166, 35, 0.15);
      text-align: center;
      padding: 8px 0;
      letter-spacing: 0.5px;
    }

    /* Bottom actions sticky */
    .bottom-actions {
      display: flex;
      gap: 8px;
      padding: 12px;
      position: sticky;
      bottom: 0;
      background: linear-gradient(transparent, #0a0a10 20%);
      z-index: 10;
    }

    /* Option card for AI Studio */
    .option-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(60,60,80,0.2);
      border-radius: var(--panel-radius);
      padding: 14px;
      margin: 6px 0;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
    }

    .option-card:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(60,60,80,0.3);
    }

    .option-card.active {
      border-color: var(--amber);
      background: rgba(245,166,35,0.05);
      box-shadow: 0 0 16px rgba(245,166,35,0.08);
    }

    .option-card .card-icon {
      font-size: 24px;
      margin-bottom: 6px;
    }

    .option-card .card-title {
      font-weight: 600;
      font-size: 14px;
    }

    .option-card .card-desc {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    /* Summary card */
    .summary-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(60,60,80,0.15);
      border-radius: var(--panel-radius);
      padding: 14px;
      margin: 6px 0;
    }

    .summary-card .summary-header {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--text-muted);
      font-weight: 600;
      margin-bottom: 6px;
    }

    .summary-card .summary-body {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-main);
    }

    /* Chip */
    .chip {
      display: inline-block;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(60,60,80,0.15);
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 11px;
      color: var(--text-muted);
      margin: 2px;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 480px) {
      .glass-panel, .rack-panel {
        margin: 8px 8px;
        padding: 14px 12px;
        border-radius: 12px;
      }

      .btn-3d {
        padding: 14px 16px;
        font-size: 14px;
        width: calc(100% - 16px);
        margin: 6px 8px;
      }

      .wizard-header h1 {
        font-size: 20px;
      }

      .nav-buttons {
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
      }

      .summary-item {
        padding: 10px 10px;
      }

      .preview-title {
        font-size: 18px;
      }
    }

    /* Safe area for notched phones */
    @supports (padding: max(0px)) {
      .app, .app-shell {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
      }
    }

    /* Disable animations if user prefers reduced motion */
    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
      .screen {
        animation: none !important;
      }
    }

    /* Rack panel sub-classes */
    .rack-panel.dark {
      background: rgba(8,8,12,0.9);
    }

    .rack-panel.amber-border {
      border-color: rgba(245,166,35,0.15);
    }

    .rack-panel.cyan-border {
      border-color: rgba(0,212,255,0.15);
    }

    /* ═══ PAYMENT SCREEN — Generation Packs ═══ */
    .pack-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 16px 0;
    }

    .pack-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--graphite);
      border: 1px solid var(--graphite-border);
      border-radius: var(--panel-radius);
      padding: 14px 16px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .pack-card:hover {
      border-color: var(--amber);
      box-shadow: 0 0 12px var(--amber-glow);
      transform: translateY(-1px);
    }

    .pack-card:active {
      transform: scale(0.98);
    }

    .pack-card.selected {
      border-color: var(--amber);
      background: rgba(245, 166, 35, 0.08);
      box-shadow: 0 0 16px var(--amber-glow);
    }

    .pack-card-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .pack-card-amount {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-main);
    }

    .pack-card-price {
      font-size: 13px;
      color: var(--text-muted);
    }

    .pack-card-icon {
      font-size: 28px;
      opacity: 0.8;
    }

    .pack-card.selected .pack-card-icon {
      opacity: 1;
    }

    .payment-status-box {
      background: rgba(34, 197, 94, 0.08);
      border: 1px solid rgba(34, 197, 94, 0.2);
      border-radius: var(--panel-radius);
      padding: 14px 16px;
      margin: 12px 0;
      text-align: center;
      font-size: 13px;
      color: var(--success);
      display: none;
    }

    .payment-status-box.error {
      background: rgba(239, 68, 68, 0.08);
      border-color: rgba(239, 68, 68, 0.2);
      color: var(--error);
    }

    .payment-status-box.show {
      display: block;
    }

    .balance-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .balance-header .pack-icon {
      font-size: 24px;
    }

    .payment-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 20px 0 12px;
      color: var(--text-muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .payment-divider::before,
    .payment-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--graphite-border);
    }
    .payment-divider span {
      white-space: nowrap;
      opacity: 0.7;
    }

    .stars-grid {
      margin-top: 4px;
    }

    .star-card .stars-icon {
      font-size: 24px;
    }

    .star-card.selected {
      border-color: #0088cc;
      background: rgba(0, 136, 204, 0.08);
      box-shadow: 0 0 16px rgba(0, 136, 204, 0.3);
    }

    .star-card:hover {
      border-color: #0088cc !important;
      box-shadow: 0 0 12px rgba(0, 136, 204, 0.25) !important;
    }

    /* ═══ SHOP — Pack Cards (RUB-based) ═══ */
    .pack-card {
      transition: all 0.25s ease !important;
    }
    .pack-card:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    }
    .pack-card:active {
      transform: scale(0.97) !important;
    }
    .pack-card.selected {
      transform: translateY(-2px) !important;
      box-shadow: 0 0 24px rgba(245,166,35,0.25) !important;
      border-color: var(--amber) !important;
    }
    /* Специфичные цвета для selected каждого пакета */
    .pack-card[data-pack="pack_10"].selected {
      box-shadow: 0 0 24px rgba(102,126,234,0.3) !important;
      border-color: #667eea !important;
    }
    .pack-card[data-pack="pack_50"].selected {
      box-shadow: 0 0 24px rgba(245,166,35,0.35) !important;
      border-color: var(--amber) !important;
    }
    .pack-card[data-pack="pack_unlimited_month"].selected {
      box-shadow: 0 0 24px rgba(0,200,83,0.3) !important;
      border-color: var(--green) !important;
    }

    .btn-pay {
      background: linear-gradient(135deg, #f5a623, #e07d10);
      color: #0a0a10;
      border: none;
      padding: 14px 24px;
      border-radius: var(--btn-radius);
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      width: 100%;
      transition: all 0.2s ease;
      font-family: inherit;
      margin-top: 8px;
    }

    .btn-pay:hover {
      box-shadow: 0 0 24px var(--amber-glow);
      transform: translateY(-1px);
    }

    .btn-pay:active {
      transform: scale(0.97);
    }

    .btn-pay:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    /* =========================================================
       UI-STAGE 1: AI-STUDIO SYNTHESIS DESIGN TOKENS
       Photorealistic 3D controls for HitMaker V10
       ========================================================= */

    :root {
      /* Studio background */
      --hm-bg-studio-deep: #07080c;
      --hm-bg-studio-dark: #0b0f17;
      --hm-bg-console: #111722;
      --hm-bg-panel: rgba(12, 16, 24, 0.88);

      /* Physical materials */
      --hm-metal-dark: #171a20;
      --hm-metal-mid: #252a33;
      --hm-glass-soft: rgba(255, 255, 255, 0.055);
      --hm-glass-border: rgba(255, 255, 255, 0.12);

      /* Neon */
      --hm-neon-amber: #ffaa00;
      --hm-neon-amber-soft: rgba(255, 170, 0, 0.35);
      --hm-neon-blue: #29c7ff;
      --hm-neon-blue-soft: rgba(41, 199, 255, 0.28);
      --hm-neon-purple: #b36bff;
      --hm-neon-green: #3dff9a;
      --hm-neon-red: #ff4d5e;

      /* Text */
      --hm-text-main: #f4f4f6;
      --hm-text-soft: #b8beca;
      --hm-text-muted: #717989;

      /* Radius */
      --hm-radius-pad: 16px;
      --hm-radius-panel: 18px;
      --hm-radius-engine: 18px;

      /* Touch sizes */
      --hm-touch-min: 72px;
      --hm-touch-large: 88px;

      /* Shadows */
      --hm-shadow-pad-up:
        inset 0 2px 2px rgba(255, 255, 255, 0.06),
        inset 0 -3px 8px rgba(0, 0, 0, 0.55),
        0 8px 14px rgba(0, 0, 0, 0.42);

      --hm-shadow-pad-down:
        inset 0 6px 12px rgba(0, 0, 0, 0.78),
        inset 0 0 18px rgba(255, 170, 0, 0.10),
        0 0 18px rgba(255, 170, 0, 0.28);

      --hm-shadow-engine:
        inset 0 2px 5px rgba(255, 255, 255, 0.45),
        inset 0 -5px 8px rgba(0, 0, 0, 0.32),
        0 10px 0 #7a3f00,
        0 18px 28px rgba(255, 170, 0, 0.30);

      --hm-transition-fast: 0.12s ease-out;
      --hm-transition-normal: 0.2s ease;
    }

    .hm-studio-surface {
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 170, 0, 0.08) 0%, transparent 28%),
        radial-gradient(circle at 20% 20%, rgba(41, 199, 255, 0.08) 0%, transparent 32%),
        linear-gradient(180deg, var(--hm-bg-studio-dark), var(--hm-bg-studio-deep));
      color: var(--hm-text-main);
    }

    .hm-console-panel {
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.35)),
        var(--hm-bg-panel);
      border: 1px solid var(--hm-glass-border);
      border-radius: var(--hm-radius-panel);
      box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.08),
        0 16px 34px rgba(0, 0, 0, 0.45);
    }

    .hm-safe-bottom {
      padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }

    .hm-btn-3d-pad {
      min-height: var(--hm-touch-min);
      width: 100%;
      border-radius: var(--hm-radius-pad);
      border: 1px solid rgba(255, 255, 255, 0.12);
      background:
        linear-gradient(145deg, #222733 0%, #111620 100%);
      color: var(--hm-text-main);
      box-shadow: var(--hm-shadow-pad-up);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-align: center;
      font-size: 16px;
      font-weight: 800;
      line-height: 1.18;
      letter-spacing: 0.01em;
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition:
        transform var(--hm-transition-fast),
        box-shadow var(--hm-transition-fast),
        border-color var(--hm-transition-fast),
        color var(--hm-transition-fast),
        background var(--hm-transition-fast),
        opacity var(--hm-transition-fast);
      position: relative;
      overflow: hidden;
    }

    .hm-btn-3d-pad.active,
    .hm-btn-3d-pad.is-active {
      border-color: var(--hm-neon-amber);
      color: var(--hm-neon-amber);
      box-shadow:
        var(--hm-shadow-pad-up),
        0 0 22px var(--hm-neon-amber-soft);
    }

    .hm-btn-3d-pad:active,
    .hm-btn-3d-pad.is-pressed {
      transform: translateY(4px);
      box-shadow: var(--hm-shadow-pad-down);
    }

    .hm-btn-3d-pad.disabled,
    .hm-btn-3d-pad:disabled,
    .hm-btn-3d-pad.is-disabled {
      opacity: 0.48;
      pointer-events: none;
      filter: grayscale(1);
    }

    .hm-btn-3d-pad.loading,
    .hm-btn-3d-pad.is-loading {
      border-color: var(--hm-neon-blue);
      color: var(--hm-neon-blue);
    }

    .hm-btn-3d-pad.loading::after,
    .hm-btn-3d-pad.is-loading::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(41, 199, 255, 0.04) 35%,
        rgba(41, 199, 255, 0.32) 50%,
        rgba(41, 199, 255, 0.04) 65%,
        transparent 100%
      );
      transform: translateX(-120%);
      animation: hm-ai-scan 1.25s linear infinite;
    }

    .hm-btn-3d-pad.success,
    .hm-btn-3d-pad.is-success {
      border-color: var(--hm-neon-green);
      color: var(--hm-neon-green);
      box-shadow:
        var(--hm-shadow-pad-up),
        0 0 18px rgba(61, 255, 154, 0.24);
    }

    .hm-btn-3d-pad.error,
    .hm-btn-3d-pad.is-error {
      border-color: var(--hm-neon-red);
      color: var(--hm-neon-red);
      animation: hm-shake 0.24s ease-in-out;
    }

    /* ═══ CIS ENTER BUTTON — big, prominent ═══ */
    .btn-sng-enter {
      margin-top: 16px;
      width: 100%;
      min-height: 68px;
      font-size: 18px;
      font-weight: 800;
      border-radius: 18px;
      border-color: rgba(255, 255, 255, 0.18);
      background:
        linear-gradient(145deg, #2a2f3d 0%, #1a1f2e 100%);
    }
    .btn-sng-enter:active {
      transform: translateY(4px);
    }

    /* ═══ LANGUAGE BUTTON POLISH — Fixed grid & flag alignment ═══ */
    .lang-btn {
      height: 56px;
      min-height: 56px;
      border-radius: 18px;
      padding: 8px 14px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      font-size: clamp(12px, 3.6vw, 15px);
      font-weight: 700;
      letter-spacing: 0.01em;
      overflow: hidden;
    }
    .lang-btn .flag {
      font-size: 22px;
      line-height: 1;
      width: 28px;
      text-align: center;
      flex-shrink: 0;
      display: inline-block;
    }
    .lang-btn .label {
      display: inline-block;
      line-height: 1.2;
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .lang-btn.active,
    .lang-btn.is-active {
      border-color: rgba(255, 179, 33, 0.9) !important;
      box-shadow: 0 0 18px rgba(255, 179, 33, 0.25) !important;
    }

    .hm-btn-engine-master {
      min-height: var(--hm-touch-large);
      width: 100%;
      border: none;
      border-radius: var(--hm-radius-engine);
      background:
        linear-gradient(145deg, #ffbf35 0%, #ffaa00 45%, #c96e00 100%);
      color: #121212;
      font-size: 20px;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
      box-shadow: var(--hm-shadow-engine);
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition:
        transform var(--hm-transition-fast),
        box-shadow var(--hm-transition-fast),
        filter var(--hm-transition-fast);
      position: relative;
      overflow: hidden;
    }

    .hm-btn-engine-master:active,
    .hm-btn-engine-master.is-pressed {
      transform: translateY(10px);
      box-shadow:
        inset 0 5px 12px rgba(0, 0, 0, 0.50),
        0 0 0 #7a3f00,
        0 6px 18px rgba(255, 170, 0, 0.48);
    }

    .hm-btn-engine-master.loading,
    .hm-btn-engine-master.is-loading {
      filter: saturate(1.25);
    }

    .hm-btn-engine-master.loading::after,
    .hm-btn-engine-master.is-loading::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.35), transparent);
      transform: translateX(-120%);
      animation: hm-engine-sweep 1.1s linear infinite;
    }

    .hm-hit-ring {
      width: 112px;
      height: 112px;
      border-radius: 50%;
      border: 4px solid var(--hm-neon-amber);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--hm-neon-amber);
      font-size: 30px;
      font-weight: 950;
      text-shadow: 0 0 18px var(--hm-neon-amber);
      box-shadow:
        inset 0 0 22px rgba(255, 170, 0, 0.16),
        0 0 28px rgba(255, 170, 0, 0.28);
    }

    .hm-rpg-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 4px 8px;
      border-radius: 8px;
      border: 1px solid rgba(255, 170, 0, 0.45);
      background: rgba(255, 170, 0, 0.10);
      color: var(--hm-neon-amber);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0.02em;
    }

    .hm-rack-slot {
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-left: 3px solid var(--hm-neon-amber);
      background: rgba(0, 0, 0, 0.34);
      padding: 12px;
      color: var(--hm-text-soft);
      font-size: 13px;
      line-height: 1.35;
    }

    @keyframes hm-ai-scan {
      from { transform: translateX(-120%); }
      to { transform: translateX(120%); }
    }

    @keyframes hm-engine-sweep {
      from { transform: translateX(-120%); }
      to { transform: translateX(120%); }
    }

    @keyframes hm-shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-3px); }
      75% { transform: translateX(3px); }
    }

    @keyframes hm-soft-pulse {
      0%, 100% { opacity: 0.78; }
      50% { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hm-btn-3d-pad,
      .hm-btn-engine-master {
        transition: none !important;
      }

      .hm-btn-3d-pad.loading::after,
      .hm-btn-3d-pad.is-loading::after,
      .hm-btn-engine-master.loading::after,
      .hm-btn-engine-master.is-loading::after,
      .hm-btn-3d-pad.error,
      .hm-btn-3d-pad.is-error {
        animation: none !important;
      }
    }
    
    /* Micro-animation states */
    .hm-btn-3d-pad.is-loading {
      border-color: var(--hm-neon-blue);
      color: var(--hm-neon-blue);
    }
    
    .hm-btn-3d-pad.is-loading::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(41, 199, 255, 0.04) 35%,
        rgba(41, 199, 255, 0.32) 50%,
        rgba(41, 199, 255, 0.04) 65%,
        transparent 100%
      );
      transform: translateX(-120%);
      animation: hm-ai-scan 1.25s linear infinite;
    }
    
    .hm-btn-3d-pad.is-success {
      border-color: var(--hm-neon-green);
      color: var(--hm-neon-green);
      box-shadow:
        var(--hm-shadow-pad-up),
        0 0 18px rgba(61, 255, 154, 0.24);
    }
    
    .hm-btn-3d-pad.is-error {
      border-color: var(--hm-neon-red);
      color: var(--hm-neon-red);
      animation: hm-shake 0.24s ease-in-out;
    }

    .hm-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .hm-grid-1 {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .hm-touch-stack {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .hm-muted-caption {
      color: var(--hm-text-muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .hm-step-title {
      font-size: 20px;
      font-weight: 900;
      color: var(--hm-text-main);
      text-align: center;
      margin: 8px 0 18px;
    }

    .hm-step-subtitle {
      font-size: 14px;
      color: var(--hm-text-soft);
      text-align: center;
      margin: -10px 0 18px;
    }

    @media (max-width: 380px) {
      .hm-btn-3d-pad {
        min-height: 68px;
        font-size: 15px;
      }

      .hm-btn-engine-master {
        min-height: 82px;
        font-size: 18px;
      }

      .hm-grid-2 {
        gap: 10px;
      }
    }
   
    /* ═══ CREATION MODE FORK SCREEN — Quick vs Detailed ═══ */
    .creation-mode-container {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 16px 12px;
      flex: 1;
    }
    .creation-mode-card {
      background: var(--graphite);
      border: 1px solid var(--graphite-border);
      border-radius: var(--hm-radius-panel);
      padding: 24px 18px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
      min-height: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }
    .creation-mode-card:active {
      transform: scale(0.98);
    }
    .creation-mode-card .cm-icon {
      font-size: 42px;
      line-height: 1;
    }
    .creation-mode-card .cm-title {
      font-size: 18px;
      font-weight: 800;
      color: var(--text-main);
    }
    .creation-mode-card .cm-subtitle {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.4;
      max-width: 280px;
    }
    .creation-mode-card.cm-quick {
      border-color: rgba(0, 212, 255, 0.25);
    }
    .creation-mode-card.cm-quick:active {
      border-color: var(--cyan);
      box-shadow: 0 0 24px var(--cyan-glow);
    }
    .creation-mode-card.cm-quick .cm-title {
      color: var(--cyan);
    }
    .creation-mode-card.cm-detailed {
      border-color: rgba(245, 166, 35, 0.25);
    }
    .creation-mode-card.cm-detailed:active {
      border-color: var(--amber);
      box-shadow: 0 0 24px var(--amber-glow);
    }
    .creation-mode-card.cm-detailed .cm-title {
      color: var(--amber);
    }

    /* =========================================================
       V2 ROUTING: Fast Track Screen Styles
       ========================================================= */
    #screen-fast-track .hm-textarea {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--text-main);
      font-family: inherit;
      line-height: 1.5;
    }
    #screen-fast-track .hm-textarea:focus {
      border-color: var(--cyan);
      box-shadow: 0 0 16px rgba(0, 212, 255, 0.15);
      outline: none;
    }
    #screen-fast-track .hm-textarea::placeholder {
      color: var(--text-muted);
      opacity: 0.6;
    }
    #fast-track-submit:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      filter: grayscale(0.5);
    }
    #fast-track-submit:not(:disabled):active {
      transform: scale(0.97);
    }
    
      /* Sound effects are intentionally not enabled by default.
         Telegram Mini App should prefer HapticFeedback in later UI stages. */
    
    /* =========================================================
       PHASE 10D SAFE V2 — INPUT MODE INNER LAYOUT
       Scoped only to #screen-input-mode inner elements
       NEVER set display on #screen-input-mode itself
       ========================================================= */

    #screen-input-mode .input-mode-layout {
      min-height: calc(100svh - 48px);
      display: flex;
      flex-direction: column;
      padding: 22px 18px 24px;
      box-sizing: border-box;
    }

    #screen-input-mode .input-mode-header {
      text-align: center;
      padding-top: 16px;
    }

    #screen-input-mode .input-mode-title-main {
      font-size: clamp(26px, 7vw, 34px);
      line-height: 1.08;
      font-weight: 900;
      margin: 0 0 12px;
      color: #f7f7fb;
    }

    #screen-input-mode .input-mode-subtitle {
      font-size: clamp(16px, 4.4vw, 19px);
      line-height: 1.35;
      opacity: 0.9;
      max-width: 360px;
      margin: 0 auto;
      color: rgba(247, 247, 251, 0.9);
    }

    #screen-input-mode .input-mode-middle {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 20px 0;
    }

    #screen-input-mode .input-mode-middle p {
      font-size: clamp(15px, 4vw, 18px);
      line-height: 1.45;
      opacity: 0.75;
      max-width: 350px;
      margin: 0 auto;
      color: rgba(247,247,251,0.75);
    }

    #screen-input-mode .input-mode-actions {
      margin-top: auto;
      display: grid;
      gap: 12px;
      padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    #screen-input-mode .input-mode-option {
      width: 100%;
      min-height: 70px;
      border-radius: 20px;
      font-size: 18px;
      font-weight: 850;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    #screen-input-mode .input-mode-option:active {
      transform: scale(0.985);
    }

    #screen-input-mode .input-mode-option.active {
      border-color: rgba(243,178,60,0.68) !important;
      background:
        linear-gradient(180deg, rgba(243,178,60,0.14), rgba(243,178,60,0.045)) !important;
      box-shadow:
        0 0 0 1px rgba(243,178,60,0.12) inset,
        0 14px 34px rgba(0,0,0,0.30),
        0 0 24px rgba(243,178,60,0.10) !important;
    }

    #screen-input-mode .input-mode-icon {
      flex: 0 0 38px;
      width: 38px;
      height: 38px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(255,255,255,0.08);
      font-size: 20px;
      line-height: 1;
    }

    #screen-input-mode .input-mode-option.active .input-mode-icon {
      border-color: rgba(243,178,60,0.38);
      background: rgba(243,178,60,0.10);
    }

    #screen-input-mode .input-mode-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    #screen-input-mode .input-mode-title {
      color: #f7f7fb;
      font-size: 16px;
      line-height: 1.18;
      font-weight: 750;
    }

    #screen-input-mode .input-mode-desc {
      color: rgba(247,247,251,0.52);
      font-size: 13px;
      line-height: 1.35;
      font-weight: 500;
    }

    #screen-input-mode .input-mode-option.active .input-mode-title {
      color: #ffd37a;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       Phase 10G-A: Voice Input Screen
       Scoped only to #screen-voice-input inner elements
       NEVER set display on #screen-voice-input itself
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #screen-voice-input .voice-input-layout {
      min-height: calc(100svh - 48px);
      display: flex;
      flex-direction: column;
      padding: 22px 18px 24px;
      box-sizing: border-box;
    }

    #screen-voice-input .voice-input-header {
      text-align: center;
      padding-top: 16px;
    }

    #screen-voice-input .voice-input-title-main {
      font-size: clamp(26px, 7vw, 34px);
      line-height: 1.08;
      font-weight: 900;
      margin: 0 0 12px;
      color: #f7f7fb;
    }

    #screen-voice-input .voice-input-subtitle {
      font-size: clamp(16px, 4.4vw, 19px);
      line-height: 1.35;
      opacity: 0.9;
      max-width: 360px;
      margin: 0 auto;
      color: rgba(247, 247, 251, 0.9);
    }

    #screen-voice-input .voice-input-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 12px 0 8px;
      gap: 14px;
    }

    #screen-voice-input .voice-input-body p {
      font-size: clamp(15px, 4vw, 18px);
      line-height: 1.45;
      opacity: 0.75;
      max-width: 350px;
      margin: 0 auto;
      color: rgba(247,247,251,0.75);
    }

    #screen-voice-input .voice-record-btn {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      border: 3px solid rgba(255,255,255,0.2);
      background: linear-gradient(145deg, #2a303d 0%, #111620 55%, #080b10 100%);
      color: #f4f4f6;
      font-size: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.10),
        inset 0 -5px 10px rgba(0,0,0,0.62),
        0 8px 0 rgba(0,0,0,0.38),
        0 16px 24px rgba(0,0,0,0.42);
      position: relative;
      margin: 6px auto;
    }

    #screen-voice-input .voice-record-btn:active {
      transform: translateY(6px) scale(0.97);
      box-shadow:
        inset 0 7px 16px rgba(0,0,0,0.82),
        0 2px 0 rgba(0,0,0,0.60);
    }

    #screen-voice-input .voice-record-btn.recording {
      border-color: #ff3b30;
      background: linear-gradient(145deg, #3a1a18 0%, #2a0f0d 55%, #1a0806 100%);
      box-shadow:
        inset 0 2px 3px rgba(255,59,48,0.15),
        0 8px 0 rgba(180,40,30,0.5),
        0 0 30px rgba(255,59,48,0.3),
        0 16px 24px rgba(0,0,0,0.42);
      animation: voice-pulse 1s ease-in-out infinite;
    }

    @keyframes voice-pulse {
      0%, 100% { box-shadow: inset 0 2px 3px rgba(255,59,48,0.15), 0 8px 0 rgba(180,40,30,0.5), 0 0 20px rgba(255,59,48,0.2); }
      50% { box-shadow: inset 0 2px 3px rgba(255,59,48,0.25), 0 8px 0 rgba(180,40,30,0.5), 0 0 40px rgba(255,59,48,0.4); }
    }

    #screen-voice-input .voice-timer {
      font-size: clamp(36px, 10vw, 52px);
      font-weight: 900;
      font-variant-numeric: tabular-nums;
      color: #f7f7fb;
      letter-spacing: 2px;
      margin: 4px 0;
    }

    #screen-voice-input .voice-timer.recording {
      color: #ff3b30;
    }

    #screen-voice-input .voice-status-label {
      font-size: clamp(14px, 3.8vw, 16px);
      color: rgba(247,247,251,0.6);
      margin-bottom: 4px;
    }

    #screen-voice-input .voice-status-label.recording {
      color: #ff3b30;
      font-weight: 600;
    }

    #screen-voice-input .voice-controls {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    #screen-voice-input .voice-playback {
      width: 100%;
      max-width: 320px;
      margin: 8px auto;
    }

    #screen-voice-input .voice-playback audio {
      width: 100%;
      border-radius: 8px;
    }

    #screen-voice-input .voice-error {
      font-size: clamp(14px, 3.8vw, 16px);
      color: #ff3b30;
      background: rgba(255,59,48,0.08);
      border-radius: 12px;
      padding: 12px 16px;
      max-width: 320px;
      margin: 8px auto;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       Phase 10G-B Safe: Voice Notes UI
       Multiple recordings list, 2-col grid, mic indicator
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    #screen-voice-input .voice-notes-list {
      width: 100%;
      max-width: 380px;
      max-height: 180px;
      overflow-y: auto;
      margin: 4px auto;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    #screen-voice-input .voice-notes-list::-webkit-scrollbar {
      width: 4px;
    }
    #screen-voice-input .voice-notes-list::-webkit-scrollbar-track {
      background: transparent;
    }
    #screen-voice-input .voice-notes-list::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.15);
      border-radius: 2px;
    }

    #screen-voice-input .voice-note-card {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 14px 16px;
      min-height: 68px;
      transition: background 0.15s;
    }

    #screen-voice-input .voice-note-card:active {
      background: rgba(255,255,255,0.08);
    }

    #screen-voice-input .voice-note-card .note-index {
      font-size: 15px;
      font-weight: 700;
      color: rgba(247,247,251,0.4);
      min-width: 28px;
      text-align: center;
    }

    #screen-voice-input .voice-note-card .note-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      min-width: 0;
    }

    #screen-voice-input .voice-note-card .note-label {
      font-size: 15px;
      font-weight: 600;
      color: #f7f7fb;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 180px;
    }

    #screen-voice-input .voice-note-card .note-duration {
      font-size: 13px;
      color: rgba(247,247,251,0.45);
    }

    #screen-voice-input .voice-note-card .note-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    #screen-voice-input .voice-note-card .note-btn {
      min-width: 48px;
      min-height: 48px;
      border-radius: 50%;
      border: none;
      background: rgba(255,255,255,0.06);
      color: #f7f7fb;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.12s;
      padding: 0;
      line-height: 1;
    }

    #screen-voice-input .voice-note-card .note-btn:active {
      background: rgba(255,255,255,0.14);
      transform: scale(0.88);
    }

    #screen-voice-input .voice-note-card .note-btn.delete-btn {
      color: #ff3b30;
    }

    #screen-voice-input .voice-note-card .note-btn.delete-btn:active {
      background: rgba(255,59,48,0.15);
    }

    #screen-voice-input .voice-notes-empty {
      font-size: 15px;
      color: rgba(247,247,251,0.35);
      text-align: center;
      padding: 16px 0 8px;
    }

    #screen-voice-input .voice-action-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 400px;
      margin: 6px auto;
    }

    #screen-voice-input .voice-action-grid .btn-secondary.hm-btn-3d-pad,
    #screen-voice-input .voice-action-grid .btn-3d {
      min-height: 64px;
      font-size: clamp(15px, 4vw, 18px);
      padding: 12px 10px;
      width: 100%;
      margin: 0;
      border-radius: 18px;
    }

    #screen-voice-input .voice-action-grid .voice-action-full {
      grid-column: 1 / -1;
    }

    #screen-voice-input .voice-recognize-btn {
      background: linear-gradient(145deg, #1e3328 0%, #122218 55%, #0a140e 100%) !important;
      border-color: rgba(52, 199, 89, 0.25) !important;
      color: #34c759 !important;
    }

    #screen-voice-input .voice-recognize-btn:active {
      transform: translateY(6px) !important;
    }

    #screen-voice-input .voice-test-mode-hint {
      font-size: clamp(12px, 3.2vw, 14px);
      color: rgba(255, 170, 0, 0.6);
      text-align: center;
      padding: 6px 0 0;
      line-height: 1.4;
    }

    #screen-voice-input .voice-mic-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: clamp(14px, 3.8vw, 16px);
      color: rgba(247,247,251,0.5);
      padding: 4px 0 8px;
    }

    #screen-voice-input .voice-mic-indicator .mic-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      flex-shrink: 0;
    }

    #screen-voice-input .voice-mic-indicator .mic-dot.active {
      background: #34c759;
      animation: mic-blink 1.5s ease-in-out infinite;
    }

    #screen-voice-input .voice-hint {
      font-size: clamp(13px, 3.5vw, 15px);
      opacity: 0.55;
      max-width: 340px;
      margin: 6px auto 0;
      color: rgba(247,247,251,0.55);
      line-height: 1.4;
    }

    @keyframes mic-blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       Phase 10G-C: Voice Text Review Screen
       Results of speech-to-text transcription
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    #screen-voice-text-review .voice-text-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 8px 0 12px;
      overflow-y: auto;
    }

    #screen-voice-text-review .vt-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      padding: 14px;
    }

    #screen-voice-text-review .vt-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    #screen-voice-text-review .vt-card-label {
      font-size: 13px;
      font-weight: 700;
      color: rgba(247,247,251,0.55);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    #screen-voice-text-review .vt-card-actions {
      display: flex;
      gap: 6px;
    }

    #screen-voice-text-review .vt-card-actions button {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: none;
      background: rgba(255,255,255,0.06);
      color: #f7f7fb;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.12s;
      padding: 0;
      line-height: 1;
    }

    #screen-voice-text-review .vt-card-actions button:active {
      background: rgba(255,255,255,0.14);
      transform: scale(0.92);
    }

    #screen-voice-text-review .vt-card-actions .vt-delete-btn {
      color: #ff3b30;
    }

    #screen-voice-text-review .vt-card-edit-actions {
      display: flex;
      gap: 10px;
      padding: 10px 0;
      align-items: center;
      flex-wrap: wrap;
    }
    #screen-voice-text-review .vt-card-edit-actions .btn-secondary.small {
      padding: 10px 18px;
      font-size: 15px;
      min-height: 44px;
      min-width: 100px;
      border-radius: 12px;
    }

    /* ━━━━━ Phase 10G-D0: Баннер тестового режима ━━━━━ */
    #screen-voice-text-review .vt-test-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 170, 0, 0.08);
      border: 1px solid rgba(255, 170, 0, 0.2);
      border-radius: 12px;
      padding: 10px 14px;
      margin-bottom: 10px;
      font-size: clamp(13px, 3.5vw, 15px);
      color: #ffd37a;
      line-height: 1.4;
    }
    #screen-voice-text-review .vt-test-banner .vt-test-icon {
      font-size: clamp(20px, 5vw, 26px);
      flex-shrink: 0;
    }
    #screen-voice-text-review .vt-test-banner .vt-test-close {
      margin-left: auto;
      background: none;
      border: none;
      color: rgba(255, 170, 0, 0.5);
      font-size: 18px;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 8px;
      flex-shrink: 0;
      line-height: 1;
    }
    #screen-voice-text-review .vt-test-banner .vt-test-close:active {
      background: rgba(255, 170, 0, 0.1);
    }

    #screen-voice-text-review .vt-card-text {
      font-size: clamp(14px, 3.8vw, 16px);
      line-height: 1.5;
      color: #f7f7fb;
      white-space: pre-wrap;
      word-break: break-word;
    }

    #screen-voice-text-review .vt-card-textarea {
      width: 100%;
      min-height: 60px;
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      color: #f7f7fb;
      font-size: clamp(14px, 3.8vw, 16px);
      line-height: 1.5;
      padding: 10px;
      resize: vertical;
      font-family: inherit;
      outline: none;
      box-sizing: border-box;
    }

    #screen-voice-text-review .vt-card-textarea:focus {
      border-color: rgba(255,170,0,0.5);
    }

    #screen-voice-text-review .vt-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      margin-top: 4px;
    }

    #screen-voice-text-review .vt-actions .btn-secondary.hm-btn-3d-pad,
    #screen-voice-text-review .vt-actions .btn-3d {
      min-height: 62px;
      font-size: clamp(16px, 4.4vw, 18px);
      font-weight: 700;
      padding: 12px 16px;
      width: 100%;
      margin: 0;
    }

    #screen-voice-text-review .vt-actions .vt-action-full {
      grid-column: 1 / -1;
    }

    #screen-voice-text-review .vt-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      padding: 40px 0;
    }

    #screen-voice-text-review .vt-spinner {
      width: 44px;
      height: 44px;
      border: 4px solid rgba(255,255,255,0.1);
      border-top-color: #ffaa00;
      border-radius: 50%;
      animation: vt-spin 0.8s linear infinite;
    }

    @keyframes vt-spin {
      to { transform: rotate(360deg); }
    }

    #screen-voice-text-review .vt-error {
      text-align: center;
      padding: 28px 0;
    }

    #screen-voice-text-review .vt-error-text {
      font-size: clamp(14px, 3.8vw, 16px);
      color: #ff3b30;
      margin-bottom: 16px;
      line-height: 1.5;
    }

      body.hm-studio-surface {
        background:
          radial-gradient(circle at 50% -10%, rgba(255, 170, 0, 0.16) 0%, transparent 28%),
          radial-gradient(circle at 15% 20%, rgba(41, 199, 255, 0.12) 0%, transparent 30%),
          radial-gradient(circle at 90% 80%, rgba(179, 107, 255, 0.08) 0%, transparent 32%),
          linear-gradient(180deg, #07080c 0%, #0b0f17 45%, #050608 100%) !important;
      }
   
      .screen .hm-console-panel,
      .glass-panel.hm-console-panel,
      .rack-panel.hm-console-panel,
      .card.hm-console-panel {
        background:
          linear-gradient(145deg, rgba(255,255,255,0.075), rgba(0,0,0,0.42)),
          radial-gradient(circle at 50% 0%, rgba(255,170,0,0.08), transparent 45%),
          rgba(10, 14, 22, 0.94) !important;
        border: 1px solid rgba(255, 170, 0, 0.20) !important;
        box-shadow:
          inset 0 1px 1px rgba(255,255,255,0.10),
          inset 0 -10px 24px rgba(0,0,0,0.40),
          0 18px 38px rgba(0,0,0,0.55) !important;
        backdrop-filter: blur(8px) !important;
      }
   
      .screen .hm-btn-3d-pad,
      button.hm-btn-3d-pad,
      .option-btn.hm-btn-3d-pad,
      .btn-secondary.hm-btn-3d-pad,
      .voice-mode-card.hm-btn-3d-pad,
      .reference-card.hm-btn-3d-pad {
        min-height: 76px !important;
        padding: 18px 14px !important;
        margin: 0 !important;
        border-radius: 18px !important;
        border: 1px solid rgba(255,255,255,0.16) !important;
        background:
          linear-gradient(145deg, #2a303d 0%, #111620 55%, #080b10 100%) !important;
        color: #f4f4f6 !important;
        box-shadow:
          inset 0 2px 3px rgba(255,255,255,0.10),
          inset 0 -5px 10px rgba(0,0,0,0.62),
          0 8px 0 rgba(0,0,0,0.38),
          0 16px 24px rgba(0,0,0,0.42) !important;
        text-shadow: 0 1px 0 rgba(0,0,0,0.45);
      }
   
      .screen .hm-btn-3d-pad.active,
      .screen .hm-btn-3d-pad.is-active,
      button.hm-btn-3d-pad.active,
      .btn-secondary.hm-btn-3d-pad.active,
      .option-btn.hm-btn-3d-pad.active,
      .voice-mode-card.hm-btn-3d-pad.active,
      .reference-card.hm-btn-3d-pad.active {
        background:
          linear-gradient(145deg, #3a2605 0%, #18110a 52%, #0d0b08 100%) !important;
        border-color: #ffaa00 !important;
        color: #ffd37a !important;
        box-shadow:
          inset 0 2px 3px rgba(255,255,255,0.14),
          inset 0 0 22px rgba(255,170,0,0.18),
          0 8px 0 rgba(110,60,0,0.72),
          0 0 28px rgba(255,170,0,0.42) !important;
        text-shadow: 0 0 12px rgba(255,170,0,0.50);
      }
   
      .screen .hm-btn-3d-pad:active,
      button.hm-btn-3d-pad:active,
      .option-btn.hm-btn-3d-pad:active,
      .btn-secondary.hm-btn-3d-pad:active {
        transform: translateY(6px) !important;
        box-shadow:
          inset 0 7px 16px rgba(0,0,0,0.82),
          inset 0 0 20px rgba(255,170,0,0.12),
          0 2px 0 rgba(0,0,0,0.60),
          0 0 18px rgba(255,170,0,0.28) !important;
      }
   
      .btn-3d.hm-btn-3d-pad,
      button.btn-3d.hm-btn-3d-pad {
        min-height: 84px !important;
        background:
          linear-gradient(145deg, #ffca4a 0%, #ffaa00 45%, #c96f00 100%) !important;
        color: #111 !important;
        border: 1px solid rgba(255,220,120,0.70) !important;
        box-shadow:
          inset 0 2px 5px rgba(255,255,255,0.48),
          inset 0 -5px 8px rgba(0,0,0,0.28),
          0 10px 0 #7a3f00,
          0 18px 28px rgba(255,170,0,0.34) !important;
        text-shadow: 0 1px 0 rgba(255,255,255,0.35) !important;
      }
   
      #screen-welcome .logo,
      #screen-welcome .app-logo,
      #screen-welcome .hero-logo {
        filter: drop-shadow(0 0 22px rgba(255,170,0,0.45));
      }
   
      #screen-welcome .glass-panel,
      #screen-welcome .rack-panel,
      #screen-welcome .card {
        position: relative;
        overflow: hidden;
      }
   
      #screen-welcome .glass-panel::after,
      #screen-welcome .rack-panel::after,
      #screen-welcome .card::after {
        content: "";
        display: block;
        height: 22px;
        margin-top: 14px;
        border-radius: 999px;
        background:
          linear-gradient(90deg,
            rgba(255,170,0,0.18) 0 8%,
            transparent 8% 14%,
            rgba(41,199,255,0.18) 14% 24%,
            transparent 24% 32%,
            rgba(255,170,0,0.26) 32% 54%,
            transparent 54% 62%,
            rgba(61,255,154,0.16) 62% 72%,
            transparent 72% 100%);
        box-shadow: inset 0 0 14px rgba(0,0,0,0.55);
      }
   
      #screen-reference .hm-btn-3d-pad,
      #screen-title-cover .hm-btn-3d-pad,
      #screen-vocal .hm-btn-3d-pad {
        justify-content: center !important;
        min-height: 82px !important;
      }
   
      #screen-reference .reference-category,
      #screen-reference .preset-card,
      #screen-title-cover .voice-mode-card {
        border-left: 3px solid rgba(255,170,0,0.55) !important;
      }
   
      textarea,
      input[type="text"],
      input[type="search"] {
        background:
          linear-gradient(180deg, rgba(0,0,0,0.48), rgba(255,255,255,0.035)) !important;
        border: 1px solid rgba(255,170,0,0.20) !important;
        color: #f4f4f6 !important;
        box-shadow:
          inset 0 3px 12px rgba(0,0,0,0.50),
          0 0 0 rgba(255,170,0,0) !important;
      }
   
      textarea:focus,
      input[type="text"]:focus,
      input[type="search"]:focus {
        border-color: rgba(255,170,0,0.62) !important;
        box-shadow:
          inset 0 3px 12px rgba(0,0,0,0.50),
          0 0 18px rgba(255,170,0,0.20) !important;
      }
   
      .btn-pay {
        box-shadow:
          inset 0 2px 4px rgba(255,255,255,0.35),
          inset 0 -4px 7px rgba(0,0,0,0.24),
          0 8px 0 #7a3f00,
          0 14px 24px rgba(255,170,0,0.24) !important;
      }
   
      @media (prefers-reduced-motion: reduce) {
        #screen-welcome .glass-panel::after,
        #screen-welcome .rack-panel::after,
        #screen-welcome .card::after {
          animation: none !important;
        }
      }

    /* --- Main Menu Big Buttons (welcome screen) --- */
    #screen-welcome .btn-3d.btn-ai,
    #screen-welcome .btn-secondary {
      min-height: 64px;
      border-radius: 18px;
      font-size: 17px;
      font-weight: 800;
      padding: 16px 20px;
    }

    #screen-welcome .btn-3d.btn-ai {
      min-height: 68px;
      font-size: 18px;
      border-radius: 20px;
    }

    #screen-welcome .hm-grid-2 {
      gap: 10px !important;
    }
    /* ════════════════════════════════════════════════════════════════
       PHASE 10E — MOBILE UI CLEANUP SYSTEM
       Единый мобильный стиль для ключевых экранов создания песни.
       Используется ВНУТРИ .screen, никогда вместо .screen.
       ════════════════════════════════════════════════════════════════ */

    .hm-mobile-screen {
      min-height: calc(100svh - 0px);
      box-sizing: border-box;
      padding: 8px 12px max(8px, env(safe-area-inset-bottom, 8px));
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .hm-mobile-header {
      text-align: center;
      padding-top: 0px;
      padding-bottom: 2px;
    }

    .hm-mobile-title {
      font-size: clamp(24px, 6.8vw, 34px);
      line-height: 1.08;
      font-weight: 900;
      margin: 0;
      color: #f7f7fb;
      letter-spacing: -0.3px;
    }

    .hm-mobile-subtitle {
      font-size: clamp(15px, 4vw, 18px);
      line-height: 1.3;
      opacity: 0.85;
      max-width: 380px;
      margin: 4px auto 0;
      color: rgba(247, 247, 251, 0.85);
      font-weight: 600;
    }

    .hm-mobile-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .hm-mobile-actions {
      margin-top: auto;
      display: grid;
      gap: 10px;
      padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
    }

    .hm-mobile-nav {
      display: grid;
      grid-template-columns: 0.9fr 1.4fr;
      gap: 10px;
    }

    .hm-mobile-btn {
      min-height: 72px;
      border-radius: 22px;
      font-size: clamp(18px, 4.8vw, 21px);
      font-weight: 850;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .hm-mobile-primary {
      min-height: 74px;
    }

    .hm-mobile-textarea {
      width: 100%;
      min-height: 220px;
      resize: vertical;
      border-radius: 22px;
      padding: 20px;
      font-size: clamp(18px, 4.8vw, 21px);
      line-height: 1.5;
      box-sizing: border-box;
      font-weight: 600;
    }

    /* Phase 10G-N: Mobile full-screen helper — maximize vertical space */
    .hm-full-screen {
      min-height: calc(100svh - 0px);
      padding-top: 4px;
      padding-bottom: 4px;
    }

    /* Phase 10G-N: Loading overlay to prevent blank screen */
    .hm-loading-overlay {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      gap: 16px;
      padding: 40px 20px;
      text-align: center;
    }

    .hm-loading-overlay .hm-loading-text {
      color: rgba(247,247,251,0.7);
      font-size: clamp(16px, 4.4vw, 19px);
      font-weight: 700;
    }

    .hm-loading-overlay .hm-loading-spinner {
      width: 48px;
      height: 48px;
      border: 4px solid rgba(245,166,35,0.2);
      border-top-color: var(--amber, #f5a623);
      border-radius: 50%;
      animation: hm-loading-spin 0.8s linear infinite;
    }

    @keyframes hm-loading-spin {
      to { transform: rotate(360deg); }
    }

    /* ═══ PHASE 10G-O: COMPACT ACTION BUTTON SYSTEM ═══ */
    /* Компактные кнопки — 2 колонки, не простыни */
    .hm-action-grid {
      display: grid;
      gap: 10px;
    }
    .hm-action-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .hm-action-grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }
    .hm-action-row {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .hm-action-row .hm-action-cell {
      flex: 1;
    }

    /* Основное действие — широкая кнопка на всю ширину */
    .hm-action-primary {
      width: 100%;
      min-height: 60px;
      border-radius: 16px;
      font-size: clamp(16px, 4.4vw, 19px);
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .hm-action-primary .btn-3d {
      width: 100%;
      margin: 0;
    }

    /* Мини-действие (карандаш редактирования) */
    .hm-mini-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      min-height: 44px;
      border-radius: 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(60,60,80,0.2);
      color: var(--text-muted);
      font-size: 18px;
      cursor: pointer;
      transition: all 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .hm-mini-action:active {
      background: rgba(245,166,35,0.1);
      border-color: var(--amber);
      transform: scale(0.92);
    }

    /* Иконка-действие (только иконка) */
    .hm-icon-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-size: 18px;
      cursor: pointer;
      transition: all 0.12s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .hm-icon-action:active {
      background: rgba(245,166,35,0.08);
      color: var(--amber);
      transform: scale(0.88);
    }

    /* Sticky-блок действий внизу с safe-area */
    .hm-sticky-actions {
      position: sticky;
      bottom: 0;
      background: linear-gradient(transparent, #0a0a10 20%);
      padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 12px));
      z-index: 20;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* ═══ PHASE 10G-O: BOTTOM-SHEET ═══ */
    .hm-bottom-sheet-overlay {
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: rgba(0,0,0,0.5);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: none;
      align-items: flex-end;
      justify-content: center;
      animation: hm-bs-fadein 0.2s ease;
    }
    .hm-bottom-sheet-overlay.open {
      display: flex;
    }

    .hm-bottom-sheet {
      width: 100%;
      max-width: 520px;
      max-height: 85vh;
      background: linear-gradient(180deg, #1a1a2e 0%, #0a0a10 100%);
      border-radius: 24px 24px 0 0;
      border: 1px solid rgba(60,60,80,0.3);
      border-bottom: none;
      box-shadow: 0 -8px 40px rgba(0,0,0,0.6);
      padding: 0;
      display: flex;
      flex-direction: column;
      animation: hm-bs-slideup 0.25s ease-out;
      transform-origin: bottom;
    }

    .hm-bottom-sheet-handle {
      width: 48px;
      height: 5px;
      border-radius: 3px;
      background: rgba(255,255,255,0.15);
      margin: 10px auto 6px;
      flex-shrink: 0;
    }

    .hm-bottom-sheet-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 18px 4px;
      flex-shrink: 0;
    }
    .hm-bottom-sheet-title {
      font-size: clamp(17px, 4.6vw, 20px);
      font-weight: 800;
      color: var(--text-main);
    }
    .hm-bottom-sheet-close {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 24px;
      cursor: pointer;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      -webkit-tap-highlight-color: transparent;
    }
    .hm-bottom-sheet-close:active {
      background: rgba(255,255,255,0.05);
    }

    .hm-bottom-sheet-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 12px 18px;
    }

    .hm-bottom-sheet-actions {
      flex-shrink: 0;
      padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 12px));
      display: flex;
      gap: 10px;
    }
    .hm-bottom-sheet-actions .btn-3d {
      margin: 0;
      flex: 1;
    }
    .hm-bottom-sheet-actions .btn-secondary {
      margin: 0;
      flex: 1;
    }

    /* Loading внутри bottom-sheet */
    .hm-bottom-sheet-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 40px 20px;
      text-align: center;
      min-height: 160px;
    }
    .hm-bottom-sheet-loading .bs-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid rgba(245,166,35,0.2);
      border-top-color: var(--amber);
      border-radius: 50%;
      animation: hm-loading-spin 0.8s linear infinite;
    }
    .hm-bottom-sheet-loading .bs-loading-text {
      color: rgba(247,247,251,0.7);
      font-size: clamp(15px, 4vw, 17px);
      font-weight: 700;
    }

    @keyframes hm-bs-fadein {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes hm-bs-slideup {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }

    /* ═══════════════════════════════════════════════════════════
       PHASE 10G-G — VOICE PLAN SCREEN (UI POLISH)
       ═══════════════════════════════════════════════════════════ */
    #screen-voice-plan .vp-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 120px;
      gap: 8px;
    }

    #screen-voice-plan .vp-error {
      text-align: center;
      padding: 20px;
    }

    #screen-voice-plan .vp-error-text {
      color: rgba(239, 68, 68, 0.75);
      font-size: clamp(14px, 3.8vw, 17px);
      line-height: 1.45;
      max-width: 320px;
      margin: 0 auto;
    }

    /* Cards container — scrollable, compact gap */
    #screen-voice-plan .vp-cards {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 2px 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* Card — одинаковая тень, одинаковые отступы */
    #screen-voice-plan .vp-card {
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 12px;
      padding: 10px 12px;
      transition: border-color 0.2s, background 0.15s;
    }

    #screen-voice-plan .vp-card:focus-within {
      border-color: rgba(255,170,0,0.40);
    }

    /* Secondary cards — slightly more muted */
    #screen-voice-plan .vp-card-secondary {
      background: rgba(255,255,255,0.02);
      border-color: rgba(255,255,255,0.06);
      padding: 8px 12px;
    }

    #screen-voice-plan .vp-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 4px;
    }

    #screen-voice-plan .vp-card-label {
      font-size: clamp(11px, 3vw, 13px);
      font-weight: 700;
      color: rgba(247,247,251,0.75);
      letter-spacing: -0.15px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    #screen-voice-plan .vp-card-icon {
      font-size: 14px;
      line-height: 1;
    }

    #screen-voice-plan .vp-card-value {
      font-size: clamp(15px, 4vw, 17px);
      font-weight: 700;
      line-height: 1.45;
      color: #f7f7fb;
      white-space: pre-wrap;
      word-break: break-word;
    }

    /* Edit mode — крупная textarea с нормальными отступами */
    #screen-voice-plan .vp-card-textarea {
      width: 100%;
      min-height: 180px;
      resize: vertical;
      border-radius: 14px;
      padding: 18px;
      font-size: clamp(17px, 4.6vw, 19px);
      font-weight: 600;
      line-height: 1.55;
      background: rgba(0,0,0,0.45);
      border: 1.5px solid rgba(255,170,0,0.3);
      color: #f7f7fb;
      box-sizing: border-box;
      font-family: inherit;
      margin-top: 6px;
    }

    #screen-voice-plan .vp-card-textarea:focus {
      border-color: rgba(255,170,0,0.55);
      outline: none;
      box-shadow: 0 0 0 2px rgba(255,170,0,0.10);
    }

    /* Edit button — карандаш */
    #screen-voice-plan .vp-card-edit-btn {
      background: none;
      border: none;
      font-size: 18px;
      cursor: pointer;
      opacity: 0.65;
      padding: 6px;
      transition: opacity 0.15s, transform 0.1s;
      min-width: 34px;
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
    }

    #screen-voice-plan .vp-card-edit-btn:hover,
    #screen-voice-plan .vp-card-edit-btn:focus {
      opacity: 1;
      background: rgba(255,255,255,0.06);
    }

    #screen-voice-plan .vp-card-edit-btn:active {
      transform: scale(0.92);
    }

    /* Save/Cancel — крупные кнопки в edit mode */
    #screen-voice-plan .vp-card-save-btn,
    #screen-voice-plan .vp-card-cancel-btn {
      border-radius: 14px;
      color: #f7f7fb;
      padding: 16px 32px;
      font-size: clamp(17px, 4.6vw, 19px);
      font-weight: 800;
      cursor: pointer;
      transition: background 0.15s, transform 0.1s;
      border: none;
      flex: 1;
      min-height: 60px;
    }

    #screen-voice-plan .vp-card-save-btn {
      background: rgba(255,170,0,0.2);
      border: 1px solid rgba(255,170,0,0.35);
      color: #ffd37a;
    }

    #screen-voice-plan .vp-card-save-btn:hover {
      background: rgba(255,170,0,0.32);
    }

    #screen-voice-plan .vp-card-save-btn:active {
      transform: scale(0.97);
    }

    #screen-voice-plan .vp-card-cancel-btn {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
    }

    #screen-voice-plan .vp-card-cancel-btn:hover {
      background: rgba(255,255,255,0.14);
    }

    #screen-voice-plan .vp-card-cancel-btn:active {
      transform: scale(0.97);
    }

    /* Edit actions flex row */
    #screen-voice-plan .vp-card-edit-actions {
      display: none;
      gap: 10px;
      margin-top: 10px;
    }

    /* Safe area padding для нижних кнопок */
    #screen-voice-plan .hm-mobile-actions {
      padding-bottom: calc(20px + env(safe-area-inset-bottom));
      gap: 14px;
    }

    /* ===== PHASE 10G-H-B: Mock Generation Progress & Result ===== */

    /* Progress steps */
    .gen-progress-container {
      padding: 16px 4px;
    }

    .gen-progress-step {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      margin-bottom: 8px;
      border-radius: 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      transition: all 0.4s ease;
      opacity: 0.3;
      transform: translateX(-8px);
    }

    .gen-progress-step.active {
      opacity: 1;
      transform: translateX(0);
      background: rgba(99,102,241,0.08);
      border-color: rgba(99,102,241,0.2);
    }

    .gen-progress-step.done {
      opacity: 0.8;
      transform: translateX(0);
      background: rgba(34,197,94,0.06);
      border-color: rgba(34,197,94,0.15);
    }

    .gen-progress-step.error {
      opacity: 1;
      transform: translateX(0);
      background: rgba(239,68,68,0.08);
      border-color: rgba(239,68,68,0.25);
      animation: gen-step-error-shake 0.5s ease;
    }

    .gen-step-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      transition: all 0.4s ease;
    }

    .gen-progress-step.active .gen-step-icon {
      background: rgba(99,102,241,0.2);
      border-color: #6366f1;
      box-shadow: 0 0 12px rgba(99,102,241,0.3);
    }

    .gen-progress-step.done .gen-step-icon {
      background: rgba(34,197,94,0.2);
      border-color: #22c55e;
    }

    .gen-progress-step.error .gen-step-icon {
      background: rgba(239,68,68,0.2);
      border-color: #ef4444;
      box-shadow: 0 0 12px rgba(239,68,68,0.3);
    }

    .gen-step-label {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-muted);
      transition: color 0.4s ease;
    }

    .gen-progress-step.active .gen-step-label {
      color: #e2e8f0;
    }

    .gen-progress-step.done .gen-step-label {
      color: rgba(247,247,251,0.7);
    }

    .gen-progress-step.error .gen-step-label {
      color: #fca5a5;
    }

    /* Shake animation for error step */
    @keyframes gen-step-error-shake {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-6px); }
      40% { transform: translateX(6px); }
      60% { transform: translateX(-4px); }
      80% { transform: translateX(4px); }
    }

    /* Spinner animation for active step */
    @keyframes gen-step-spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .gen-progress-step.active .gen-step-icon.loading::after {
      content: '';
      position: absolute;
      width: 28px;
      height: 28px;
      border: 2px solid transparent;
      border-top-color: #6366f1;
      border-radius: 50%;
      animation: gen-step-spin 0.8s linear infinite;
    }

    .gen-progress-step.active .gen-step-icon {
      position: relative;
    }

    /* Mock audio block */
    .mock-audio-block {
      background: rgba(255,255,255,0.03);
      border: 1px dashed rgba(255,255,255,0.12);
      border-radius: 14px;
      padding: 20px 16px;
      text-align: center;
      margin-bottom: 16px;
    }

    .mock-audio-block .mock-icon {
      font-size: 40px;
      margin-bottom: 8px;
      display: block;
    }

    .mock-audio-block .mock-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-muted);
    }

    .mock-audio-block .mock-sub {
      font-size: 12px;
      color: rgba(247,247,251,0.35);
      margin-top: 4px;
    }

    .mock-audio-wave {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 40px;
      margin: 12px 0 4px;
    }

    .mock-audio-wave .bar {
      width: 4px;
      border-radius: 2px;
      background: linear-gradient(180deg, rgba(99,102,241,0.5), rgba(99,102,241,0.15));
      animation: mock-wave 1.2s ease-in-out infinite;
    }

    .mock-audio-wave .bar:nth-child(1) { height: 16px; animation-delay: 0s; }
    .mock-audio-wave .bar:nth-child(2) { height: 28px; animation-delay: 0.1s; }
    .mock-audio-wave .bar:nth-child(3) { height: 36px; animation-delay: 0.2s; }
    .mock-audio-wave .bar:nth-child(4) { height: 24px; animation-delay: 0.3s; }
    .mock-audio-wave .bar:nth-child(5) { height: 32px; animation-delay: 0.4s; }
    .mock-audio-wave .bar:nth-child(6) { height: 20px; animation-delay: 0.5s; }
    .mock-audio-wave .bar:nth-child(7) { height: 38px; animation-delay: 0.6s; }
    .mock-audio-wave .bar:nth-child(8) { height: 26px; animation-delay: 0.7s; }
    .mock-audio-wave .bar:nth-child(9) { height: 30px; animation-delay: 0.8s; }
    .mock-audio-wave .bar:nth-child(10) { height: 18px; animation-delay: 0.9s; }

    @keyframes mock-wave {
      0%, 100% { transform: scaleY(1); }
      50% { transform: scaleY(0.5); }
    }

    /* Result cards grid */
    .gen-result-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 16px;
    }

    .gen-result-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      padding: 10px 12px;
      text-align: center;
    }

    .gen-result-card .rc-icon {
      font-size: 20px;
      display: block;
      margin-bottom: 4px;
    }

    .gen-result-card .rc-label {
      font-size: 10px;
      color: rgba(247,247,251,0.35);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .gen-result-card .rc-value {
      font-size: 13px;
      font-weight: 600;
      color: #e2e8f0;
      word-break: break-word;
    }

    .gen-result-card.full {
      grid-column: 1 / -1;
    }

    /* Safe area padding for action buttons */
    #screen-generation-progress .hm-mobile-actions,
    #screen-generation-result .hm-mobile-actions {
      padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    /* ═══════════════════════════════════════════════════════════════
       V11-RESCUE-3B: Button Color System — CSS Variables
       ═══════════════════════════════════════════════════════════════ */
    :root {
      /* Primary (blue-violet gradient) */
      --btn-primary: #8B5CF6;
      --btn-primary-gradient: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
      --btn-primary-glow: rgba(139, 92, 246, 0.35);

      /* AI action (purple/magenta) */
      --btn-ai: #c084fc;
      --btn-ai-gradient: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
      --btn-ai-glow: rgba(168, 85, 247, 0.3);

      /* Secondary (graphite/grey-blue) */
      --btn-secondary: rgba(255, 255, 255, 0.06);
      --btn-secondary-hover: rgba(255, 255, 255, 0.12);
      --btn-secondary-border: rgba(255, 255, 255, 0.14);

      /* Confirm/success (green) */
      --btn-success: #22c55e;
      --btn-success-gradient: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      --btn-success-glow: rgba(34, 197, 94, 0.3);

      /* Danger/cancel (red) */
      --btn-danger: #ef4444;
      --btn-danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      --btn-danger-glow: rgba(239, 68, 68, 0.3);

      /* Disabled */
      --btn-disabled: rgba(255, 255, 255, 0.04);
      --btn-disabled-text: rgba(255, 255, 255, 0.25);

      /* Shared */
      --btn-text-light: #ffffff;
      --btn-border: rgba(255, 255, 255, 0.12);
      --btn-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
      --btn-min-height: 54px;
      --btn-radius-lg: 14px;
    }

    /* V11-RESCUE-3B: Brighter button overrides */
    .btn-primary,
    .btn-primary.hm-btn-3d-pad {
      background: var(--btn-primary-gradient) !important;
      color: var(--btn-text-light) !important;
      border: none !important;
      min-height: var(--btn-min-height) !important;
      border-radius: var(--btn-radius-lg) !important;
      box-shadow: 0 4px 20px var(--btn-primary-glow) !important;
    }
    .btn-primary:active,
    .btn-primary.hm-btn-3d-pad:active {
      transform: translateY(2px) !important;
      box-shadow: 0 2px 10px var(--btn-primary-glow) !important;
    }

    .btn-ai,
    .btn-ai.hm-btn-3d-pad {
      background: var(--btn-ai-gradient) !important;
      color: var(--btn-text-light) !important;
      border: none !important;
      min-height: var(--btn-min-height) !important;
      border-radius: var(--btn-radius-lg) !important;
      box-shadow: 0 4px 20px var(--btn-ai-glow) !important;
    }
    .btn-ai:active,
    .btn-ai.hm-btn-3d-pad:active {
      transform: translateY(2px) !important;
      box-shadow: 0 2px 10px var(--btn-ai-glow) !important;
    }

    .btn-success,
    .btn-success.hm-btn-3d-pad {
      background: var(--btn-success-gradient) !important;
      color: var(--btn-text-light) !important;
      border: none !important;
      min-height: var(--btn-min-height) !important;
      border-radius: var(--btn-radius-lg) !important;
      box-shadow: 0 4px 20px var(--btn-success-glow) !important;
    }
    .btn-success:active,
    .btn-success.hm-btn-3d-pad:active {
      transform: translateY(2px) !important;
      box-shadow: 0 2px 10px var(--btn-success-glow) !important;
    }

    .btn-danger,
    .btn-danger.hm-btn-3d-pad {
      background: var(--btn-danger-gradient) !important;
      color: var(--btn-text-light) !important;
      border: none !important;
      min-height: var(--btn-min-height) !important;
      border-radius: var(--btn-radius-lg) !important;
      box-shadow: 0 4px 20px var(--btn-danger-glow) !important;
    }
    .btn-danger:active,
    .btn-danger.hm-btn-3d-pad:active {
      transform: translateY(2px) !important;
      box-shadow: 0 2px 10px var(--btn-danger-glow) !important;
    }

    .btn-disabled,
    .btn-disabled.hm-btn-3d-pad,
    button:disabled,
    .btn-3d:disabled,
    .btn-secondary:disabled {
      background: var(--btn-disabled) !important;
      color: var(--btn-disabled-text) !important;
      border-color: rgba(255, 255, 255, 0.04) !important;
      box-shadow: none !important;
      pointer-events: none !important;
      filter: grayscale(1);
      opacity: 0.5;
    }

    /* ═══════════════════════════════════════════════════════════════
       V11-RESCUE-3B: First Screen After Video Alignment
       ═══════════════════════════════════════════════════════════════ */
    #screen-welcome {
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      padding-bottom: calc(20px + env(safe-area-inset-bottom));
      overflow-x: hidden;
    }
    #screen-welcome .wizard-header {
      padding-top: 48px !important;
    }
    #screen-welcome .hm-step-title {
      font-size: clamp(24px, 6.5vw, 30px) !important;
      line-height: 1.1;
    }
    #screen-welcome .wizard-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 8px;
    }
    #screen-welcome .rack-panel {
      margin: 10px 8px;
    }
    #screen-welcome .rack-panel p {
      font-size: clamp(14px, 3.8vw, 16px) !important;
    }
    #screen-welcome .btn-3d.btn-ai {
      min-height: 56px !important;
      border-radius: 14px !important;
      font-size: clamp(17px, 4.5vw, 20px) !important;
      width: calc(100% - 16px) !important;
      margin: 8px !important;
    }
    #screen-welcome .hm-grid-2 {
      gap: 8px !important;
    }
    #screen-welcome .hm-grid-2 .btn-secondary {
      min-height: 54px !important;
      border-radius: 14px !important;
      font-size: clamp(14px, 3.6vw, 16px) !important;
      padding: 12px 14px !important;
      flex: 1 1 auto !important;
      min-width: 70px !important;
      width: auto !important;
      margin: 2px !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       V11-RESCUE-3B: Input Mode Screen Alignment
       ═══════════════════════════════════════════════════════════════ */
    #screen-input-mode .hm-mobile-screen {
      min-height: 100dvh;
      padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    #screen-input-mode .hm-mobile-title {
      font-size: clamp(24px, 6.5vw, 30px) !important;
    }
    #screen-input-mode .input-mode-option {
      min-height: 64px !important;
      border-radius: 16px !important;
      font-size: clamp(16px, 4.2vw, 18px) !important;
      padding: 14px 16px !important;
    }
    #screen-input-mode .hm-mobile-actions {
      padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       V11-RESCUE-3B: Safe Area для нижних кнопок
       ═══════════════════════════════════════════════════════════════ */
    .hm-mobile-actions {
      padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    }
    .hm-mobile-nav {
      padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    }
    .nav-buttons {
      padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
    .app, .app-shell {
      padding-bottom: env(safe-area-inset-bottom, 20px);
      min-height: 100dvh;
      overflow-x: hidden;
    }
    body {
      overflow-x: hidden;
    }

    /* ═══════════════════════════════════════════════════════════════
       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;
    }

    /* Активный экран кликабелен */
    
    /* CRITICAL: Z-index гарантирует что экран видим поверх лоадеров */
    .screen-stack .screen.active,
    .screen.active {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 100 !important;
      pointer-events: auto !important;
    }

    /* Z-index для уходящих экранов — ниже активного */
    .screen-stack .screen.screen-leaving,
    .screen.screen-leaving {
      z-index: 50 !important;
    }

    /* Старый селектор оставляем для обратной совместимости */
    .screen-stack .screen.active {
      pointer-events: auto !important;
    }

    /* Все скрытые экраны не перехватывают клики */
    .screen-leaving,
    .screen.hidden,
    .screen.is-hidden,
    .screen[aria-hidden="true"] {
      pointer-events: none !important;
    }
      :root {
        --hm-bg-darkest: #0F1015;
        --hm-bg-card:     #1C1E26;
        --hm-bg-surface:  #24262E;
        --hm-bg-overlay:  rgba(15, 16, 21, 0.92);
        --hm-accent:       #8B5CF6;
        --hm-accent-dark:  #7C3AED;
        --hm-accent-light: #A78BFA;
        --hm-accent-cyan:  #22D3EE;
        --hm-accent-glow:  rgba(139, 92, 246, 0.35);
        --hm-text-primary:   #F1F1F7;
        --hm-text-secondary: rgba(241, 241, 247, 0.72);
        --hm-text-muted:     rgba(241, 241, 247, 0.48);
        --hm-btn-min-height: 56px;
        --hm-btn-radius:     14px;
        --hm-card-radius:    18px;
        --hm-panel-radius:   16px;
        --hm-container-pad:  16px;
        --hm-gap:            16px;
        --hm-shadow-btn:     0 8px 28px rgba(139, 92, 246, 0.30);
        --hm-shadow-card:    0 12px 36px rgba(0, 0, 0, 0.40);
        --hm-safe-bottom: env(safe-area-inset-bottom, 16px);
      }
      body {
        background: var(--hm-bg-darkest) !important;
        font-size: 16px;
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        overflow-x: hidden;
      }
      .wizard-header h1,
      .screen.active h1,
      .screen.active .hm-step-title,
      .screen-title {
        font-size: clamp(22px, 5.5vw, 28px) !important;
        font-weight: 800 !important;
        color: var(--hm-text-primary) !important;
        letter-spacing: -0.3px !important;
        line-height: 1.2 !important;
      }
      .wizard-header .subtitle,
      .screen-subtitle,
      .hm-step-subtitle {
        font-size: clamp(15px, 4vw, 17px) !important;
        color: var(--hm-text-secondary) !important;
        font-weight: 500 !important;
        margin-top: 6px !important;
      }
      .btn-3d,
      .btn-primary,
      .hm-mobile-primary,
      .hm-btn-engine-master {
        width: calc(100% - 32px) !important;
        min-height: var(--hm-btn-min-height) !important;
        font-size: clamp(16px, 4.4vw, 18px) !important;
        font-weight: 700 !important;
        border-radius: var(--hm-btn-radius) !important;
        margin: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        transition: transform 0.12s ease, box-shadow 0.12s ease !important;
        border: none !important;
        background: linear-gradient(135deg, var(--hm-accent) 0%, var(--hm-accent-dark) 100%) !important;
        color: #fff !important;
        box-shadow: var(--hm-shadow-btn) !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
      }
      .btn-3d:active,
      .btn-primary:active,
      .hm-mobile-primary:active,
      .hm-btn-engine-master:active {
        transform: scale(0.97) !important;
        box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25) !important;
      }
      .btn-3d:disabled,
      .btn-primary:disabled {
        opacity: 0.4 !important;
        transform: none !important;
        background: var(--hm-bg-surface) !important;
        color: var(--hm-text-muted) !important;
      }
      .btn-secondary,
      button[class*="btn-secondary"] {
        min-height: 56px !important;
        font-size: clamp(15px, 4.2vw, 17px) !important;
        font-weight: 600 !important;
        border-radius: var(--hm-btn-radius) !important;
        padding: 14px 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        background: var(--hm-bg-card) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: var(--hm-text-primary) !important;
        transition: all 0.18s ease !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
      }
      .btn-secondary:active {
        transform: scale(0.97) !important;
        background: rgba(139, 92, 246, 0.15) !important;
      }
      .btn-secondary.active {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(34, 211, 238, 0.10)) !important;
        border-color: var(--hm-accent) !important;
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.20) !important;
        color: #fff !important;
      }
      .nav-buttons {
        position: sticky !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        display: flex !important;
        gap: 12px !important;
        padding: 12px 16px calc(12px + var(--hm-safe-bottom)) !important;
        background: linear-gradient(180deg, transparent 0%, var(--hm-bg-darkest) 30%) !important;
        z-index: 100 !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-sizing: border-box !important;
      }
      .nav-buttons .btn-3d,
      .nav-buttons .btn-primary {
        flex: 2 !important;
        margin: 0 !important;
        width: 100% !important;
      }
      .nav-buttons .btn-secondary {
        flex: 1 !important;
        margin: 0 !important;
        width: auto !important;
        min-height: 56px !important;
      }
      .screen.active {
        padding: var(--hm-container-pad) !important;
        padding-bottom: calc(80px + var(--hm-safe-bottom)) !important;
        gap: var(--hm-gap) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
      }
      .glass-panel,
      .rack-panel,
      .hm-console-panel {
        padding: 18px !important;
        margin: 0 0 var(--hm-gap) 0 !important;
        border-radius: var(--hm-panel-radius) !important;
        background: var(--hm-bg-card) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow: var(--hm-shadow-card) !important;
      }
      .button-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
      }
      .button-group .btn-secondary {
        flex: 1 1 calc(50% - 5px) !important;
        min-width: calc(50% - 5px) !important;
        margin: 0 !important;
      }
      .button-group .btn-secondary.full {
        flex: 1 1 100% !important;
        min-width: 100% !important;
      }
      textarea,
      input[type="text"],
      input[type="number"],
      input[type="search"] {
        min-height: 56px !important;
        font-size: clamp(16px, 4.4vw, 18px) !important;
        border-radius: var(--hm-btn-radius) !important;
        padding: 16px !important;
        background: rgba(0, 0, 0, 0.35) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: var(--hm-text-primary) !important;
        font-weight: 600 !important;
      }
      textarea:focus,
      input:focus {
        border-color: var(--hm-accent) !important;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important;
        outline: none !important;
      }
      .hm-loading-overlay {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 9999 !important;
        background: rgba(15, 16, 21, 0.92) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
      }
      .hm-loading-overlay .hm-loading-spinner {
        width: 52px !important;
        height: 52px !important;
        border: 4px solid rgba(139, 92, 246, 0.15) !important;
        border-top-color: var(--hm-accent) !important;
        border-right-color: var(--hm-accent-cyan) !important;
        border-radius: 50% !important;
        animation: hm-spin-fix 0.8s linear infinite !important;
      }
      .hm-loading-overlay .hm-loading-text {
        margin-top: 20px !important;
        font-size: clamp(16px, 4.4vw, 19px) !important;
        font-weight: 700 !important;
        color: var(--hm-text-secondary) !important;
      }
      @keyframes hm-spin-fix {
        to { transform: rotate(360deg); }
      }
      .toast {
        bottom: 100px !important;
        font-size: clamp(15px, 4vw, 17px) !important;
        padding: 14px 24px !important;
        border-radius: var(--hm-btn-radius) !important;
        background: var(--hm-bg-overlay) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: var(--hm-shadow-card) !important;
        white-space: normal !important;
        max-width: 92% !important;
        text-align: center !important;
      }
      @supports (padding-top: env(safe-area-inset-top)) {
        .screen.active {
          padding-top: max(var(--hm-container-pad), env(safe-area-inset-top, 0px)) !important;
        }
      }
      .nav-buttons .btn-3d,
      .nav-buttons .btn-secondary {
        margin: 0 !important;
        width: auto !important;
      }
      .lang-btn,
      button[class*="lang-btn"] {
        height: 56px !important;
        min-height: 56px !important;
        padding: 8px 12px !important;
        border-radius: var(--hm-btn-radius) !important;
        font-size: clamp(11px, 3.6vw, 14px) !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
      }
      .lang-btn .flag {
        width: 26px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        font-size: 20px !important;
      }
      .lang-btn .label {
        flex: 1 !important;
        min-width: 0 !important;
        font-size: clamp(11px, 3.6vw, 14px) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }
      .voice-mode-card {
        min-height: 64px !important;
        padding: 16px 18px !important;
        border-radius: var(--hm-btn-radius) !important;
      }
      .voice-mode-card .mode-title {
        font-size: clamp(16px, 4.2vw, 18px) !important;
        font-weight: 700 !important;
      }
      .voice-mode-card .mode-desc {
        font-size: clamp(13px, 3.6vw, 15px) !important;
      }
      .btn-pay {
        width: calc(100% - 32px) !important;
        min-height: 60px !important;
        font-size: clamp(17px, 4.6vw, 19px) !important;
        font-weight: 800 !important;
        border-radius: var(--hm-btn-radius) !important;
        background: linear-gradient(135deg, var(--hm-accent) 0%, var(--hm-accent-dark) 100%) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: var(--hm-shadow-btn) !important;
        margin: 0 16px !important;
      }
      .btn-pay:active {
        transform: scale(0.97) !important;
      }
      .btn-pay:disabled {
        opacity: 0.4 !important;
        transform: none !important;
      }
      .pack-card {
        border-radius: var(--hm-card-radius) !important;
        padding: 20px !important;
        margin: 0 0 12px 0 !important;
        background: var(--hm-bg-card) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
      }
      .pack-card.selected {
        border-color: var(--hm-accent) !important;
        box-shadow: 0 0 24px rgba(139, 92, 246, 0.20) !important;
      }
      #instant-preload-screen[aria-hidden="true"] {
        display: none !important;
        pointer-events: none !important;
      }
      #screen-promo-splash[aria-hidden="true"] {
        display: none !important;
        pointer-events: none !important;
      }

    /* ═══ TRACK CARDS — my-tracks VERTICAL VARIANTS with covers ═══ */
    .my-track-card {
      display: flex;
      flex-direction: column !important;
      gap: 8px;
      margin-bottom: 10px;
      padding: 10px;
      background: var(--hm-bg-card);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: var(--hm-card-radius, 14px);
      box-shadow: var(--hm-shadow-card, 0 4px 16px rgba(0,0,0,0.3));
    }
    .my-track-card .track-card-header {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .my-track-card .track-card-title {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.3;
      margin: 0;
    }
    .my-track-card .track-card-meta {
      font-size: 10px;
      color: var(--text-muted);
      line-height: 1.3;
      margin: 0;
    }
    .my-track-card .track-variant {
      display: flex;
      flex-direction: row !important;
      align-items: flex-start;
      gap: 10px;
      padding: 8px;
      background: rgba(255,255,255,0.03);
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.04);
    }
    .my-track-card .track-variant-cover {
      width: 100px !important;
      height: 100px !important;
      flex-shrink: 0 !important;
      border-radius: 8px !important;
      object-fit: cover !important;
      aspect-ratio: 1/1 !important;
    }
    .my-track-card .track-variant-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .my-track-card .track-variant-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-muted);
    }
    .my-track-card .track-card-custom-player {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 2px;
    }
    .my-track-card .track-card-custom-player .custom-player-btn {
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(135deg, #a855f7, #7c3aed);
      color: #fff;
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding: 0;
      box-shadow: 0 2px 6px rgba(168,85,247,0.25);
      -webkit-tap-highlight-color: transparent;
    }
    .my-track-card .track-card-custom-player .custom-player-btn.playing {
      background: linear-gradient(135deg, #f59e0b, #d97706);
    }
    .my-track-card .track-card-custom-player .custom-player-slider {
      flex: 1;
      min-width: 40px;
      height: 3px;
      -webkit-appearance: none;
      appearance: none;
      background: rgba(255,255,255,0.12);
      border-radius: 2px;
      outline: none;
      cursor: pointer;
    }
    .my-track-card .track-card-custom-player .custom-player-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(135deg, #a855f7, #7c3aed);
      border: none;
      cursor: pointer;
    }
    .my-track-card .track-card-custom-player .custom-player-slider::-moz-range-thumb {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(135deg, #a855f7, #7c3aed);
      border: none;
      cursor: pointer;
    }
    .my-track-card .track-card-custom-player .custom-player-time-current,
    .my-track-card .track-card-custom-player .custom-player-time-total,
    .my-track-card .track-card-custom-player .custom-player-time-sep {
      font-size: 10px;
      color: rgba(255,255,255,0.45);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      min-width: 20px;
      text-align: center;
      font-family: 'Exo 2', monospace;
    }
    .my-track-card .track-card-custom-player .custom-player-time-sep {
      min-width: auto;
      color: rgba(255,255,255,0.2);
    }
    .my-track-card .track-card-no-audio {
      font-size: 11px;
      color: #ff6b6b;
    }

    /* ═══ SCROLL PROTECTION — nav-buttons overlap fix ═══ */
    #my-tracks-list {
      padding-bottom: 120px !important;
    }
    #showcase-cards-container {
      padding-bottom: 80px !important;
    }

    /* ═══ GEN RESULT COVER — showRealGenerationResult() ═══ */
    .gen-result-real-variant {
      margin-bottom: 16px;
      padding: 12px;
      background: var(--hm-bg-card, rgba(255,255,255,0.04));
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--hm-card-radius, 18px);
    }
    .gen-result-real-variant-title {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 8px;
      text-align: center;
    }
    .gen-result-real-cover-wrap {
      text-align: center;
      margin-bottom: 8px;
    }
    .gen-result-real-cover-wrap img {
      width: 100%;
      max-width: 200px;
      border-radius: 12px;
      aspect-ratio: 1/1;
      object-fit: cover;
      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    }
    .gen-result-real-no-audio {
      font-size: 12px;
      color: var(--text-muted);
      text-align: center;
      padding: 12px;
    }
    .gen-result-real-meta {
      font-size: 12px;
      color: var(--text-muted);
      text-align: center;
      padding: 8px 0;
    }
    .gen-result-real-header {
      font-size: 18px;
      font-weight: 800;
      text-align: center;
      margin-bottom: 16px;
      color: var(--hm-text-primary, #F1F1F7);
    }

    .custom-player {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 6px 10px;
      margin-top: 4px;
      transition: border-color 0.2s;
    }
    .custom-player:hover {
      border-color: rgba(168,85,247,0.25);
    }
    .custom-player-btn {
      flex: 0 0 36px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(135deg, #a855f7, #7c3aed);
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.1s, box-shadow 0.2s;
      box-shadow: 0 2px 8px rgba(168,85,247,0.3);
      line-height: 1;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .custom-player-btn:active {
      transform: scale(0.92);
    }
    .custom-player-btn.playing {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      box-shadow: 0 2px 8px rgba(245,158,11,0.3);
    }
    .custom-player-slider {
      flex: 1;
      min-width: 0;
      height: 4px;
      -webkit-appearance: none;
      appearance: none;
      background: rgba(255,255,255,0.12);
      border-radius: 2px;
      outline: none;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    .custom-player-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: linear-gradient(135deg, #a855f7, #7c3aed);
      border: 2px solid rgba(255,255,255,0.2);
      cursor: pointer;
      box-shadow: 0 0 6px rgba(168,85,247,0.4);
      transition: transform 0.1s;
    }
    .custom-player-slider::-webkit-slider-thumb:active {
      transform: scale(1.15);
    }
    .custom-player-slider::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: linear-gradient(135deg, #a855f7, #7c3aed);
      border: 2px solid rgba(255,255,255,0.2);
      cursor: pointer;
    }
    .custom-player-slider::-moz-range-track {
      height: 4px;
      background: rgba(255,255,255,0.12);
      border-radius: 2px;
    }
    .custom-player-time-current,
    .custom-player-time-total {
      font-size: 11px;
      color: rgba(255,255,255,0.6);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      min-width: 32px;
      text-align: center;
      font-family: 'Exo 2', monospace;
      letter-spacing: 0.3px;
    }
    .custom-player-time-sep {
      font-size: 10px;
      color: rgba(255,255,255,0.25);
    }
    @media (max-width: 480px) {
      .custom-player {
        padding: 5px 8px;
        gap: 6px;
      }
      .custom-player-btn {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: 14px;
      }
      .custom-player-slider {
        height: 3px;
      }
      .custom-player-slider::-webkit-slider-thumb {
        width: 12px;
        height: 12px;
      }
      .custom-player-time-current,
      .custom-player-time-total {
        font-size: 10px;
        min-width: 28px;
      }
    }

    /* ═══ TRACK STATUS "processing" — заглушка для генерирующихся треков ═══ */
    .track-status-processing {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: #8A2BE2;
      font-weight: 600;
      font-size: 0.8rem;
      animation: trackStatusPulse 1.8s ease-in-out infinite;
    }

    @keyframes trackStatusPulse {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.5; }
    }

    .track-variant-cover-placeholder {
      flex: 0 0 56px;
      width: 56px;
      height: 56px;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(138,43,226,0.08), rgba(50,205,50,0.08));
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .track-processing-spinner {
      width: 28px;
      height: 28px;
      border: 3px solid rgba(138,43,226,0.15);
      border-top-color: #8A2BE2;
      border-radius: 50%;
      animation: trackSpinnerRotate 0.8s linear infinite;
    }

    @keyframes trackSpinnerRotate {
      to { transform: rotate(360deg); }
    }

    .track-processing-dots::after {
      content: '';
      animation: trackDots 1.5s steps(4, end) infinite;
    }

    @keyframes trackDots {
      0%   { content: ''; }
      25%  { content: '.'; }
      50%  { content: '..'; }
      75%  { content: '...'; }
      100% { content: ''; }
    }

    /* ═══ ASYNC WAITING — премиум-дизайн экрана ожидания ═══ */
    .async-waiting {
      animation: asyncFadeIn 0.5s ease-out;
    }

    .async-waiting-icon {
      font-size: 64px;
      line-height: 1;
      animation: asyncPulse 2s ease-in-out infinite;
      filter: drop-shadow(0 0 12px rgba(138,43,226,0.25));
    }

    @keyframes asyncPulse {
      0%, 100% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(138,43,226,0.25)); }
      50%      { transform: scale(1.08); filter: drop-shadow(0 0 24px rgba(138,43,226,0.40)); }
    }

    @keyframes asyncFadeIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .async-waiting-title {
      font-size: 20px;
      font-weight: 700;
      background: linear-gradient(135deg, #8A2BE2, #32CD32);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: asyncGradientShift 3s ease-in-out infinite;
      background-size: 200% 200%;
    }

    @keyframes asyncGradientShift {
      0%, 100% { background-position: 0% 50%; }
      50%      { background-position: 100% 50%; }
    }

    .async-waiting-prompt {
      width: 100%;
      max-width: 360px;
      padding: 14px 18px;
      background: rgba(138,43,226,0.06);
      border-radius: 14px;
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--text-secondary, #6B7280);
      line-height: 1.5;
      word-break: break-word;
      box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.04),
        inset 0 2px 6px rgba(0,0,0,0.02);
      border: 1px solid rgba(138,43,226,0.10);
    }

    .async-waiting-prompt::before {
      content: "💡 Тема: ";
      font-weight: 600;
      color: #8A2BE2;
    }

    .async-waiting-subtitle {
      font-size: 14px;
      color: var(--text-muted, #9CA3AF);
      line-height: 1.5;
    }

    /* Анимация мерцающего фонового градиента для всего контейнера */
    .async-waiting {
      position: relative;
      overflow: hidden;
    }

    .async-waiting::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 30% 20%, rgba(138,43,226,0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(50,205,50,0.04) 0%, transparent 60%);
      pointer-events: none;
      animation: asyncBgShift 4s ease-in-out infinite alternate;
    }

    @keyframes asyncBgShift {
      0%   { opacity: 0.5; }
      100% { opacity: 1; }
    }

    /* ═══════════════════════════════════════════════════════════════
       VOLUMETRIC 3D UI — Light Volumetric Effects (dark-adapted)
       Перенесено из ui_dashboard_sample.html
       ═══════════════════════════════════════════════════════════════ */

    /* --- CSS-переменные для объёмных эффектов --- */
    :root {
      --vol-card-bg: rgba(30, 30, 45, 0.75);
      --vol-card-inset-bg: rgba(20, 20, 30, 0.6);
      --vol-shadow-color: rgba(0, 0, 0, 0.25);
      --vol-shadow-strong: rgba(0, 0, 0, 0.35);
      --vol-shadow-inset: rgba(0, 0, 0, 0.15);
      --vol-border-light: rgba(255, 255, 255, 0.04);
      --vol-highlight: rgba(255, 255, 255, 0.05);
    }

    /* ============================================================
       ВЫПУКЛАЯ КАРТОЧКА — многослойная тень (3 слоя)
       ============================================================ */
    .card-convex {
      background: var(--vol-card-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: var(--panel-radius, 14px);
      padding: 20px 18px;
      border: 1px solid var(--vol-border-light);

      box-shadow:
        0 2px 4px var(--vol-shadow-color),
        0 8px 24px var(--vol-shadow-color),
        0 16px 48px var(--vol-shadow-strong);
    }

    /* ============================================================
       ВДАВЛЕННАЯ КАРТОЧКА — inset shadow + тёмный фон
       ============================================================ */
    .card-concave {
      background: var(--vol-card-inset-bg);
      border-radius: var(--panel-radius, 14px);
      padding: 18px 16px;
      border: 1px solid var(--vol-border-light);

      box-shadow:
        inset 0 2px 4px var(--vol-shadow-inset),
        inset 0 4px 8px rgba(0, 0, 0, 0.1),
        0 1px 0 var(--vol-highlight);
    }

    /* ============================================================
       ГЛАВНАЯ КНОПКА (CTA) — фиолетовый градиент
       ============================================================ */
    .btn-primary-vol {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      min-height: 56px;
      padding: 14px 28px;

      font-family: inherit;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: #32CD32;

      border: none;
      border-radius: var(--btn-radius, 10px);
      cursor: pointer;

      background: linear-gradient(145deg, #8A2BE2, #6f1fc4);

      box-shadow:
        0 4px 6px rgba(138, 43, 226, 0.25),
        0 8px 18px rgba(138, 43, 226, 0.20),
        0 16px 40px rgba(138, 43, 226, 0.12),
        0 0 0 1px rgba(138, 43, 226, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

      transition: transform 0.12s ease, box-shadow 0.12s ease;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    .btn-primary-vol:active {
      transform: scale(0.96);
      box-shadow:
        0 2px 3px rgba(138, 43, 226, 0.20),
        0 4px 10px rgba(138, 43, 226, 0.15),
        0 0 0 1px rgba(138, 43, 226, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    /* Неоновое свечение текста на главной кнопке */
    .btn-primary-vol .btn-label-glow,
    .btn-primary-vol .btn-label {
      text-shadow:
        0 0 8px rgba(50, 205, 50, 0.35),
        0 0 20px rgba(50, 205, 50, 0.20);
    }

    /* ============================================================
       ВТОРИЧНАЯ КНОПКА — объёмная (dark)
       ============================================================ */
    .btn-secondary-vol {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-height: 48px;
      padding: 12px 20px;

      font-family: inherit;
      font-size: 0.925rem;
      font-weight: 600;
      color: var(--text-main, #e8e8ee);

      border: none;
      border-radius: var(--btn-radius, 10px);
      cursor: pointer;

      background: var(--vol-card-bg);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);

      box-shadow:
        0 1px 2px var(--vol-shadow-color),
        0 4px 12px var(--vol-shadow-color),
        0 8px 24px var(--vol-shadow-strong);

      transition: transform 0.12s ease, box-shadow 0.12s ease;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    .btn-secondary-vol:active {
      transform: scale(0.96);
      box-shadow:
        0 1px 2px var(--vol-shadow-color),
        0 2px 6px var(--vol-shadow-color);
    }

    /* Обводной вариант */
    .btn-secondary-vol-outline {
      background: transparent;
      box-shadow:
        0 0 0 1.5px var(--vol-border-light),
        0 2px 8px var(--vol-shadow-color);
      color: var(--text-muted, #7a7a8e);
    }

    .btn-secondary-vol-outline:active {
      box-shadow:
        0 0 0 1.5px var(--vol-border-light),
        inset 0 1px 3px var(--vol-shadow-inset);
    }

    /* Ряд кнопок в grid */
    .button-row-vol {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    /* ============================================================
       ТАБЛЕТКИ (PILLS) — селекторы выбора
       ============================================================ */
    .pill-group-vol {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .pill-vol {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      min-width: 56px;
      padding: 10px 20px;

      font-family: inherit;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-muted, #7a7a8e);

      border: none;
      border-radius: 9999px;
      cursor: pointer;

      background: var(--vol-card-bg);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);

      box-shadow:
        0 1px 3px var(--vol-shadow-color),
        0 4px 12px var(--vol-shadow-color);

      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease, color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      flex: 0 1 auto;
    }

    .pill-vol:active {
      transform: scale(0.95);
    }

    .pill-vol.active {
      background: linear-gradient(145deg, #8A2BE2, #6f1fc4);
      color: #FFFFFF;

      box-shadow:
        0 2px 6px rgba(138, 43, 226, 0.30),
        0 6px 16px rgba(138, 43, 226, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }

    /* ============================================================
       ИНДИКАТОРЫ — круговой прогресс-бар
       ============================================================ */
    .progress-wrapper-vol {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      padding: 16px 0;
    }

    .progress-ring-vol {
      position: relative;
      width: 120px;
      height: 120px;
    }

    .progress-ring-vol svg {
      transform: rotate(-90deg);
      width: 120px;
      height: 120px;
    }

    .progress-ring-vol .bg {
      fill: none;
      stroke: rgba(255, 255, 255, 0.08);
      stroke-width: 8;
    }

    .progress-ring-vol .fg {
      fill: none;
      stroke: url(#progressGradientVol);
      stroke-width: 8;
      stroke-linecap: round;
      stroke-dasharray: 314.159;
      stroke-dashoffset: 314.159;
      animation: fillProgressVol 2.5s ease-in-out forwards;
    }

    @keyframes fillProgressVol {
      0%   { stroke-dashoffset: 314.159; }
      100% { stroke-dashoffset: 94.248; }
    }

    /* Пульсирующее кольцо вокруг */
    .progress-ring-vol .pulse-ring-vol {
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 3px solid rgba(0, 255, 255, 0.3);
      opacity: 0;
      animation: pulseGlowVol 2.5s ease-in-out infinite 0.5s;
    }

    @keyframes pulseGlowVol {
      0%   { transform: scale(0.92); opacity: 0.6; }
      50%  { transform: scale(1.08); opacity: 0;   }
      100% { transform: scale(0.92); opacity: 0.6; }
    }

    /* Процент внутри круга */
    .progress-label-vol {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: 700;
      color: #8A2BE2;
    }

    .progress-hint-vol {
      font-size: 0.8rem;
      color: var(--text-muted, #7a7a8e);
      font-weight: 500;
    }

    /* Линейный индикатор загрузки */
    .loading-bar-track-vol {
      width: 100%;
      height: 8px;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 9999px;
      overflow: hidden;
    }

    .loading-bar-fill-vol {
      height: 100%;
      width: 0%;
      border-radius: 9999px;
      background: linear-gradient(90deg, #8A2BE2, #32CD32, rgba(0, 255, 255, 0.7));
      animation: loadBarVol 3s ease-in-out infinite;
    }

    @keyframes loadBarVol {
      0%   { width: 0%;   margin-left: 0;   }
      30%  { width: 40%;  margin-left: 0;   }
      70%  { width: 60%;  margin-left: 20%; }
      100% { width: 100%; margin-left: 0;   }
    }

    /* ============================================================
       :active — улучшение для существующих кнопок
       Добавляем scale-эффект для всех кнопок без :active
       ============================================================ */
    .btn-secondary:active {
      transform: scale(0.97);
    }

    /* ============================================================
       Адаптация под планшеты
       ============================================================ */
    @media (min-width: 600px) {
      .button-row-vol {
        grid-template-columns: 1fr 1fr 1fr;
      }

      .pill-group-vol {
        gap: 12px;
      }
      .pill-vol {
        padding: 12px 28px;
        min-height: 48px;
      }

      .progress-ring-vol {
        width: 140px;
        height: 140px;
      }
      .progress-ring-vol svg {
        width: 140px;
        height: 140px;
      }
    }

    @media (min-width: 1024px) {
      .card-convex {
        padding: 28px 24px;
      }
      .btn-primary-vol {
        min-height: 60px;
        font-size: 1.15rem;
      }
    }