/* =============== Mobile layout tweaks (<= 600px) =============== */
    @media (max-width: 600px) {
      body {
        padding: 10px;
      }

      body.has-site-header {
        padding: 0;
        padding-top: var(--cyrus-home-header-height, 70px);
      }

      body.has-site-header .app {
        padding: 24px 12px 12px;
      }

      .header {
        padding: 20px 12px 14px;
        margin-bottom: 16px;
      }

      .header-icon {
        font-size: 48px;
        margin-bottom: 10px;
      }

      .header-title {
        font-size: 24px;
        margin-bottom: 8px;
      }

      .header-subtitle {
        font-size: 13px;
        max-width: 100%;
      }

      .progress-shell {
        margin-bottom: 20px;
      }

      .mobile-progress-toggle {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--glass-bg);
        color: var(--text-primary);
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        backdrop-filter: blur(12px);
      }

      .mobile-progress-current-number {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--accent-primary);
        color: #ffffff;
        font-size: 11px;
        font-weight: 800;
      }

      .mobile-progress-current-label {
        min-width: 0;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: start;
      }

      .mobile-progress-chevron {
        flex: 0 0 auto;
        font-size: 16px;
        color: var(--text-secondary);
        transition: transform 0.2s ease;
      }

      .progress-shell.is-open .mobile-progress-chevron {
        transform: rotate(180deg);
      }

      .progress-indicator {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        inset-inline: 0;
        z-index: 30;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: rgba(21, 26, 46, 0.96);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
        backdrop-filter: blur(16px);
      }

      [data-theme="light"] .progress-indicator {
        background: #FFFBF8;
        box-shadow: 0 18px 40px rgba(148, 163, 184, 0.35);
      }

      .progress-shell.is-open .progress-indicator {
        display: grid;
      }

      .progress-step {
        min-height: 40px;
        justify-content: flex-start;
        padding: 8px 10px;
        border-radius: 14px;
        font-size: 13px;
      }

      .progress-step > span:last-child {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        line-height: 1.35;
      }

      .progress-number {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
        font-size: 10px;
      }

      .section-card {
        padding: 18px 14px;
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
      }

      .section-hint {
        font-size: 12px;
        margin-bottom: 12px;
      }

      .file-upload-area {
        padding: 24px 16px;
      }

      .upload-icon {
        font-size: 40px;
      }

      .upload-text {
        font-size: 13px;
      }

      .supported-formats {
        font-size: 10px;
      }

      textarea {
        min-height: 100px;
        padding: 12px;
        font-size: 13px;
      }

  
    .translation-choice-panel {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 16px;
    }

    .choice-field {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .choice-field label {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-primary);
    }

    .choice-select {
      width: 100%;
      min-height: 46px;
      padding: 0 14px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--bg-secondary);
      color: var(--text-primary);
      font: inherit;
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .choice-select:focus {
      border-color: var(--accent-primary);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    }

    .translation-choice-note {
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1px solid rgba(20, 184, 166, 0.18);
      background: rgba(20, 184, 166, 0.07);
      color: var(--text-secondary);
      font-size: 12px;
      line-height: 1.6;
    }

    .prompt-hidden {
      display: none !important;
    }
    .prompt-examples {
        padding: 10px;
      }

      .example-item {
        font-size: 11px;
        padding: 7px 10px;
      }

      /* ?????? ?????? ??? ?????? ????? ???? ????? ???? */
      .models-grid {
        gap: 8px;
        margin-top: 12px;
      }

      .model-card {
        padding: 14px;
      }

      .model-name {
        font-size: 14px;
      }

      .model-price {
        font-size: 14px;
      }

      .model-price-usd {
        font-size: 11px;
      }

      .model-desc {
        font-size: 11px;
      }

      /* Payment summary ? ??????? ??? ?????? */
      .payment-summary {
        padding: 10px 12px;
        font-size: 12px;
        border-radius: 12px;
      }

      .payment-grid {
        grid-template-columns: 1fr; /* ???? ?? ???? ??? */
        gap: 10px;
      }

      .pay-method-card {
        padding: 14px 12px;
        border-radius: 14px;
      }

      .pay-method-title {
        font-size: 13px;
      }

      .pay-method-subtitle,
      .pay-method-body {
        font-size: 11px;
      }

      .pay-method-btn,
      .pay-method-secondary-btn {
        padding: 9px 12px;
        font-size: 12px;
      }

      /* ???? ????? ?????? ??? ?????? (??? ????? ???? ?????) */
      #webLoginBar {
        margin: 0 auto 12px;
        padding: 10px 12px;
      }

      .web-login-inner {
        flex-direction: column;
        align-items: flex-start;
      }

      .web-login-text {
        font-size: 12px;
      }

      .web-job-status {
        padding: 12px 12px;
        font-size: 12px;
      }

      .web-job-download-btn {
        width: 100%;
        justify-content: center;
      }

      .web-job-start-btn {
        width: 100%;
        justify-content: center;
      }

      .footer {
        padding: 14px 0 10px;
      }


    .confirm-btn {
        padding: 14px 18px;
        font-size: 15px;
        border-radius: 14px;
      }

      .status-text {
        font-size: 12px;
      }
    }

    /* ???????? safe-area (???? ????? ?? ???) */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
      @media (max-width: 600px) {
        .footer {
          padding-bottom: calc(10px + env(safe-area-inset-bottom));
        }
      }
    }

    /* ======= Extra small screens (<= 400px) ======= */
    @media (max-width: 400px) {

      .header {
        padding: 18px 10px 12px;
      }

      .header-icon {
        font-size: 40px;
      }

      .header-title {
        font-size: 22px;
      }

      .header-subtitle {
        font-size: 12px;
      }

      .mobile-progress-toggle {
        min-height: 42px;
        font-size: 12.5px;
      }

      .progress-step {
        min-height: 38px;
        padding: 7px 9px;
        font-size: 12px;
      }

      /* .progress-step {
        padding: 5px 8px;
        font-size: 11px;
      } */

      .section-card {
        padding: 14px 10px;
        border-radius: 14px;
      }

      .file-upload-area {
        padding: 20px 12px;
      }

      .model-card {
        padding: 12px;
      }

      .payment-summary {
        padding: 8px 10px;
      }

      .pay-method-card {
        padding: 12px 10px;
      }

      .usdt-line {
        font-size: 10px;
      }

      .usdt-txid-input {
        font-size: 11px;
        padding: 7px 9px;
      }

      .login-modal {
        width: calc(100% - 24px);
        padding: 16px 14px 14px;
      }

      .login-modal-title {
        font-size: 16px;
      }

      .login-modal-text {
        font-size: 12px;
      }

      .login-modal-btn {
        padding: 10px 14px;
        font-size: 13px;
      }
    }