/* ===================== AUTH MODAL ===================== */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 300;
      padding: 20px;
    }
    .modal-overlay.active { display: flex; }

    .auth-modal {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 32px;
      max-width: 400px;
      width: 100%;
      position: relative;
    }

    .auth-modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 1.25rem;
      cursor: pointer;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      transition: color 0.15s;
    }
    .auth-modal-close:hover { color: var(--text-primary); }

    .auth-modal-title {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 24px;
      text-align: center;
    }

    .auth-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 20px;
      background: var(--bg-deep);
      padding: 3px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
    }

    .auth-tab {
      flex: 1;
      padding: 8px;
      border: none;
      background: none;
      color: var(--text-secondary);
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      border-radius: var(--radius-sm);
      transition: all 0.15s;
    }

    .auth-tab.active {
      background: var(--bg-primary);
      color: var(--text-primary);
    }

    .auth-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .auth-field label {
      display: block;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 6px;
    }

    .auth-field input {
      width: 100%;
      background: var(--bg-deep);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      color: var(--text-primary);
      font-size: 0.9375rem;
      outline: none;
      transition: border-color 0.15s;
    }

    .auth-field input:focus {
      border-color: var(--accent);
    }

    .auth-error {
      color: var(--red);
      font-size: 0.8125rem;
      text-align: center;
      min-height: 20px;
      font-weight: 500;
    }

    .auth-submit {
      width: 100%;
      padding: 12px;
      background: var(--accent);
      color: white;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 0.9375rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s;
    }
    .auth-submit:hover { background: var(--accent-hover); }


    /* ===================== UPGRADE MODAL ===================== */
    .upgrade-modal {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 32px;
      max-width: 440px;
      width: 100%;
      position: relative;
    }

    .upgrade-modal-title {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 8px;
      text-align: center;
    }

    .upgrade-modal-subtitle {
      font-size: 0.875rem;
      color: var(--text-secondary);
      text-align: center;
      margin-bottom: 24px;
    }

    .upgrade-features {
      background: var(--bg-deep);
      border-radius: var(--radius);
      padding: 16px;
      margin-bottom: 20px;
      border: 1px solid var(--border);
    }

    .upgrade-features li {
      padding: 8px 0;
      font-size: 0.875rem;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid var(--border);
    }

    .upgrade-features li:last-child { border-bottom: none; }
    .upgrade-features .check { color: var(--green); font-weight: 600; }

    .upgrade-price {
      text-align: center;
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .upgrade-price span {
      font-size: 0.9375rem;
      font-weight: 400;
      color: var(--text-secondary);
    }

    .upgrade-form {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
    }

    .upgrade-form input {
      flex: 1;
      background: var(--bg-deep);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 12px;
      color: var(--text-primary);
      font-size: 0.875rem;
      outline: none;
      transition: border-color 0.15s;
    }

    .upgrade-form input:focus { border-color: var(--accent); }

    .upgrade-form button {
      padding: 10px 18px;
      background: var(--accent);
      color: white;
      border: none;
      border-radius: var(--radius);
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s;
    }
    .upgrade-form button:hover { background: var(--accent-hover); }

    .upgrade-skip {
      display: block;
      text-align: center;
      color: var(--text-muted);
      font-size: 0.8125rem;
      cursor: pointer;
      background: none;
      border: none;
      width: 100%;
      padding: 8px;
      transition: color 0.15s;
    }
    .upgrade-skip:hover { color: var(--text-secondary); }