/**
 * Copyright 2026 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// =============================================================================
// DESIGN SYSTEM TOKENS & TYPOGRAPHY (Aligned with Workspace Minimalism)
// =============================================================================
$font-sans: 'Google Sans Text', 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
$font-mono: 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'SFMono-Regular', Consolas, monospace;

// Surfaces & Backgrounds
$bg-base: var(--app-canvas, #f8f9fa);
$card-bg: var(--app-surface, #ffffff);
$card-border: var(--app-border, #e2e8f0);
$card-border-hover: var(--app-border-control, #cbd5e1);
$card-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.02);

// Brand & Semantic Colors
$primary: #1a73e8;
$primary-dark: #1557b0;
$primary-light: var(--app-primary-soft, #eff6ff);
$primary-border: var(--app-primary-border, #bfdbfe);

$emerald: #059669;
$emerald-dark: #047857;
$emerald-light: var(--app-success-soft, #ecfdf5);
$emerald-border: var(--app-success-border, #a7f3d0);

$amber: #d97706;
$amber-dark: #b45309;
$amber-light: var(--app-warning-soft, #fffbeb);
$amber-border: var(--app-warning-border, #fde68a);

$rose: #dc2626;
$rose-dark: #b91c1c;
$rose-light: var(--app-error-soft, #fef2f2);
$rose-border: var(--app-error-border, #fecaca);

// Neutral Text Scale
$text-main: var(--app-text-strong, #0f172a);
$text-secondary: var(--app-text-secondary, #475569);
$text-muted: var(--app-text-muted, #64748b);
$text-light: #94a3b8;

// Shared OS switcher. It is rendered in both the dependency installer and
// the empty-AVD guide, so the styling cannot be scoped to either card.
.os-selector-pills {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  gap: 2px;
  background: rgb(var(--app-surface-rgb, 255 255 255) / 0.65);
  border: 1px solid rgb(var(--app-border-rgb, 226 232 240) / 0.85);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.8);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);

  .os-pill {
    padding: 3px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: $text-secondary;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;

    &:hover {
      color: $text-main;
      background: rgb(var(--app-surface-rgb, 255 255 255) / 0.72);
    }

    &.active {
      color: #ffffff;
      background: $primary;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
    }

    &:focus-visible {
      outline: 2px solid rgba($primary, 0.35);
      outline-offset: 1px;
    }
  }
}

// =============================================================================
// FROSTED GLASS (GLASSMORPHISM) MIXINS
// =============================================================================
@mixin glass-surface($opacity: 0.72, $blur: 16px) {
  background: rgba(255, 255, 255, $opacity);
  backdrop-filter: blur($blur) saturate(180%);
  -webkit-backdrop-filter: blur($blur) saturate(180%);
}

@mixin glass-primary-btn {
  background: linear-gradient(135deg, rgba(26, 115, 232, 0.92) 0%, rgba(37, 99, 235, 0.85) 100%);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgb(var(--app-border-rgb, 255 255 255) / 0.28);
  box-shadow: 0 4px 14px rgba(26, 115, 232, 0.32), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.45);
  color: #ffffff !important;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  span, .material-symbols-outlined, .run-icon, .action-icon {
    color: #ffffff !important;
  }

  &:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(26, 115, 232, 1) 0%, rgba(37, 99, 235, 0.95) 100%);
    box-shadow: 0 6px 20px rgba(26, 115, 232, 0.42), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.6);
    transform: translateY(-1px);
  }

  &:active:not(:disabled) {
    transform: scale(0.97) translateY(0);
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.35);
  }

  &:disabled {
    background: rgba(148, 163, 184, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgb(var(--app-border-rgb, 255 255 255) / 0.2);
    box-shadow: none;
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
  }
}

@mixin glass-secondary-btn {
  background: rgb(var(--app-surface-rgb, 255 255 255) / 0.72);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgb(var(--app-border-rgb, 226 232 240) / 0.88);
  box-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.05), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.95);
  color: $text-secondary;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  &:hover:not(:disabled) {
    background: rgb(var(--app-surface-rgb, 255 255 255) / 0.92);
    border-color: rgb(var(--app-primary-border-rgb, 191 219 254) / 0.95);
    color: var(--app-primary-text, $primary);
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 1);
    transform: translateY(-0.5px);

    .material-symbols-outlined:not(.feedback-done) {
      color: var(--app-primary-text, $primary);
    }
  }

  &:active:not(:disabled) {
    transform: scale(0.97);
  }

  &:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
  }
}

:host {
  display: block;
  min-height: 100vh;
  width: 100%;
  background-color: $bg-base;
  font-family: $font-sans;
  color: $text-main;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.home-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: $bg-base;
  overflow-x: hidden;

  /* Dynamic Ambient Background with Intelligent Glow */
  .aurora-background {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    opacity: 0.9;
    transition: opacity 0.8s ease;

    /* The glow orbs are pre-softened radial gradients. A `filter: blur(90px+)`
       on top of them looked nearly identical but forced the GPU to re-blur
       half-megapixel layers on every frame of the float animations — the
       gradients below bake the same softness in for free. */
    .glow {
      position: absolute;
      border-radius: 50%;
      transform: translate3d(0, 0, 0);
      will-change: transform, opacity;
      pointer-events: none;
    }

    .glow-1 {
      top: -140px;
      left: 10%;
      width: 520px;
      height: 520px;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(99, 102, 241, 0.04) 45%, transparent 82%);
      animation: floatGlow1 22s ease-in-out infinite alternate;
    }

    .glow-2 {
      top: -100px;
      right: 12%;
      width: 560px;
      height: 560px;
      background: radial-gradient(circle, rgba(147, 51, 234, 0.08) 0%, rgba(219, 39, 119, 0.03) 45%, transparent 82%);
      animation: floatGlow2 26s ease-in-out infinite alternate;
    }

    .glow-3 {
      top: 280px;
      left: 30%;
      width: 460px;
      height: 460px;
      background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, rgba(59, 130, 246, 0.03) 45%, transparent 82%);
      animation: floatGlow3 20s ease-in-out infinite alternate;
    }

    .glow-pending {
      top: -120px;
      left: 15%;
      right: 15%;
      margin: 0 auto;
      width: 720px;
      height: 520px;
      background: radial-gradient(circle, rgba(245, 158, 11, 0.09) 0%, rgba(217, 119, 6, 0.035) 38%, transparent 82%);
      opacity: 0;
      transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      animation: readyPulseGlow 9s ease-in-out infinite alternate;
      pointer-events: none;
    }

    .glow-ready {
      top: -120px;
      left: 15%;
      right: 15%;
      margin: 0 auto;
      width: 700px;
      height: 520px;
      background: radial-gradient(circle, rgba(16, 185, 129, 0.14) 0%, rgba(6, 182, 212, 0.08) 38%, transparent 82%);
      opacity: 0;
      transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
      animation: readyPulseGlow 7s ease-in-out infinite alternate;
      pointer-events: none;
    }

    .glow-pro {
      top: -100px;
      left: 20%;
      right: 20%;
      margin: 0 auto;
      width: 680px;
      height: 520px;
      background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, rgba(147, 51, 234, 0.08) 38%, transparent 82%);
      opacity: 0;
      transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
    }
  }

  &.system-pending {
    .aurora-background {
      .glow-pending {
        opacity: 1;
      }
      .glow-1 {
        background: radial-gradient(circle, rgba(245, 158, 11, 0.07) 0%, rgba(99, 102, 241, 0.03) 55%, transparent 75%);
      }
    }
  }

  &.system-ready {
    .aurora-background {
      .glow-pending {
        opacity: 0;
      }
      .glow-ready {
        opacity: 1;
      }
      .glow-1 {
        background: radial-gradient(circle, rgba(16, 185, 129, 0.10) 0%, rgba(59, 130, 246, 0.05) 55%, transparent 75%);
      }
    }
  }

  &.pro-theme-active {
    .aurora-background {
      .glow-pro {
        opacity: 1;
      }
      .glow-ready {
        opacity: 0.35;
      }
    }
  }

  /* ========================================================================= */
  /* MAIN CONTENT LAYOUT                                                       */
  /* ========================================================================= */
  .home-content {
    position: relative;
    z-index: 5;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 36px 24px 60px;
    display: flex;
    flex-direction: column;
    gap: 18px;

    /* Hero section */
    .hero-section {
      text-align: center;
      padding: 16px 0 6px;
      margin: 0;

      .hero-title {
        font-family: 'Outfit', 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 32px;
        font-weight: 600;
        letter-spacing: -0.035em;
        line-height: 1.2;
        color: var(--app-text-strong, #0f172a);
        margin: 0;
      }

      .hero-subtitle {
        font-size: 14.5px;
        color: var(--app-text-muted, #64748b);
        font-weight: 400;
        margin: 8px 0 0;
        letter-spacing: -0.01em;
      }
    }

    /* Top Mode Stepper Tabs Switcher (Frosted Glass Segmented Control) */
    /* Top Mode Stepper Tabs Switcher (Frosted Glass Segmented Control matching top-left nav) */
    .mode-tabs-container {
      display: flex;
      justify-content: center;
      margin-bottom: 6px;

      .mode-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        max-width: 520px;
        box-sizing: border-box;
        background: rgb(var(--app-surface-rgb, 255 255 255) / 0.72);
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        padding: 3px;
        border-radius: 9999px;
        border: 1px solid rgb(var(--app-border-rgb, 226 232 240) / 0.85);
        gap: 3px;
        box-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(0, 0, 0, 0.02), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.9);
        user-select: none;
        font-family: 'Google Sans', 'Google Sans Text', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);

        &:hover {
          background: rgb(var(--app-surface-rgb, 255 255 255) / 0.85);
          box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(0, 0, 0, 0.02), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 1);
          border-color: rgb(var(--app-border-control-rgb, 203 213 225) / 0.9);
        }

        .mode-tab-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 7px;
          height: 32px;
          padding: 0 14px;
          box-sizing: border-box;
          border: none;
          background: transparent;
          border-radius: 9999px;
          cursor: pointer;
          font-family: inherit;
          font-size: 13px;
          font-weight: 600;
          color: var(--app-text-secondary, #475569);
          line-height: 1;
          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
          outline: none;
          white-space: nowrap;
          min-width: 0;

          @media (max-width: 560px) {
            white-space: normal;
            height: auto;
            min-height: 32px;
            padding: 6px 10px;
            gap: 5px;
            font-size: 12px;
            line-height: 1.2;
            text-align: center;
          }

          .tab-icon {
            font-size: 16px;
            width: 16px;
            height: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--app-text-muted, #64748b);
            flex-shrink: 0;
            transition: color 0.15s ease, transform 0.15s ease;

            &.icon-ready {
              color: var(--app-success-text, #059669);
            }

            &.icon-locked {
              color: var(--app-text-faint, #94a3b8);
              font-size: 15px;
            }
          }

          .tab-label {
            color: var(--app-text-secondary, #475569);
            min-width: 0;
            transition: color 0.15s ease;
          }

          &:hover:not(.active) {
            background: rgb(var(--app-surface-rgb, 255 255 255) / 0.7);
            color: var(--app-text-strong, #0f172a);

            .tab-icon {
              color: var(--app-text-control, #1e293b);

              &.icon-ready {
                color: var(--app-success-text, #059669);
              }
            }
            .tab-label {
              color: var(--app-text-strong, #0f172a);
            }
          }

          &.active {
            background: var(--app-surface, #ffffff) !important;
            color: var(--app-text-strong, #0f172a) !important;
            font-weight: 700;
            box-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 var(--app-highlight, #ffffff);

            .tab-icon {
              color: var(--app-primary-text, #1a73e8);

              &.icon-ready {
                color: var(--app-success-text, #059669);
              }
            }

            .tab-label {
              color: var(--app-text-strong, #0f172a) !important;
            }
          }

          &:active {
            transform: scale(0.98);
          }
        }
      }
    }

    /* ======================================================================= */
    /* VIEW 1: PREREQUISITES & SYSTEM SETUP GUIDE                               */
    /* ======================================================================= */
    .setup-guide-view {
      display: flex;
      flex-direction: column;
      gap: 16px;
      animation: fadeIn 0.2s ease-out;

      /* Unified Step Card Container */
      .guide-card {
        background: $card-bg;
        border: 1px solid $card-border;
        border-radius: 14px;
        box-shadow: $card-shadow;
        overflow: hidden;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;

        &:hover {
          border-color: $card-border-hover;
        }

        .guide-card-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 14px;
          padding: 16px 20px;
          border-bottom: 1px solid var(--app-border, #f1f5f9);
          background: var(--app-surface, #ffffff);

          .step-badge {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13.5px;
            font-weight: 700;
            background: var(--app-surface-soft, #f1f5f9);
            color: $text-secondary;
            flex-shrink: 0;
            transition: all 0.2s ease;

            span, .step-check-icon {
              font-size: 18px;
              font-weight: 700;
              color: inherit;
            }

            &.step-pass {
              background: $emerald-light;
              color: var(--app-success-text, $emerald);
            }
          }

          .step-info {
            flex: 1;
            min-width: 0;

            .step-title-row {
              display: flex;
              align-items: center;
              gap: 10px;
              margin-bottom: 2px;
              flex-wrap: wrap;

              .step-title {
                margin: 0;
                font-size: 15px;
                font-weight: 600;
                color: $text-main;
              }

              .status-pill {
                font-size: 11px;
                font-weight: 600;
                padding: 2px 8px;
                border-radius: 12px;
                line-height: 1.3;
                height: 22px;
                display: inline-flex;
                align-items: center;

                &.pill-pass {
                  background: $emerald-light;
                  color: var(--app-success-text, $emerald);
                  border: 1px solid $emerald-border;
                }

                &.pill-warn {
                  background: $amber-light;
                  color: var(--app-warning-text, $amber-dark);
                  border: 1px solid $amber-border;
                }

                &.pill-fail {
                  background: $rose-light;
                  color: var(--app-error-text, $rose-dark);
                  border: 1px solid $rose-border;
                }
              }
            }

            .step-desc {
              margin: 0;
              font-size: 12.5px;
              color: $text-secondary;
              line-height: 1.4;
            }
          }

          .btn-restart-adb,
          .btn-header-action {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 0 13px;
            height: 32px;
            @include glass-secondary-btn;
            border-radius: 8px;
            font-family: inherit;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            flex-shrink: 0;

            .material-symbols-outlined {
              font-size: 15px;
              color: $text-muted;
              transition: transform 0.2s ease, color 0.15s ease;
            }

            .feedback-done {
              color: var(--app-success-text, $emerald) !important;
              font-size: 16px;
            }

            .feedback-text {
              color: var(--app-success-text, $emerald);
              font-weight: 600;
            }

            .spinning {
              animation: spin 1s linear infinite;
            }
          }
        }

        .guide-card-body {
          padding: 18px 20px;
          display: flex;
          flex-direction: column;
          gap: 14px;
        }
      }

      /* --------------------------------------------------------------------- */
      /* STEP 1: ONE-CLICK INSTALLER & ENVIRONMENT MATRIX                      */
      /* --------------------------------------------------------------------- */
      .one-click-install-bar {
        background: var(--app-info-soft, #f0f9ff);
        border: 1px solid var(--app-info-border, #bae6fd);
        border-radius: 10px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;

        .install-bar-left {
          display: flex;
          align-items: center;
          gap: 12px;
          min-width: 0;

          .install-bar-icon-box {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: #0284c7;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            .bolt-icon {
              font-size: 18px;
            }
          }

          .install-bar-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;

            .install-bar-title-row {
              display: flex;
              align-items: center;
              flex-wrap: wrap;

              .install-bar-title {
                font-size: 13px;
                font-weight: 600;
                color: $text-main;
              }

              .os-selector-pills {
                display: inline-flex;
                align-items: center;
                background: rgb(var(--app-surface-rgb, 255 255 255) / 0.65);
                backdrop-filter: blur(12px) saturate(180%);
                -webkit-backdrop-filter: blur(12px) saturate(180%);
                border: 1px solid rgb(var(--app-border-rgb, 226 232 240) / 0.85);
                border-radius: 8px;
                padding: 2px;
                gap: 2px;
                box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.8);

                .os-pill {
                  border: none;
                  background: transparent;
                  font-size: 11px;
                  font-weight: 600;
                  color: $text-secondary;
                  padding: 3px 9px;
                  border-radius: 6px;
                  cursor: pointer;
                  transition: all 0.15s ease;

                  &:hover {
                    color: $text-main;
                    background: rgb(var(--app-surface-rgb, 255 255 255) / 0.5);
                  }

                  &.active {
                    background: rgba(26, 115, 232, 0.92);
                    backdrop-filter: blur(10px);
                    -webkit-backdrop-filter: blur(10px);
                    color: #ffffff !important;
                    box-shadow: 0 2px 6px rgba(26, 115, 232, 0.3), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.35);
                  }
                }
              }
            }

            .install-bar-desc {
              font-size: 12px;
              color: $text-secondary;
              line-height: 1.4;
              margin-top: 2px;
            }
          }
        }

        .code-box {
          margin: 0;
          flex-shrink: 0;
        }

        @media (max-width: 860px) {
          flex-direction: column;
          align-items: stretch;
        }
      }

      /* 4-Item 2x2 Symmetric Matrix Grid */
      .env-matrix-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;

        @media (max-width: 640px) {
          grid-template-columns: 1fr;
        }

        .env-item-card {
          background: var(--app-surface, #ffffff);
          border: 1px solid $card-border;
          border-radius: 10px;
          padding: 12px 14px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 8px;
          transition: border-color 0.18s ease, box-shadow 0.18s ease;
          min-width: 0;

          &:hover {
            border-color: $card-border-hover;
          }

          .item-header {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;

            .item-icon-box {
              width: 32px;
              height: 32px;
              border-radius: 8px;
              background: var(--app-surface-soft, #f8fafc);
              border: 1px solid $card-border;
              color: $text-secondary;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;
              transition: all 0.15s ease;

              .item-icon {
                font-size: 17px;
              }
            }

            .item-title-group {
              display: flex;
              flex-direction: column;
              gap: 1px;
              flex: 1;
              min-width: 0;

              .item-name {
                font-size: 13px;
                font-weight: 600;
                color: $text-main;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }

              .item-subtitle {
                font-size: 11.5px;
                color: $text-muted;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .item-status {
              display: flex;
              align-items: center;
              margin-left: auto;
              flex-shrink: 0;

              .status-dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;

                &.dot-pass {
                  background: #10b981;
                }

                &.dot-fail {
                  background: #ef4444;
                }

                &.dot-warn {
                  background: #f59e0b;
                }
              }
            }
          }

          .item-body {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;

            .item-action-box {
              display: flex;
              flex-direction: column;
              gap: 4px;
              min-width: 0;
            }
          }

          &.item-fail {
            background: var(--app-error-soft, #fff8f8);
            border-color: $rose-border;

            .item-icon-box {
              background: $rose-light;
              color: var(--app-error-text, $rose);
              border-color: $rose-border;
            }
          }
        }
      }

      /* --------------------------------------------------------------------- */
      /* STEP 2: AI MODEL & CREDENTIALS CONFIGURATION                         */
      /* --------------------------------------------------------------------- */
      .model-choice-cards-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 12px;

        .choice-card {
          border: 1px solid $card-border;
          border-radius: 10px;
          padding: 14px 16px;
          background: var(--app-surface-soft, #f8fafc);
          cursor: pointer;
          transition: all 0.18s ease;
          user-select: none;

          .choice-card-top {
            display: flex;
            align-items: flex-start;
            gap: 12px;

            .choice-radio {
              margin-top: 2px;
              flex-shrink: 0;

              .radio-dot {
                display: block;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                border: 1.5px solid var(--app-border-control, #cbd5e1);
                background: var(--app-surface, #ffffff);
                transition: all 0.15s ease;

                &.checked {
                  border-color: $primary;
                  background: $primary;
                  box-shadow: inset 0 0 0 3px var(--app-highlight, #ffffff);
                }
              }
            }

            .choice-icon-wrap {
              width: 34px;
              height: 34px;
              border-radius: 8px;
              background: var(--app-surface, #ffffff);
              border: 1px solid $card-border;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;

              .brand-svg {
                width: 18px;
                height: 18px;
              }

              &.icon-gear {
                color: $text-secondary;

                .material-symbols-outlined {
                  font-size: 18px;
                }
              }
            }

            .choice-text {
              flex: 1;
              min-width: 0;

              .choice-title-row {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;

                .choice-title {
                  font-size: 13.5px;
                  font-weight: 600;
                  color: $text-main;
                }

                .tag-badge {
                  font-size: 10.5px;
                  font-weight: 600;
                  padding: 1px 7px;
                  border-radius: 10px;
                  line-height: 1.3;

                  &.tag-rec {
                    background: $primary-light;
                    color: var(--app-primary-text, $primary);
                    border: 1px solid $primary-border;
                  }

                  &.tag-ready {
                    background: $emerald-light;
                    color: var(--app-success-text, $emerald);
                    border: 1px solid $emerald-border;
                  }
                }
              }

              .choice-desc {
                margin: 3px 0 0 0;
                font-size: 12px;
                color: $text-secondary;
                line-height: 1.4;

                code {
                  font-family: $font-mono;
                  background: var(--app-surface, #ffffff);
                  border: 1px solid $card-border;
                  padding: 1px 4px;
                  border-radius: 4px;
                  color: var(--app-primary-text, $primary-dark);
                  font-size: 11px;
                }
              }
            }
          }

          &:hover:not(.selected) {
            border-color: $card-border-hover;
            background: var(--app-surface, #ffffff);
          }

          &.selected {
            border-color: $primary;
            background: var(--app-surface, #ffffff);
            box-shadow: 0 0 0 1px $primary;

            .choice-icon-wrap {
              border-color: $primary-border;

              &.icon-gear {
                color: var(--app-primary-text, $primary);
              }
            }
          }
        }
      }

      .credentials-input-box {
        background: var(--app-surface-soft, #f8fafc);
        border: 1px solid $card-border;
        border-radius: 10px;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        animation: fadeIn 0.15s ease-out;

        &.ocr-box {
          background: var(--app-surface, #ffffff);
          border: 1px solid $card-border;
        }

        .input-box-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 8px;

          .header-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12.5px;
            font-weight: 600;
            color: $text-main;

            .label-icon {
              font-size: 16px;
              color: var(--app-primary-text, $primary);
            }
          }

          .btn-header-link {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11.5px;
            font-weight: 600;
            color: var(--app-primary-text, $primary);
            text-decoration: none;
            padding: 3px 10px;
            height: 26px;
            background: rgb(var(--app-primary-soft-rgb, 239 246 255) / 0.75);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgb(var(--app-primary-border-rgb, 191 219 254) / 0.85);
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(37, 99, 235, 0.06), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.8);
            transition: all 0.15s ease;

            .material-symbols-outlined {
              font-size: 13px;
              color: var(--app-primary-text, $primary);
            }

            &:hover {
              background: rgb(var(--app-primary-soft-rgb, 219 234 254) / 0.9);
              color: var(--app-primary-text, $primary-dark);
              border-color: $primary;
              box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
              transform: translateY(-0.5px);
            }
          }
        }

        .unified-key-row {
          display: flex;
          align-items: center;
          gap: 8px;
          flex-wrap: wrap;

          .unified-key-wrapper {
            flex: 1 1 260px;
            min-width: 0;
            display: flex;
            align-items: center;
            background: rgb(var(--app-surface-rgb, 255 255 255) / 0.75);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid $card-border;
            border-radius: 8px;
            padding: 0 10px;
            height: 36px;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;

            &:focus-within {
              border-color: $primary;
              box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.12);
            }

            .key-prefix-icon {
              font-size: 16px;
              color: $text-light;
              margin-right: 6px;
              flex-shrink: 0;
            }

            .unified-key-input {
              flex: 1;
              min-width: 0;
              border: none;
              outline: none;
              font-family: $font-mono;
              font-size: 12.5px;
              color: $text-main;
              background: transparent;
              padding: 4px 0;

              &.is-masked {
                letter-spacing: 2px;
                font-weight: 700;
                font-size: 13px;
              }

              &::placeholder {
                color: $text-light;
                font-family: $font-sans;
                font-size: 12px;
                letter-spacing: normal;
                font-weight: normal;
              }
            }

            .btn-icon-action {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 26px;
              height: 26px;
              background: transparent;
              border: none;
              border-radius: 4px;
              color: $text-muted;
              cursor: pointer;
              transition: all 0.15s ease;
              flex-shrink: 0;

              .material-symbols-outlined {
                font-size: 15px;
              }

              .text-emerald {
                color: var(--app-success-text, $emerald) !important;
              }

              &:hover {
                background: rgb(var(--app-surface-soft-rgb, 241 245 249) / 0.8);
                color: $text-main;
              }
            }
          }

          .btn-unified-save {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 0 18px;
            height: 36px;
            @include glass-primary-btn;
            border-radius: 8px;
            font-family: inherit;
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;

            .material-symbols-outlined {
              font-size: 16px;
            }

            .spin {
              animation: spin 1s linear infinite;
            }
          }

          .btn-unified-test {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 0 15px;
            height: 36px;
            background: rgb(var(--app-primary-soft-rgb, 239 246 255) / 0.7);
            backdrop-filter: blur(14px) saturate(180%);
            -webkit-backdrop-filter: blur(14px) saturate(180%);
            color: var(--app-primary-text, $primary);
            border: 1px solid rgb(var(--app-primary-border-rgb, 191 219 254) / 0.85);
            border-radius: 8px;
            box-shadow: 0 2px 6px -1px rgba(37, 99, 235, 0.08), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.9);
            font-family: inherit;
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            white-space: nowrap;
            flex-shrink: 0;

            .material-symbols-outlined {
              font-size: 15px;
              color: var(--app-primary-text, $primary);
            }

            &:hover:not(:disabled) {
              background: rgb(var(--app-primary-soft-rgb, 219 234 254) / 0.9);
              border-color: $primary;
              color: var(--app-primary-text, $primary-dark);
              box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.15), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 1);
              transform: translateY(-0.5px);
            }

            &:active:not(:disabled) {
              transform: scale(0.97);
            }

            &:disabled {
              opacity: 0.55;
              cursor: not-allowed;
              transform: none;
            }

            .spin {
              animation: spin 1s linear infinite;
            }
          }
        }

        .feedback-msg {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 6px 10px;
          border-radius: 6px;
          font-size: 12px;
          font-weight: 600;

          .material-symbols-outlined {
            font-size: 15px;
          }

          &.success {
            background: $emerald-light;
            color: var(--app-success-text, $emerald-dark);
            border: 1px solid $emerald-border;
          }

          &.error {
            background: $rose-light;
            color: var(--app-error-text, $rose-dark);
            border: 1px solid $rose-border;
          }
        }
      }

      .ocr-enhancement-card {
        background: var(--app-surface, #ffffff);
        border: 1px solid $card-border;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 2px;
        transition: border-color 0.18s ease;

        .ocr-card-toggle-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 14px;
          background: var(--app-surface, #ffffff);
          cursor: pointer;
          user-select: none;
          transition: background 0.15s ease;

          &:hover {
            background: var(--app-surface-soft, #f8fafc);
          }

          .toggle-bar-left {
            display: flex;
            align-items: center;
            gap: 10px;

            .icon-ocr {
              font-size: 18px;
              color: var(--app-primary-text, $primary);
              flex-shrink: 0;
            }

            .toggle-bar-titles {
              display: flex;
              align-items: center;
              gap: 8px;

              .ocr-main-title {
                font-size: 13px;
                font-weight: 600;
                color: $text-main;
              }
            }
          }

          .toggle-bar-right {
            display: flex;
            align-items: center;
            gap: 10px;

            .status-dot {
              width: 7px;
              height: 7px;
              border-radius: 50%;

              &.dot-pass {
                background: #10b981;
              }
            }

            .caret-icon {
              font-size: 18px;
              color: $text-muted;
              flex-shrink: 0;
            }
          }
        }

        .ocr-content-body {
          padding: 12px 14px;
          border-top: 1px solid var(--app-border, #f1f5f9);
          display: flex;
          flex-direction: column;
          gap: 10px;
          background: var(--app-surface-soft, #f8fafc);
          animation: fadeIn 0.15s ease-out;

          .ocr-help-desc {
            margin: 0;
            font-size: 12px;
            color: $text-secondary;
            line-height: 1.45;
          }

          .credentials-input-box.ocr-box {
            margin: 0;
            padding: 12px;
            background: var(--app-surface, #ffffff);
            border: 1px solid $card-border;
            border-radius: 8px;
          }
        }
      }

      .custom-config-inspector {
        display: flex;
        flex-direction: column;
        gap: 12px;
        animation: fadeIn 0.15s ease-out;

        .inspector-card {
          background: var(--app-surface, #ffffff);
          border: 1px solid $card-border;
          border-radius: 10px;
          overflow: hidden;

          .inspector-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
            padding: 10px 14px;
            background: var(--app-surface, #ffffff);
            border-bottom: 1px solid var(--app-border, #f1f5f9);

            .inspector-header-left {
              display: flex;
              align-items: center;
              gap: 8px;

              .header-icon {
                font-size: 18px;
                color: var(--app-primary-text, $primary);
              }

              .inspector-header-titles {
                display: flex;
                flex-direction: column;

                .inspector-title {
                  font-size: 13px;
                  font-weight: 600;
                  color: $text-main;
                }

                .inspector-subtitle {
                  font-size: 11.5px;
                  color: $text-secondary;

                  code {
                    font-family: $font-mono;
                    background: var(--app-surface-soft, #f1f5f9);
                    padding: 1px 4px;
                    border-radius: 4px;
                    color: var(--app-primary-text, $primary-dark);
                  }
                }
              }
            }

            .inspector-header-actions {
              display: flex;
              align-items: center;
              gap: 6px;
            }

            .btn-file-action {
              display: inline-flex;
              align-items: center;
              gap: 4px;
              padding: 0 10px;
              height: 28px;
              @include glass-secondary-btn;
              border-radius: 6px;
              font-family: inherit;
              font-size: 11.5px;
              font-weight: 600;
              cursor: pointer;

              .material-symbols-outlined {
                font-size: 13px;
              }

              &.btn-toggle-code {
                background: rgb(var(--app-primary-soft-rgb, 239 246 255) / 0.75);
                color: var(--app-primary-text, $primary);
                border-color: rgb(var(--app-primary-border-rgb, 191 219 254) / 0.85);

                &:hover {
                  background: rgb(var(--app-primary-soft-rgb, 219 234 254) / 0.9);
                  color: var(--app-primary-text, $primary-dark);
                  border-color: $primary;
                }
              }
            }
          }

          .inspector-summary-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            padding: 12px 14px;
            background: var(--app-surface, #ffffff);

            .summary-metric {
              display: flex;
              flex-direction: column;
              gap: 4px;

              .metric-label {
                font-size: 10.5px;
                font-weight: 700;
                color: $text-muted;
                text-transform: uppercase;
                letter-spacing: 0.5px;
              }

              .metric-val-pill {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 4px 10px;
                background: var(--app-surface-soft, #f8fafc);
                border: 1px solid $card-border;
                border-radius: 6px;
                font-family: $font-mono;
                font-size: 12px;
                color: $text-main;

                .provider-dot {
                  width: 7px;
                  height: 7px;
                  border-radius: 50%;
                  background: $primary;
                }

                .provider-name {
                  font-weight: 700;
                  color: var(--app-primary-text, $primary);
                }

                .model-divider {
                  color: $text-light;
                }

                .model-name {
                  font-weight: 600;
                  color: $text-main;
                }

                &.secondary {
                  background: var(--app-surface-soft, #f8fafc);
                  color: $text-secondary;
                  font-size: 11.5px;
                }
              }
            }
          }

          .jsonc-viewer-box {
            border-top: 1px solid $card-border;
            background: #0f172a;
            max-height: 260px;
            overflow-y: auto;
            padding: 12px 14px;

            .jsonc-code {
              margin: 0;
              font-family: $font-mono;
              font-size: 11.5px;
              line-height: 1.5;
              color: #e2e8f0;
              white-space: pre-wrap;
              word-break: break-all;
            }
          }

          .env-keys-table {
            display: flex;
            flex-direction: column;

            .env-key-row {
              display: flex;
              align-items: center;
              justify-content: space-between;
              flex-wrap: wrap;
              gap: 8px;
              padding: 8px 14px;
              border-bottom: 1px solid var(--app-border, #f1f5f9);
              transition: background 0.12s ease;

              &:last-child {
                border-bottom: none;
              }

              &:hover {
                background: var(--app-surface-soft, #f8fafc);
              }

              .env-name-col {
                display: flex;
                align-items: center;
                gap: 8px;

                .env-key-name {
                  font-family: $font-mono;
                  font-size: 12px;
                  font-weight: 600;
                  color: $text-main;
                  background: var(--app-surface-soft, #f1f5f9);
                  padding: 2px 6px;
                  border-radius: 4px;
                }
              }

              .env-status-col {
                display: flex;
                align-items: center;

                .badge-env-pass {
                  display: inline-flex;
                  align-items: center;
                  gap: 4px;
                  font-size: 11px;
                  font-weight: 600;
                  color: var(--app-success-text, $emerald);
                  background: $emerald-light;
                  border: 1px solid $emerald-border;
                  padding: 2px 7px;
                  border-radius: 6px;

                  .material-symbols-outlined {
                    font-size: 13px;
                  }

                  .key-preview {
                    font-family: $font-mono;
                    font-size: 10.5px;
                    color: var(--app-success-text, $emerald-dark);
                    margin-left: 2px;
                  }
                }

                .badge-env-unset {
                  display: inline-flex;
                  align-items: center;
                  gap: 4px;
                  font-size: 11px;
                  font-weight: 600;
                  color: $text-light;
                  background: var(--app-surface-soft, #f8fafc);
                  border: 1px solid $card-border;
                  padding: 2px 7px;
                  border-radius: 6px;

                  .material-symbols-outlined {
                    font-size: 13px;
                  }
                }
              }
            }
          }
        }
      }

      /* --------------------------------------------------------------------- */
      /* STEP 3: ANDROID DEVICE & EMULATOR CONNECTION                          */
      /* --------------------------------------------------------------------- */
      .connected-device-panel {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .device-hero-card {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 16px 20px;
          background: var(--app-surface, #ffffff);
          border: 1px solid var(--app-border, #e2e8f0);
          border-radius: 12px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.02);
          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

          &:hover {
            border-color: var(--app-border-control, #cbd5e1);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 8px 18px rgba(0, 0, 0, 0.03);
          }

          .device-avatar {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: var(--app-surface-soft, #f1f5f9);
            border: 1px solid var(--app-border, #e2e8f0);
            color: var(--app-text-control, #334155);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.2s ease;

            .device-hero-icon {
              font-size: 22px;
              color: var(--app-text-control, #334155) !important;
            }
          }

          .device-hero-details {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
            flex: 1;

            .device-hero-name {
              font-size: 14.5px;
              font-weight: 600;
              color: $text-main;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              letter-spacing: -0.01em;
            }

            .device-hero-meta {
              display: flex;
              align-items: center;
              gap: 6px;
              font-size: 12px;
              color: $text-muted;
              flex-wrap: wrap;

              .meta-dot {
                color: $text-light;
              }

              .remote-endpoint-label {
                color: var(--app-primary-text, $primary);
                font-family: $font-mono;
                font-size: 11px;
              }
            }
          }

          .device-hero-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 500;
            color: var(--app-success-text, $emerald-dark);
            margin-left: auto;
            flex-shrink: 0;

            .status-dot {
              width: 7px;
              height: 7px;
              border-radius: 50%;
              background: #10b981;
              box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
              animation: statusDotPulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
            }
          }

        }

        .multi-device-switcher {
          display: flex;
          flex-direction: column;
          gap: 5px;

          .switcher-label {
            font-size: 11px;
            font-weight: 700;
            color: $text-muted;
            text-transform: uppercase;
            letter-spacing: 0.5px;
          }

          .switcher-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;

            .device-chip-btn {
              display: inline-flex;
              align-items: center;
              gap: 5px;
              padding: 0 10px;
              height: 30px;
              background: var(--app-surface, #ffffff);
              border: 1px solid $card-border;
              border-radius: 6px;
              font-family: inherit;
              font-size: 11.5px;
              font-weight: 600;
              color: $text-secondary;
              cursor: pointer;
              transition: all 0.15s ease;

              .chip-icon {
                font-size: 14px;
              }

              .active-check {
                color: var(--app-success-text, $emerald);
                font-size: 10.5px;
                font-weight: 700;
              }

              &.selected {
                background: $emerald-light;
                border-color: $emerald;
                color: var(--app-success-text, $emerald);
              }

              &:hover:not(.selected) {
                background: var(--app-surface-soft, #f8fafc);
                border-color: $card-border-hover;
              }
            }
          }
        }
      }

      /* Live Emulator Boot Tracker & Diagnostic Card */
      .emulator-boot-tracker-container,
      .emulator-failed-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 8px;
      }

      .emulator-boot-tracker-card {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px;
        background: linear-gradient(180deg, var(--app-surface, #ffffff) 0%, var(--app-surface-soft, #f8fafc) 100%);
        border: 1.5px solid rgba(37, 99, 235, 0.25);
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(37, 99, 235, 0.06);

        .tracker-header {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 16px;
          flex-wrap: wrap;

          .tracker-title-group {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            flex: 1;
            min-width: 260px;

            .tracker-icon-box {
              width: 36px;
              height: 36px;
              border-radius: 10px;
              background: rgba(37, 99, 235, 0.1);
              color: var(--app-primary-text, $primary);
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;

              .spinning-icon {
                font-size: 20px;
                animation: spin 1.2s linear infinite;
              }
            }

            .tracker-titles {
              display: flex;
              flex-direction: column;
              gap: 4px;

              .tracker-main-heading {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;

                .tracker-title {
                  margin: 0;
                  font-size: 15px;
                  font-weight: 700;
                  color: $text-main;

                  .avd-highlight {
                    color: var(--app-primary-text, $primary);
                    font-family: 'JetBrains Mono', monospace, sans-serif;
                  }
                }

                .stage-tag-badge {
                  display: inline-flex;
                  align-items: center;
                  padding: 2px 8px;
                  border-radius: 12px;
                  background: rgba(37, 99, 235, 0.12);
                  color: var(--app-primary-text, $primary);
                  font-size: 11px;
                  font-weight: 700;
                  text-transform: uppercase;
                  letter-spacing: 0.5px;
                }
              }

              .tracker-subtitle {
                margin: 0;
                font-size: 13px;
                color: $text-secondary;
                line-height: 1.4;
              }
            }
          }

          .tracker-actions {
            display: flex;
            align-items: center;
            gap: 8px;

            .btn-toggle-logs {
              display: inline-flex;
              align-items: center;
              gap: 6px;
              padding: 6px 13px;
              @include glass-secondary-btn;
              border-radius: 6px;
              font-size: 12px;
              font-weight: 600;
              cursor: pointer;

              .material-symbols-outlined {
                font-size: 15px;
              }

              &.active {
                background: rgb(var(--app-primary-soft-rgb, 239 246 255) / 0.9);
                color: var(--app-primary-text, $primary);
                border-color: rgba(37, 99, 235, 0.4);
                box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
              }
            }

            .btn-stop-emu {
              display: inline-flex;
              align-items: center;
              gap: 5px;
              padding: 6px 13px;
              background: rgb(var(--app-error-soft-rgb, 254 242 242) / 0.75);
              backdrop-filter: blur(12px);
              -webkit-backdrop-filter: blur(12px);
              border: 1px solid rgb(var(--app-error-border-rgb, 254 202 202) / 0.85);
              border-radius: 6px;
              color: var(--app-error-text, $rose);
              font-size: 12px;
              font-weight: 600;
              cursor: pointer;
              box-shadow: 0 1px 3px rgba(220, 38, 38, 0.06), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.8);
              transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

              .material-symbols-outlined {
                font-size: 15px;
              }

              &:hover {
                background: rgb(var(--app-error-soft-rgb, 254 226 226) / 0.95);
                border-color: $rose;
                box-shadow: 0 4px 12px -2px rgba(220, 38, 38, 0.15);
                transform: translateY(-0.5px);
              }

              &:active {
                transform: scale(0.97);
              }
            }
          }
        }

        /* Boot Stepper */
        .boot-stepper {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 14px;
          background: var(--app-surface, #ffffff);
          border: 1px solid $card-border;
          border-radius: 8px;

          .step-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 600;
            color: $text-muted;

            .step-circle {
              width: 22px;
              height: 22px;
              border-radius: 50%;
              background: var(--app-surface-soft, #f1f5f9);
              border: 1.5px solid $card-border;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 11px;
              font-weight: 700;
              color: $text-muted;
              transition: all 0.2s ease;

              .check-icon {
                font-size: 14px;
                color: #ffffff;
              }

              .spinner-tiny {
                width: 11px;
                height: 11px;
                border: 2px solid rgba(37, 99, 235, 0.3);
                border-top-color: $primary;
                border-radius: 50%;
                animation: spin 0.8s linear infinite;
              }
            }

            .step-label {
              white-space: nowrap;
            }

            &.active {
              color: var(--app-primary-text, $primary);

              .step-circle {
                border-color: $primary;
                background: rgba(37, 99, 235, 0.1);
                color: var(--app-primary-text, $primary);
              }
            }

            &.done {
              color: var(--app-success-text, $emerald);

              .step-circle {
                border-color: $emerald;
                background: $emerald;
                color: #ffffff;
              }
            }
          }

          .step-line {
            flex: 1;
            height: 2px;
            background: $card-border;
            margin: 0 10px;
            border-radius: 2px;
            transition: all 0.3s ease;

            &.done {
              background: $emerald;
            }
          }
        }

        /* Progress Bar */
        .progress-bar-container {
          display: flex;
          flex-direction: column;
          gap: 6px;

          .progress-bar-track {
            width: 100%;
            height: 8px;
            background: var(--app-surface-raised, #e2e8f0);
            border-radius: 6px;
            overflow: hidden;

            .progress-bar-fill {
              height: 100%;
              background: linear-gradient(90deg, #3b82f6 0%, #10b981 100%);
              border-radius: 6px;
              transition: width 0.4s ease;
            }
          }

          .progress-bar-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            font-weight: 600;

            .progress-percent {
              color: var(--app-primary-text, $primary);
            }

            .progress-timer {
              display: flex;
              align-items: center;
              gap: 4px;
              color: $text-secondary;

              .timer-icon {
                font-size: 14px;
              }
            }
          }
        }

        /* Tip Banner */
        .boot-tip-banner {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 12px;
          background: rgba(37, 99, 235, 0.05);
          border-left: 3px solid $primary;
          border-radius: 0 6px 6px 0;
          font-size: 12px;
          color: $text-secondary;

          .tip-icon {
            font-size: 16px;
            color: var(--app-primary-text, $primary);
            flex-shrink: 0;
          }
        }

        /* Logs Drawer */
        .boot-logs-drawer {
          display: flex;
          flex-direction: column;
          border: 1px solid var(--app-border-control, #1e293b);
          border-radius: 8px;
          background: #0f172a;
          overflow: hidden;

          .logs-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            background: #1e293b;
            color: var(--app-text-faint, #94a3b8);
            font-size: 12px;
            font-weight: 600;

            .logs-header-left {
              display: flex;
              align-items: center;
              gap: 6px;

              .material-symbols-outlined {
                font-size: 14px;
              }
            }

            .btn-copy-logs {
              display: inline-flex;
              align-items: center;
              gap: 4px;
              padding: 2px 8px;
              background: #334155;
              border: none;
              border-radius: 4px;
              color: #f8fafc;
              font-size: 11px;
              font-weight: 600;
              cursor: pointer;

              .material-symbols-outlined {
                font-size: 12px;
              }

              &:hover {
                background: #475569;
              }
            }
          }

          .logs-body {
            margin: 0;
            padding: 12px;
            max-height: 180px;
            overflow-y: auto;
            font-family: 'JetBrains Mono', monospace, sans-serif;
            font-size: 11px;
            line-height: 1.5;
            color: #cbd5e1;
            white-space: pre-wrap;
            word-break: break-all;

            .log-line {
              margin-bottom: 2px;
            }

            .log-empty {
              color: var(--app-text-muted, #64748b);
              font-style: italic;
            }
          }
        }
      }

      /* Failed Diagnostic Card */
      .emulator-failed-card {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 18px 20px;
        background: var(--app-error-soft, #fff8f8);
        border: 1.5px solid rgba(239, 68, 68, 0.3);
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.06);

        .failed-header {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 12px;

          .failed-header-left {
            display: flex;
            align-items: flex-start;
            gap: 12px;

            .failed-icon-box {
              width: 34px;
              height: 34px;
              border-radius: 8px;
              background: rgba(239, 68, 68, 0.12);
              color: var(--app-error-text, $rose);
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;

              .failed-icon {
                font-size: 20px;
              }
            }

            .failed-titles {
              display: flex;
              flex-direction: column;
              gap: 2px;

              .failed-title {
                margin: 0;
                font-size: 15px;
                font-weight: 700;
                color: var(--app-error-text, $rose);
              }

              .failed-desc {
                margin: 0;
                font-size: 13px;
                color: $text-main;
                line-height: 1.4;
              }
            }
          }

          .btn-dismiss-failed {
            background: transparent;
            border: none;
            color: $text-muted;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;

            &:hover {
              background: rgba(0, 0, 0, 0.05);
              color: $text-main;
            }
          }
        }

        .failed-logs-box {
          display: flex;
          flex-direction: column;
          background: #1e1e2e;
          border-radius: 8px;
          overflow: hidden;

          .logs-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 12px;
            background: #282a36;
            color: var(--app-error-text, #ff5555);
            font-size: 11px;
            font-weight: 600;

            .btn-copy-logs {
              display: inline-flex;
              align-items: center;
              gap: 4px;
              padding: 2px 6px;
              background: #44475a;
              border: none;
              border-radius: 4px;
              color: #f8fafc;
              font-size: 10px;
              cursor: pointer;
            }
          }

          .failed-logs-pre {
            margin: 0;
            padding: 10px 12px;
            max-height: 120px;
            overflow-y: auto;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            line-height: 1.4;
            color: var(--app-warning-text, #f8f8f2);
            white-space: pre-wrap;
          }
        }

        .failed-actions-bar {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;

          .btn-retry-launch {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 16px;
            @include glass-primary-btn;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;

            .material-symbols-outlined {
              font-size: 15px;
            }
          }

          .btn-restart-adb-sub {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            @include glass-secondary-btn;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;

            .material-symbols-outlined {
              font-size: 15px;
            }
          }

          .btn-dismiss-flat {
            background: transparent;
            border: none;
            color: $text-secondary;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            padding: 6px 10px;

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }

      /* Foolproof Connection Guide Tabs */
      .foolproof-guide-container {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .connection-methods-nav {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 10px;

          @media (max-width: 1100px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }

          @media (max-width: 620px) {
            grid-template-columns: 1fr;
          }

          .method-nav-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            background: var(--app-surface-soft, #f8fafc);
            border: 1px solid $card-border;
            border-radius: 10px;
            cursor: pointer;
            text-align: left;
            transition: all 0.18s ease;
            outline: none;
            min-width: 0;

            .method-card-left {
              display: flex;
              align-items: center;
              gap: 10px;
              flex: 1;
              min-width: 0;

              .method-icon-box {
                width: 32px;
                height: 32px;
                border-radius: 8px;
                background: var(--app-surface, #ffffff);
                border: 1px solid $card-border;
                color: $text-secondary;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                transition: all 0.15s ease;

                .material-symbols-outlined {
                  font-size: 17px;
                }
              }

              .method-info {
                display: flex;
                flex-direction: column;
                gap: 1px;
                min-width: 0;
                flex: 1;

                .method-title-row {
                  display: flex;
                  align-items: center;

                  .method-title {
                    font-size: 13px;
                    font-weight: 600;
                    color: $text-main;
                  }
                }

                .method-desc {
                  font-size: 11.5px;
                  color: $text-muted;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  min-width: 0;
                }
              }
            }

            .method-card-right {
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;
              margin-left: 8px;

              .radio-indicator {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                border: 1.5px solid var(--app-border-control, #cbd5e1);
                background: var(--app-surface, #ffffff);
                transition: all 0.15s ease;

                &.checked {
                  border-color: $primary;
                  background: $primary;
                  box-shadow: inset 0 0 0 3px var(--app-highlight, #ffffff);
                }
              }
            }

            &.active {
              background: var(--app-surface, #ffffff);
              border-color: $primary;
              box-shadow: 0 0 0 1px $primary;

              .method-icon-box {
                background: $primary-light;
                color: var(--app-primary-text, $primary);
                border-color: $primary-border;
              }

              .method-title {
                color: var(--app-primary-text, $primary);
              }
            }

            &:hover:not(.active) {
              background: var(--app-surface, #ffffff);
              border-color: $card-border-hover;
            }
          }
        }

        .active-remote-notice {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          padding: 10px 12px;
          background: var(--app-warning-soft, #fffbeb);
          border: 1px solid $amber-border;
          border-radius: 8px;

          .active-remote-copy {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            color: var(--app-warning-text, #78350f);
            font-size: 11.5px;
            line-height: 1.45;

            .material-symbols-outlined {
              color: var(--app-warning-text, $amber);
              font-size: 17px;
              flex-shrink: 0;
            }

            strong {
              font-family: $font-mono;
              font-weight: 600;
            }
          }

          .btn-use-local-adb {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            min-height: 32px;
            padding: 0 12px;
            @include glass-secondary-btn;
            border-radius: 6px;
            font-family: inherit;
            font-size: 11.5px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;

            .material-symbols-outlined {
              font-size: 15px;
            }
          }

          @media (max-width: 700px) {
            align-items: stretch;
            flex-direction: column;

            .btn-use-local-adb {
              width: 100%;
            }
          }

        }

        .method-details-panel {
          background: var(--app-surface, #ffffff);
          border: 1px solid $card-border;
          border-radius: 10px;
          padding: 14px 16px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          animation: fadeIn 0.15s ease-out;

          .avds-section {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .section-header-bar {
              display: flex;
              align-items: center;
              justify-content: space-between;
              flex-wrap: wrap;
              gap: 6px;
              padding-bottom: 6px;
              border-bottom: 1px solid var(--app-border, #f1f5f9);

              .section-title-group {
                display: flex;
                align-items: center;
                gap: 6px;

                .header-icon {
                  font-size: 17px;
                  color: var(--app-primary-text, $primary);
                }

                .section-title {
                  font-size: 13px;
                  font-weight: 600;
                  color: $text-main;
                }

                .count-badge {
                  font-size: 10.5px;
                  font-weight: 600;
                  padding: 1.5px 6px;
                  border-radius: 6px;
                  background: var(--app-surface-soft, #f1f5f9);
                  color: $text-secondary;
                }
              }
            }

            .avds-list {
              display: flex;
              flex-direction: column;
              gap: 8px;

              .avd-card-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 8px 12px;
                background: var(--app-surface-soft, #f8fafc);
                border: 1px solid $card-border;
                border-radius: 8px;
                gap: 12px;
                min-width: 0;
                transition: all 0.15s ease;

                &:hover {
                  border-color: $card-border-hover;
                  background: var(--app-surface, #ffffff);
                }

                .avd-item-main {
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  flex: 1;
                  min-width: 0;

                  .avd-avatar {
                    width: 32px;
                    height: 32px;
                    border-radius: 6px;
                    background: var(--app-surface, #ffffff);
                    border: 1px solid $card-border;
                    color: var(--app-primary-text, $primary);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;

                    .material-symbols-outlined {
                      font-size: 17px;
                    }
                  }

                  .avd-meta {
                    display: flex;
                    flex-direction: column;
                    gap: 1px;
                    flex: 1;
                    min-width: 0;

                    .avd-heading {
                      display: flex;
                      align-items: center;
                      gap: 6px;
                      min-width: 0;

                      .avd-name {
                        font-size: 13px;
                        font-weight: 600;
                        color: $text-main;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      }

                      .avd-type-pill {
                        font-size: 9.5px;
                        font-weight: 600;
                        padding: 1px 5px;
                        border-radius: 4px;
                        background: var(--app-surface, #ffffff);
                        border: 1px solid $card-border;
                        color: $text-muted;
                        flex-shrink: 0;
                      }
                    }
                  }
                }

                .avd-item-actions {
                  display: flex;
                  align-items: center;
                  gap: 6px;
                  flex-shrink: 0;

                  .btn-avd-launch {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: 4px;
                    padding: 0 15px;
                    height: 30px;
                    @include glass-primary-btn;
                    border-radius: 6px;
                    font-family: inherit;
                    font-size: 12px;
                    font-weight: 600;
                    cursor: pointer;

                    .action-icon {
                      font-size: 15px;
                    }

                    .spinner-icon {
                      width: 13px;
                      height: 13px;
                      border: 2px solid rgb(var(--app-border-rgb, 255 255 255) / 0.4);
                      border-top-color: var(--app-border, #ffffff);
                      border-radius: 50%;
                      animation: spin 0.8s linear infinite;
                    }
                  }
                }
              }
            }
          }

          .emulator-setup-guide-container {
            display: flex;
            flex-direction: column;
            gap: 12px;

            .empty-avd-banner {
              display: flex;
              align-items: center;
              justify-content: space-between;
              flex-wrap: wrap;
              gap: 12px;
              padding: 12px 14px;
              background: var(--app-surface-soft, #f8fafc);
              border: 1px solid $card-border;
              border-radius: 8px;

              .banner-left {
                display: flex;
                align-items: center;
                gap: 10px;

                .empty-avd-icon-box {
                  width: 34px;
                  height: 34px;
                  border-radius: 6px;
                  background: var(--app-surface, #ffffff);
                  border: 1px solid $card-border;
                  color: $text-muted;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-shrink: 0;

                  .material-symbols-outlined {
                    font-size: 19px;
                  }
                }

                .banner-titles {
                  .banner-title-row {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    flex-wrap: wrap;

                    .empty-title {
                      margin: 0;
                      font-size: 13px;
                      font-weight: 600;
                      color: $text-main;
                    }
                  }

                  .empty-desc {
                    margin: 2px 0 0;
                    font-size: 12px;
                    color: $text-secondary;
                  }
                }
              }

              .mode-switch-pills {
                display: inline-flex;
                background: var(--app-surface, #ffffff);
                border: 1px solid $card-border;
                padding: 2px;
                border-radius: 6px;
                gap: 2px;

                .pill-btn {
                  display: inline-flex;
                  align-items: center;
                  gap: 4px;
                  padding: 3px 8px;
                  border-radius: 4px;
                  border: none;
                  background: transparent;
                  color: $text-secondary;
                  font-family: inherit;
                  font-size: 11.5px;
                  font-weight: 600;
                  cursor: pointer;
                  transition: all 0.15s ease;

                  .pill-icon {
                    font-size: 14px;
                  }

                  &:hover {
                    color: $text-main;
                  }

                  &.active {
                    background: $primary;
                    color: #ffffff;
                  }
                }
              }
            }

            .emu-flow-grid {
              .flow-step-card {
                .guide-link {
                  color: var(--app-primary-text, $primary);
                  font-weight: 600;
                  text-decoration: none;
                  &:hover {
                    text-decoration: underline;
                  }
                }
              }
            }

            .cli-steps-list {
              display: flex;
              flex-direction: column;
              gap: 8px;

              .cli-step-item {
                display: flex;
                align-items: flex-start;
                gap: 10px;
                padding: 10px 12px;
                background: var(--app-surface-soft, #f8fafc);
                border: 1px solid $card-border;
                border-radius: 8px;

                .step-badge-num {
                  width: 22px;
                  height: 22px;
                  border-radius: 50%;
                  background: $primary-light;
                  color: var(--app-primary-text, $primary);
                  font-size: 11.5px;
                  font-weight: 700;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-shrink: 0;
                  margin-top: 1px;
                }

                .step-content {
                  flex: 1;
                  min-width: 0;
                  display: flex;
                  flex-direction: column;
                  gap: 3px;

                  .step-title {
                    font-size: 12.5px;
                    font-weight: 600;
                    color: $text-main;
                  }

                  .step-text {
                    margin: 0;
                    font-size: 11.5px;
                    color: $text-secondary;
                  }

                  .small-box {
                    margin-top: 4px;
                  }
                }
              }
            }
          }

          .usb-guide-intro,
          .wifi-guide-intro,
          .remote-guide-intro {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12.5px;
            font-weight: 600;
            color: $text-secondary;

            .intro-icon {
              font-size: 17px;
              color: var(--app-primary-text, $primary);
            }
          }

          /* USB Steps Flow Grid */
          .steps-flow-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;

            @media (max-width: 900px) {
              grid-template-columns: repeat(2, 1fr);
            }

            @media (max-width: 520px) {
              grid-template-columns: 1fr;
            }

            .flow-step-card {
              background: var(--app-surface-soft, #f8fafc);
              border: 1px solid $card-border;
              border-radius: 8px;
              padding: 12px 14px;
              display: flex;
              flex-direction: column;
              gap: 6px;
              min-width: 0;
              transition: all 0.15s ease;

              &:hover {
                border-color: $card-border-hover;
                background: var(--app-surface, #ffffff);
              }

              .step-card-header {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .step-number-badge {
                  width: 20px;
                  height: 20px;
                  border-radius: 4px;
                  background: $primary;
                  color: #ffffff !important;
                  font-size: 11px;
                  font-weight: 700;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }

                .step-card-icon {
                  font-size: 17px;
                  color: $text-light;
                }
              }

              .step-card-title {
                font-size: 12.5px;
                font-weight: 600;
                color: $text-main;
              }

              .step-card-desc {
                font-size: 11.5px;
                color: $text-muted;
                line-height: 1.4;
              }
            }
          }

          /* Interactive Wi-Fi Form Box */
          .wifi-interactive-box {
            background: var(--app-surface-soft, #f8fafc);
            border: 1px solid $card-border;
            border-radius: 8px;
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;

            .wifi-form-row {
              display: flex;
              align-items: flex-end;
              gap: 8px;
              flex-wrap: wrap;

              .wifi-input-col {
                display: flex;
                flex-direction: column;
                gap: 3px;
                min-width: 0;

                &.ip-col {
                  flex: 1 1 180px;
                }

                &.port-col {
                  flex: 0 1 90px;
                }

                .wifi-label {
                  font-size: 11px;
                  font-weight: 600;
                  color: $text-muted;
                }

                .wifi-input-wrap {
                  display: flex;
                  align-items: center;
                  background: var(--app-surface, #ffffff);
                  border: 1px solid $card-border;
                  border-radius: 6px;
                  padding: 0 8px;
                  height: 34px;
                  transition: border-color 0.15s ease;

                  &:focus-within {
                    border-color: $primary;
                    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
                  }

                  .wrap-icon {
                    font-size: 15px;
                    color: $text-light;
                    margin-right: 5px;
                    flex-shrink: 0;
                  }

                  .wifi-input {
                    flex: 1;
                    min-width: 0;
                    border: none;
                    outline: none;
                    background: transparent;
                    font-family: $font-mono;
                    font-size: 12px;
                    color: $text-main;

                    &::placeholder {
                      color: $text-light;
                      font-family: $font-sans;
                      font-size: 11.5px;
                    }
                  }
                }
              }

              .wifi-btn-col {
                flex-shrink: 0;

                .btn-wifi-connect {
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  gap: 4px;
                  padding: 0 16px;
                  height: 34px;
                  @include glass-primary-btn;
                  border-radius: 6px;
                  font-family: inherit;
                  font-size: 12px;
                  font-weight: 600;
                  cursor: pointer;
                  white-space: nowrap;

                  .material-symbols-outlined {
                    font-size: 16px;
                  }

                  .spinning {
                    animation: spin 1s linear infinite;
                  }
                }
              }
            }

            .wifi-status-alert {
              display: flex;
              align-items: center;
              gap: 6px;
              padding: 6px 10px;
              border-radius: 6px;
              font-size: 11.5px;
              font-weight: 600;

              .material-symbols-outlined {
                font-size: 15px;
              }

              &.success {
                background: $emerald-light;
                color: var(--app-success-text, $emerald-dark);
                border: 1px solid $emerald-border;
              }

              &.error {
                background: $rose-light;
                color: var(--app-error-text, $rose-dark);
                border: 1px solid $rose-border;
              }
            }
          }

          .info-callout-box {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 8px 12px;
            background: $primary-light;
            border: 1px solid $primary-border;
            border-radius: 6px;
            font-size: 11.5px;
            color: var(--app-primary-text, $primary-dark);
            line-height: 1.45;

            .callout-icon {
              font-size: 16px;
              color: var(--app-primary-text, $primary);
              flex-shrink: 0;
              margin-top: 1px;
            }
          }

          &.remote-adb-panel {
            .remote-adb-interactive-box {
              display: flex;
              flex-direction: column;
              gap: 10px;
              padding: 12px 14px;
              background: var(--app-surface-soft, #f8fafc);
              border: 1px solid $card-border;
              border-radius: 8px;

              .remote-adb-form-row {
                display: flex;
                align-items: flex-end;
                gap: 8px;
                flex-wrap: wrap;

                .remote-adb-input-col {
                  display: flex;
                  flex-direction: column;
                  gap: 3px;
                  min-width: 0;

                  &.host-col {
                    flex: 1 1 220px;
                  }

                  &.port-col {
                    flex: 0 1 120px;
                  }

                  .remote-adb-label {
                    color: $text-muted;
                    font-size: 11px;
                    font-weight: 600;
                  }

                  .remote-adb-input-wrap {
                    display: flex;
                    align-items: center;
                    height: 36px;
                    padding: 0 9px;
                    background: var(--app-surface, #ffffff);
                    border: 1px solid $card-border;
                    border-radius: 6px;
                    transition: border-color 0.15s ease, box-shadow 0.15s ease;

                    &:focus-within {
                      border-color: $primary;
                      box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
                    }

                    .wrap-icon {
                      margin-right: 6px;
                      color: $text-light;
                      font-size: 15px;
                      flex-shrink: 0;
                    }

                    .remote-adb-input {
                      flex: 1;
                      min-width: 0;
                      border: 0;
                      outline: 0;
                      background: transparent;
                      color: $text-main;
                      font-family: $font-mono;
                      font-size: 12px;

                      &::placeholder {
                        color: $text-light;
                      }
                    }
                  }
                }

                .remote-adb-btn-col {
                  flex-shrink: 0;

                  .btn-remote-adb-connect {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: 5px;
                    height: 36px;
                    padding: 0 16px;
                    @include glass-primary-btn;
                    border-radius: 6px;
                    font-family: inherit;
                    font-size: 12px;
                    font-weight: 600;
                    cursor: pointer;
                    white-space: nowrap;

                    .material-symbols-outlined {
                      font-size: 16px;
                    }
                  }
                }

                @media (max-width: 640px) {
                  align-items: stretch;
                  flex-direction: column;

                  .remote-adb-input-col,
                  .remote-adb-input-col.host-col,
                  .remote-adb-input-col.port-col,
                  .remote-adb-btn-col {
                    flex: 1 1 auto;
                    width: 100%;
                  }

                  .remote-adb-btn-col .btn-remote-adb-connect {
                    width: 100%;
                  }
                }
              }

              .remember-remote-adb {
                display: inline-flex;
                align-items: center;
                align-self: flex-start;
                gap: 7px;
                color: $text-secondary;
                font-size: 11.5px;
                cursor: pointer;

                input {
                  width: 15px;
                  height: 15px;
                  margin: 0;
                  accent-color: $primary;
                }
              }

              .btn-use-tested-endpoint {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                align-self: flex-end;
                gap: 5px;
                min-width: 150px;
                height: 36px;
                padding: 0 16px;
                @include glass-primary-btn;
                border-radius: 6px;
                font-family: inherit;
                font-size: 12px;
                font-weight: 600;
                cursor: pointer;

                .material-symbols-outlined {
                  font-size: 16px;
                }
              }

              .remote-adb-status-alert {
                display: flex;
                align-items: flex-start;
                gap: 6px;
                padding: 7px 10px;
                border-radius: 6px;
                font-size: 11.5px;
                font-weight: 600;
                line-height: 1.4;

                .material-symbols-outlined {
                  font-size: 15px;
                  flex-shrink: 0;
                }

                &.success {
                  color: var(--app-success-text, $emerald-dark);
                  background: $emerald-light;
                  border: 1px solid $emerald-border;
                }

                &.error {
                  color: var(--app-error-text, $rose-dark);
                  background: $rose-light;
                  border: 1px solid $rose-border;
                }
              }

              .remote-device-results {
                display: flex;
                flex-direction: column;
                overflow: hidden;
                background: var(--app-surface, #ffffff);
                border: 1px solid $card-border;
                border-radius: 7px;

                .remote-device-row {
                  display: flex;
                  align-items: center;
                  gap: 9px;
                  min-width: 0;
                  padding: 8px 10px;
                  border-bottom: 1px solid var(--app-border, #f1f5f9);

                  &:last-child {
                    border-bottom: 0;
                  }

                  > .material-symbols-outlined {
                    color: var(--app-primary-text, $primary);
                    font-size: 17px;
                  }

                  .remote-device-copy {
                    display: flex;
                    flex: 1;
                    flex-direction: column;
                    min-width: 0;

                    strong {
                      color: $text-main;
                      font-size: 12px;
                      font-weight: 600;
                    }

                    span {
                      overflow: hidden;
                      color: $text-muted;
                      font-family: $font-mono;
                      font-size: 10.5px;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    }
                  }

                  .remote-device-state {
                    color: var(--app-warning-text, $amber-dark);
                    font-size: 10.5px;
                    font-weight: 600;
                    text-transform: capitalize;

                    &.ready {
                      color: var(--app-success-text, $emerald-dark);
                    }
                  }
                }
              }
            }

            .remote-adb-explanation {
              margin: 0;
              color: $text-muted;
              font-size: 11.5px;
              line-height: 1.5;
            }
          }
        }
      }

      /* State C: Locked / Unauthorized Device Panels */
      .unauthorized-panel,
      .device-locked-panel {
        .unauthorized-card,
        .device-locked-card {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px 16px;
          background: $amber-light;
          border: 1px solid $amber-border;
          border-radius: 10px;

          .alert-icon {
            font-size: 24px;
            color: var(--app-warning-text, $amber);
            flex-shrink: 0;
          }

          .unauth-details,
          .locked-details {
            flex: 1;
            min-width: 0;

            .unauth-title,
            .locked-title {
              font-size: 13px;
              font-weight: 600;
              color: var(--app-warning-text, $amber-dark);
              margin-bottom: 2px;
            }

            .unauth-desc,
            .locked-desc {
              font-size: 11.5px;
              color: var(--app-warning-text, #78350f);
              line-height: 1.4;
            }
          }

          .btn-retry-auth,
          .btn-check-unlock {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 0 12px;
            height: 30px;
            background: rgb(var(--app-warning-soft-rgb, 254 243 199) / 0.75);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgb(var(--app-warning-border-rgb, 253 230 138) / 0.85);
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(217, 119, 6, 0.08), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.8);
            font-family: inherit;
            font-size: 11.5px;
            font-weight: 600;
            color: var(--app-warning-text, $amber-dark);
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

            &:hover:not(:disabled) {
              background: rgba(253, 230, 138, 0.95);
              border-color: $amber;
              transform: translateY(-0.5px);
              box-shadow: 0 3px 8px rgba(217, 119, 6, 0.15);
            }

            &:active {
              transform: scale(0.97);
            }

            &:disabled {
              cursor: not-allowed;
              opacity: 0.65;
            }
          }
        }
      }

      /* State D: ADB Missing Panel */
      .adb-missing-panel {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .error-msg-box {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 12px;
          background: $rose-light;
          border: 1px solid $rose-border;
          border-radius: 8px;
          font-size: 12px;
          color: var(--app-error-text, $rose-dark);

          .err-icon {
            font-size: 17px;
            flex-shrink: 0;
          }
        }

        .install-commands-row {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
          gap: 8px;

          .install-card {
            background: var(--app-surface-soft, #f8fafc);
            border: 1px solid $card-border;
            border-radius: 8px;
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            transition: all 0.15s ease;

            &.highlight-os {
              background: $primary-light;
              border-color: $primary-border;
            }

            .install-os {
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 11.5px;
              font-weight: 600;
              color: $text-secondary;

              .detected-badge {
                font-size: 9.5px;
                font-weight: 700;
                color: var(--app-primary-text, $primary);
                background: var(--app-primary-soft, #dbeafe);
                padding: 1px 5px;
                border-radius: 4px;
                text-transform: uppercase;
              }
            }
          }
        }
      }

      /* Ready Banner Footer: Consistent with guide-card design system */
      .ready-banner-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 20px;
        background: var(--app-surface, #ffffff);
        border: 1px solid $card-border;
        border-radius: 12px;
        box-shadow: $card-shadow;
        transition: all 0.2s ease;

        &:hover {
          border-color: $card-border-hover;
        }

        .ready-banner-left {
          display: flex;
          align-items: center;
          gap: 14px;
          min-width: 0;
          flex: 1;

          .step-badge {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13.5px;
            font-weight: 700;
            background: var(--app-surface-soft, #f1f5f9);
            color: $text-secondary;
            flex-shrink: 0;

            .step-check-icon {
              font-size: 18px;
              font-weight: 700;
              color: inherit;
            }

            &.step-pass {
              background: $emerald-light;
              color: var(--app-success-text, $emerald);
            }
          }

          .ready-text-group {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;

            .ready-title {
              margin: 0;
              font-size: 15px;
              font-weight: 600;
              color: $text-main;
              letter-spacing: -0.01em;
            }

            .ready-desc {
              margin: 0;
              font-size: 12.5px;
              color: $text-secondary;
              line-height: 1.4;
            }
          }
        }

        .btn-proceed-launch {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 0 18px;
          height: 36px;
          @include glass-primary-btn;
          border-radius: 8px;
          font-family: inherit;
          font-size: 13px;
          font-weight: 600;
          cursor: pointer;
          white-space: nowrap;
          flex-shrink: 0;

          .rocket-icon {
            font-size: 16px;
            transition: transform 0.2s ease;
          }

          &:hover:not(:disabled) {
            .rocket-icon {
              transform: translateX(2px) translateY(-2px);
            }
          }
        }

        @media (max-width: 768px) {
          flex-direction: column;
          align-items: stretch;

          .btn-proceed-launch {
            justify-content: center;
          }
        }
      }

    }

    /* ======================================================================= */
    /* SHARED CODE BOX & TERMINAL SNIPPET STYLES                               */
    /* ======================================================================= */
    .code-box {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 0 6px 0 10px;
      height: 32px;
      background: #0f172a;
      color: #f8fafc;
      border-radius: 6px;
      font-family: $font-mono;
      font-size: 11.5px;
      min-width: 0;
      max-width: 100%;

      .terminal-prefix {
        color: var(--app-text-muted, #64748b);
        user-select: none;
        flex-shrink: 0;
        font-weight: 700;
        font-size: 11px;
      }

      .code-text, code {
        flex: 1;
        min-width: 0;
        color: var(--app-info-text, #38bdf8) !important;
        font-family: inherit;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        font-size: inherit;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .btn-copy-code {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 0 8px;
        height: 22px;
        background: rgb(var(--app-surface-rgb, 255 255 255) / 0.14);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: #ffffff !important;
        border: 1px solid rgb(var(--app-border-rgb, 255 255 255) / 0.2);
        border-radius: 5px;
        box-shadow: inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.2);
        font-family: $font-sans;
        font-size: 10.5px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.18s ease;
        flex-shrink: 0;

        .material-symbols-outlined, span {
          color: #ffffff !important;
        }

        .material-symbols-outlined {
          font-size: 12px;
        }

        &:hover {
          background: rgb(var(--app-surface-rgb, 255 255 255) / 0.26);
          border-color: rgb(var(--app-border-rgb, 255 255 255) / 0.35);
          transform: translateY(-0.5px);
        }

        &:active {
          transform: scale(0.96);
        }

        &.copied {
          background: rgba(16, 185, 129, 0.35);
          backdrop-filter: blur(8px);
          border-color: rgba(16, 185, 129, 0.6);
          color: var(--app-success-text, #34d399) !important;
          box-shadow: 0 0 10px rgba(16, 185, 129, 0.3), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.4);

          .material-symbols-outlined, span {
            color: var(--app-success-text, #34d399) !important;
          }
        }
      }

      &.small-box {
        height: 30px;
        font-size: 11.5px;
        padding: 0 6px 0 10px;

        .btn-copy-code {
          height: 22px;
          padding: 0 8px;
          font-size: 10.5px;

          .material-symbols-outlined {
            font-size: 12px;
          }
        }
      }
    }

    /* ======================================================================= */
    /* VIEW 2: TASK LAUNCHER (UNIFIED SCULPTURED COMPOSER SURFACE)             */
    /* ======================================================================= */
    .task-launcher-view {
      display: flex;
      flex-direction: column;
      gap: 12px;
      animation: fadeIn 0.22s cubic-bezier(0.4, 0, 0.2, 1);

      .launcher-warning-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        background: var(--app-warning-soft, #fffbeb);
        border: 1px solid var(--app-warning-border, #fde68a);
        border-radius: 12px;
        color: var(--app-warning-text, #92400e);
        font-size: 13px;
        cursor: pointer;
        transition: all 0.15s ease;

        .warn-icon {
          font-size: 18px;
          color: var(--app-warning-text, #d97706);
          flex-shrink: 0;
        }

        .arrow {
          font-size: 16px;
          margin-left: auto;
        }

        &:hover {
          background: var(--app-warning-soft, #fef3c7);
          border-color: #fcd34d;
        }
      }

      /* Task composer */
      .composer-card {
        background: rgb(var(--app-surface-rgb, 255 255 255) / 0.88);
        backdrop-filter: blur(16px) saturate(190%);
        -webkit-backdrop-filter: blur(16px) saturate(190%);
        border: 1px solid rgb(var(--app-border-rgb, 255 255 255) / 0.95);
        box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.95);
        border-radius: 20px;
        padding: 18px 20px 14px;
        transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;

        &.is-pro-active {
          border-color: rgb(var(--app-exploration-border-rgb, 221 214 254) / 0.95);
          box-shadow: 0 24px 60px -12px rgba(99, 102, 241, 0.16), 0 1px 3px rgba(0, 0, 0, 0.02), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.95);
        }

        .intent-suggestion-strip {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          padding: 8px 12px;
          background: linear-gradient(135deg, rgb(var(--app-primary-soft-rgb, 238 242 255) / 0.95) 0%, rgb(var(--app-exploration-soft-rgb, 245 243 255) / 0.95) 100%);
          border: 1px solid rgb(var(--app-primary-border-rgb, 199 210 254) / 0.85);
          border-radius: 10px;
          margin-bottom: 12px;
          animation: slideUpFade 0.22s cubic-bezier(0.4, 0, 0.2, 1);

          .suggestion-left {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;

            .sparkle-icon {
              font-size: 17px;
              color: var(--app-exploration-text, #6366f1);
              flex-shrink: 0;
              animation: sparklePulse 2.5s ease-in-out infinite alternate;
            }

            .suggestion-text {
              font-size: 12.5px;
              color: var(--app-exploration-text, #3730a3);
              line-height: 1.4;

              strong {
                color: var(--app-exploration-text, #1e1b4b);
                font-weight: 600;
              }
            }
          }

          .btn-switch-pro {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 6px;
            border: none;
            background: #6366f1;
            color: #ffffff;
            font-family: inherit;
            font-size: 11.5px;
            font-weight: 600;
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 1px 3px rgba(99, 102, 241, 0.25);

            .btn-arrow {
              font-size: 14px;
              transition: transform 0.15s ease;
            }

            &:hover {
              background: #4f46e5;
              box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
              transform: translateY(-0.5px);

              .btn-arrow {
                transform: translateX(2px);
              }
            }

            &:active {
              transform: scale(0.96);
            }
          }
        }

        .composer-input-area {
          width: 100%;

          .composer-textarea {
            width: 100%;
            border: none;
            outline: none;
            background: transparent;
            padding: 0;
            margin: 0;
            font-family: inherit;
            font-size: 15.5px;
            line-height: 1.6;
            color: var(--app-text-strong, #0f172a);
            resize: vertical;
            min-height: 90px;
            letter-spacing: -0.01em;

            &::placeholder {
              color: var(--app-text-faint, #94a3b8);
              font-weight: 400;
            }

            &:disabled {
              color: var(--app-text-faint, #94a3b8);
              cursor: not-allowed;
            }
          }
        }

        /* Contextual Model Descriptor Strip (Flash & Pro) */
        .composer-model-descriptor {
          display: flex;
          align-items: center;
          gap: 9px;
          padding: 8px 12px;
          border-radius: 9px;
          background: rgb(var(--app-surface-soft-rgb, 248 250 252) / 0.75);
          border: 1px solid rgb(var(--app-border-rgb, 241 245 249) / 0.95);
          margin-top: 10px;
          margin-bottom: 12px;
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

          .descriptor-icon-wrap {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(26, 115, 232, 0.1);
            color: var(--app-primary-text, #1a73e8);
            flex-shrink: 0;
            transition: all 0.25s ease;

            .material-symbols-outlined {
              font-size: 14px;
            }
          }

          .descriptor-body {
            flex: 1;
            min-width: 0;

            .desc-line {
              margin: 0;
              font-size: 12.5px;
              line-height: 1.45;
              color: var(--app-text-secondary, #475569);
              letter-spacing: -0.005em;

              .mode-name {
                font-weight: 700;
                color: var(--app-text-strong, #0f172a);
              }

              .bullet {
                color: var(--app-text-faint, #94a3b8);
                margin: 0 3px;
              }

              strong {
                color: var(--app-text-strong, #0f172a);
                font-weight: 600;
              }

              .limitation-tag {
                color: var(--app-text-muted, #64748b);
                font-size: 11.5px;
                margin-left: 3px;
              }
            }
          }

          &.is-pro {
            background: linear-gradient(135deg, rgb(var(--app-exploration-soft-rgb, 245 243 255) / 0.8) 0%, rgb(var(--app-exploration-soft-rgb, 250 245 255) / 0.8) 100%);
            border-color: rgb(var(--app-exploration-border-rgb, 237 233 254) / 0.95);

            .descriptor-icon-wrap {
              background: rgba(124, 58, 237, 0.12);
              color: var(--app-exploration-text, #7c3aed);
            }

            .descriptor-body .desc-line {
              color: var(--app-text-control, #334155);

              .mode-name, strong {
                color: var(--app-exploration-text, #1e1b4b);
              }
            }
          }
        }

        .error-banner {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 8px 12px;
          background: $rose-light;
          border: 1px solid $rose-border;
          border-radius: 8px;
          color: var(--app-error-text, $rose-dark);
          font-size: 12px;
          margin-bottom: 10px;

          .error-icon {
            font-size: 16px;
            flex-shrink: 0;
          }
        }

        .composer-action-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-top: 10px;
          border-top: 1px solid rgb(var(--app-border-rgb, 241 245 249) / 0.95);
          gap: 12px;
          flex-wrap: wrap;

          .bar-left {
            display: flex;
            align-items: center;

            .model-toggle-capsule {
              display: inline-flex;
              align-items: center;
              background: rgb(var(--app-surface-soft-rgb, 241 245 249) / 0.85);
              padding: 3px;
              border-radius: 18px;
              gap: 3px;
              border: 1px solid rgb(var(--app-border-rgb, 226 232 240) / 0.88);
              width: max-content;
              flex-shrink: 0;
              box-sizing: border-box;

              .model-toggle-btn {
                flex: 1 1 0;
                min-width: 78px;
                height: 32px;
                padding: 0 10px;
                border-radius: 15px;
                border: none;
                background: transparent;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 6px;
                transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                outline: none;
                box-sizing: border-box;
                white-space: nowrap;

                .btn-icon {
                  font-size: 16px;
                  color: var(--app-text-muted, #64748b);
                  flex-shrink: 0;
                  transition: color 0.15s ease;
                }

                .btn-text {
                  font-size: 13px;
                  font-weight: 500;
                  color: var(--app-text-secondary, #475569);
                  line-height: 1;
                }

                &:hover:not(.active) {
                  background: rgb(var(--app-surface-rgb, 255 255 255) / 0.7);

                  .btn-icon, .btn-text {
                    color: var(--app-text-strong, #0f172a);
                  }
                }

                &.active {
                  background: var(--app-surface, #ffffff);
                  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);

                  .btn-icon {
                    color: var(--app-primary-text, #1a73e8);
                  }
                  .btn-text {
                    color: var(--app-text-strong, #0f172a);
                    font-weight: 600;
                  }
                }

                &.btn-pro.active {
                  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
                  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);

                  .btn-icon, .btn-text {
                    color: #ffffff !important;
                  }
                }

                &:active {
                  transform: scale(0.97);
                }
              }
            }
          }

          .bar-right {
            display: flex;
            align-items: center;
            gap: 12px;

            .char-count {
              font-size: 11.5px;
              color: var(--app-text-faint, #94a3b8);
              font-variant-numeric: tabular-nums;
            }

            .btn-run-composer {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              gap: 6px;
              height: 38px;
              padding: 0 20px;
              @include glass-primary-btn;
              border-radius: 12px;
              font-family: inherit;
              font-size: 13.5px;
              font-weight: 700;
              cursor: pointer;
              letter-spacing: -0.01em;

              &.btn-run-pro {
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.92) 0%, rgba(124, 58, 237, 0.85) 100%);
                box-shadow: 0 4px 14px rgba(99, 102, 241, 0.32), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.45);

                &:hover:not(:disabled) {
                  background: linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(124, 58, 237, 0.95) 100%);
                  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.42), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.6);
                }
              }

              .run-icon {
                font-size: 18px;
                line-height: 1;
                transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
              }

              &:hover:not(:disabled) {
                .run-icon {
                  transform: scale(1.15) rotate(15deg);
                }
              }

              .spinner {
                width: 14px;
                height: 14px;
                border: 2px solid rgb(var(--app-border-rgb, 255 255 255) / 0.4);
                border-top-color: var(--app-border, #ffffff);
                border-radius: 50%;
                animation: spin 0.8s linear infinite;
              }
            }
          }
        }
      }

      /* Pro Mode Standalone Outputter Card (Minimalist Apple/Linear Style) */
      .pro-outputter-standalone-card {
        background: rgb(var(--app-surface-rgb, 255 255 255) / 0.88);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgb(var(--app-border-rgb, 226 232 240) / 0.95);
        border-radius: 16px;
        padding: 12px 18px 14px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 8px 24px -6px rgba(15, 23, 42, 0.04);
        display: flex;
        flex-direction: column;
        gap: 8px;
        animation: slideUpFade 0.2s cubic-bezier(0.4, 0, 0.2, 1);

        .outputter-card-header {
          display: flex;
          align-items: baseline;
          gap: 6px;

          .outputter-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--app-text-strong, #0f172a);
            letter-spacing: -0.01em;
          }

          .outputter-optional-tag {
            font-size: 11.5px;
            font-weight: 500;
            color: var(--app-text-faint, #94a3b8);
          }
        }

        .outputter-input-wrapper {
          display: flex;
          align-items: center;
          background: var(--app-surface-soft, #f8fafc);
          border: 1px solid var(--app-border, #e2e8f0);
          border-radius: 10px;
          padding: 0 12px;
          height: 38px;
          transition: all 0.18s ease;

          &:focus-within {
            background: var(--app-surface, #ffffff);
            border-color: #7c3aed;
            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
          }

          .outputter-standalone-input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            font-family: inherit;
            font-size: 13px;
            color: var(--app-text-strong, #0f172a);

            &::placeholder {
              color: var(--app-text-faint, #94a3b8);
              font-weight: 400;
            }
          }

          .btn-clear-standalone {
            border: none;
            background: transparent;
            color: var(--app-text-faint, #94a3b8);
            cursor: pointer;
            padding: 3px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.15s ease, background 0.15s ease;

            &:hover {
              color: var(--app-text-secondary, #475569);
              background: rgba(0, 0, 0, 0.05);
            }

            .material-symbols-outlined {
              font-size: 16px;
            }
          }
        }
      }


      /* Pro tuning sliders and hover cards */
      .pro-tuning-card {
        --tip-w: 320px;
        --thumb-w: 22px;
        --thumb-h: 14px;
        --col-gap: 28px;
        --accent: #6366f1;
        position: relative;
        background: rgb(var(--app-surface-rgb, 255 255 255) / 0.88);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgb(var(--app-border-rgb, 226 232 240) / 0.95);
        border-radius: 16px;
        padding: 12px 18px 14px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 8px 24px -6px rgba(15, 23, 42, 0.04);
        display: flex;
        flex-direction: column;
        gap: 10px;
        animation: slideUpFade 0.2s cubic-bezier(0.4, 0, 0.2, 1);

        &.tip-open {
          z-index: 30;
        }

        .tuning-card-header {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 10px;
          min-height: 16px;

          .tuning-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--app-text-strong, #0f172a);
            letter-spacing: -0.01em;
          }

          .btn-tuning-reset {
            border: none;
            background: transparent;
            padding: 0;
            font-family: inherit;
            font-size: 12px;
            font-weight: 500;
            color: var(--app-text-faint, #94a3b8);
            cursor: pointer;
            transition: color 0.15s ease;

            &:hover {
              color: var(--app-text-secondary, #475569);
            }

            &:focus-visible {
              outline: 2px solid var(--accent);
              outline-offset: 3px;
              border-radius: 3px;
            }
          }
        }

        .tuning-sliders {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 4px var(--col-gap);
        }

        .tuning-slider {
          display: flex;
          flex-direction: column;
          gap: 4px;
          min-width: 0;
          /* Hover card clamp range, relative to this slider's track. The left
             column may spill right across the gap; the right column may spill
             left. Overridden below when the columns stack. */
          --tip-min: 0px;
          --tip-max: calc(100% - var(--tip-w));

          &.verify {
            --tip-max: calc(200% + var(--col-gap) - var(--tip-w));
          }

          &.explore {
            --accent: #0ea5e9;
            --tip-min: calc(-100% - var(--col-gap));
          }

          .slider-head {
            display: flex;
            align-items: baseline;
            gap: 8px;
            font-size: 13px;
            line-height: 18px;
            color: var(--app-text-strong, #0f172a);

            .slider-name {
              font-weight: 400;
              color: var(--app-text-control, #334155);
            }

            .slider-value {
              font-weight: 600;
            }
          }

          .slider-ends {
            display: flex;
            justify-content: space-between;
            font-size: 11.5px;
            line-height: 14px;
            color: var(--app-text-faint, #94a3b8);
          }

          .slider-track-wrap {
            position: relative;
            height: 26px;
            display: flex;
            align-items: center;
          }

          .slider-rail {
            position: relative;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: var(--app-surface-raised, #e2e8f0);
          }

          .slider-fill {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: calc(var(--pct) * (100% - var(--thumb-w)) + var(--thumb-w) / 2);
            border-radius: 3px;
            background: color-mix(in srgb, var(--accent) 24%, var(--app-surface-raised, #e2e8f0));
            transition: width 0.15s ease;
          }

          .slider-notch {
            position: absolute;
            top: 50%;
            left: calc(var(--n) * (100% - var(--thumb-w)) + var(--thumb-w) / 2);
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #94a3b8;
            transform: translate(-50%, -50%);
            transition: background 0.15s ease;
            z-index: 1;

            &.reached {
              background: rgb(var(--app-surface-rgb, 255 255 255) / 0.95);
            }
          }

          .slider-thumb {
            position: absolute;
            top: 50%;
            left: calc(var(--pct) * (100% - var(--thumb-w)) + var(--thumb-w) / 2);
            width: var(--thumb-w);
            height: var(--thumb-h);
            border-radius: 5px;
            background: var(--app-surface, #ffffff);
            border: 1px solid rgb(var(--app-border-control-rgb, 15 23 42) / 0.1);
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.08);
            transform: translate(-50%, -50%);
            pointer-events: none;
            transition: left 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
          }

          /* End of track: a pixel front sweeps from the thumb to the left end,
             a solid fill follows it until the whole rail has changed colour,
             and the thumb emits one ripple. */
          .slider-solid {
            position: absolute;
            inset: 0;
            border-radius: 3px;
            background: var(--accent);
            transform-origin: right center;
            transform: scaleX(1);
            animation: solidSweep 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
            pointer-events: none;
          }

          .slider-dither {
            position: absolute;
            inset: 0;
            display: block;
            overflow: hidden;
            border-radius: 3px;
            pointer-events: none;

            rect {
              fill: var(--accent);
              animation: ditherIn 0.3s ease-out both;
            }
          }

          .thumb-ripple {
            position: absolute;
            top: 50%;
            left: calc(var(--pct) * (100% - var(--thumb-w)) + var(--thumb-w) / 2);
            width: var(--thumb-w);
            height: var(--thumb-w);
            border-radius: 50%;
            border: 1.5px solid var(--accent);
            transform: translate(-50%, -50%) scale(0.6);
            opacity: 0;
            pointer-events: none;
            animation: thumbRipple 0.6s ease-out forwards;
          }

          &.dragging .slider-thumb {
            border-color: color-mix(in srgb, var(--accent) 45%, transparent);
            box-shadow:
              0 1px 2px rgba(15, 23, 42, 0.12),
              0 2px 8px rgba(15, 23, 42, 0.1),
              0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
          }

          /* Native range input does drag, keyboard, and a11y; it is invisible
             but its thumb geometry matches the drawn thumb so hits line up. */
          .slider-input {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            opacity: 0;
            cursor: pointer;
            -webkit-appearance: none;
            appearance: none;
            background: transparent;

            &::-webkit-slider-thumb {
              -webkit-appearance: none;
              appearance: none;
              width: var(--thumb-w);
              height: 26px;
            }

            &::-moz-range-thumb {
              width: var(--thumb-w);
              height: 26px;
              border: 0;
            }
          }

          .slider-input:focus-visible ~ .slider-thumb,
          &:has(.slider-input:focus-visible) .slider-thumb {
            box-shadow:
              0 1px 2px rgba(15, 23, 42, 0.12),
              0 0 0 2px var(--app-highlight, #ffffff),
              0 0 0 4px var(--accent);
          }

          .tuning-tip-arrow {
            position: absolute;
            bottom: calc(100% + 2px);
            left: calc(var(--pct) * (100% - var(--thumb-w)) + var(--thumb-w) / 2);
            width: 10px;
            height: 10px;
            background: var(--app-surface, #ffffff);
            border-right: 1px solid rgb(var(--app-border-rgb, 226 232 240) / 1);
            border-bottom: 1px solid rgb(var(--app-border-rgb, 226 232 240) / 1);
            transform: translate(-50%, 50%) rotate(45deg);
            z-index: 41;
            pointer-events: none;
          }

          .tuning-tip {
            position: absolute;
            bottom: calc(100% + 7px);
            left: clamp(
              var(--tip-min),
              calc(var(--pct) * (100% - var(--thumb-w)) + var(--thumb-w) / 2 - var(--tip-w) / 2),
              var(--tip-max)
            );
            width: var(--tip-w);
            max-width: calc(100vw - 32px);
            padding: 12px 14px;
            background: var(--app-surface, #ffffff);
            border: 1px solid rgb(var(--app-border-rgb, 226 232 240) / 1);
            border-radius: 12px;
            box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06);
            z-index: 40;
            pointer-events: none;
            animation: tipPop 0.16s ease-out;
            font-size: 12px;
            line-height: 1.5;
            color: var(--app-text-control, #334155);
            display: flex;
            flex-direction: column;
            gap: 8px;

            .tip-heading {
              display: flex;
              flex-direction: column;
              gap: 1px;

              .tip-title {
                font-size: 13.5px;
                font-weight: 600;
                color: var(--app-text-strong, #0f172a);
                letter-spacing: -0.01em;
              }

              .tip-latency {
                font-size: 11.5px;
                color: var(--app-text-faint, #94a3b8);
              }
            }

            .tip-tagline {
              margin: 0;
              color: var(--app-text-strong, #0f172a);
            }

            .tip-section {
              display: flex;
              flex-direction: column;
              gap: 2px;

              ul {
                margin: 0;
                padding-left: 16px;
                display: flex;
                flex-direction: column;
                gap: 2px;
              }

              li::marker {
                color: #cbd5e1;
              }

              &.skips li {
                color: var(--app-text-muted, #64748b);
              }
            }

            .tip-section-title {
              font-size: 10.5px;
              font-weight: 600;
              text-transform: uppercase;
              letter-spacing: 0.06em;
              color: var(--app-text-faint, #94a3b8);
            }

            .tip-best {
              display: flex;
              flex-direction: column;
              gap: 2px;
              color: var(--app-text-secondary, #475569);
            }
          }
        }

        @media (max-width: 760px) {
          .tuning-sliders {
            grid-template-columns: minmax(0, 1fr);
            gap: 10px;
          }

          .tuning-slider {
            &.verify,
            &.explore {
              --tip-min: 0px;
              --tip-max: calc(100% - var(--tip-w));
            }
          }
        }
      }

      /* Smart Suggestions Hub (Device-Aware, Flash vs Pro Tailored) */
      .smart-suggestions-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 10px;

        .suggestions-header-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          flex-wrap: wrap;

          .header-left {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;

            .section-label {
              display: inline-flex;
              align-items: center;
              gap: 6px;
              font-family: inherit;
              font-size: 13px;
              font-weight: 700;
              color: var(--app-text-strong, #0f172a);
              letter-spacing: -0.01em;

              .section-icon {
                font-size: 17px;
                color: var(--app-exploration-text, #6366f1);
                animation: sparklePulse 3s ease-in-out infinite alternate;
              }

              .device-context-pill {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 2px 8px;
                border-radius: 12px;
                background: rgba(16, 185, 129, 0.1);
                border: 1px solid rgba(16, 185, 129, 0.25);
                color: var(--app-success-text, #059669);
                font-size: 11px;
                font-weight: 600;
                line-height: 1.3;

                .dev-icon {
                  font-size: 13px;
                  color: var(--app-success-text, #059669);
                }
              }
            }

            .category-tabs-group {
              display: inline-flex;
              align-items: center;
              gap: 3px;
              background: rgb(var(--app-surface-rgb, 255 255 255) / 0.65);
              backdrop-filter: blur(16px);
              -webkit-backdrop-filter: blur(16px);
              padding: 3px;
              border-radius: 16px;
              border: 1px solid rgb(var(--app-border-rgb, 226 232 240) / 0.85);
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);

              .cat-tab-btn {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 4px 10px;
                border-radius: 12px;
                border: none;
                background: transparent;
                font-family: inherit;
                font-size: 11.5px;
                font-weight: 600;
                color: var(--app-text-muted, #64748b);
                cursor: pointer;
                transition: all 0.18s ease;
                white-space: nowrap;

                .tab-mini-icon {
                  font-size: 13px;
                }

                &:hover:not(.active) {
                  color: var(--app-text-strong, #0f172a);
                  background: rgb(var(--app-surface-rgb, 255 255 255) / 0.6);
                }

                &.active {
                  color: var(--app-text-strong, #0f172a);
                  background: var(--app-surface, #ffffff);
                  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), inset 0 1px 0 var(--app-highlight, #fff);

                  &.cat-device {
                    color: var(--app-success-text, #059669);
                  }

                  &.cat-flash {
                    color: var(--app-primary-text, #1a73e8);
                  }

                  &.cat-pro {
                    color: var(--app-exploration-text, #7c3aed);
                  }
                }
              }
            }
          }

          .header-right {
            .btn-shuffle-suggestions {
              display: inline-flex;
              align-items: center;
              gap: 4px;
              padding: 5px 12px;
              border-radius: 14px;
              background: rgb(var(--app-surface-rgb, 255 255 255) / 0.72);
              backdrop-filter: blur(12px);
              border: 1px solid rgb(var(--app-border-rgb, 226 232 240) / 0.85);
              color: var(--app-text-muted, #64748b);
              font-family: inherit;
              font-size: 11.5px;
              font-weight: 600;
              cursor: pointer;
              transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

              .shuffle-icon {
                font-size: 14px;
                transition: transform 0.2s ease;
              }

              &:hover {
                background: var(--app-surface, #ffffff);
                color: var(--app-text-strong, #0f172a);
                border-color: rgb(var(--app-border-control-rgb, 203 213 225) / 0.9);
                transform: translateY(-1px);
                box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);

                .shuffle-icon {
                  transform: rotate(45deg);
                }
              }

              &:active {
                transform: scale(0.97);
              }
            }
          }
        }

        .suggestions-cards-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
          gap: 12px;

          .suggestion-card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 14px 16px;
            border-radius: 16px;
            background: rgb(var(--app-surface-rgb, 255 255 255) / 0.72);
            backdrop-filter: blur(10px) saturate(180%);
            -webkit-backdrop-filter: blur(10px) saturate(180%);
            border: 1px solid rgb(var(--app-border-rgb, 226 232 240) / 0.85);
            box-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.04), inset 0 1px 1px rgb(var(--app-highlight-rgb, 255 255 255) / 0.95);
            cursor: pointer;
            transition: background 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                        box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                        border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
            position: relative;
            overflow: hidden;
            min-height: 128px;

            &:hover {
              background: rgb(var(--app-surface-rgb, 255 255 255) / 0.95);
              transform: translateY(-2px);
              box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02), inset 0 1px 1px var(--app-highlight, #ffffff);
              border-color: rgb(var(--app-primary-border-rgb, 191 219 254) / 0.95);
            }

            &.is-pro-card:hover {
              border-color: rgb(var(--app-primary-border-rgb, 199 210 254) / 0.95);
              box-shadow: 0 8px 24px -4px rgba(99, 102, 241, 0.12), inset 0 1px 1px var(--app-highlight, #ffffff);
            }

            &:active {
              transform: scale(0.985);
            }

            .card-top-row {
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 8px;

              .app-icons-cluster {
                display: flex;
                align-items: center;
                gap: 6px;

                .app-icon-badge {
                  width: 26px;
                  height: 26px;
                  border-radius: 8px;
                  background: var(--app-surface-soft, #f1f5f9);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: var(--app-text-secondary, #475569);
                  border: 1px solid rgb(var(--app-border-rgb, 226 232 240) / 0.9);
                  flex-shrink: 0;

                  span {
                    font-size: 14px;
                  }
                }

                .app-names-label {
                  font-size: 11.5px;
                  font-weight: 600;
                  color: var(--app-text-secondary, #475569);
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  max-width: 140px;
                }
              }

              .mode-badge {
                padding: 2px 7px;
                border-radius: 8px;
                font-size: 10.5px;
                font-weight: 700;
                line-height: 1.2;
                flex-shrink: 0;

                &.mode-flash {
                  background: rgba(26, 115, 232, 0.1);
                  color: var(--app-primary-text, #1a73e8);
                  border: 1px solid rgba(26, 115, 232, 0.2);
                }

                &.mode-pro {
                  background: rgba(99, 102, 241, 0.12);
                  color: var(--app-exploration-text, #6366f1);
                  border: 1px solid rgba(99, 102, 241, 0.25);
                }
              }
            }

            .card-body {
              margin: 8px 0 6px;

              .card-title {
                font-size: 13.5px;
                font-weight: 600;
                color: var(--app-text-strong, #0f172a);
                margin: 0 0 3px;
                line-height: 1.3;
                letter-spacing: -0.01em;
              }

              .card-desc {
                font-size: 12px;
                color: var(--app-text-muted, #64748b);
                margin: 0;
                line-height: 1.45;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
              }
            }


            .card-footer-row {
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 6px;
              margin-top: 6px;
              padding-top: 8px;
              border-top: 1px solid rgb(var(--app-border-rgb, 241 245 249) / 0.85);

              .tag-pill {
                font-size: 11px;
                font-weight: 600;
                color: var(--app-text-muted, #64748b);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }

              .use-prompt-action {
                display: inline-flex;
                align-items: center;
                gap: 3px;
                font-size: 11.5px;
                font-weight: 600;
                color: var(--app-primary-text, #1a73e8);
                opacity: 0.85;
                transition: all 0.15s ease;
                flex-shrink: 0;

                .action-arrow {
                  font-size: 13px;
                  transition: transform 0.15s ease;
                }
              }
            }

            &:hover .use-prompt-action {
              opacity: 1;

              .action-arrow {
                transform: translateX(2px);
              }
            }
          }
        }
      }
    }

  }
}

// =============================================================================
// KEYFRAME ANIMATIONS
// =============================================================================
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

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

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

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatGlow1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(35px, 45px) scale(1.06);
  }
  100% {
    transform: translate(-25px, 25px) scale(0.96);
  }
}

@keyframes floatGlow2 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-40px, 40px) scale(1.08);
  }
  100% {
    transform: translate(20px, 60px) scale(0.94);
  }
}

@keyframes floatGlow3 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(25px, -30px) scale(1.04);
  }
  100% {
    transform: translate(-30px, 15px) scale(0.97);
  }
}

/* Transform-only: animating opacity here overrode the .glow-pending/.glow-ready
   fade transitions and kept both state glows permanently visible. */
@keyframes readyPulseGlow {
  0% {
    transform: scale(0.97);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(0.98);
  }
}

@keyframes statusDotPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes sparklePulse {
  0% {
    transform: scale(0.92) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.12) rotate(8deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.92) rotate(0deg);
    opacity: 0.8;
  }
}

/* Respect the user's motion preference: freeze the purely decorative ambient
   animations (aurora drift, pulses, sparkles). Functional spinners keep going. */
@media (prefers-reduced-motion: reduce) {
  .home-container .aurora-background .glow,
  .sparkle-icon,
  .status-dot,
  .slider-dither rect,
  .slider-solid,
  .thumb-ripple {
    animation: none !important;
  }
}

@keyframes ditherIn {
  from {
    opacity: 0;
  }
}

@keyframes solidSweep {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes thumbRipple {
  0% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.6);
  }
}

@keyframes tipPop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.composer-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin-bottom: 8px;
}
.pc-only-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  box-sizing: border-box;
  padding: 5px 10px;
  border: 1px solid var(--app-border, #e2e8f0);
  border-radius: 20px;
  background: var(--app-surface-soft, #f8fafc);
  color: var(--app-text-muted, #64748b);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  &.is-selected, &:hover {
    border-color: var(--app-primary-border, #bfdbfe);
    background: var(--app-primary-soft, #eff6ff);
    color: var(--app-primary-text, #2563eb);
  }
  &:focus-within { outline: 2px solid var(--app-primary-text, #2563eb); outline-offset: 3px; }
  input { width: 14px; height: 14px; margin: 0; accent-color: var(--app-primary-text, #2563eb); }
  .material-symbols-outlined { font-size: 16px; }
}
.pc-only-hint { margin: 0 0 8px; color: var(--app-text-muted, #64748b); font-size: 12px; line-height: 1.6; }

.exploration-settings {
  margin:18px 0 24px; padding:18px 20px; background:var(--app-surface, #fff); border:1px solid var(--app-border, #e2e8f0); border-radius:20px; font-size:13px; color:var(--app-text-secondary, #475569);
  p {line-height:1.7;margin:4px 0 0}
  .exploration-intro {display:flex;gap:12px;align-items:flex-start; strong {color:var(--app-text-control, #1e293b);font-size:14px} > .material-symbols-outlined {color:var(--app-exploration-text, #6366f1);background:var(--app-primary-soft, #eef2ff);border-radius:12px;padding:8px;font-size:22px}}
  button,input {font:inherit;box-sizing:border-box} button {cursor:pointer;transition:background .15s} button:disabled {opacity:.5;cursor:default}
  button:focus-visible,input:focus-visible {outline:2px solid var(--app-exploration-border, #818cf8);outline-offset:3px}
  .exploration-settings-toggle {display:flex;align-items:center;gap:8px;width:100%;border:0;background:var(--app-surface-soft, #f8fafc);color:var(--app-text-secondary, #475569);border-radius:12px;padding:10px 12px;margin-top:14px;text-align:left; .material-symbols-outlined {font-size:18px} .settings-toggle-label {margin-left:auto;font-size:12px;color:var(--app-text-muted, #64748b)} &:hover {background:var(--app-primary-soft, #eef2ff)}}
  .exploration-settings-body {padding-top:18px}
  .model-label {display:flex;align-items:center;gap:16px;font-weight:600;input {flex:1;min-width:0;border:1px solid var(--app-border, #dbe3ec);border-radius:10px;padding:10px 12px;color:var(--app-text-control, #1e293b);background:var(--app-surface, #fff)}}
  .exploration-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
  .settings-note {font-size:12px;color:var(--app-text-muted, #64748b)}.settings-error {color:var(--app-error-text, #b91c1c)}
  .settings-footer {display:flex;align-items:center;gap:12px;margin-top:14px;span {font-size:12px;color:var(--app-success-text, #047857)}}
  .save-settings {border:0;background:#4f46e5;color:#fff;border-radius:10px;padding:9px 16px;font-weight:600;&:hover:enabled {background:#4338ca}}
  @media(max-width:600px) {.exploration-fields {grid-template-columns:1fr}.settings-toggle-label {display:none}.exploration-settings-toggle {flex-wrap:wrap}}
}